/* ============================================================
   EFB QMS V3 - Dark Mode Compatibility Layer
   Restored from the user's preferred attached version.
   Keep component structure and icon palette unchanged.
   ============================================================ */
[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .field select{
  color:#edf4f0;
  background:#101c17;
  border-color:#315044;
}

[data-theme="dark"] .field input::placeholder,
[data-theme="dark"] .field textarea::placeholder{
  color:#91a39a;
}

[data-theme="dark"] .btn-outline{
  color:#edf4f0;
  background:#15251f;
  border-color:#3a594d;
}

[data-theme="dark"] .btn-outline:hover{
  color:#ffffff;
  border-color:#6da98f;
}

[data-theme="dark"] table td{
  color:#e7efeb;
}

[data-theme="dark"] .subtle,
[data-theme="dark"] .desc,
[data-theme="dark"] .muted{
  color:#a7b7af;
}

[data-theme="dark"] .linklike{
  color:#8fd4b3;
}

[data-theme="dark"] .linklike:hover{
  color:#b8efd2;
}

/* Preferred multi-select dropdown styling from the attached version. */
[data-theme="dark"] .v13-filter-menu,
[data-theme="dark"] .v13-filter-wrap .v13-filter-menu{
  background:#14241e;
  color:#e8f1ed;
  border-color:#315044;
}

[data-theme="dark"] .v13-filter-option:hover{
  background:#1e352b;
}

/* White/light surfaces must use dark text. Icons are intentionally untouched. */
[data-theme="dark"] [style*="background:#fbfaf6"] {
  color:#111111!important;
}
[data-theme="dark"] [style*="background:#fbfaf6"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,.subtle,.muted,.desc,.description,.title,.heading) {
  color:#111111!important;
  -webkit-text-fill-color:#111111!important;
}
[data-theme="dark"] [style*="background:#fbfaf6"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] [style*="background:#fbfaf6"] select,
[data-theme="dark"] [style*="background:#fbfaf6"] textarea{
  background:#fff!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

/* Any intentionally white surface follows the same rule. */
[data-theme="dark"] .qms-light-surface,
[data-theme="dark"] .qms-light-surface :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,.subtle,.muted,.desc,.description,.title,.heading){
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

/* Native date/time controls remain dark like the preferred version,
   with the browser's native calendar icon preserved and visible. */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"]{
  color-scheme:dark!important;
  color:#edf4f0!important;
  -webkit-text-fill-color:#edf4f0!important;
  background:#101c17!important;
  border-color:#315044!important;
}

/* Search inside the multi-select menu is a dark field, not a white field. */
[data-theme="dark"] .v13-filter-search{
  background:#14251f!important;
  border-color:#304940!important;
}
[data-theme="dark"] .v13-filter-search input{
  background:transparent!important;
  color:#e3eee9!important;
  -webkit-text-fill-color:#e3eee9!important;
}

/* Checkbox controls inside multi-select keep their existing palette. */
[data-theme="dark"] .v13-filter-option input{
  background:#fff;
  color:#0b5d4b;
}


/* ============================================================
   FINAL DARK-MODE CONTRAST FIX
   Scope: Evaluation / Scorecard UI
   Purpose: keep every text-bearing control readable in dark mode
   without changing icon colors or the existing layout.
   ============================================================ */

/* Evaluation and scorecard containers */
[data-theme="dark"] .glassPanel,
[data-theme="dark"] .scorecardWaiting,
[data-theme="dark"] .qRow,
[data-theme="dark"] .scoreBar{
  background:var(--dm-surface)!important;
  color:var(--dm-text)!important;
  border-color:var(--dm-border)!important;
}

[data-theme="dark"] .glassPanel :is(h1,h2,h3,h4,h5,h6),
[data-theme="dark"] .scorecardWaiting :is(h1,h2,h3,h4,h5,h6),
[data-theme="dark"] .qRow :is(h1,h2,h3,h4,h5,h6),
[data-theme="dark"] .scoreBar :is(h1,h2,h3,h4,h5,h6){
  color:var(--dm-text)!important;
  -webkit-text-fill-color:var(--dm-text)!important;
}

/* Question title and description */
[data-theme="dark"] .qRow .qpoint,
[data-theme="dark"] .qRow .qpoint b,
[data-theme="dark"] .qRow .qpoint strong{
  color:#F7FBF9!important;
  -webkit-text-fill-color:#F7FBF9!important;
}

[data-theme="dark"] .qRow .qdefn{
  color:#C1D0C8!important;
  -webkit-text-fill-color:#C1D0C8!important;
}

/* Category pills: use dark, high-contrast surfaces instead of
   white text on pale badges. Icons are intentionally untouched. */
[data-theme="dark"] .qRow .pill-cat.cat-EC,
[data-theme="dark"] h3 .pill-cat.cat-EC{
  background:#5B302E!important;
  color:#FFDAD5!important;
  -webkit-text-fill-color:#FFDAD5!important;
  border-color:#8A4D48!important;
}

[data-theme="dark"] .qRow .pill-cat.cat-BC,
[data-theme="dark"] h3 .pill-cat.cat-BC{
  background:#5A4A21!important;
  color:#FFE9A6!important;
  -webkit-text-fill-color:#FFE9A6!important;
  border-color:#806C35!important;
}

[data-theme="dark"] .qRow .pill-cat.cat-COMP,
[data-theme="dark"] h3 .pill-cat.cat-COMP{
  background:#214D3A!important;
  color:#C8F3D9!important;
  -webkit-text-fill-color:#C8F3D9!important;
  border-color:#39775A!important;
}

[data-theme="dark"] .qRow .pill-cat.cat-NC,
[data-theme="dark"] h3 .pill-cat.cat-NC{
  background:#34463E!important;
  color:#E2EEE8!important;
  -webkit-text-fill-color:#E2EEE8!important;
  border-color:#526B60!important;
}

/* Answer selects */
[data-theme="dark"] .qRow select{
  background:#14221C!important;
  color:#F4FAF7!important;
  -webkit-text-fill-color:#F4FAF7!important;
  border-color:#557263!important;
}

[data-theme="dark"] .qRow select.v-Yes{
  background:#185238!important;
  color:#D9FFE8!important;
  -webkit-text-fill-color:#D9FFE8!important;
  border-color:#4EAE7A!important;
}

[data-theme="dark"] .qRow select.v-No{
  background:#5A2927!important;
  color:#FFE0DC!important;
  -webkit-text-fill-color:#FFE0DC!important;
  border-color:#A65A52!important;
}

[data-theme="dark"] .qRow select.v-N\/A{
  background:#26362F!important;
  color:#DCE8E2!important;
  -webkit-text-fill-color:#DCE8E2!important;
  border-color:#526B60!important;
}

/* Native dropdown options */
[data-theme="dark"] .qRow select option,
[data-theme="dark"] .qRow select optgroup{
  background:#101C17!important;
  color:#F4FAF7!important;
}

/* Required comments */
[data-theme="dark"] .qRow textarea{
  background:#0C1712!important;
  color:#F1F8F4!important;
  -webkit-text-fill-color:#F1F8F4!important;
  border-color:#557263!important;
  box-shadow:none!important;
}

[data-theme="dark"] .qRow textarea::placeholder{
  color:#9FB2A8!important;
  -webkit-text-fill-color:#9FB2A8!important;
  opacity:1!important;
}

[data-theme="dark"] .qRow textarea:focus{
  border-color:#79D8A7!important;
  box-shadow:0 0 0 2px rgba(121,216,167,.12)!important;
}

/* Evaluation call metadata/history: the previous light translucent
   surface became a low-contrast gray block in dark mode. */
[data-theme="dark"] .callMeta{
  background:#172820!important;
  color:#D8E6DF!important;
  border-color:#405B4E!important;
}

[data-theme="dark"] .callMeta b{
  color:#F4FAF7!important;
  -webkit-text-fill-color:#F4FAF7!important;
}

[data-theme="dark"] .callHistory{
  background:#101C17!important;
  border-color:#385246!important;
  color:#D8E6DF!important;
}

[data-theme="dark"] .callHistoryItem{
  background:#16251E!important;
  border-color:#385246!important;
  color:#E3EEE8!important;
}

[data-theme="dark"] .callHistoryItem b{
  color:#F4FAF7!important;
  -webkit-text-fill-color:#F4FAF7!important;
}

[data-theme="dark"] .callHistoryItem .subtle{
  color:#AFC1B8!important;
  -webkit-text-fill-color:#AFC1B8!important;
}

/* Score summary bar */
[data-theme="dark"] .scoreBar{
  color:#F1F8F4!important;
  box-shadow:0 -8px 24px rgba(0,0,0,.28)!important;
}

[data-theme="dark"] .scoreBar :is(.subtle,.muted,.desc,small){
  color:#B8C9C1!important;
  -webkit-text-fill-color:#B8C9C1!important;
}

/* Readonly/disabled fields remain readable instead of turning gray */
[data-theme="dark"] .callMeta[disabled],
[data-theme="dark"] .callPicker button:disabled,
[data-theme="dark"] .field input:disabled,
[data-theme="dark"] .field select:disabled,
[data-theme="dark"] .field textarea:disabled{
  opacity:1!important;
  color:#DCEAE3!important;
  -webkit-text-fill-color:#DCEAE3!important;
  background:#26362F!important;
  border-color:#506D5E!important;
}

/* Section descriptions and helper text inside Evaluation */
[data-theme="dark"] .panel .desc,
[data-theme="dark"] .panel .subtle,
[data-theme="dark"] .panel .muted{
  color:#B8C9C1!important;
  -webkit-text-fill-color:#B8C9C1!important;
}

/* Preserve icon palette. Only text-bearing elements are affected above. */
[data-theme="dark"] .qRow :is(svg,i,.icon,[class*="icon"]),
[data-theme="dark"] .callMeta :is(svg,i,.icon,[class*="icon"]){
  -webkit-text-fill-color:initial;
}

/* Keyboard focus must remain visible */
[data-theme="dark"] .qRow select:focus,
[data-theme="dark"] .qRow textarea:focus{
  outline:2px solid rgba(121,216,167,.45)!important;
  outline-offset:1px;
}

/* Targeted dark-mode fix: keep only Master Data and Admin Tools tabs readable. */
[data-theme="dark"] #masterDataPanel .subnav button,
[data-theme="dark"] #adminToolsPanel .subnav button{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}
[data-theme="dark"] #masterDataPanel .subnav button:hover,
[data-theme="dark"] #adminToolsPanel .subnav button:hover,
[data-theme="dark"] #masterDataPanel .subnav button.active,
[data-theme="dark"] #adminToolsPanel .subnav button.active{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}

/* Same targeted dark-mode fix for the Reports (Evaluations/VOC) and VOC
   (New VOC Entry/VOC History) sub-tabs - light mode is untouched since
   these rules only apply under [data-theme="dark"]. */
[data-theme="dark"] #reportsSubnav button,
[data-theme="dark"] #vocSubnav button{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}
[data-theme="dark"] #reportsSubnav button:hover,
[data-theme="dark"] #vocSubnav button:hover,
[data-theme="dark"] #reportsSubnav button.active,
[data-theme="dark"] #vocSubnav button.active{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}


/* Users & Agent Roster: keep the role badge surface unchanged, but make
   the ADMIN / AGENT text black for maximum contrast on the light badge. */
[data-theme="dark"] #usersTableHost .badge-role{
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
  text-shadow:none !important;
}

/* Agent Performance (standalone page and the Agent Performance report
   inside Reports): keep the green/red Done / Not Done pill backgrounds
   as they are, but force black text so "Not Done" stays readable
   against the red background in dark mode. Scoped to just these two
   table hosts, so PASS/FAIL pills everywhere else (Evaluations,
   Reports, etc.) are completely unaffected, and light mode is
   untouched since this only applies under [data-theme="dark"]. */
[data-theme="dark"] #apTableHost .pill-pass,
[data-theme="dark"] #apTableHost .pill-fail,
[data-theme="dark"] #agentPerfReportTableHost .pill-pass,
[data-theme="dark"] #agentPerfReportTableHost .pill-fail{
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
  text-shadow:none !important;
}