/*
 * NephScola central component colour contract.
 *
 * The appearance registry owns semantic tokens. This layer maps those tokens
 * to shared components without changing their geometry, typography or layout.
 */

:root {
  --color-structural-dark: #07284c;
  --color-topbar-bg: #1b75ce;
  --color-topbar-text: #fff;
  --color-topbar-muted: rgba(255, 255, 255, .82);
  --color-sidebar-active-text: #fff;
  --color-sidebar-divider: rgba(255, 255, 255, .2);
  --color-primary-active: color-mix(in srgb, var(--color-primary) 82%, black);
  --color-primary-focus-ring: color-mix(in srgb, var(--color-primary) 24%, transparent);
  --color-app-background: var(--color-page-bg);
  --color-surface-subtle: var(--color-surface-muted);
  --color-surface-selected: var(--color-selected-row);
  --color-text-on-primary: #fff;
  --color-text-on-secondary: #fff;
  --color-text-on-dark: #fff;
  --color-divider: var(--color-border);
  --button-primary-bg: var(--color-primary);
  --button-primary-hover: var(--color-primary-hover);
  --button-primary-active: var(--color-primary-active);
  --button-primary-text: var(--color-text-on-primary);
  --button-secondary-bg: var(--color-surface);
  --button-secondary-border: var(--color-border-strong);
  --button-secondary-text: var(--color-text-primary);
  --button-secondary-hover: var(--color-primary-soft);
  --table-bg: var(--color-surface);
  --table-header-bg: var(--color-table-header);
  --table-header-text: var(--color-text-primary);
  --table-row-odd-bg: var(--color-surface);
  --table-row-even-bg: var(--color-surface-muted);
  --table-row-hover-bg: var(--color-primary-soft);
  --table-row-selected-bg: var(--color-selected-row);
  --table-border: var(--color-border);
  --table-link: var(--color-primary);
  --table-muted-text: var(--color-text-secondary);
  --table-sticky-bg: var(--table-bg);
  --field-bg: var(--color-surface);
  --field-text: var(--color-text-primary);
  --field-border: var(--color-border);
  --field-placeholder: var(--color-text-muted);
  --field-hover-border: var(--color-border-strong);
  --field-focus-border: var(--color-primary);
  --field-focus-ring: var(--color-primary-focus-ring);
  --field-readonly-bg: var(--color-surface-muted);
  --field-disabled-bg: var(--color-page-bg);
  --field-disabled-text: var(--color-text-muted);
  --menu-bg: var(--color-surface-raised);
  --menu-border: var(--color-border);
  --menu-text: var(--color-text-primary);
  --menu-muted-text: var(--color-text-secondary);
  --menu-hover-bg: var(--color-primary-soft);
  --menu-selected-bg: var(--color-selected-row);
  --menu-selected-text: var(--color-primary);
  --menu-divider: var(--color-divider);
  --tab-inactive-text: var(--color-text-secondary);
  --tab-hover-bg: var(--color-primary-soft);
  --tab-active-bg: var(--color-primary-soft);
  --tab-active-text: var(--color-primary);
  --tab-active-indicator: var(--color-primary);
  --card-bg: var(--color-surface);
  --card-soft-bg: var(--color-surface-muted);
  --card-selected-bg: var(--color-selected-row);
  --modal-bg: var(--color-surface-raised);
  --modal-header-bg: var(--color-primary-soft);
  --modal-footer-bg: var(--color-surface-muted);
  --modal-title: var(--color-text-primary);
  --tooltip-bg: var(--color-sidebar-bg);
  --tooltip-text: var(--color-text-on-dark);
  --vertical-nav-bg: #07284c;
  --vertical-nav-text: #fff;
  --vertical-nav-hover: rgba(255, 255, 255, .13);
  --vertical-nav-active: #1b75ce;
  --vertical-nav-divider: rgba(255, 255, 255, .22);
}

html[data-theme="nephscola-default"][data-resolved-mode="light"] {
  --color-primary: #1b75ce;
  --color-primary-hover: #1667b8;
  --color-primary-active: #12599e;
  --color-primary-soft: #ecf3fd;
  --color-secondary: #3b91f7;
  --color-secondary-soft: #edf5ff;
  --color-accent: #6159fc;
  --color-accent-soft: #efefff;
  --color-structural-dark: #07284c;
  --color-app-background: #f3f5f8;
  --color-surface: #fff;
  --color-surface-raised: #fff;
  --color-surface-subtle: #f7fafd;
  --color-surface-selected: #dbe9fb;
  --color-hero-surface: #ecf3fd;
  --color-hero-border: #bfd6f2;
  --color-text-primary: #17253a;
  --color-text-secondary: #66758a;
  --color-text-muted: #8b98a9;
  --color-text-on-primary: #fff;
  --color-text-on-secondary: #fff;
  --color-text-on-dark: #fff;
  --color-border: #dce3ec;
  --color-border-strong: #c9d4e2;
  --color-divider: #dce3ec;
  --color-success: #16a36a;
  --color-success-soft: #ecf8f3;
  --color-success-text: #0b6b45;
  --color-warning: #f59e0b;
  --color-warning-soft: #fef7eb;
  --color-warning-text: #8a5700;
  --color-danger: #e5484d;
  --color-danger-soft: #fdf0f1;
  --color-danger-text: #b4232a;
  --color-info: #2383e2;
  --color-info-soft: #ecf4fd;
  --color-info-text: #12599e;
  --color-neutral: #66758a;
  --color-neutral-soft: #f3f5f8;
  --color-topbar-bg: #1b75ce;
  --color-topbar-text: #fff;
  --color-topbar-muted: rgba(255, 255, 255, .82);
  --color-sidebar-bg: #07284c;
  --color-sidebar-surface: #051f3c;
  --color-sidebar-hover: rgba(255, 255, 255, .13);
  --color-sidebar-active: #1b75ce;
  --color-sidebar-text: #fff;
  --color-sidebar-muted: rgba(255, 255, 255, .74);
  --color-sidebar-divider: rgba(255, 255, 255, .2);
  --table-bg: #fff;
  --table-header-bg: #e2eefc;
  --table-header-text: #17253a;
  --table-row-odd-bg: #fff;
  --table-row-even-bg: #f7fafd;
  --table-row-hover-bg: #ecf3fd;
  --table-row-selected-bg: #dbe9fb;
  --table-border: #dce3ec;
  --table-link: #1b75ce;
  --table-muted-text: #66758a;
  --table-sticky-bg: #fff;
  --field-bg: #fff;
  --field-text: #17253a;
  --field-border: #dce3ec;
  --field-placeholder: #8b98a9;
  --field-hover-border: #c9d4e2;
  --field-focus-border: #1b75ce;
  --field-focus-ring: rgba(27, 117, 206, .24);
  --field-readonly-bg: #f7fafd;
  --field-disabled-bg: #f3f5f8;
  --field-disabled-text: #8b98a9;
  --menu-bg: #fff;
  --menu-border: #dce3ec;
  --menu-text: #17253a;
  --menu-muted-text: #66758a;
  --menu-hover-bg: #ecf3fd;
  --menu-selected-bg: #dbe9fb;
  --menu-selected-text: #1b75ce;
  --menu-divider: #dce3ec;
  --vertical-nav-bg: #1b75ce;
  --vertical-nav-text: #fff;
  --vertical-nav-hover: rgba(255, 255, 255, .13);
  --vertical-nav-active: #3b91f7;
  --modal-overlay: rgba(7, 40, 76, .62);
  --modal-bg: #fff;
  --modal-header-bg: #ecf3fd;
  --modal-footer-bg: #f7fafd;
  --modal-title: #17253a;
  --tooltip-bg: #07284c;
  --tooltip-text: #fff;
  --pagination-bg: #fff;
  --pagination-hover-bg: #ecf3fd;
  --pagination-current-bg: #1b75ce;
  --pagination-current-text: #fff;
  --chart-1: #1b75ce;
  --chart-2: #6159fc;
  --chart-3: #16a36a;
  --chart-4: #f59e0b;
  --chart-5: #0891b2;
  --chart-6: #e5484d;
  --chart-grid: #dce3ec;
  --chart-axis: #66758a;
  --chart-legend: #17253a;
  --chart-tooltip-bg: #07284c;
  --chart-tooltip-text: #fff;
  --chart-inactive: #c9d4e2;
  --chart-empty: #8b98a9;
}

/* Approved shell colours for every registered theme. */
.topbar {
  color: var(--color-topbar-text) !important;
  border-color: color-mix(in srgb, var(--color-topbar-text) 16%, transparent) !important;
  background: var(--color-topbar-bg) !important;
}
.topbar :is(.top-school-identity strong, .top-school-identity span, .profile-trigger strong, .profile-trigger small) { color: inherit !important; }
.topbar :is(.language-selector, .header-icon-button, .profile-trigger, .menu-toggle) {
  color: var(--color-topbar-text) !important;
  border-color: color-mix(in srgb, var(--color-topbar-text) 30%, transparent) !important;
  background: color-mix(in srgb, var(--color-topbar-text) 8%, transparent) !important;
}
.topbar :is(.language-selector, .header-icon-button, .profile-trigger, .menu-toggle):hover {
  color: var(--color-topbar-text) !important;
  border-color: color-mix(in srgb, var(--color-topbar-text) 48%, transparent) !important;
  background: color-mix(in srgb, var(--color-topbar-text) 16%, transparent) !important;
}
.topbar .search-box { color: var(--color-text-primary) !important; border-color: var(--color-border) !important; background: var(--color-surface) !important; }
.topbar .search-box :is(input, svg) { color: var(--color-text-primary) !important; }
.topbar .profile-avatar { color: var(--color-primary) !important; background: var(--color-surface) !important; }
.sidebar { background: var(--color-sidebar-bg) !important; }
.nav-group-items { background: color-mix(in srgb, var(--color-sidebar-surface) 80%, transparent) !important; }
.brand { border-bottom-color: var(--color-sidebar-divider) !important; }
:is(.nav-group a.active, .nav-dashboard-link.active, .app-shell.sidebar-collapsed .nav-group.active-parent > .nav-group-toggle) {
  color: var(--color-sidebar-active-text) !important;
  background: var(--color-sidebar-active) !important;
}

/* Shared workspace and surfaces. */
#appShell, #pageContent, .page-content, .main, .consolidated-page { color: var(--color-text-primary); background: var(--color-app-background); }
:is(.panel, .card, .content-card, .dashboard-card, .dashboard-panel, .table-card, .data-table-shell, .finance-card, .attendance-card, .consolidated-panel, [class*="-workspace-card"]) {
  color: var(--color-text-primary);
  border-color: var(--color-border) !important;
  background: var(--card-bg) !important;
}
:is(.soft-card, .context-card, .information-card, [class*="-soft-card"]) { background: var(--card-soft-bg) !important; }
:is(.selected-card, .interactive-card[aria-selected="true"], [aria-current="true"].card) { background: var(--card-selected-bg) !important; }
:is(.hero-card, .context-hero, .communication-future-hero, .school-calendar-hero) {
  color: var(--color-text-primary) !important;
  border-color: var(--color-hero-border) !important;
  background: var(--color-hero-surface) !important;
}
:is(.hero-card, .context-hero, .communication-future-hero, .school-calendar-hero) :is(h1, h2, h3, p, span, label) { color: inherit !important; }

/* Buttons: geometry remains owned by the central UI system. */
:is(.primary-action, .primary-button, .btn-primary, button.primary, .appearance-primary-button, .floating-action, .floating-action-button, .fab, .global-quick-trigger, .ui-button--primary) {
  color: var(--button-primary-text) !important;
  border-color: var(--button-primary-bg) !important;
  background: var(--button-primary-bg) !important;
}
:is(.primary-action, .primary-button, .btn-primary, button.primary, .appearance-primary-button, .floating-action, .floating-action-button, .fab, .global-quick-trigger, .ui-button--primary):hover { background: var(--button-primary-hover) !important; }
:is(.primary-action, .primary-button, .btn-primary, button.primary, .appearance-primary-button, .floating-action, .floating-action-button, .fab, .global-quick-trigger, .ui-button--primary):active { background: var(--button-primary-active) !important; }
:is(.outline-action, .secondary-action, .outline-button, .btn-outline, .appearance-outline-button, .appearance-secondary-button, .ui-button):not(.ui-button--primary):not(.ui-button--danger) {
  color: var(--button-secondary-text) !important;
  border-color: var(--button-secondary-border) !important;
  background: var(--button-secondary-bg) !important;
}
:is(.outline-action, .secondary-action, .outline-button, .btn-outline, .appearance-outline-button, .appearance-secondary-button, .ui-button):not(.ui-button--primary):not(.ui-button--danger):hover { color: var(--color-primary) !important; background: var(--button-secondary-hover) !important; }
:is(.danger-action, .btn-danger, .ui-button--danger) { color: var(--color-danger) !important; border-color: color-mix(in srgb, var(--color-danger) 32%, var(--color-border)) !important; background: var(--color-danger-soft) !important; }
:is(.text-link, .strong-link, .link-button, .ui-button--ghost) { color: var(--color-primary) !important; }

/* Fields, selectors and editable wrappers. */
/* Explicit WhatsApp actions retain their semantic color across all modules. */
:is(#appShell,.ns-ui-overlay) :is(a,button):has(> svg[data-ns-glyph="whatsapp"]):not(:disabled):not([aria-disabled="true"]) {
  color:var(--color-success) !important;
  border-color:var(--color-success) !important;
}
:is(#appShell,.ns-ui-overlay) :is(a,button,span)[aria-disabled="true"]:has(> svg[data-ns-glyph="whatsapp"]) {
  color:var(--color-text-secondary) !important;
  border-color:var(--color-border) !important;
}
#appShell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, [role="combobox"], .search-input, .filter-control, .ui-field, .ns-ui-control),
.ns-ui-overlay :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, [role="combobox"], .ui-field, .ns-ui-control) {
  color: var(--field-text) !important;
  border-color: var(--field-border) !important;
  background-color: var(--field-bg) !important;
}
#appShell :is(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--field-hover-border) !important; }
#appShell :is(input, select, textarea, [role="combobox"]):focus,
#appShell :is(input, select, textarea, [role="combobox"]):focus-visible,
.ns-ui-overlay :is(input, select, textarea, [role="combobox"]):focus {
  border-color: var(--field-focus-border) !important;
  box-shadow: 0 0 0 3px var(--field-focus-ring) !important;
  outline: 0;
}
:is(input, textarea)::placeholder { color: var(--field-placeholder) !important; }
:is(input, select, textarea)[readonly] { background: var(--field-readonly-bg) !important; }
:is(input, select, textarea):disabled { color: var(--field-disabled-text) !important; background: var(--field-disabled-bg) !important; }
:is(input, select, textarea)[aria-invalid="true"], .field-error { border-color: var(--color-danger) !important; background: var(--color-danger-soft) !important; }
.field-success { border-color: var(--color-success) !important; background: var(--color-success-soft) !important; }

/* Standard table colour contract, including sticky actions and mobile cards. */
#appShell table.ns-ui-table,
#appShell :is(.data-table, .ui-table) { color: var(--color-text-primary); border-color: var(--table-border) !important; background: var(--table-bg) !important; }
#appShell table.ns-ui-table > thead > tr > th,
#appShell :is(.data-table, .ui-table) > thead > tr > th {
  color: var(--table-header-text) !important;
  border-bottom-color: var(--table-border) !important;
  background: var(--table-header-bg) !important;
}
#appShell table.ns-ui-table > tbody > tr:nth-child(odd) > td,
#appShell :is(.data-table, .ui-table) > tbody > tr:nth-child(odd) > td { background: var(--table-row-odd-bg) !important; }
#appShell table.ns-ui-table > tbody > tr:nth-child(even) > td,
#appShell :is(.data-table, .ui-table) > tbody > tr:nth-child(even) > td { background: var(--table-row-even-bg) !important; }
#appShell table.ns-ui-table > tbody > tr:hover > td,
#appShell :is(.data-table, .ui-table) > tbody > tr:hover > td { background: var(--table-row-hover-bg) !important; }
#appShell table.ns-ui-table > tbody > tr:is(.selected, [aria-selected="true"]) > td,
#appShell :is(.data-table, .ui-table) > tbody > tr:is(.selected, [aria-selected="true"]) > td { background: var(--table-row-selected-bg) !important; }
#appShell table.ns-ui-table td,
#appShell :is(.data-table, .ui-table) td { color: var(--color-text-primary); border-bottom-color: var(--table-border) !important; }
#appShell table.ns-ui-table a,
#appShell :is(.data-table, .ui-table) a { color: var(--table-link); }
#appShell table.ns-ui-table .ns-ui-table-actions { background: inherit !important; }
@media (max-width: 680px) {
  #appShell table.ns-ui-table--cards > tbody > tr { border-color: var(--table-border) !important; background: var(--card-bg) !important; }
  #appShell table.ns-ui-table--cards > tbody > tr > td { background: transparent !important; }
}

/* Menus, dropdowns and popovers. */
:is(.header-dropdown, .dropdown, .dropdown-menu, .context-menu, .popover, .account-dropdown, .tp-actions-menu, .student-action-menu > div, [role="menu"], [role="listbox"]) {
  color: var(--menu-text) !important;
  border-color: var(--menu-border) !important;
  background: var(--menu-bg) !important;
}
:is(.header-dropdown, .dropdown, .dropdown-menu, .context-menu, .popover, .account-dropdown, .tp-actions-menu, [role="menu"], [role="listbox"]) :is(a, button, [role="option"], [role="menuitem"]):hover,
:is([role="option"], [role="menuitem"]):focus-visible { color: var(--menu-selected-text) !important; background: var(--menu-hover-bg) !important; }
:is([role="option"][aria-selected="true"], [role="menuitem"][aria-current="true"]) { color: var(--menu-selected-text) !important; background: var(--menu-selected-bg) !important; }
:is(.dropdown-divider, .menu-divider, .account-menu-group + .account-menu-group) { border-color: var(--menu-divider) !important; }
.topbar .account-dropdown .account-menu-summary { color: var(--color-sidebar-text) !important; background: var(--color-sidebar-bg) !important; }
.topbar .account-dropdown .account-menu-summary :is(strong, span, small) { color: inherit !important; }
.topbar .account-dropdown .account-logout-group #logoutButton { color: var(--color-danger) !important; background: var(--color-danger-soft) !important; }

/* Tabs and secondary navigation. */
:is(.tabs, .page-tabs, .consolidated-tabs, .fcw-tabs, .fcw-subtabs, .fcw-segmented, [role="tablist"]):not(.tp-tabs) { border-color: var(--color-divider) !important; background: var(--color-surface) !important; }
:is(.tabs, .page-tabs, .consolidated-tabs, .fcw-tabs, .fcw-subtabs, .fcw-segmented, [role="tablist"]):not(.tp-tabs) :is(button, [role="tab"]) { color: var(--tab-inactive-text) !important; background: transparent !important; }
:is(.tabs, .page-tabs, .consolidated-tabs, .fcw-tabs, .fcw-subtabs, .fcw-segmented, [role="tablist"]):not(.tp-tabs) :is(button, [role="tab"]):hover { background: var(--tab-hover-bg) !important; }
:is(.tabs, .page-tabs, .consolidated-tabs, .fcw-tabs, .fcw-subtabs, .fcw-segmented, [role="tablist"]):not(.tp-tabs) :is(button.active, [role="tab"][aria-selected="true"]) {
  color: var(--tab-active-text) !important;
  border-color: var(--tab-active-indicator) !important;
  background: var(--tab-active-bg) !important;
}
/* Connected workspaces intentionally use a solid active tab which opens into
   their content panel, rather than the softer secondary-navigation treatment. */
.ns-connected-tabs > [role="tab"][aria-selected="true"] {
  color: var(--button-primary-text) !important;
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
}
.teacher-profile-workspace .tp-tabs { color: var(--vertical-nav-text) !important; border-color: var(--color-hero-border) !important; background: var(--vertical-nav-bg) !important; }
.teacher-profile-workspace .tp-tabs button { color: var(--vertical-nav-text) !important; border-color: var(--vertical-nav-divider) !important; background: transparent !important; }
.teacher-profile-workspace .tp-tabs button:hover { background: var(--vertical-nav-hover) !important; }
.teacher-profile-workspace .tp-tabs button.active { color: var(--vertical-nav-text) !important; background: var(--vertical-nav-active) !important; }

/* The approved Teacher Profile uses the compact pale context hero. */
.teacher-profile-workspace .tp-hero { color: var(--color-text-primary) !important; border-color: var(--color-hero-border) !important; background: var(--color-hero-surface) !important; }
.teacher-profile-workspace .tp-hero-identity { border-color: var(--color-divider) !important; }
.teacher-profile-workspace .tp-hero-identity :is(h1, p, a, strong, span) { color: var(--color-text-primary) !important; }
.teacher-profile-workspace .tp-hero-identity a { color: var(--color-primary) !important; text-decoration-color: color-mix(in srgb, var(--color-primary) 55%, transparent) !important; }
.teacher-profile-workspace .tp-hero-column { border-color: var(--color-divider) !important; }
.teacher-profile-workspace .tp-hero-field-icon { color: var(--color-primary) !important; }
.teacher-profile-workspace .tp-hero-field dt { color: var(--color-text-secondary) !important; }
.teacher-profile-workspace .tp-hero-field dd > span { color: var(--color-text-primary) !important; border-color: var(--color-border) !important; background: var(--color-surface) !important; }
.teacher-profile-workspace .tp-badge-green { color: var(--color-success-text) !important; background: var(--color-success-soft) !important; }
.teacher-profile-workspace .tp-badge-red { color: var(--color-danger-text) !important; background: var(--color-danger-soft) !important; }

/* Modals and dynamically inserted overlays. */
:is(.modal, .fcw-modal, .appearance-dialog, .communication-modal)::before,
:is(.modal-backdrop, .fcw-backdrop, .appearance-dialog-backdrop, .appearance-sheet-backdrop, .saf-modal-backdrop, .td-modal-backdrop, .ta-layer, .school-calendar-modal) { background-color: var(--modal-overlay) !important; }
:is(.modal-card, .fcw-modal-card, .appearance-confirm-card, .appearance-fullscreen-card, .communication-modal-card, .saf-modal, .td-modal, .ta-modal, .school-calendar-modal > article) { color: var(--color-text-primary) !important; border-color: var(--color-border) !important; background: var(--modal-bg) !important; }
:is(.modal-card, .fcw-modal-card, .communication-modal-card, .saf-modal, .td-modal, .ta-modal, .school-calendar-modal > article) > :is(header, [class*="-modal-head"]) { color: var(--modal-title) !important; border-color: var(--color-divider) !important; background: var(--modal-header-bg) !important; }
:is(.modal-card, .fcw-modal-card, .communication-modal-card, .saf-modal, .td-modal, .ta-modal, .school-calendar-modal > article) > :is(header, [class*="-modal-head"]) :is(h1, h2, h3, span, button, svg) { color: inherit !important; }
:is(.modal-card, .fcw-modal-card, .communication-modal-card, .saf-modal, .td-modal, .ta-modal, .school-calendar-modal > article) > :is(footer, [class*="-modal-foot"]) { border-color: var(--color-divider) !important; background: var(--modal-footer-bg) !important; }

/* Semantic status, badges, alerts and banners. */
:is(.badge-success, .status-success, .status-active, .status-paid, .status-valid, .badge-green, .fcw-badge.active, .fcw-badge.permanent, .fcw-badge.paye, .fcw-badge.payé, .fcw-badge.actuelle) { color: var(--color-success-text) !important; border-color: color-mix(in srgb, var(--color-success) 25%, var(--color-border)) !important; background: var(--color-success-soft) !important; }
:is(.badge-warning, .status-warning, .status-pending, .badge-orange, .fcw-badge.occasional, .fcw-badge.occasionnel, .fcw-badge.a-payer, .fcw-badge.à-payer, .fcw-badge.en-derogation, .fcw-badge.en-dérogation) { color: var(--color-warning-text) !important; border-color: color-mix(in srgb, var(--color-warning) 28%, var(--color-border)) !important; background: var(--color-warning-soft) !important; }
:is(.badge-danger, .status-danger, .status-error, .status-overdue, .badge-red, .fcw-badge.en-retard, .fcw-badge.readonly) { color: var(--color-danger-text) !important; border-color: color-mix(in srgb, var(--color-danger) 25%, var(--color-border)) !important; background: var(--color-danger-soft) !important; }
:is(.badge-info, .status-info, .status-upcoming, .badge-blue, .fcw-badge:not(.active):not(.permanent):not(.occasional):not(.occasionnel):not(.a-payer):not(.à-payer):not(.en-retard):not(.readonly):not(.inactive):not(.remplacee):not(.remplacée):not(.en-derogation):not(.en-dérogation)) { color: var(--color-info-text) !important; border-color: color-mix(in srgb, var(--color-info) 25%, var(--color-border)) !important; background: var(--color-info-soft) !important; }
:is(.badge-neutral, .status-neutral, .status-inactive, .badge-gray, .fcw-badge.inactive, .fcw-badge.remplacee, .fcw-badge.remplacée) { color: var(--color-neutral) !important; border-color: var(--color-border) !important; background: var(--color-neutral-soft) !important; }
:is(.alert-info, .toast-info, .banner-info) { color: var(--color-info-text); border-color: color-mix(in srgb, var(--color-info) 25%, var(--color-border)); background: var(--color-info-soft); }
:is(.alert-success, .toast-success, .banner-success) { color: var(--color-success-text); border-color: color-mix(in srgb, var(--color-success) 25%, var(--color-border)); background: var(--color-success-soft); }
:is(.alert-warning, .toast-warning, .banner-warning, .fcw-readonly) { color: var(--color-warning-text); border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border)); background: var(--color-warning-soft); }
:is(.alert-danger, .toast-danger, .banner-danger) { color: var(--color-danger-text); border-color: color-mix(in srgb, var(--color-danger) 25%, var(--color-border)); background: var(--color-danger-soft); }

/* Selection controls, pagination, breadcrumbs, tooltips and focus. */
:is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--color-primary); }
:is(.switch, [role="switch"])[aria-checked="true"], .appearance-switch-row input:checked + i { background: var(--color-primary) !important; }
:is(.pagination, .table-pagination, [class*="pagination"]) :is(button, a) { color: var(--color-text-secondary) !important; border-color: var(--color-border) !important; background: var(--pagination-bg) !important; }
:is(.pagination, .table-pagination, [class*="pagination"]) :is(button, a):hover { color: var(--color-primary) !important; background: var(--pagination-hover-bg) !important; }
:is(.pagination, .table-pagination, [class*="pagination"]) :is(.active, [aria-current="page"]) { color: var(--pagination-current-text) !important; border-color: var(--pagination-current-bg) !important; background: var(--pagination-current-bg) !important; }
:is(.breadcrumb, .consolidated-breadcrumb, .appearance-breadcrumb) { color: var(--color-text-secondary) !important; }
:is(.breadcrumb, .consolidated-breadcrumb, .appearance-breadcrumb) a:hover { color: var(--color-primary) !important; }
:is(.tooltip, [role="tooltip"]) { color: var(--tooltip-text) !important; border-color: var(--tooltip-bg) !important; background: var(--tooltip-bg) !important; }
#appShell :is(button, a, input, select, textarea, [tabindex]):focus-visible,
.ns-ui-overlay :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--color-primary) !important; outline-offset: 2px; }

/* Icon and chart semantic aliases. */
.icon-primary { color: var(--color-primary) !important; }.icon-muted { color: var(--color-text-muted) !important; }
.icon-success { color: var(--color-success) !important; }.icon-warning { color: var(--color-warning) !important; }
.icon-danger { color: var(--color-danger) !important; }.icon-info { color: var(--color-info) !important; }
.icon-on-dark { color: var(--color-text-on-dark) !important; }
.super-admin-dashboard { --sad-primary: var(--chart-1); --sad-primary-dark: var(--color-primary-hover); --sad-ink: var(--color-text-primary); --sad-muted: var(--chart-axis); --sad-border: var(--color-border); --sad-bg: var(--color-app-background); --sad-green: var(--chart-3); --sad-orange: var(--chart-4); --sad-red: var(--chart-6); --sad-purple: var(--chart-2); }
.sad-current-year,
.sad-heading-tools > button,
.sad-filter-card,
.sad-card,
.sad-quick-panel,
.sad-quick-panel > div > button {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.sad-heading-tools > button:hover,
.sad-quick-panel > div > button:hover,
.sad-activity-list > button:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.sad-filter-card select,
.sad-filter-card input { border-color: var(--field-border); background-color: var(--field-bg); color: var(--field-text); }
.sad-filter-more,
.sad-advanced-filters > button { border-color: var(--color-border-strong); background: var(--button-secondary-bg); color: var(--color-primary); }
.sad-filter-more:hover,
.sad-filter-more.active,
.sad-advanced-filters > button:hover { background: var(--button-secondary-hover); }
.sad-filter-card label > span,
.sad-current-year span,
.sad-card-title > div small,
.sad-activity-list small,
.sad-activity-list time { color: var(--color-text-secondary); }
.sad-chart-total,
.sad-net-balance { border-color: var(--color-divider); }
.sad-cashflow-values i { background: var(--color-neutral-soft); }
.sad-net-balance { background: var(--color-primary-soft); }
.sad-net-balance strong { color: var(--color-primary); }
.sad-net-balance.negative { background: var(--color-danger-soft); }
.sad-net-balance.negative strong { color: var(--color-danger); }
.sad-mini-table table { background: var(--table-bg); color: var(--color-text-primary); }
.sad-mini-table th { background: var(--table-header-bg); color: var(--table-header-text); }
.sad-mini-table td { border-color: var(--table-border); background: var(--table-row-odd-bg); color: var(--color-text-primary); }
.sad-mini-table tbody tr:nth-child(even) td { background: var(--table-row-even-bg); }
.sad-mini-table tbody tr:hover td { background: var(--table-row-hover-bg); }
.finance-dashboard { --finance-primary: var(--chart-1); color: var(--color-text-primary); }
.sad-line-chart .grid line, .finance-line-chart line { stroke: var(--chart-grid) !important; }
.sad-chart-area, .finance-line-area { fill: color-mix(in srgb, var(--chart-1) 12%, transparent) !important; }
.sad-chart-line, .finance-line-path { stroke: var(--chart-1) !important; }
.sad-line-chart circle, .finance-line-chart circle { fill: var(--chart-1) !important; stroke: var(--color-surface) !important; }
:is(.sad-month-labels, .finance-line-labels, .chart-axis, .chart-label) { color: var(--chart-axis) !important; }
:is(.chart-legend, .finance-donut-legend, .sad-cycle-legend) { color: var(--chart-legend) !important; }
.finance-donut-legend i.paid { background: var(--color-success) !important; }.finance-donut-legend i.partial { background: var(--color-info) !important; }
.finance-donut-legend i.overdue, .finance-donut-legend i.unpaid { background: var(--color-danger) !important; }.finance-donut-legend i.exempt { background: var(--color-accent) !important; }

/* Module aliases remove page-owned palettes while preserving layout. */
.academic-configuration-workspace { --acf-blue: var(--color-primary); --acf-dark: var(--color-text-primary); --acf-border: var(--color-border); --acf-soft: var(--color-surface-subtle); color: var(--color-text-primary); }
.add-class-workspace { --acw-blue: var(--color-primary); --acw-blue-dark: var(--color-primary-hover); --acw-blue-soft: var(--color-primary-soft); --acw-border: var(--color-border-strong); --acw-border-soft: var(--color-border); --acw-text: var(--color-text-primary); --acw-muted: var(--color-text-secondary); --acw-bg: var(--color-app-background); --acw-success: var(--color-success); --acw-warning: var(--color-warning); --acw-danger: var(--color-danger); }
.attendance-module-page { --attendance-blue: var(--color-primary); --attendance-dark: var(--color-primary-hover); --attendance-ink: var(--color-text-primary); --attendance-muted: var(--color-text-secondary); --attendance-border: var(--color-border); --attendance-soft: var(--color-surface-subtle); --attendance-green: var(--color-success); --attendance-red: var(--color-danger); --attendance-orange: var(--color-warning); }
.class-detail-workspace { --cd-blue: var(--color-primary); --cd-dark: var(--color-text-primary); --cd-border: var(--color-border); --cd-muted: var(--color-text-secondary); color: var(--color-text-primary); }
.classes-workspace { --cw-blue: var(--color-primary); --cw-blue-dark: var(--color-primary-hover); --cw-text: var(--color-text-primary); --cw-muted: var(--color-text-secondary); --cw-border: var(--color-border); --cw-pale: var(--color-primary-soft); --cw-page: var(--color-app-background); color: var(--color-text-primary); }
.cycle-structure-workspace { --acy-blue: var(--color-primary); --acy-navy: var(--color-text-primary); --acy-page: var(--color-app-background); --acy-border: var(--color-border); --acy-pale: var(--color-primary-soft); --acy-success: var(--color-success); --acy-warning: var(--color-warning); --acy-danger: var(--color-danger); --acy-violet: var(--chart-2); --acy-teal: var(--chart-5); color: var(--color-text-primary); }
.section-structure-workspace { --ss-blue: var(--color-primary); --ss-blue-dark: var(--color-primary-hover); --ss-navy: var(--color-text-primary); --ss-border: var(--color-border); --ss-pale: var(--color-primary-soft); --ss-muted: var(--color-text-secondary); --ss-green: var(--color-success); --ss-orange: var(--color-warning); --ss-violet: var(--chart-2); --ss-teal: var(--chart-5); --ss-red: var(--color-danger); color: var(--color-text-primary); }
.student-account-v1, .saf-modal-backdrop { --saf-blue: var(--color-primary); --saf-blue-hover: var(--color-primary-hover); --saf-blue-dark: var(--color-structural-dark); --saf-blue-pale: var(--color-primary-soft); --saf-blue-pale-hover: var(--color-surface-selected); --saf-blue-line: var(--color-border-strong); --saf-line: var(--color-border); --saf-ink: var(--color-text-primary); --saf-muted: var(--color-text-secondary); --saf-surface: var(--color-surface); --saf-soft: var(--color-surface-subtle); --saf-green: var(--color-success); --saf-green-soft: var(--color-success-soft); --saf-red: var(--color-danger); --saf-red-soft: var(--color-danger-soft); --saf-orange: var(--color-warning); --saf-orange-soft: var(--color-warning-soft); --saf-purple: var(--chart-2); --saf-purple-soft: var(--color-secondary-soft); color: var(--color-text-primary); }
.students-list-page, .enrolment-page { --student-blue: var(--color-primary); --student-blue-dark: var(--color-primary-hover); --student-ink: var(--color-text-primary); --student-border: var(--color-border); --student-soft: var(--color-surface-subtle); color: var(--color-text-primary); }
.teacher-workspace { --tw-blue: var(--color-primary); --tw-blue-dark: var(--color-primary-hover); --tw-blue-soft: var(--color-primary-soft); --tw-page: var(--color-app-background); --tw-text: var(--color-text-primary); --tw-muted: var(--color-text-secondary); --tw-border: var(--color-border); --tw-green: var(--color-success); --tw-orange: var(--color-warning); --tw-red: var(--color-danger); --tw-violet: var(--chart-2); --tw-teal: var(--chart-5); color: var(--color-text-primary); }
.ta-workspace, .ta-layer { --ta-teal: var(--color-primary); --ta-teal-soft: var(--color-primary-soft); --ta-success: var(--color-success); --ta-success-soft: var(--color-success-soft); --ta-warning: var(--color-warning); --ta-warning-soft: var(--color-warning-soft); --ta-danger: var(--color-danger); --ta-danger-soft: var(--color-danger-soft); --ta-violet: var(--chart-2); --ta-violet-soft: var(--color-secondary-soft); color: var(--color-text-primary); }
.td-workspace { color: var(--color-text-primary); }
.teacher-profile-workspace { --tp-blue: var(--color-primary); --tp-deep: var(--color-structural-dark); --tp-sky: var(--color-primary-soft); --tp-border: var(--color-border); --tp-ink: var(--color-text-primary); --tp-muted: var(--color-text-secondary); --tp-surface: var(--color-surface); --tp-bg: var(--color-app-background); --tp-green: var(--color-success); --tp-orange: var(--color-warning); --tp-red: var(--color-danger); --tp-purple: var(--color-accent); }
.teacher-profile-workspace { color: var(--color-text-primary) !important; background: var(--color-surface) !important; }
html[data-resolved-mode="dark"] #pageContent:has(> .teacher-profile-workspace) { background: var(--color-app-background) !important; }
.teacher-profile-workspace .tp-back { color: var(--color-text-primary) !important; border-color: var(--color-border) !important; background: var(--color-surface) !important; }
.teacher-profile-workspace .tp-photo-fallback { color: var(--color-primary) !important; background: var(--color-surface-muted) !important; }
.teacher-profile-workspace .qr-code,
.teacher-profile-workspace .qr-code .qr-bg { background: #FFFFFF !important; fill: #FFFFFF !important; }
.teacher-profile-workspace .qr-code .qr-cells rect { fill: var(--color-structural-dark) !important; }
.teacher-profile-workspace .tp-profile-shell { color: var(--color-text-primary) !important; border-color: var(--color-border) !important; background: var(--color-surface) !important; }
.teacher-profile-workspace :is(.tp-stat, .tp-card, .tp-empty, .tp-filterbar) { color: var(--color-text-primary) !important; border-color: var(--color-border) !important; background: var(--color-app-background) !important; }
.teacher-profile-workspace :is(.tp-quick-links, .tp-account-actions) button { color: var(--color-text-primary) !important; border-color: var(--color-border) !important; background: var(--color-surface-muted) !important; }
.teacher-profile-workspace :is(.tp-quick-links, .tp-account-actions) button:hover { color: var(--color-primary) !important; background: var(--color-primary-soft) !important; }
.teacher-profile-workspace :is(.tp-key-values, .tp-detail-list) > div { border-color: var(--color-divider) !important; }
.finance-configuration-workspace { --fcw-border: var(--color-border); --fcw-muted: var(--color-text-secondary); --fcw-soft: var(--color-primary-soft); color: var(--color-text-primary); }
.finance-configuration-workspace :is(.fcw-card, .fcw-header, .fcw-fee-selector, .fcw-main-panel) { border-color: var(--color-border); background: var(--color-surface); }
.finance-configuration-workspace :is(.fcw-health-body button, .fcw-list button, .fcw-alerts button, .fcw-fee-selector button, .fcw-row-actions button, .fcw-history-grid td button) { color: var(--color-text-primary); border-color: var(--color-divider); }
.finance-configuration-workspace :is(.fcw-health-body button, .fcw-list button, .fcw-alerts button, .fcw-fee-selector button):hover { background: var(--color-primary-soft); }
.finance-configuration-workspace .fcw-ring { background: radial-gradient(circle at center, var(--color-surface) 58%, transparent 59%), conic-gradient(var(--color-success) calc(var(--value) * 1%), var(--color-neutral-soft) 0); }
.finance-configuration-workspace :is(.fcw-list button, .fcw-alerts button, .fcw-family-chart > div:last-child > div) { border-color: var(--color-divider); }
.finance-configuration-workspace :is(.fcw-empty strong, .fcw-form-grid label) { color: var(--color-text-primary); }
.finance-configuration-workspace .fcw-table-wrap th { color: var(--table-header-text); background: var(--table-header-bg); }
.finance-configuration-workspace .fcw-table-wrap tbody tr:nth-child(odd) td { background: var(--table-row-odd-bg); }
.finance-configuration-workspace .fcw-table-wrap tbody tr:nth-child(even) td { background: var(--table-row-even-bg); }
.finance-configuration-workspace .fcw-table-wrap tbody tr:hover td { background: var(--table-row-hover-bg); }
.school-calendar-module { --calendar-border: var(--color-border); --calendar-soft: var(--color-primary-soft); --calendar-grid-border: var(--color-border-strong); color: var(--color-text-primary); }

/* Dark themes cannot inherit legacy fixed-white interface panels. Official
   document, A4 and service-card previews stay outside this migration. */
html[data-resolved-mode="dark"] #appShell :is(
  .academic-configuration-workspace,
  .add-class-workspace,
  .attendance-module-page,
  .class-detail-workspace,
  .classes-workspace,
  .cycle-structure-workspace,
  .section-structure-workspace,
  .student-account-v1,
  .students-list-page,
  .enrolment-page,
  .teacher-workspace,
  .ta-workspace,
  .td-workspace,
  .school-calendar-module,
  .finance-dashboard,
  .finance-configuration-workspace
) :is([class*="-panel"], [class*="-card"], [class*="-toolbar"], [class*="-filters"], [class*="-table-wrap"], [class*="-menu"]):not([class*="print"]):not([class*="a4"]):not([class*="service-card"]):not([class*="status"]):not([class*="badge"]):not(a):not(button):not(.ns-ui-icon-button) {
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
  background-color: var(--color-surface) !important;
}

/* KPI values are exact snapshots of the approved pre-migration appearance. */
:root {
  --kpi-card-bg: #f8fafc;
  --kpi-card-contrast-bg: #fff;
  --kpi-card-border: #d8e2ec;
  --kpi-card-text: #111827;
  --kpi-card-label: #334155;
  --kpi-card-description: #475569;
  --kpi-danger-card-bg: #fff7f7;
  --kpi-danger-card-border: #f3d4d4;
  --kpi-primary-icon-bg: #0c6ee5;
  --kpi-secondary-icon-bg: #7c3aed;
  --kpi-success-icon-bg: #109c5a;
  --kpi-warning-icon-bg: #f59e0b;
  --kpi-danger-icon-bg: #ef4444;
  --kpi-info-icon-bg: #0891b2;
  --kpi-neutral-icon-bg: #64748b;
  --kpi-icon-color: #fff;
}

/* Theme-aware scrollbars and non-content states. */
/* Shared profile/media secondary surfaces must not inherit legacy blue text. */
#appShell .ns-card__label { color: var(--color-text-secondary) !important; }
#appShell .student-filter-row label,
#appShell .student-filter-row label > span { color: var(--color-text-secondary) !important; }
#appShell :is(.tp-button:not(.primary), .tp-small-button, .tp-text-button, .tp-icon-button, .ns-photo-picker__control:not(.ns-photo-picker__control--danger)) {
  color: var(--button-secondary-text) !important;
  border-color: var(--button-secondary-border) !important;
}
#appShell :is(.tp-button:not(.primary), .tp-small-button, .tp-icon-button) {
  background: var(--button-secondary-bg) !important;
}
html[data-resolved-mode="dark"] #appShell .teacher-profile-workspace :is(.tp-hero-column dt, .tp-hero-identity a, .tp-qr button) {
  color: var(--color-text-secondary) !important;
}
#appShell * { scrollbar-color: var(--color-text-muted) transparent; }
#appShell *::-webkit-scrollbar-track { background: transparent; }
#appShell *::-webkit-scrollbar-thumb { background: var(--color-text-muted); }
#appShell *::-webkit-scrollbar-thumb:hover { background: var(--color-text-secondary); }
:is(.empty-state, .ns-ui-table-empty, .fcw-empty) { color: var(--color-text-secondary) !important; background: var(--color-surface-subtle) !important; }
:is(.loading-indicator, .spinner) { color: var(--color-primary) !important; }
:is(.skeleton, [class*="skeleton"]) { background: linear-gradient(90deg, var(--color-surface-muted), var(--color-surface), var(--color-surface-muted)) !important; }