/* Scoped clinic odontogram. Load after app.css; all artwork is local inline SVG. */
.dental-picker {
  --dental-ink: #344c55;
  --dental-accent: #17746e;
  --dental-fill: #dcf0eb;
  display: block;
  min-width: 0;
  padding: 16px;
  border: 1px solid #dce5e5;
  border-radius: 12px;
  background: #fbfdfc;
  color: #344c55;
  font-family: inherit;
  font-size: 13px;
}
.dental-picker[data-dental-kind="condition"] { background: #fafbfd; border-color: #dde3eb; }
.dental-picker .dental-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.dental-picker .dental-heading { display: grid; gap: 3px; flex: 1 1 210px; }
.dental-picker .dental-title { font-size: 13px; font-weight: 650; line-height: 1.4; color: #263f47; }
.dental-picker .dental-preview-label { font-size: 12px; color: #62767c; line-height: 1.5; }
.dental-picker .dental-count { font-size: 12px; font-weight: 600; white-space: nowrap; color: #176a64; }
.dental-picker[data-dental-kind="condition"] .dental-count { color: #4b628b; }
.dental-picker .dental-paint-toggle {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #d2dfe0;
  border-radius: 7px;
  background: #fff;
  color: #4b656c;
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
}
.dental-picker .dental-paint-toggle[aria-pressed="true"] { background: #e2f1ed; color: #176a64; border-color: #70aca3; }
.dental-picker .dental-help { margin: 10px 0 16px; color: #6e7f85; font-size: 11px; line-height: 1.7; }
.dental-picker .dental-arches { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.dental-picker .dental-arch { min-width: 576px; }
.dental-picker .dental-axis { display: flex; align-items: center; justify-content: space-between; margin: 4px 4px 6px; font-size: 10px; color: #72858b; }
.dental-picker .dental-axis span:nth-child(2) { font-weight: 600; color: #46606a; letter-spacing: .035em; }
.dental-picker .dental-tooth-row { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 0; }
.dental-picker .dental-arch + .dental-arch { margin-top: 10px; padding-top: 9px; border-top: 1px solid #e5ecec; }
.dental-picker .dental-tooth {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 112px;
  height: auto;
  margin: 0;
  padding: 3px 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #567078;
  box-shadow: none;
  font: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: auto;
}
.dental-picker .dental-tooth:nth-child(8) { border-right: 1px solid #dae4e5; border-radius: 7px 0 0 7px; }
.dental-picker .dental-tooth:hover { background: #eef5f3; }
.dental-picker .dental-tooth.dental-selected { background: #eaf4f1; color: #155f59; }
.dental-picker[data-dental-kind="condition"] .dental-tooth.dental-selected { background: #eff2f7; }
.dental-picker .dental-tooth:focus-visible, .dental-picker .dental-paint-toggle:focus-visible { outline: 2px solid #267f85; outline-offset: 2px; z-index: 1; }
.dental-picker .dental-tooth:disabled { opacity: .5; cursor: default; }
.dental-picker .dental-anatomy { display: block; width: 100%; height: 85px; overflow: visible; pointer-events: none; }
.dental-picker .dental-root { fill: #f1f5f4; stroke: #9eaeb3; stroke-width: 2.2; stroke-linejoin: round; }
.dental-picker .dental-crown { fill: #fff; stroke: #718b93; stroke-width: 2.3; stroke-linejoin: round; }
.dental-picker .dental-implant { display: none; fill: var(--dental-accent); }
.dental-picker .dental-number { font-size: 11px; font-weight: 600; line-height: 18px; font-variant-numeric: tabular-nums; }
.dental-picker .dental-status-label { display: block; max-width: 100%; min-height: 24px; overflow-wrap: anywhere; color: var(--dental-accent); font-size: 9px; line-height: 12px; font-weight: 500; }
.dental-picker .dental-selection-mark { position: absolute; top: 3px; right: 3px; color: var(--dental-accent); font-size: 10px; visibility: hidden; }
.dental-picker .dental-selected .dental-selection-mark { visibility: visible; }
.dental-picker .dental-selected .dental-crown { fill: var(--dental-fill); stroke: var(--dental-accent); stroke-width: 3; }
.dental-picker .dental-selected .dental-root { stroke: var(--dental-accent); stroke-width: 2.5; }
.dental-picker[data-dental-kind="treatment"] [data-treatment="implant"] { --treatment-accent: #267e85; --treatment-fill: #e0f0f0; }
.dental-picker[data-dental-kind="treatment"] [data-treatment="crown"] { --treatment-accent: #5266a2; --treatment-fill: #e6eaf7; }
.dental-picker[data-dental-kind="treatment"] [data-treatment="veneer"] { --treatment-accent: #58a995; --treatment-fill: #e4f3ed; }
.dental-picker[data-dental-kind="treatment"] [data-treatment="extraction"] { --treatment-accent: #ae635d; --treatment-fill: #f6e4e0; }
.dental-picker[data-dental-kind="treatment"] [data-treatment="filling"] { --treatment-accent: #c79b55; --treatment-fill: #f6edda; }
.dental-picker[data-dental-kind="treatment"] [data-treatment="root_canal"] { --treatment-accent: #547994; --treatment-fill: #e4edf4; }
.dental-picker[data-dental-kind="treatment"] [data-treatment="bridge"] { --treatment-accent: #8d7199; --treatment-fill: #efe7f3; }
.dental-picker[data-dental-kind="treatment"] [data-treatment="dental"],
.dental-picker[data-dental-kind="treatment"] [data-treatment="other"] { --treatment-accent: #4b8e7c; --treatment-fill: #e3f1eb; }
.dental-picker [data-preview="implant"] .dental-natural .dental-root { opacity: .12; }
.dental-picker [data-preview="implant"] .dental-implant { display: block; }
.dental-picker [data-preview="root_canal"] .dental-root { fill: var(--dental-fill); stroke: var(--dental-accent); }
.dental-picker [data-preview="healthy"] { --dental-accent: #377a62; --dental-fill: #e5f4eb; }
.dental-picker [data-preview="filling"] { --dental-accent: #457da4; --dental-fill: #dcecf7; }
.dental-picker [data-preview="crown"],
.dental-picker [data-preview="veneer"] { --dental-accent: #886a30; --dental-fill: #f3ebd6; }
.dental-picker [data-preview="implant"] { --dental-accent: #4c6894; --dental-fill: #e1e9f6; }
.dental-picker [data-preview="extraction"],
.dental-picker [data-preview="decay"],
.dental-picker [data-preview="fractured"],
.dental-picker [data-preview="lesion_infection"] { --dental-accent: #a05a48; --dental-fill: #f6e2db; }
.dental-picker [data-preview="missing"] { --dental-accent: #78858d; --dental-fill: #f2f4f6; }
.dental-picker [data-preview="missing"] .dental-natural { opacity: .38; }
.dental-picker [data-preview="missing"] .dental-crown { stroke-dasharray: 6 4; }
.dental-picker [data-preview="impacted"],
.dental-picker [data-preview="other"] { --dental-accent: #806b93; --dental-fill: #ece5f3; }
.dental-picker .dental-readout { margin: 11px 0 0; color: #425f67; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.dental-picker .dental-note { margin: 6px 0 0; color: #77878d; font-size: 10px; line-height: 1.7; }
.dental-picker[data-paint-mode="true"] .dental-arches,
.dental-picker[data-paint-mode="true"] .dental-tooth { touch-action: none; }
.dental-picker.dental-painting { cursor: crosshair; }
@media (max-width: 600px) {
  .dental-picker { padding: 12px; }
  .dental-picker .dental-heading { flex-basis: 100%; }
  .dental-picker .dental-toolbar { gap: 8px 12px; }
  .dental-picker .dental-help { font-size: 10px; }
}

/* Unselected teeth show their condition. Selected teeth use the treatment appearance. */
.dental-picker [data-preview]:not([data-preview=""]) .dental-crown { fill: var(--dental-fill); stroke: var(--dental-accent); }
.dental-picker[data-dental-kind="treatment"] .dental-selected { box-shadow: inset 0 0 0 2px var(--treatment-accent, #17746e); }

.dental-picker[data-dental-kind="treatment"] [data-treatment]:not([data-treatment=""]) { --dental-fill: var(--treatment-fill, #dcf0eb); --dental-accent: var(--treatment-accent, #17746e); }
.dental-picker[data-dental-kind="treatment"] [data-treatment]:not([data-treatment=""]) .dental-root { stroke: var(--dental-accent); }
.dental-picker[data-dental-kind="treatment"] .dental-selection-mark { color: var(--treatment-accent, #17746e); }