/* v1.0.80 / Build 279 — STRICT DARK MODE COMPLETION.
   Goal: remove every remaining white/light UI surface in dark mode across all key stages.
   Scope: UI only. Official SF9 paper previews, downloaded workbooks, and print output stay unchanged. */
@media screen {
  :root[data-theme="dark"] {
    --dm-surface-2: #162337;
    --dm-modal: #162235;
    --dm-overlay: rgba(6, 12, 24, .78);
  }

  /* Generic dialog / popup treatment, including Key-stage workspaces and loading overlays. */
  :root[data-theme="dark"] .modal-backdrop,
  :root[data-theme="dark"] .special-feature-modal,
  :root[data-theme="dark"] .confirmation-overlay,
  :root[data-theme="dark"] .loading-overlay {
    background: var(--dm-overlay) !important;
  }
  :root[data-theme="dark"] .modal-panel,
  :root[data-theme="dark"] .modal-panel > header,
  :root[data-theme="dark"] #modal-content,
  :root[data-theme="dark"] .confirmation-panel,
  :root[data-theme="dark"] .special-feature-modal .confirmation-panel,
  :root[data-theme="dark"] .special-popup-hero,
  :root[data-theme="dark"] .special-popup-note,
  :root[data-theme="dark"] .special-popup-metrics article,
  :root[data-theme="dark"] .special-popup-records article,
  :root[data-theme="dark"] .special-popup-insights article,
  :root[data-theme="dark"] .special-popup-role-grid article,
  :root[data-theme="dark"] .special-popup-users article,
  :root[data-theme="dark"] .special-popup-report,
  :root[data-theme="dark"] .special-popup-report > header,
  :root[data-theme="dark"] .special-popup-report-stats span,
  :root[data-theme="dark"] .special-popup-issues article,
  :root[data-theme="dark"] .key-stage-license-card,
  :root[data-theme="dark"] .key-stage-license-grid {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-modal) !important;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] .key-stage-license-card.current {
    border-color: #6F89A6 !important;
    box-shadow: inset 0 0 0 1px rgba(143,214,211,.22) !important;
  }
  :root[data-theme="dark"] .key-stage-license-status,
  :root[data-theme="dark"] .special-popup-report > header span,
  :root[data-theme="dark"] .special-popup-user-avatar {
    color: var(--dm-accent) !important;
  }
  :root[data-theme="dark"] .special-popup-user-avatar {
    background: linear-gradient(135deg,#22354D,#183B3D) !important;
    border: 1px solid var(--dm-border) !important;
  }
  :root[data-theme="dark"] .modal-panel .close,
  :root[data-theme="dark"] .modal-panel [data-close-modal],
  :root[data-theme="dark"] .modal-panel .icon-button,
  :root[data-theme="dark"] .modal-panel .text-button {
    color: var(--dm-text) !important;
  }

  /* Settings / school setup / system update surfaces still using white boxes. */
  :root[data-theme="dark"] #app-shell .view :is(
    .form-section,.form-grid,.settings-grid,.settings-actions,.settings-card-head,
    .settings-card-footer,.settings-callout,.settings-data-summary,.settings-data-summary div,
    .school-logo-uploader,.school-logo-preview,.signatory-editor,.linked-signatory-value,
    .native-update-status,.native-update-status.green,.native-update-status.gold,.native-update-status.red,
    .native-update-progress,.native-update-notes,.cloud-account-intro,.cloud-conflict-grid article,
    .automation-note,.roster-auto-preview,.roster-picker,.roster-options label
  ) {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-surface) !important;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] #app-shell .view .native-update-progress {
    background: #0F1828 !important;
  }
  :root[data-theme="dark"] #app-shell .view .native-update-progress > span {
    background: linear-gradient(90deg,#2A4161,#516A91) !important;
  }

  /* Classes page / subject class records. */
  :root[data-theme="dark"] #app-shell .view :is(
    .class-meta div,.class-card-footer,.class-card-header,.roster-card-actions,
    .tag,.required-subject,.subject-position
  ) {
    border-color: var(--dm-border) !important;
  }
  :root[data-theme="dark"] #app-shell .view .class-meta div {
    color: var(--dm-text) !important;
    background: var(--dm-control) !important;
  }
  :root[data-theme="dark"] #app-shell .view .class-meta small,
  :root[data-theme="dark"] #app-shell .view .class-card p,
  :root[data-theme="dark"] #app-shell .view .class-card-footer span,
  :root[data-theme="dark"] #app-shell .view .roster-card > small {
    color: var(--dm-muted) !important;
  }

  /* Grade Sheet summary rows / toolbars / subject manager strip. */
  :root[data-theme="dark"] #app-shell .view :is(
    .summary-toolbar,.summary-tabs,.subject-manager,.subject-manager-head,
    .subject-order-item,.subject-order-actions button,.smart-tools,.smart-tools > label,
    .sshs-grade-sheet-action-row,.sshs-grade-sheet-controls,.sshs-advisory-grade-sheet-switcher,
    .sshs-advisory-grade-sheet-switcher-heading,.sshs-advisory-grade-sheet-tabs,.sshs-advisory-grade-sheet-tab
  ) {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-surface) !important;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] #app-shell .view .summary-tabs button,
  :root[data-theme="dark"] #app-shell .view .subject-order-actions button,
  :root[data-theme="dark"] #app-shell .view .sshs-advisory-grade-sheet-tab {
    color: var(--dm-text) !important;
    background: var(--dm-control) !important;
    border-color: var(--dm-border) !important;
  }
  :root[data-theme="dark"] #app-shell .view .summary-tabs button.active,
  :root[data-theme="dark"] #app-shell .view .sshs-advisory-grade-sheet-tab.active {
    color: var(--dm-text) !important;
    background: var(--dm-raised) !important;
    border-color: #6F89A6 !important;
  }

  /* School Forms / SF9 control strips: dark navigation only, preview paper stays white. */
  :root[data-theme="dark"] #app-shell .route-reports :is(
    .sf9-controls,.sf9-visibility-controls,.sf9-visibility-controls > div,.sf9-grade-command-row,
    .sf9-report-data-toggle-group,.sf9-attendance-reprint-controls,.sf9-attendance-month-grid,
    .sf9-live-data-editor,.sf9-live-editor-grid,.sf9-live-remarks-row,
    .sf9-live-remarks .sf9-comments,.sf9-live-remarks .sf9-comments div,
    .sf9-live-remarks-row .sf9-comments,.sf9-live-remarks-row .sf9-comment-entry,
    .sf9-comments,.sf9-inline-help,.sf9-remarks-language-toggle,.checkbox-line,
    .sf9-exact-preview-status,.report-compliance-panel,.report-compliance-panel > div
  ) {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-surface) !important;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] #app-shell .route-reports .sf9-controls label,
  :root[data-theme="dark"] #app-shell .route-reports .sf9-visibility-controls > span,
  :root[data-theme="dark"] #app-shell .route-reports .sf9-attendance-reprint-controls > span,
  :root[data-theme="dark"] #app-shell .route-reports .sf9-live-data-editor > summary span,
  :root[data-theme="dark"] #app-shell .route-reports .sf9-reprint-note {
    color: var(--dm-muted) !important;
  }
  :root[data-theme="dark"] #app-shell .route-reports :is(
    .sf9-visibility-toggle,.sf9-inline-toggle,.sf9-attendance-month-button,.sf9-attendance-print-selected,
    .sf9-live-data-editor > summary,.sf9-remarks-language-toggle
  ) {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-control) !important;
  }
  :root[data-theme="dark"] #app-shell .route-reports :is(
    .sf9-visibility-toggle.active,.sf9-attendance-month-button.active,.sf9-inline-toggle.active
  ) {
    color: var(--dm-text) !important;
    background: var(--dm-raised) !important;
    border-color: #6F89A6 !important;
  }
  :root[data-theme="dark"] #app-shell .route-reports .sf9-inline-toggle input,
  :root[data-theme="dark"] #app-shell .route-reports .sf9-remarks-language-toggle input,
  :root[data-theme="dark"] #app-shell .route-reports .checkbox-line input {
    accent-color: #8FD6D3 !important;
  }

  /* Preserve the actual document paper as white in dark mode. */
  :root[data-theme="dark"] #app-shell .route-reports :is(
    .report-preview-scroll .sf9-exact-paper,
    .report-preview-scroll .sf9-excel-preview-shell,
    .report-preview-scroll .sf9-live-official-stage,
    .report-preview-scroll .sf9-official-live-paper,
    .report-preview-scroll .sf9-template-live-paper
  ) {
    background-color: #FFFFFF !important;
  }

  /* MAPEH / School Forms secondary switches that still appear light. */
  :root[data-theme="dark"] #app-shell .view :is(
    .mapeh-view-tabs,.mapeh-view-tabs button,.school-form-card,.school-form-card.coming-soon,
    .school-form-card-icon,.school-forms-workspace,.school-forms-grid,.school-form-actions,
    .report-preview-scroll,.report-card
  ) {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] #app-shell .view .mapeh-view-tabs,
  :root[data-theme="dark"] #app-shell .view .report-preview-scroll {
    background: var(--dm-surface) !important;
  }
  :root[data-theme="dark"] #app-shell .view .mapeh-view-tabs button,
  :root[data-theme="dark"] #app-shell .view .school-form-actions .button {
    color: var(--dm-text) !important;
    background: var(--dm-control) !important;
    border-color: var(--dm-border) !important;
  }

  /* Loaders / branded loading cards also follow dark mode. */
  :root[data-theme="dark"] .app-loader {
    color: var(--dm-text) !important;
    background: rgba(7, 13, 24, .70) !important;
  }
  :root[data-theme="dark"] .app-loader-brand strong,
  :root[data-theme="dark"] .app-loader p {
    color: var(--dm-text) !important;
    text-shadow: none !important;
  }
  :root[data-theme="dark"] .app-loader-progress {
    background: rgba(255,255,255,.10) !important;
    box-shadow: none !important;
  }

  /* Bottom navigation and utility buttons should also remain dark. */
  :root[data-theme="dark"] .bottom-nav,
  :root[data-theme="dark"] .bottom-nav .nav-item,
  :root[data-theme="dark"] #app-shell .view :is(.text-button,.danger-text) {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: transparent !important;
  }
}

/* v1.0.78 strict dark mode refinement 2 — complete popup/profile/special-features cleanup. */
@media screen {
  /* Global readability for UI surfaces only. */
  :root[data-theme="dark"] #app-shell .view :is(
    .metric-card,.panel,.class-card,.roster-card,.report-card,.settings-card,.form-card,
    .record-controls,.analysis-controls,.summary-toolbar,.summary-tabs,.subject-manager,
    .school-form-card,.special-guide-card,.special-feature-card,.special-features-hero,
    .teacher-toolkit-hero,.teacher-toolkit-context,.teacher-toolkit-tabs,.teacher-toolkit-metrics article,
    .mapeh-controls,.mapeh-view-tabs,.mapeh-record-stat,.native-update-status,.cloud-account-intro,
    .class-meta div,.profile-photo-editor,.profile-photo-preview,.curriculum-profile-card,.key-stage-license-card,
    .sshs-grade-sheet-controls,.sshs-advisory-grade-sheet-switcher,.sshs-advisory-grade-sheet-tab,
    .special-popup-alert,.special-popup-note,.special-popup-report,.special-popup-report > header,
    .settings-data-summary,.settings-data-summary div,.school-logo-uploader,.school-logo-preview
  ) :is(h1,h2,h3,h4,h5,h6,strong,b,span,small,p,label,legend,button,svg) {
    color: var(--dm-text) !important;
  }

  /* Teacher profile popup and similar popups */
  :root[data-theme="dark"] .modal-panel,
  :root[data-theme="dark"] .modal-panel > header,
  :root[data-theme="dark"] .modal-panel #modal-content,
  :root[data-theme="dark"] .modal-panel .profile-photo-editor,
  :root[data-theme="dark"] .modal-panel .profile-photo-preview,
  :root[data-theme="dark"] .modal-panel .form-actions,
  :root[data-theme="dark"] .modal-panel .delete-confirmation,
  :root[data-theme="dark"] .modal-panel .form-grid,
  :root[data-theme="dark"] .modal-panel .form-grid label,
  :root[data-theme="dark"] .modal-panel .curriculum-profile-card {
    background: var(--dm-modal) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] .modal-panel h2,
  :root[data-theme="dark"] .modal-panel strong,
  :root[data-theme="dark"] .modal-panel label,
  :root[data-theme="dark"] .modal-panel p,
  :root[data-theme="dark"] .modal-panel small,
  :root[data-theme="dark"] .modal-panel .tag,
  :root[data-theme="dark"] .modal-panel svg,
  :root[data-theme="dark"] .modal-panel .close,
  :root[data-theme="dark"] .modal-panel [data-close-modal] {
    color: var(--dm-text) !important;
  }
  :root[data-theme="dark"] .modal-panel :is(input,select,textarea),
  :root[data-theme="dark"] .modal-panel .button.secondary,
  :root[data-theme="dark"] .modal-panel .button.danger,
  :root[data-theme="dark"] .modal-panel .profile-file-button,
  :root[data-theme="dark"] .modal-panel .curriculum-profile-card.selected,
  :root[data-theme="dark"] .modal-panel .curriculum-profile-card:has(input:checked) {
    background: var(--dm-control) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
  }
  :root[data-theme="dark"] .modal-panel .button.primary {
    color: #FFFFFF !important;
  }

  /* Special Features hero count and metric/icon readability */
  :root[data-theme="dark"] #app-shell .special-features-hero,
  :root[data-theme="dark"] #app-shell .special-features-hero-count,
  :root[data-theme="dark"] #app-shell .special-features-hero-icon,
  :root[data-theme="dark"] #app-shell .metric-card,
  :root[data-theme="dark"] #app-shell .metric-card .metric-icon {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
  }
  :root[data-theme="dark"] #app-shell .special-features-hero-count strong,
  :root[data-theme="dark"] #app-shell .special-features-hero-count span,
  :root[data-theme="dark"] #app-shell .special-features-hero h2,
  :root[data-theme="dark"] #app-shell .special-features-hero p,
  :root[data-theme="dark"] #app-shell .special-features-hero-copy > span,
  :root[data-theme="dark"] #app-shell .special-features-hero svg,
  :root[data-theme="dark"] #app-shell .metric-card strong,
  :root[data-theme="dark"] #app-shell .metric-card p,
  :root[data-theme="dark"] #app-shell .metric-card span,
  :root[data-theme="dark"] #app-shell .metric-card svg {
    color: var(--dm-text) !important;
  }

  /* Class record small stat boxes */
  :root[data-theme="dark"] #app-shell .view .class-meta div,
  :root[data-theme="dark"] #app-shell .view .tag,
  :root[data-theme="dark"] #app-shell .view .required-subject,
  :root[data-theme="dark"] #app-shell .view .subject-position {
    background: var(--dm-control) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
  }

  /* Grade sheet / selector strips / grade slip selector bars */
  :root[data-theme="dark"] #app-shell .view .record-controls,
  :root[data-theme="dark"] #app-shell .view .analysis-controls,
  :root[data-theme="dark"] #app-shell .view .summary-tabs,
  :root[data-theme="dark"] #app-shell .view .summary-toolbar,
  :root[data-theme="dark"] #app-shell .view .subject-manager,
  :root[data-theme="dark"] #app-shell .view .grade-slip-preview-scroll,
  :root[data-theme="dark"] #app-shell .view .analysis-scroll,
  :root[data-theme="dark"] #app-shell .view .report-preview-scroll {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
  }
  :root[data-theme="dark"] #app-shell .view .record-controls .form-help,
  :root[data-theme="dark"] #app-shell .view .analysis-controls .form-help,
  :root[data-theme="dark"] #app-shell .view .summary-toolbar small,
  :root[data-theme="dark"] #app-shell .view .summary-toolbar p {
    color: var(--dm-muted) !important;
  }
  /* Keep paper previews intact, but darken the preview shell around them. */
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-preview-scroll,
  :root[data-theme="dark"] #app-shell .route-lir .report-preview-scroll,
  :root[data-theme="dark"] #app-shell .route-itemanalysis .analysis-scroll {
    background: #0F1828 !important;
  }

  /* Ensure common buttons and icons are readable across dark mode pages. */
  :root[data-theme="dark"] #app-shell .view :is(.button,.icon-button,.text-button,.danger-text,.top-profile,.top-profile-copy,strong,small,svg) {
    color: var(--dm-text);
  }
  :root[data-theme="dark"] #app-shell .view :is(.button.secondary,.button.danger,.school-forms-back.icon-button,.icon-button,.text-button,.summary-tabs button,.mapeh-view-tabs button,.teacher-toolkit-tabs button,.subject-order-actions button,.sshs-advisory-grade-sheet-tab) {
    background: var(--dm-control) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
  }
}


/* Grade Slip document preview exemption — keep the printable paper natural in dark mode,
   exactly like the SF9 preview. Only the surrounding application UI remains dark. */
@media screen {
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-landscape-sheet {
    color: #171717 !important;
    background: #e8e8e5 !important;
    border-color: #D9E4E8 !important;
    box-shadow: var(--shadow-sm) !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact.grade-slip-print-copy {
    color: #171717 !important;
    background: #FFFFFF !important;
    border-color: #D9E4E8 !important;
    box-shadow: 0 8px 22px rgba(21,31,59,.08) !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-logo-frame,
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-identity > div,
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-section-title {
    background: #F5F8FA !important;
    border-color: #D9E4E8 !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-heading-copy > span {
    color: #2F817B !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-header h2,
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-identity strong,
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-section-title,
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-section-title span,
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-footer strong {
    color: #171717 !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-header p,
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-identity span,
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-footer span {
    color: #636C77 !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-section-title small {
    color: #516A91 !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-table,
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-table tbody,
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-table tr,
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-table td {
    color: #171717 !important;
    background: transparent !important;
    border-color: #636C77 !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-table thead th {
    color: #222222 !important;
    background: #F5F8FA !important;
    border-color: #636C77 !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-table .gs-general-average th,
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-table .gs-term-average th {
    color: #171717 !important;
    background: #F5F8FA !important;
    border-color: #636C77 !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-table .gs-term-average th:nth-last-child(-n+2) {
    background: #C7C7C7 !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-table .failed {
    color: #8A1C1C !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact + .grade-slip-exact {
    border-color: #D9E4E8 !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-header {
    border-color: #D9E4E8 !important;
  }
  :root[data-theme="dark"] #app-shell .route-gradeslip .grade-slip-exact-footer strong {
    border-bottom-color: #171717 !important;
  }
}


/* v1.0.78 strict dark mode refinement 3 — warnings, notes, and validation cards. */
@media screen {
  :root[data-theme="dark"] #app-shell .view :is(
    .validation-banner,
    .validation-banner.warning,
    .validation-banner.error,
    .special-popup-alert,
    .special-popup-alert.warning,
    .special-popup-alert.success,
    .special-popup-alert.danger,
    .special-popup-note,
    .special-popup-records article,
    .special-popup-record-index,
    .special-popup-empty,
    .special-popup-empty.success,
    .special-popup-insights article,
    .special-feature-modal .confirmation-panel,
    .special-popup-form,
    .special-popup-role-grid article,
    .special-popup-users article,
    .special-popup-users article.inactive,
    .special-popup-report,
    .special-popup-report > header,
    .special-popup-report > header.warning,
    .special-popup-report > header.error,
    .special-popup-report > header b,
    .special-popup-report-stats span,
    .special-popup-issues article,
    .compliance-note,
    .compliance-blocker,
    .custom-weight-warning,
    .jhs-grade-source-panel,
    .automation-note,
    .tour-card,
    .tour-progress,
    .toolkit-inline-notice,
    .toolkit-empty-state,
    .toolkit-output-empty,
    .toolkit-output-resource,
    .toolkit-history-list > article,
    .toolkit-rubric-library > article,
    .toolkit-feedback-library > article,
    .toolkit-rubric-format,
    .toolkit-feedback-context > div,
    .toolkit-rubric-rating-grid article,
    .coming-soon-card,
    .native-update-notes
  ) {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: none !important;
  }

  :root[data-theme="dark"] #app-shell .view :is(
    .validation-banner strong,
    .validation-banner span,
    .special-popup-alert strong,
    .special-popup-alert span,
    .special-popup-note p,
    .special-popup-note .icon,
    .special-popup-records strong,
    .special-popup-records span,
    .special-popup-records small,
    .special-popup-record-index,
    .special-popup-empty,
    .special-popup-empty strong,
    .special-popup-empty .icon,
    .special-popup-insights article span,
    .special-popup-insights article strong,
    .special-popup-insights article p,
    .special-popup-form-title span,
    .special-popup-form-title strong,
    .special-popup-role-grid article strong,
    .special-popup-role-grid article span,
    .special-popup-users strong,
    .special-popup-users span,
    .special-popup-users small,
    .special-popup-user-avatar,
    .special-popup-report > header span,
    .special-popup-report > header strong,
    .special-popup-report > header b,
    .special-popup-report-stats span,
    .compliance-note,
    .compliance-blocker,
    .custom-weight-warning,
    .jhs-grade-source-panel,
    .automation-note strong,
    .automation-note span,
    .toolkit-inline-notice,
    .toolkit-empty-state,
    .toolkit-output-empty,
    .toolkit-output-resource,
    .toolkit-history-list > article *,
    .native-update-notes,
    .tour-card *,
    .tour-progress *,
    .coming-soon-card *
  ) {
    color: var(--dm-text) !important;
  }

  :root[data-theme="dark"] #app-shell .view :is(
    .special-popup-alert.success strong,
    .special-popup-alert.warning strong,
    .special-popup-alert.danger strong,
    .special-popup-report > header b,
    .special-popup-record-index,
    .special-popup-user-avatar,
    .special-popup-note .icon
  ) {
    color: #FFFFFF !important;
    background: var(--dm-control) !important;
    border-color: var(--dm-border) !important;
  }

  :root[data-theme="dark"] #app-shell .view :is(
    .validation-banner.warning,
    .validation-banner.error,
    .special-popup-alert.warning,
    .special-popup-alert.success,
    .special-popup-alert.danger,
    .special-popup-report > header.warning,
    .special-popup-report > header.error,
    .compliance-note,
    .compliance-blocker,
    .custom-weight-warning,
    .automation-note,
    .native-update-notes
  ) {
    border-left: 3px solid #6F89A6 !important;
  }
}


/* v1.0.78 strict dark mode refinement 4 — Dashboard Quick Actions. */
@media screen {
  :root[data-theme="dark"] #app-shell .route-dashboard .quick-grid,
  :root[data-theme="dark"] #app-shell .view .quick-grid {
    background: transparent !important;
  }

  :root[data-theme="dark"] #app-shell .route-dashboard .quick-action,
  :root[data-theme="dark"] #app-shell .view .quick-action {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background: var(--dm-control) !important;
    box-shadow: none !important;
  }

  :root[data-theme="dark"] #app-shell .route-dashboard .quick-action :is(span,svg),
  :root[data-theme="dark"] #app-shell .view .quick-action :is(span,svg) {
    color: #FFFFFF !important;
    fill: currentColor !important;
  }

  :root[data-theme="dark"] #app-shell .route-dashboard .quick-action:hover,
  :root[data-theme="dark"] #app-shell .route-dashboard .quick-action:focus-visible,
  :root[data-theme="dark"] #app-shell .view .quick-action:hover,
  :root[data-theme="dark"] #app-shell .view .quick-action:focus-visible {
    color: #FFFFFF !important;
    border-color: #6F89A6 !important;
    background: var(--dm-control-hover) !important;
  }
}


/* v1.0.78 dark mode rev7 — modal validation/warning cards outside #app-shell .view */
@media screen {
  :root[data-theme="dark"] :is(
    .validation-banner,
    .validation-banner.warning,
    .validation-banner.error,
    .special-popup-alert,
    .special-popup-alert.warning,
    .special-popup-alert.success,
    .special-popup-alert.danger,
    .special-popup-note,
    .special-popup-issues,
    .special-popup-issues .validation-banner,
    .special-popup-issues > div,
    .compliance-note,
    .compliance-blocker,
    .custom-weight-warning,
    .automation-note,
    .native-update-notes
  ) {
    background: #162337 !important;
    background-color: #162337 !important;
    color: #F3F7FB !important;
    border-color: #415272 !important;
    box-shadow: none !important;
  }

  :root[data-theme="dark"] :is(
    .validation-banner strong,
    .validation-banner span,
    .special-popup-alert strong,
    .special-popup-alert span,
    .special-popup-note strong,
    .special-popup-note span,
    .special-popup-note p,
    .special-popup-issues .validation-banner strong,
    .special-popup-issues .validation-banner span,
    .compliance-note strong,
    .compliance-note span,
    .compliance-blocker strong,
    .compliance-blocker span,
    .custom-weight-warning strong,
    .custom-weight-warning span,
    .automation-note strong,
    .automation-note span,
    .native-update-notes,
    .native-update-notes *
  ) {
    color: #F3F7FB !important;
  }

  :root[data-theme="dark"] :is(
    .validation-banner.warning,
    .validation-banner.error,
    .special-popup-alert.warning,
    .special-popup-alert.success,
    .special-popup-alert.danger,
    .compliance-note,
    .compliance-blocker,
    .custom-weight-warning,
    .automation-note,
    .native-update-notes
  ) {
    border-left: 3px solid #6F89A6 !important;
  }
}


/* v1.0.78 dark mode REV9 — SF2 screen workspace completion. */
@media screen {
  /* Quick-code legend and SF2 help cards: no white chips in dark mode. */
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-code-legend,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-code-legend span,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-help-codes,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-help-codes span {
    color: #F3F7FB !important;
    background: transparent !important;
  }
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-code-legend b,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-help-codes b {
    color: #FFFFFF !important;
    border-color: #415272 !important;
    background: #111D31 !important;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-help-codes span {
    border-color: #415272 !important;
    background: #18243A !important;
  }
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-code-legend strong,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-help-codes small {
    color: #F3F7FB !important;
  }

  /* SF2 attendance workspace cells and markers. */
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .sf2-day-cell,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .sf2-day-cell.inactive,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .sf2-total,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .present-total,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-app-day-head.inactive {
    color: #F3F7FB !important;
    background: #111D31 !important;
    border-color: #415272 !important;
  }
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .sf2-mark,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .sf2-mark.mark-present,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .sf2-mark.mark-x,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .sf2-mark.mark-h,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .sf2-mark.mark-l,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .sf2-mark.mark-c {
    color: #FFFFFF !important;
    background: #111D31 !important;
  }
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .sf2-mark:hover,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .sf2-mark:focus {
    color: #FFFFFF !important;
    background: #24364F !important;
    outline-color: #8FD6D3 !important;
  }
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .sf2-app-remarks select,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-workspace-table .sf2-app-remarks input,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-remarks select,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-remarks input {
    color: #F3F7FB !important;
    border-color: #415272 !important;
    background: #111D31 !important;
  }
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-app-day-head.inactive span,
  :root[data-theme="dark"] #app-shell .route-sf2 .sf2-app-day-head.inactive small {
    color: #9DABBA !important;
  }

  /* Keep actual printed SF2 output natural. */
  body.printing-sf2 .sf2-sheet,
  body.printing-sf2 .sf2-sheet * {
    color: revert !important;
  }
}

/* v1.2.34 / Build 347: the lower Grade Sheet strip is transparent, while the
   main navigation remains a rounded raised card in dark mode. */
@media screen {
  :root[data-theme="dark"] #app-shell .route-smartsis .g2to10-grade-sheet-summary-toolbar,
  :root[data-theme="dark"] #app-shell .route-smartsis .sshs-grade-sheet-summary-toolbar {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] #app-shell .route-smartsis .g2to10-grade-sheet-toolbar,
  :root[data-theme="dark"] #app-shell .route-smartsis .sshs-grade-sheet-toolbar {
    border-color: var(--line) !important;
    background: var(--surface) !important;
    box-shadow:
      0 14px 30px rgba(0,0,0,.34),
      0 3px 8px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }
  :root[data-theme="dark"] #app-shell .route-smartsis .g2to10-grade-sheet-toolbar select,
  :root[data-theme="dark"] #app-shell .route-smartsis .g2to10-grade-sheet-toolbar > .button,
  :root[data-theme="dark"] #app-shell .route-smartsis .sshs-grade-sheet-toolbar select,
  :root[data-theme="dark"] #app-shell .route-smartsis .sshs-grade-sheet-toolbar input,
  :root[data-theme="dark"] #app-shell .route-smartsis .sshs-grade-sheet-toolbar > .button {
    box-shadow:
      0 3px 0 rgba(0,0,0,.3),
      0 8px 17px rgba(0,0,0,.25),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }
}