/* Hodorak Contrast Guard 2026
   Prevents browser/device auto-dark recoloring and protects text/background contrast. */
:root{
  color-scheme:only light;
  --hodorak-safe-light:#ffffff;
  --hodorak-safe-dark:#0f1e3a;
  --hodorak-control-bg:#ffffff;
  --hodorak-control-fg:#1f2937;
  --hodorak-control-muted:#6b7280;
}
html[data-theme="light"]{
  color-scheme:only light;
  --background:#f6f5f3;
  --surface:#ffffff;
  --text-primary:#1f2937;
  --text-secondary:#6b7280;
  --border:#e7e5e4;
  --hodorak-control-bg:#ffffff;
  --hodorak-control-fg:var(--ink,#1f2937);
  --hodorak-control-muted:var(--muted,#6b7280);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --background:#091425;
  --surface:#111f35;
  --text-primary:#f1f4f8;
  --text-secondary:#aab3c2;
  --border:#26354d;
  --hodorak-control-bg:var(--surface,#111f35);
  --hodorak-control-fg:var(--ink,#f3f5f8);
  --hodorak-control-muted:var(--muted,#a7b2c3);
}
html,body{forced-color-adjust:auto}
body{color:var(--ink,var(--text-primary,#1f2937))}

/* Native controls are the most common source of white-on-white on iOS/Android. */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
select,textarea{
  color:var(--ink,var(--hodorak-control-fg)) !important;
  caret-color:var(--ink,var(--hodorak-control-fg));
  -webkit-text-fill-color:var(--ink,var(--hodorak-control-fg));
}
input::placeholder,textarea::placeholder{color:var(--muted,var(--hodorak-control-muted)) !important;opacity:1}
select option{color:#1f2937;background:#fff}
html[data-theme="dark"] select option{color:#f3f5f8;background:#111f35}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink,var(--hodorak-control-fg)) !important;
  caret-color:var(--ink,var(--hodorak-control-fg)) !important;
  transition:background-color 9999s ease-out 0s;
}

/* Guard common surfaces that rely on inherited colors. */
:is(.panel,.dash-panel,.manage-panel,.metric-card,.summary,.table-wrap,.dashboard-search-results,
    .dashboard-support-panel,.notification-panel,.hodorak-notification-settings-body,
    .guided-help-panel,.guided-tour-popover,.school-access-card__content,
    .dashboard-quick-access__body,.parent-card,.device-claim-card,.system-notice-card){
  color:var(--ink,var(--text-primary,#1f2937));
}
html[data-theme="dark"] :is(.panel,.dash-panel,.manage-panel,.metric-card,.summary,.table-wrap,.dashboard-search-results,
    .dashboard-support-panel,.notification-panel,.hodorak-notification-settings-body,
    .guided-help-panel,.guided-tour-popover,.school-access-card__content,
    .dashboard-quick-access__body,.parent-card){
  color:var(--ink,#f3f5f8);
}

/* Tenant branding may be very light or very dark. JS supplies the correct foreground. */
:is(.manage-primary,.att-primary,.btn.primary,.school-access-links a.is-primary,
    .created-link-value button,.device-link-form>button,.scanner-modes button.active,
    .guided-tour-next,.guided-help-start){
  color:var(--school-on-primary,#fff) !important;
}
:is(.manage-panel-title>span,.branch-card-head>span,.release-badge){
  --hodorak-brand-chip-fg:var(--school-on-secondary,var(--school-primary,#0f1e3a));
}
.manage-panel-title>span,.branch-card-head>span{color:var(--hodorak-brand-chip-fg) !important}

/* Runtime fixes only elements that actually fail WCAG contrast. */
.hodorak-contrast-fixed{color:var(--hodorak-safe-text) !important;-webkit-text-fill-color:var(--hodorak-safe-text) !important}
.hodorak-contrast-fixed :is(svg,path){color:inherit}

/* Never let browser forced dark mode recolor images/logos. */
img,video,canvas,svg{forced-color-adjust:none}

@media (forced-colors:active){
  .hodorak-contrast-fixed{forced-color-adjust:auto}
}


/* Theme switch is applied atomically. Notification controls must not animate color/surface
   while CSS variables are changing, otherwise some mobile GPUs show a one-frame flash. */
html.hodorak-theme-switching :is(.hodorak-notification-center-trigger,.hodorak-notification-trigger-icon,.hodorak-notification-trigger-count,.hodorak-notification-center,.hodorak-notification-center *){
  transition:none !important;
  animation:none !important;
}


/* Apply a theme atomically. This prevents a light surface from being painted
   while a text transition is still carrying the dark-theme foreground. */
html.hodorak-theme-switching *,
html.hodorak-theme-switching *::before,
html.hodorak-theme-switching *::after{
  transition:none !important;
}