/* Applied after the extracted bundle to extend dark mode beyond the shipped chart/tooth rules. */

/* Hide legacy promotional banners shipped with the oracle CSS. */
.app .banner {
  display: none !important;
}

.app[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #0f1622;
  --theme-surface: #172132;
  --theme-surface-strong: #1d2a3c;
  --theme-surface-muted: #111a29;
  --theme-input: #101827;
  --theme-input-hover: #162133;
  --theme-border: #314158;
  --theme-border-soft: #243244;
  --theme-text: #e6edf7;
  --theme-heading: #f6f9fc;
  --theme-muted: #a8b4c8;
  --theme-muted-strong: #c8d2e2;
  --theme-link: #74cbff;
  --theme-link-active: #a4ddff;
  --theme-overlay: rgba(7, 12, 20, 0.72);
  --theme-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  .app[data-theme="auto"] {
    color-scheme: dark;
    --theme-bg: #0f1622;
    --theme-surface: #172132;
    --theme-surface-strong: #1d2a3c;
    --theme-surface-muted: #111a29;
    --theme-input: #101827;
    --theme-input-hover: #162133;
    --theme-border: #314158;
    --theme-border-soft: #243244;
    --theme-text: #e6edf7;
    --theme-heading: #f6f9fc;
    --theme-muted: #a8b4c8;
    --theme-muted-strong: #c8d2e2;
    --theme-link: #74cbff;
    --theme-link-active: #a4ddff;
    --theme-overlay: rgba(7, 12, 20, 0.72);
    --theme-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }
}

.app[data-theme]:not([data-theme="light"]) {
  background: var(--theme-bg);
  color: var(--theme-text);
}

.app[data-theme]:not([data-theme="light"]) :is(
  div[data-view="user"],
  div[data-view="patients"],
  div[data-view="patient"] > main,
  main[data-view="dashboard"],
  main[data-view="settings"],
  main[data-view="profile"],
  main[data-view="billing"],
  main[data-view="not-found"],
  div[data-view="pathology"],
  div[data-view="restoration"],
  div[data-view="periodontal-probing"],
  main[data-view="tooth"] > div[data-view="overview"]
) {
  background: var(--theme-bg);
  color: var(--theme-text);
}

.app[data-theme]:not([data-theme="light"]) :is(
  .panel,
  .dialog,
  .banner,
  div[data-view="patients"] table.patients tr,
  div[data-view="patients"] table.patients .tools,
  main[data-view="dashboard"] ul.records li,
  main[data-view="dashboard"] .content.secondary,
  main[data-view="chart"] > div[data-view="pathology"],
  main[data-view="chart"] > div[data-view="restoration"],
  main[data-view="chart"] > div[data-view="periodontal-probing"],
  main[data-view="tooth"] > div[data-view="overview"] section.panel,
  div[data-view="periodontal-probing"] .zone a,
  section.panel.periodontal .zone a
) {
  background: var(--theme-surface);
  color: var(--theme-text);
  border-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) :is(.dialog, .banner) {
  box-shadow: var(--theme-shadow);
}

.app[data-theme]:not([data-theme="light"]) :is(
  .overlay,
  .waiting.overlay
) {
  background: var(--theme-overlay);
}

.app[data-theme]:not([data-theme="light"]) :is(
  h1,
  h2,
  h3,
  h4,
  .heading,
  .name,
  .text
) {
  color: var(--theme-heading);
}

.app[data-theme]:not([data-theme="light"]) :is(
  p,
  li,
  td,
  th,
  label,
  legend,
  .message,
  .date,
  .subheading,
  .links .text
) {
  color: var(--theme-text);
}

.app[data-theme]:not([data-theme="light"]) :is(
  a:not(.button),
  .button.link,
  div[data-view="patients"] table.patients tbody th,
  div[data-view="user"] > header > .profile .actions button,
  main[data-view="dashboard"] nav.dashboard ul a,
  .dialog.error button.details
) {
  color: var(--theme-link);
}

.app[data-theme]:not([data-theme="light"]) :is(a:not(.button), .button.link):active {
  color: var(--theme-link-active);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="patient"] > aside nav a.back.router-link-active {
  color: var(--theme-heading);
}

.app[data-theme]:not([data-theme="light"]) .button.link[data-icon="add"]::before {
  filter: brightness(1.15);
}

.app[data-theme]:not([data-theme="light"]) .button.disabled,
.app[data-theme]:not([data-theme="light"]) .button:disabled {
  color: rgba(230, 237, 247, 0.82);
}

.app[data-theme]:not([data-theme="light"]) .field > .label {
  color: var(--theme-muted);
}

.app[data-theme]:not([data-theme="light"]) .field .control input,
.app[data-theme]:not([data-theme="light"]) .field .control select,
.app[data-theme]:not([data-theme="light"]) .field .control textarea {
  background: var(--theme-input);
  color: var(--theme-text);
  border-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) .field .control input::placeholder,
.app[data-theme]:not([data-theme="light"]) .field .control textarea::placeholder,
.app[data-theme]:not([data-theme="light"]) div[data-view="patients"] > .actions .search input::placeholder {
  color: var(--theme-muted);
}

.app[data-theme]:not([data-theme="light"]) .field .control input:hover:not([readonly]),
.app[data-theme]:not([data-theme="light"]) .field .control input:focus:not([readonly]),
.app[data-theme]:not([data-theme="light"]) .field .control select:hover:not([readonly]),
.app[data-theme]:not([data-theme="light"]) .field .control select:focus:not([readonly]),
.app[data-theme]:not([data-theme="light"]) .field .control textarea:hover:not([readonly]),
.app[data-theme]:not([data-theme="light"]) .field .control textarea:focus:not([readonly]) {
  background: var(--theme-input-hover);
  border-color: var(--theme-muted);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.app[data-theme]:not([data-theme="light"]) .field .control.select option,
.app[data-theme]:not([data-theme="light"]) .field .control select option {
  color: var(--theme-text);
  background: var(--theme-surface);
}

.app[data-theme]:not([data-theme="light"]) .field .control.select select:invalid,
.app[data-theme]:not([data-theme="light"]) .field .control.select option:disabled {
  color: rgba(230, 237, 247, 0.54);
}

.app[data-theme]:not([data-theme="light"]) .field .control.radio input + label,
.app[data-theme]:not([data-theme="light"]) .field .control.checkbox input + label {
  color: var(--theme-muted-strong);
}

.app[data-theme]:not([data-theme="light"]) .field .control.radio input + label::before,
.app[data-theme]:not([data-theme="light"]) .field .control.checkbox input + label::before {
  background: var(--theme-input);
  border-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) .field .control.radio input:checked + label,
.app[data-theme]:not([data-theme="light"]) .field .control.checkbox input:checked + label {
  color: var(--theme-text);
}

.app[data-theme]:not([data-theme="light"]) .field .control.radio input:checked + label::before {
  border-color: var(--theme-link);
  background: var(--theme-link);
  background-clip: content-box;
}

.app[data-theme]:not([data-theme="light"]) .field .control.checkbox input:checked + label::before {
  border-color: var(--theme-link);
  background-color: var(--theme-link);
}

.app[data-theme]:not([data-theme="light"]) .field[data-type="birth-date"] .controls {
  background: var(--theme-input);
  border-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) .field[data-type="birth-date"] .controls:hover,
.app[data-theme]:not([data-theme="light"]) .field[data-type="birth-date"] .controls:focus-within {
  background: var(--theme-input-hover);
  border-color: var(--theme-muted);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.app[data-theme]:not([data-theme="light"]) .field[data-type="birth-date"] .controls input,
.app[data-theme]:not([data-theme="light"]) .field[data-type="birth-date"] .controls select {
  color: var(--theme-text);
}

.app[data-theme]:not([data-theme="light"]) .field[data-type="birth-date"] .control::before {
  color: var(--theme-muted);
}

.app[data-theme]:not([data-theme="light"]) .field[data-type="birth-date"] .control.select::after {
  filter: brightness(1.15);
}

.app[data-theme]:not([data-theme="light"]) :is(
  main[data-view="settings"] .field.toggle-switch,
  main[data-view="profile"] .field.toggle-switch
) {
  border-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="user"] > header {
  background: var(--theme-surface);
  border-bottom-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="user"] > header > .profile .name,
.app[data-theme]:not([data-theme="light"]) div[data-view="user"] > header > .profile p {
  color: var(--theme-text);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="user"] > header > .tools .panel {
  background: var(--theme-surface-strong);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="user"] > header > .tools .panel > .menu > li,
.app[data-theme]:not([data-theme="light"]) div[data-view="user"] > header > .tools .panel > .heading {
  border-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="user"] > header > .tools .panel > .menu .heading {
  color: var(--theme-muted);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="patients"] > .actions .search input {
  color: var(--theme-heading);
}

/* Patients table: light mode has white card rows (#fff) on a light-gray
   page (#f2f4f7) so rows visually pop. Dark mode needs the same lift:
   row bg should be distinctly lighter than the page bg. */
.app[data-theme]:not([data-theme="light"]) div[data-view="patients"] table.patients tr {
  background: var(--theme-surface);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="patients"] table.patients thead th {
  background: var(--theme-bg);
  color: var(--theme-muted);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="patients"] table.patients tbody th,
.app[data-theme]:not([data-theme="light"]) div[data-view="patients"] table.patients td {
  background: transparent;
  border-color: var(--theme-border-soft);
}

.app[data-theme]:not([data-theme="light"]) .tools-toggle::before {
  background: var(--theme-muted);
  box-shadow: 6px 0 0 var(--theme-muted), -6px 0 0 var(--theme-muted);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="dashboard"] .content,
.app[data-theme]:not([data-theme="light"]) main[data-view="dashboard"] .content.primary {
  color: var(--theme-text);
}

.app[data-theme]:not([data-theme="light"]) main[data-view="dashboard"] .content.secondary {
  border-left-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) main[data-view="dashboard"] .content.secondary aside {
  border-bottom-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) main[data-view="dashboard"] nav.dashboard {
  border-bottom-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) main[data-view="dashboard"] ul.records li {
  background: var(--theme-surface-muted);
  border-color: var(--theme-border);
}

/* Rollback panel dark mode */
main[data-view="chart"] .rollback .panel .field {
  min-width: 200px;
}

.app[data-theme]:not([data-theme="light"]) main[data-view="chart"] .rollback .panel {
  background: var(--theme-surface);
  border-top-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) main[data-view="dashboard"] ul.records .text,
.app[data-theme]:not([data-theme="light"]) main[data-view="dashboard"] ul.records .date,
.app[data-theme]:not([data-theme="light"]) main[data-view="dashboard"] .rollback-notes .rollback-date-note,
.app[data-theme]:not([data-theme="light"]) main[data-view="dashboard"] .rollback-notes .rollback-editing-note {
  color: var(--theme-muted);
}

.app[data-theme]:not([data-theme="light"]) main[data-view="dashboard"] div[data-view="soft-tissue"] form .actions {
  border-top-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) :is(
  main[data-view="settings"] a.close,
  main[data-view="profile"] a.close,
  main[data-view="billing"] a.close,
  div[data-view="periodontal-probing"] button.audio,
  .banner .close,
  .dialog .button.cancel
) {
  color: var(--theme-muted);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] button.audio.active {
  color: var(--theme-link);
}

.app[data-theme]:not([data-theme="light"]) .dialog > .title {
  color: var(--theme-heading);
  border-bottom-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) .dialog.error .message,
.app[data-theme]:not([data-theme="light"]) .dialog.error button.details,
.app[data-theme]:not([data-theme="light"]) .browser-warning {
  color: var(--theme-muted-strong);
}

.app[data-theme]:not([data-theme="light"]) .browser-warning {
  background: var(--theme-surface);
  border-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) main[data-view="account"] .panel {
  box-shadow: var(--theme-shadow);
}

.app[data-theme]:not([data-theme="light"]) main[data-view="tooth"] > div[data-view="overview"] section.panel .heading,
.app[data-theme]:not([data-theme="light"]) main[data-view="tooth"] > div[data-view="overview"] section.panel header .button,
.app[data-theme]:not([data-theme="light"]) main[data-view="chart"] > div[data-view="pathology"] > .heading,
.app[data-theme]:not([data-theme="light"]) main[data-view="chart"] > div[data-view="restoration"] > .heading,
.app[data-theme]:not([data-theme="light"]) main[data-view="chart"] > div[data-view="periodontal-probing"] > .heading {
  color: var(--theme-heading);
}

.app[data-theme]:not([data-theme="light"]) main[data-view="tooth"] > div[data-view="overview"] section.panel.dental > .text {
  border-top-color: var(--theme-border);
  color: var(--theme-muted);
}

.app[data-theme]:not([data-theme="light"]) main[data-view="tooth"] > div[data-view="overview"] ul.records li {
  color: #4d5565;
}

.app[data-theme]:not([data-theme="light"]) main[data-view="tooth"] > div[data-view="overview"] ul.records .done {
  color: #4d5565;
}

.app[data-theme]:not([data-theme="light"]) main[data-view="tooth"] > div[data-view="overview"] ul.records .text,
.app[data-theme]:not([data-theme="light"]) main[data-view="tooth"] > div[data-view="overview"] ul.records .date {
  color: #4d5565;
}

.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .zone,
.app[data-theme]:not([data-theme="light"]) section.panel.periodontal .zone {
  color: var(--theme-muted);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .zone a,
.app[data-theme]:not([data-theme="light"]) section.panel.periodontal .zone a {
  box-shadow: inset 0 0 0 1px var(--theme-border-soft);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .zone a.router-link-exact-active,
.app[data-theme]:not([data-theme="light"]) section.panel.periodontal .zone a.router-link-exact-active {
  box-shadow: inset 0 0 0 2px var(--theme-link, #7eb8da);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"][data-active-measurement="margin"] .zone.active .margin {
  box-shadow: 0 0 0 2px var(--theme-link, #7eb8da);
  color: var(--theme-link);
}

/* Invisible scroll picker overlay on zone pad numbers — captures scroll/swipe gestures */
div[data-view="periodontal-probing"] .zone .depth,
div[data-view="periodontal-probing"] .zone .margin,
section.panel.periodontal .zone .depth,
section.panel.periodontal .zone .margin {
  position: relative;
}

div[data-view="periodontal-probing"] .zone .zone-scroll-overlay,
section.panel.periodontal .zone .zone-scroll-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 2;
}

/* NumberFlow suffix styling for overflow values (>12, <-12) */
div[data-view="periodontal-probing"] .zone number-flow-vue::part(suffix),
section.panel.periodontal .zone number-flow-vue::part(suffix) {
  margin-left: .0625em;
  font-weight: normal;
  font-size: 0.75em;
  color: var(--theme-muted, #7a8599);
}

div[data-view="periodontal-probing"] .zone.warning number-flow-vue::part(suffix),
section.panel.periodontal .zone.warning number-flow-vue::part(suffix) {
  color: inherit;
}

.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .zone .depth,
.app[data-theme]:not([data-theme="light"]) section.panel.periodontal .zone .depth {
  color: var(--theme-heading);
  border-bottom-color: var(--theme-border-soft);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .zone.warning,
.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .zone.warning .depth,
.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .zone.warning .margin,
.app[data-theme]:not([data-theme="light"]) section.panel.periodontal .zone.warning,
.app[data-theme]:not([data-theme="light"]) section.panel.periodontal .zone.warning .depth,
.app[data-theme]:not([data-theme="light"]) section.panel.periodontal .zone.warning .margin {
  color: #e13830;
}

.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .zone.warning .depth,
.app[data-theme]:not([data-theme="light"]) section.panel.periodontal .zone.warning .depth {
  border-bottom-color: #e13830;
}

.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .zone .margin,
.app[data-theme]:not([data-theme="light"]) section.panel.periodontal .zone .margin {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-muted);
}

/* NumberFlow alignment inside the margin pill */
div[data-view="periodontal-probing"] .zone .margin,
section.panel.periodontal .zone .margin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 28px;
  height: auto;
  min-height: 18px;
  padding: 1px 4px;
  box-sizing: border-box;
}

/* Override light-mode grid lines and tab borders with dark theme colors.
   Light mode uses a background gradient pattern on .options for 1px grid lines
   and border on .measurement-selector — neither was overridden, causing
   light-gray lines (#e6e7eb) to bleed through in dark mode. */
.app[data-theme]:not([data-theme="light"]) main[data-view="chart"] > div[data-view="periodontal-probing"] .measurement-selector {
  border-color: var(--theme-border-soft);
}

.app[data-theme]:not([data-theme="light"]) main[data-view="chart"] > div[data-view="periodontal-probing"] .measurement-selector .measurement {
  border-right-color: var(--theme-border-soft);
}

.app[data-theme]:not([data-theme="light"]) main[data-view="chart"] > div[data-view="periodontal-probing"] .measurement-selector .measurement.selected {
  box-shadow: inset 0 0 0 2px var(--theme-link);
  border-radius: 0;
}

/* Measurement grid: override light-mode colors for dark theme */
.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .measurements .options {
  border-color: var(--theme-border-soft);
  background:
    linear-gradient(0deg, var(--theme-border-soft) 1px, transparent 0),
    linear-gradient(270deg, var(--theme-border-soft) 1px, transparent 0),
    var(--theme-surface);
  background-size: 20% 33.33%;
}

.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .measurements .option label {
  box-shadow: none;
}

.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .measurements .option.disabled label {
  color: var(--theme-surface) !important;
}

.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .measurements .selector legend,
.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .selector.furcation legend,
.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .selector.issue legend,
.app[data-theme]:not([data-theme="light"]) div[data-view="periodontal-probing"] .selector.mobility legend {
  color: var(--theme-muted);
}

/* Chart mode selector: oracle's active pill has a blue background with blue
   text. Our default `a:not(.button) { color: var(--theme-link) }` rule
   cascades onto it, producing ~2:1 contrast. Force white on the active pill
   and keep a muted color for inactive tabs so the underline accent is the
   only thing that stands out on idle tabs. */
.app[data-theme]:not([data-theme="light"]) div.mode-selector ul.menu li.router-link-active > a,
.app[data-theme]:not([data-theme="light"]) div.mode-selector ul.menu li.router-link-exact-active > a {
  color: #ffffff;
}

.app[data-theme]:not([data-theme="light"]) div.mode-selector ul.menu li:not(.router-link-active) > a {
  color: var(--theme-muted-strong);
}

/* ── Card/chip selector overrides for dark mode ──
   Light mode uses: transparent bg + blue text (#33a5de) on default,
   gray fill (#7a8599) + white text on checked, box-shadow for "borders".
   No explicit CSS borders. Dark mode adapts the same pattern with
   theme-appropriate colors, preserving the visual rhythm. */

/* Default (unchecked) state: card with dark surface fill + blue text.
   Light mode has white bg + subtle outline shadow; dark mode adapts with
   var(--theme-input) surface + 1px outline in var(--theme-border-soft).
   The bottom-only shadow from oracle (0 2px 0 0 #e6e7eb) is replaced with
   a full outline to match light mode's visual card shape. */
.app[data-theme]:not([data-theme="light"]) :is(
  div[data-view="periodontal-probing"] .measurements .option label,
  div[data-view="periodontal-probing"] .selector.furcation .options label,
  div[data-view="periodontal-probing"] .selector.issue .options label,
  div[data-view="periodontal-probing"] .selector.mobility .options label,
  section.panel.periodontal .selector.furcation .options label,
  section.panel.periodontal .selector.issue .options label,
  section.panel.periodontal .selector.mobility .options label,
  main[data-view="chart"] > div[data-view="pathology"] .wizard .step[data-type="type"] a,
  main[data-view="chart"] > div[data-view="restoration"] .wizard .step[data-type="type"] a,
  div[data-view="pathology"] .types[data-context="tooth"] a,
  div[data-view="restoration"] .types[data-context="tooth"] a,
  div[data-view="pathology"] input + label[for^="type-"],
  div[data-view="restoration"] input + label[for^="type-"],
  main[data-view="chart"] > div[data-view="pathology"] .wizard .step[data-type="detail"] .options .option label,
  main[data-view="chart"] > div[data-view="restoration"] .wizard .step[data-type="detail"] .options .option label,
  main[data-view="chart"] .quickselect.panel .details .options label,
  div[data-view="pathology"] .zones .pad label,
  div[data-view="restoration"] .zones .pad label,
  div[data-view="pathology"] .detail .options label,
  div[data-view="restoration"] .detail .options label,
  main[data-view="tooth"] > div[data-view="overview"] section.panel.endodontic-test .options button
) {
  background: var(--theme-input);
  color: var(--theme-link);
  box-shadow: 0 0 0 1px var(--theme-border-soft);
}

/* Checked/active state: gray fill + white text.
   Light mode uses #7a8599 bg + #fff text. For pads, oracle overrides with
   white bg + inset 2px #98a1b3 shadow. Dark mode uses the gray fill for
   both (matching the "Decay" / "Dentin" look in the light screenshot). */
.app[data-theme]:not([data-theme="light"]) :is(
  div[data-view="periodontal-probing"] .measurements .option input:checked + label,
  div[data-view="periodontal-probing"] .selector.furcation .options input:checked + label,
  div[data-view="periodontal-probing"] .selector.issue .options input:checked + label,
  div[data-view="periodontal-probing"] .selector.mobility .options input:checked + label,
  section.panel.periodontal .selector.furcation .options input:checked + label,
  section.panel.periodontal .selector.issue .options input:checked + label,
  section.panel.periodontal .selector.mobility .options input:checked + label,
  main[data-view="chart"] > div[data-view="pathology"] .wizard .step[data-type="type"] a.router-link-exact-active,
  main[data-view="chart"] > div[data-view="restoration"] .wizard .step[data-type="type"] a.router-link-exact-active,
  div[data-view="pathology"] .types[data-context="tooth"] a.router-link-exact-active,
  div[data-view="restoration"] .types[data-context="tooth"] a.router-link-exact-active,
  div[data-view="pathology"] input:checked + label[for^="type-"],
  div[data-view="restoration"] input:checked + label[for^="type-"],
  main[data-view="chart"] > div[data-view="pathology"] .wizard .step[data-type="detail"] .options .option input:checked + label,
  main[data-view="chart"] > div[data-view="restoration"] .wizard .step[data-type="detail"] .options .option input:checked + label,
  main[data-view="chart"] .quickselect.panel .details .options input:checked + label,
  div[data-view="pathology"] .zones .pad input:checked + label,
  div[data-view="restoration"] .zones .pad input:checked + label,
  div[data-view="pathology"] .detail .options input:checked + label,
  div[data-view="restoration"] .detail .options input:checked + label
) {
  background: #7a8599;
  color: #fff;
  box-shadow: none;
}

/* Disabled pads: faded card with thin outline.
   Light mode: #fff bg + 1px #e6e7eb → dark mode: input surface + 1px soft. */
.app[data-theme]:not([data-theme="light"]) :is(
  div[data-view="pathology"] .zones .pad.disabled label,
  div[data-view="restoration"] .zones .pad.disabled label
) {
  background: var(--theme-input);
  color: var(--theme-muted);
  box-shadow: 0 0 0 1px var(--theme-border-soft);
}

/* Margin selector +/- toggle: card style matching other selectors. */
.app[data-theme]:not([data-theme="light"]) :is(
  div[data-view="periodontal-probing"] .margin.selector .options button,
  section.panel.periodontal .margin.selector .options button
) {
  background: var(--theme-input);
  color: var(--theme-link);
  box-shadow: 0 0 0 1px var(--theme-border-soft);
}

/* Hotkey badges on issue selector labels */
div[data-view="periodontal-probing"] .issue.selector kbd.hotkey {
  display: inline-block;
  min-width: 1.4em;
  padding: 0.1em 0.3em;
  margin-left: 0.3em;
  font-size: 0.75em;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  border-radius: 3px;
  border: none;
  color: #1a2a3a;
  background: var(--theme-link, #74cbff);
  vertical-align: middle;
}

/* Issue selector: active state uses the dot's color as background.
   !important needed to override the shared :is() checked-state block
   which inherits high specificity from longer selectors in the list. */
.app[data-theme]:not([data-theme="light"]) .issue.selector .option[data-name="bleeding"] input:checked + label {
  background: #d0021b !important;
  color: #fff !important;
}

.app[data-theme]:not([data-theme="light"]) .issue.selector .option[data-name="plaque"] input:checked + label {
  background: #4a90e2 !important;
  color: #fff !important;
}

.app[data-theme]:not([data-theme="light"]) .issue.selector .option[data-name="pus"] input:checked + label {
  background: #f8e71c !important;
  color: #1a2a3a !important;
}

.app[data-theme]:not([data-theme="light"]) .issue.selector .option[data-name="tartar"] input:checked + label {
  background: #bcc1cc !important;
  color: #1a2a3a !important;
}

/* When checked, invert the dot to surface color against the colored background */
.app[data-theme]:not([data-theme="light"]) .issue.selector .option input:checked + label::after {
  background: var(--theme-surface) !important;
  border-color: var(--theme-surface) !important;
}

.app[data-theme]:not([data-theme="light"]) .furcation.blank {
  color: var(--theme-muted);
}


/* Oral health panel: meter elements and segmented progress bars use #e6e7eb
   (near-white) as the empty-track color and #fff as segment dividers.
   Both are invisible on white but glare on dark surfaces. */
.app[data-theme]:not([data-theme="light"]) .oral-health meter {
  background: var(--theme-border-soft);
}

.app[data-theme]:not([data-theme="light"]) .oral-health dl.issues .issue[data-value] dd {
  background: var(--theme-border-soft);
}

.app[data-theme]:not([data-theme="light"]) .oral-health dl.issues .issue[data-value="1"] dd {
  background: linear-gradient(90deg, var(--theme-surface) 1px, transparent 0) -1px/20.1%, linear-gradient(90deg, #a3d554, #a3d554) 0/20% 100% no-repeat, var(--theme-border-soft);
}

.app[data-theme]:not([data-theme="light"]) .oral-health dl.issues .issue[data-value="2"] dd {
  background: linear-gradient(90deg, var(--theme-surface) 1px, transparent 0) -1px/20.1%, linear-gradient(90deg, #a3d554, #a3d554) 0/40% 100% no-repeat, var(--theme-border-soft);
}

.app[data-theme]:not([data-theme="light"]) .oral-health dl.issues .issue[data-value="3"] dd {
  background: linear-gradient(90deg, var(--theme-surface) 1px, transparent 0) -1px/20.1%, linear-gradient(90deg, #12cbcb, #12cbcb) 0/60% 100% no-repeat, var(--theme-border-soft);
}

.app[data-theme]:not([data-theme="light"]) .oral-health dl.issues .issue[data-value="4"] dd {
  background: linear-gradient(90deg, var(--theme-surface) 1px, transparent 0) -1px/20.1%, linear-gradient(90deg, #ffd00a, #ffd00a) 0/80% 100% no-repeat, var(--theme-border-soft);
}

.app[data-theme]:not([data-theme="light"]) .oral-health dl.issues .issue[data-value="5"] dd {
  background: linear-gradient(90deg, var(--theme-surface) 1px, transparent 0) -1px/20.1%, linear-gradient(90deg, #e13830, #e13830) 0/100% 100% no-repeat, var(--theme-border-soft);
}

/* Report treatment plan records: light mode has #f2f4f7 bg + #4d5565 text
   + #e6e7eb border. Dark mode adapts to input surface + theme text. */
.app[data-theme]:not([data-theme="light"]) .report .treatment-plan .records li {
  background: var(--theme-input);
  color: var(--theme-text);
  border-color: var(--theme-border-soft);
}

.app[data-theme]:not([data-theme="light"]) .report .treatment-plan .records .text {
  color: var(--theme-text);
}

.app[data-theme]:not([data-theme="light"]) .report .treatment-plan .records .date {
  color: var(--theme-muted);
}

/* BPE (Basic Periodontal Examination) dialog — sextant cards and score
   selector. Light mode uses white cards (#fff bg) + inset 1px #e6e7eb
   outline and #f2f4f7 bg on score labels. Dark mode needs dark fills. */
.app[data-theme]:not([data-theme="light"]) .basic-periodontal-examination .sextant button {
  background: var(--theme-input);
  box-shadow: inset 0 0 0 1px var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) .basic-periodontal-examination .sextant button.selected {
  box-shadow: inset 0 0 0 2px var(--theme-muted);
}

.app[data-theme]:not([data-theme="light"]) .basic-periodontal-examination .sextant .level {
  color: var(--theme-text);
  border-bottom-color: var(--theme-border);
}

.app[data-theme]:not([data-theme="light"]) .basic-periodontal-examination .sextant .level.blank {
  color: var(--theme-muted);
}

.app[data-theme]:not([data-theme="light"]) .basic-periodontal-examination .sextant .furcation {
  background: var(--theme-input);
}

.app[data-theme]:not([data-theme="light"]) .basic-periodontal-examination .sextant .furcation.blank {
  color: var(--theme-muted);
}

/* Score selector: unselected labels have #f2f4f7 bg + #4d5565 text in
   light mode (light gray card with dark text). Dark mode adapts to dark
   surface + light text. The colored level states (green/yellow/red) from
   oracle CSS are left untouched — they already work on dark bg. */
.app[data-theme]:not([data-theme="light"]) .basic-periodontal-examination .score-selector label {
  background: var(--theme-input);
  color: var(--theme-text);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="pathology"] .main,
.app[data-theme]:not([data-theme="light"]) div[data-view="restoration"] .main {
  background: var(--theme-bg);
  color: var(--theme-text);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="pathology"] .actions .button[disabled],
.app[data-theme]:not([data-theme="light"]) div[data-view="restoration"] .actions .button[disabled] {
  color: rgba(230, 237, 247, 0.82);
}

.app[data-theme]:not([data-theme="light"]) div[data-view="pathology"] .actions .button.monitor[disabled],
.app[data-theme]:not([data-theme="light"]) div[data-view="restoration"] .actions .button.monitor[disabled] {
  color: rgba(32, 38, 51, 0.82);
}