/* dentalchart.css: tooth chart (kit K4). Server-side SVG, no JS, no inline style.
 *
 * Fills come from custom properties set by state classes on each tooth's <svg>
 * and inherited through <use> into the shared sprite (template dc/sprite):
 *   --sf-X  fill of surface X (o m d b l = occlusal mesial distal buccal lingual)
 *   --st-X  fill of the hatch lines of surface X
 * Colour tokens (--tc-*) are defined in tokens.css; each use has a fallback.
 * Order matters: crown rules come first, then inlays, then conditions, so a
 * surface state overrides the crown colour (as the Angular code did).
 */

/* Rules inside the sprite. They must not need an ancestor selector: the clone
   made by <use> does not match one (handoff from sr-screen-patients). */
.dc-sprite{position:absolute;width:0;height:0;overflow:hidden}
.dc-border{fill:var(--tc-outline)}
.dc-screw-body{fill:var(--tc-bg);stroke:var(--tc-outline);stroke-width:1}
.dc-screw-thread{fill:none;stroke:var(--tc-outline);stroke-width:1}
.sf-occlusal{fill:var(--sf-o,none)}
.st-occlusal{fill:var(--st-o,none)}
.sf-mesial{fill:var(--sf-m,none)}
.st-mesial{fill:var(--st-m,none)}
.sf-distal{fill:var(--sf-d,none)}
.st-distal{fill:var(--st-d,none)}
.sf-buccal{fill:var(--sf-b,none)}
.st-buccal{fill:var(--st-b,none)}
.sf-lingual{fill:var(--sf-l,none)}
.st-lingual{fill:var(--st-l,none)}

/* Crowns: every wedge gets the crown colour. Metal also draws white hatching. */
.crown-pfm,.crown-ceramic{--sf-o:var(--tc-ceramic);--sf-m:var(--tc-ceramic);--sf-d:var(--tc-ceramic);--sf-b:var(--tc-ceramic);--sf-l:var(--tc-ceramic);--st-o:var(--tc-ceramic);--st-m:var(--tc-ceramic);--st-d:var(--tc-ceramic);--st-b:var(--tc-ceramic);--st-l:var(--tc-ceramic)}
.crown-gold{--sf-o:var(--tc-gold);--sf-m:var(--tc-gold);--sf-d:var(--tc-gold);--sf-b:var(--tc-gold);--sf-l:var(--tc-gold);--st-o:var(--tc-gold);--st-m:var(--tc-gold);--st-d:var(--tc-gold);--st-b:var(--tc-gold);--st-l:var(--tc-gold)}
.crown-metal{--sf-o:var(--tc-metal);--sf-m:var(--tc-metal);--sf-d:var(--tc-metal);--sf-b:var(--tc-metal);--sf-l:var(--tc-metal);--st-o:var(--tc-hatch);--st-m:var(--tc-hatch);--st-d:var(--tc-hatch);--st-b:var(--tc-hatch);--st-l:var(--tc-hatch)}

/* Inlays and onlays, per surface. Fill and hatching get the same colour, as in
   Angular (every path with the surface class is filled, hatch lines included). */
.sf-o-ceramic-inlay{--sf-o:var(--tc-ceramic);--st-o:var(--tc-ceramic)}
.sf-o-gold-inlay{--sf-o:var(--tc-gold);--st-o:var(--tc-gold)}
.sf-o-metal-inlay{--sf-o:var(--tc-metal);--st-o:var(--tc-metal)}
.sf-m-ceramic-inlay{--sf-m:var(--tc-ceramic);--st-m:var(--tc-ceramic)}
.sf-m-gold-inlay{--sf-m:var(--tc-gold);--st-m:var(--tc-gold)}
.sf-m-metal-inlay{--sf-m:var(--tc-metal);--st-m:var(--tc-metal)}
.sf-d-ceramic-inlay{--sf-d:var(--tc-ceramic);--st-d:var(--tc-ceramic)}
.sf-d-gold-inlay{--sf-d:var(--tc-gold);--st-d:var(--tc-gold)}
.sf-d-metal-inlay{--sf-d:var(--tc-metal);--st-d:var(--tc-metal)}
.sf-b-ceramic-inlay{--sf-b:var(--tc-ceramic);--st-b:var(--tc-ceramic)}
.sf-b-gold-inlay{--sf-b:var(--tc-gold);--st-b:var(--tc-gold)}
.sf-b-metal-inlay{--sf-b:var(--tc-metal);--st-b:var(--tc-metal)}
.sf-l-ceramic-inlay{--sf-l:var(--tc-ceramic);--st-l:var(--tc-ceramic)}
.sf-l-gold-inlay{--sf-l:var(--tc-gold);--st-l:var(--tc-gold)}
.sf-l-metal-inlay{--sf-l:var(--tc-metal);--st-l:var(--tc-metal)}

/* Conditions, per surface. Same colour for fill and hatching. */
.sf-o-caries{--sf-o:var(--tc-caries);--st-o:var(--tc-caries)}
.sf-o-composite{--sf-o:var(--tc-composite);--st-o:var(--tc-composite)}
.sf-o-amalgam{--sf-o:var(--tc-amalgam);--st-o:var(--tc-amalgam)}
.sf-m-caries{--sf-m:var(--tc-caries);--st-m:var(--tc-caries)}
.sf-m-composite{--sf-m:var(--tc-composite);--st-m:var(--tc-composite)}
.sf-m-amalgam{--sf-m:var(--tc-amalgam);--st-m:var(--tc-amalgam)}
.sf-d-caries{--sf-d:var(--tc-caries);--st-d:var(--tc-caries)}
.sf-d-composite{--sf-d:var(--tc-composite);--st-d:var(--tc-composite)}
.sf-d-amalgam{--sf-d:var(--tc-amalgam);--st-d:var(--tc-amalgam)}
.sf-b-caries{--sf-b:var(--tc-caries);--st-b:var(--tc-caries)}
.sf-b-composite{--sf-b:var(--tc-composite);--st-b:var(--tc-composite)}
.sf-b-amalgam{--sf-b:var(--tc-amalgam);--st-b:var(--tc-amalgam)}
.sf-l-caries{--sf-l:var(--tc-caries);--st-l:var(--tc-caries)}
.sf-l-composite{--sf-l:var(--tc-composite);--st-l:var(--tc-composite)}
.sf-l-amalgam{--sf-l:var(--tc-amalgam);--st-l:var(--tc-amalgam)}

/* Metal inlay hatching is white. It comes after the conditions, so a condition
   fill keeps its own colour but the metal hatching stays white. */
.sf-o-metal-inlay{--st-o:var(--tc-hatch)}
.sf-m-metal-inlay{--st-m:var(--tc-hatch)}
.sf-d-metal-inlay{--st-d:var(--tc-hatch)}
.sf-b-metal-inlay{--st-b:var(--tc-hatch)}
.sf-l-metal-inlay{--st-l:var(--tc-hatch)}

/* Recurrent caries paints the hatching only. It comes last. */
.sf-o-recurrent{--st-o:var(--tc-caries)}
.sf-m-recurrent{--st-m:var(--tc-caries)}
.sf-d-recurrent{--st-d:var(--tc-caries)}
.sf-b-recurrent{--st-b:var(--tc-caries)}
.sf-l-recurrent{--st-l:var(--tc-caries)}

/* ---- Layout ---------------------------------------------------------- */

.dc-scroll{overflow-x:auto}
.dc-chart{--dc-cell:3.5rem;--dc-line:var(--border);min-width:max-content;padding:1.25rem 0;border-radius:.5rem;background:var(--tc-bg);box-shadow:var(--tc-shadow);color:inherit}
.dc-jaw{display:flex}
.dc-g{display:flex;flex:1 1 0;flex-direction:column}
.dc-g1,.dc-g4{align-items:flex-end;padding-left:1.25rem}
.dc-g2,.dc-g3{align-items:flex-start;padding-right:1.25rem}
.dc-row{display:flex;padding:.5rem 0}
.dc-upper .dc-perm{border-top:1px solid var(--dc-line);border-bottom:1px solid var(--dc-line)}
.dc-lower .dc-perm{border-bottom:1px solid var(--dc-line)}

/* One tooth: number pill, status code, drawing, bridge bar. */
.dc-cell{display:flex;flex:0 0 var(--dc-cell);flex-direction:column;align-items:center;width:var(--dc-cell)}
.dc-flip{flex-direction:column-reverse}
.dc-n{display:inline-flex;align-items:center;justify-content:center;min-width:2.2rem;height:1.375rem;padding:0 .35rem;border:1px solid var(--tc-number);border-radius:.625rem;background:var(--tc-number);color:var(--tc-number-ink);font-size:.75rem;line-height:1}
.dc-n-on{background:transparent;color:var(--tc-number)}
.dc-s{display:flex;align-items:center;justify-content:center;min-height:1.875rem;font-size:.875rem;font-weight:700}
.dc-t{display:block;margin:0 .25rem;color:inherit;cursor:pointer}
.dc-t.dc-ro{cursor:default}
.dc-t:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:50%}
.dc-t svg,.dc-sw{display:block;width:2.8125rem;height:2.8125rem}
.dc-screw-up{transform:none}
.dc-screw-down{transform:rotate(180deg)}

/* Palmer quadrant mark, drawn with borders (no special font). */
.dc-pal{display:inline-block;padding:0 .2em;line-height:1.1;border:0 solid currentColor}
.dc-pal-q1{border-width:0 .09375rem .09375rem 0}
.dc-pal-q2{border-width:0 0 .09375rem .09375rem}
.dc-pal-q3{border-width:.09375rem 0 0 .09375rem}
.dc-pal-q4{border-width:.09375rem .09375rem 0 0}

/* Bridge bar: faces the middle of the mouth (the number pill is on the outer
   side). The line runs from the centre of the start tooth to the centre of the
   end tooth; caps sit on the centre line. dc-br-l / dc-br-r are the left and
   right ends as displayed; start has a thick cap, end a thin one. */
.dc-br{--dc-bridge:var(--tc-bridge,var(--accent));position:relative;width:100%;height:.9375rem;margin:.3125rem 0}
.dc-br-start,.dc-br-middle,.dc-br-end{background:linear-gradient(var(--dc-bridge),var(--dc-bridge)) 0 50%/100% 2px no-repeat}
.dc-br-l{background-position:100% 50%;background-size:50% 2px}
.dc-br-r{background-position:0 50%;background-size:50% 2px}
.dc-br-solo{background:none}
.dc-br-l::after,.dc-br-r::after,.dc-br-solo::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 1px);width:2px;background:var(--dc-bridge)}
.dc-br-start::after{left:calc(50% - .1875rem);width:.375rem}

/* Legend */
.dc-legend{padding:.5rem 1rem;border-radius:.5rem;background:var(--tc-bg);box-shadow:var(--tc-shadow)}
.dc-legend summary{cursor:pointer;font-weight:700}
.dc-legend ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem 1rem;margin:.75rem 0 .25rem;padding:0;list-style:none}
.dc-legend li{display:flex;align-items:center;gap:.75rem}
.dc-legend .dc-sw{flex:none;width:1.75rem;height:1.75rem}
.dc-code{flex:none;min-width:3.5rem;font-weight:700;text-align:center}

/* Phones: four quadrant blocks (Q1, Q2, Q4, Q3) instead of two arches. Cells
   are at least 2.5rem by 4rem; .dc-scroll stays as a safety net. */
@media (max-width:767.98px){
  .dc-chart{display:grid;grid-template-columns:1fr;gap:.75rem;min-width:0;padding:.5rem}
  .dc-jaw{display:contents}
  .dc-g,.dc-g1,.dc-g2,.dc-g3,.dc-g4{align-items:stretch;padding:.25rem;border:1px solid var(--dc-line);border-radius:.5rem}
  .dc-row,.dc-upper .dc-perm,.dc-lower .dc-perm{width:100%;border:0}
  .dc-lower .dc-perm{order:1}
  .dc-lower .dc-prim{order:2}
  .dc-prim{width:62.5%;margin-left:auto}
  .dc-g2 .dc-prim,.dc-g3 .dc-prim{margin-left:0;margin-right:auto}
  .dc-cell{flex:1 1 0;width:auto;min-width:2.5rem;min-height:4rem}
}
@media (min-width:640px) and (max-width:767.98px){
  .dc-chart{grid-template-columns:1fr 1fr}
}

@media print{
  .dc-scroll{overflow:visible}
  .dc-chart,.dc-legend{box-shadow:none}
}

/* R6 (SRR-05): sprite surface paths carry .sf (fill) and .st (hatch) beside the per-surface class; the fill rule is the SVG default. */
.sf, .st { fill-rule: nonzero; }

/* ---- Tooth conditions dialog (ux-tooth) ------------------------------
   Wide modal: header row, then preview (left) beside options (right), then a
   footer row with the buttons. Only .tooth-options scrolls. The ids and the
   #dp-modal prefix beat the older .tooth-* rules of screens/patients.css, which
   keep styling the no-JS page (.tooth-page). Phone first: one column, the preview
   is a compact row above the options. */
#dp-modal:has(.tooth-dialog) { --dialog-w: 64rem; }
#dp-modal:has(.tooth-dialog) .dialog-body { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; }
#dp-modal .tooth-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; max-inline-size: none; margin: 0; height: calc(100vh - var(--safe-t, 0rem)); height: calc(100dvh - var(--safe-t, 0rem)); }
#dp-modal .tooth-dialog .modal-title { margin: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
#dp-modal .tooth-form { gap: 0; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
#dp-modal .tooth-layout { display: grid; gap: 0; align-items: stretch; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
#dp-modal .tooth-preview { order: -1; position: static; align-self: start; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); margin: var(--space-3) var(--space-4) 0; padding: var(--space-2) var(--space-3); }
#dp-modal .tooth-preview-cell { display: block; min-height: 0; }
#dp-modal .tooth-preview .dc-cell { flex: 0 0 auto; flex-direction: row; align-items: center; gap: var(--space-2); width: auto; }
#dp-modal .tooth-preview .dc-t svg { width: 3rem; height: 3rem; }
#dp-modal .tooth-preview .dc-br { display: none; }
#dp-modal .tooth-preview-status { text-align: left; }
#dp-modal .tooth-options { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: var(--space-3) var(--space-4); }
#dp-modal .tooth-fields { padding-right: 0; border-right: 0; }
#dp-modal .tooth-crown, #dp-modal .tooth-inlay { max-width: none; }
#dp-modal .tooth-status .check-cols { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
#dp-modal .tooth-footer { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); background: var(--surface); }
#dp-modal .tooth-actions { margin: 0; flex-wrap: wrap; justify-content: space-between; }
#dp-modal .tooth-actions-end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
#dp-modal .tooth-note { margin: 0; }

/* Page twin (no JS): the new wrappers do not change its layout. */
.tooth-options { min-width: 0; }
.tooth-footer { display: grid; gap: var(--space-3); }
.tooth-actions-end { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (min-width: 640px) {
  #dp-modal .tooth-layout { grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  #dp-modal .tooth-preview { flex-direction: column; justify-content: flex-start; gap: var(--space-3); margin: var(--space-4) 0 var(--space-4) var(--space-4); padding: var(--space-4); }
  #dp-modal .tooth-preview .dc-cell { flex-direction: column; gap: var(--space-2); }
  #dp-modal .tooth-preview .dc-n { min-width: 3rem; height: 1.75rem; border-radius: 0.875rem; font-size: 1rem; }
  #dp-modal .tooth-preview .dc-s { font-size: 1.125rem; }
  #dp-modal .tooth-preview .dc-t svg { width: 7rem; height: 7rem; }
  #dp-modal .tooth-preview-status { text-align: center; }
  #dp-modal .tooth-options { padding: var(--space-4); }
  #dp-modal .tooth-group .check-cols { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
}
@media (min-width: 768px) {
  #dp-modal .tooth-dialog { height: min(44rem, calc(100vh - 2rem)); height: min(44rem, calc(100dvh - 2rem)); }
}
@media (max-width: 767.98px) {
  #dp-modal:has(.tooth-dialog) { max-width: 100%; }
}
@media (min-width: 992px) {
  #dp-modal .tooth-layout { grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); }
  #dp-modal .tooth-preview .dc-t svg { width: 10rem; height: 10rem; }
}

/* The swapped parts: .tooth-body sits inside the scroller, .tooth-message in the footer. */
.tooth-body { display: block; min-width: 0; }
.tooth-message { min-width: 0; }
.tooth-message:empty { display: none; }