/*!
 * ZIC Theme — Layer 4 · Materio override layer
 * ============================================================================
 *
 * Purpose: make every Materio component read from the ZIC token contract
 * instead of from its own hard-coded light-only values.
 *
 * Why this layer is not optional — two defects in stock Materio that this file
 * closes:
 *
 *  1. `--bs-paper-bg` is declared ONLY under `:root, [data-bs-theme=light]`.
 *     Cards, dropdowns, modals, offcanvas, popovers and toasts all resolve
 *     `background: var(--bs-paper-bg)`, so in dark mode every one of them
 *     stayed pure white. Mapping it to `--zic-surface-primary` is the fix.
 *
 *  2. The whole menu/sidebar palette (`--bs-menu-color`, `--bs-menu-hover-color`,
 *     `--bs-menu-item-icon-color`, `--bs-menu-sub-active-color`) is likewise
 *     declared only for light. In dark mode the sidebar rendered dark navy
 *     text on a dark surface — effectively invisible. Remapped below.
 *
 * Three further defaults that break dark rendering are corrected the same way:
 * `--bs-heading-color: inherit`, `--bs-base-color` (dark ink used as the mix
 * base for borders, table stripes and hovers in BOTH themes), and the
 * `--bs-primary` / `--bs-primary-contrast` pair.
 *
 * Selector note: the remap block targets `:root` together with the attribute
 * and class forms. `html.light-style` / `html.dark-style` outrank Materio's
 * bare `[data-bs-theme=...]` rules, and this file loads after core.css, so the
 * mapping wins whether the switcher sets the attribute, the class, or both.
 */

/* ===========================================================================
 * 1. Core remap — Materio variable -> ZIC token
 * ======================================================================== */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"],
html.light-style,
html.dark-style {
  /* --- Canvas, paper, text ------------------------------------------------ */
  --bs-body-bg: var(--zic-surface-secondary);
  --bs-body-bg-rgb: var(--zic-surface-secondary-rgb);
  --bs-body-color: var(--zic-text-secondary);
  --bs-body-color-rgb: var(--zic-text-secondary-rgb);
  --bs-emphasis-color: var(--zic-text-primary);
  --bs-emphasis-color-rgb: var(--zic-text-primary-rgb);
  --bs-heading-color: var(--zic-text-primary);
  --bs-secondary-color: var(--zic-text-secondary);
  --bs-secondary-color-rgb: var(--zic-text-secondary-rgb);
  --bs-tertiary-color: var(--zic-text-disabled);
  --bs-secondary-bg: var(--zic-surface-tertiary);
  --bs-tertiary-bg: var(--zic-surface-tertiary);

  /* Raised surface. The single most important line in this file: every
     Materio container that used to hard-code #fff resolves through here. */
  --bs-paper-bg: var(--zic-surface-primary);
  --bs-paper-bg-rgb: var(--zic-surface-primary-rgb);

  /* The mix base for Materio's derived tints. Light ink in dark mode is what
     makes `color-mix(base N%, paper)` lighten instead of muddying. */
  --bs-base-color: var(--zic-text-primary);
  --bs-base-color-rgb: var(--zic-text-primary-rgb);

  /* --- Borders ------------------------------------------------------------ */
  --bs-border-color: var(--zic-border-default);
  --bs-border-color-translucent: color-mix(in srgb, var(--zic-border-default) 60%, transparent);

  /* --- Links & brand ------------------------------------------------------ */
  --bs-link-color: var(--zic-primary-text);
  --bs-link-color-rgb: var(--zic-primary-rgb);
  --bs-link-hover-color: var(--zic-primary-hover);
  --bs-custom-link-color: var(--zic-primary-text);
  --bs-primary: var(--zic-primary-fill);
  --bs-primary-rgb: var(--zic-primary-rgb);
  --bs-primary-contrast: var(--zic-primary-contrast);
  --bs-primary-text-emphasis: var(--zic-primary-text);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--zic-primary) 12%, var(--zic-surface-primary));
  --bs-primary-border-subtle: color-mix(in srgb, var(--zic-primary) 30%, var(--zic-surface-primary));

  /* --- Status ------------------------------------------------------------- */
  --bs-success: var(--zic-status-success-fill);
  --bs-success-rgb: var(--zic-status-success-rgb);
  --bs-success-contrast: var(--zic-status-success-contrast);
  --bs-success-text-emphasis: var(--zic-status-success-text);
  --bs-success-bg-subtle: var(--zic-status-success-bg-subtle);
  --bs-success-border-subtle: var(--zic-status-success-border-subtle);

  --bs-warning: var(--zic-status-warning-fill);
  --bs-warning-rgb: var(--zic-status-warning-rgb);
  --bs-warning-contrast: var(--zic-status-warning-contrast);
  --bs-warning-text-emphasis: var(--zic-status-warning-text);
  --bs-warning-bg-subtle: var(--zic-status-warning-bg-subtle);
  --bs-warning-border-subtle: var(--zic-status-warning-border-subtle);

  --bs-danger: var(--zic-status-danger-fill);
  --bs-danger-rgb: var(--zic-status-danger-rgb);
  --bs-danger-contrast: var(--zic-status-danger-contrast);
  --bs-danger-text-emphasis: var(--zic-status-danger-text);
  --bs-danger-bg-subtle: var(--zic-status-danger-bg-subtle);
  --bs-danger-border-subtle: var(--zic-status-danger-border-subtle);

  --bs-info: var(--zic-status-info-fill);
  --bs-info-rgb: var(--zic-status-info-rgb);
  --bs-info-contrast: var(--zic-status-info-contrast);
  --bs-info-text-emphasis: var(--zic-status-info-text);
  --bs-info-bg-subtle: var(--zic-status-info-bg-subtle);
  --bs-info-border-subtle: var(--zic-status-info-border-subtle);

  --bs-secondary: var(--zic-status-neutral-fill);
  --bs-secondary-rgb: var(--zic-status-neutral-rgb);
  --bs-secondary-contrast: var(--zic-status-neutral-contrast);
  --bs-secondary-text-emphasis: var(--zic-status-neutral-text);
  --bs-secondary-bg-subtle: var(--zic-status-neutral-bg-subtle);
  --bs-secondary-border-subtle: var(--zic-status-neutral-border-subtle);

  /* --- Form validation ---------------------------------------------------- */
  --bs-form-valid-color: var(--zic-status-success-text);
  --bs-form-valid-border-color: var(--zic-status-success);
  --bs-form-invalid-color: var(--zic-status-danger-text);
  --bs-form-invalid-border-color: var(--zic-status-danger);

  /* --- Focus ring --------------------------------------------------------- */
  --bs-focus-ring-width: var(--zic-focus-ring-width);
  --bs-focus-ring-color: var(--zic-interactive-focus-ring);

  /* --- Elevation ---------------------------------------------------------- */
  --bs-box-shadow-xs: var(--zic-shadow-sm);
  --bs-box-shadow-sm: var(--zic-shadow-sm);
  --bs-box-shadow: var(--zic-shadow-md);
  --bs-box-shadow-lg: var(--zic-shadow-lg);
  --bs-box-shadow-xl: var(--zic-shadow-xl);
  --bs-floating-component-shadow: var(--zic-shadow-lg);

  /* --- Sidebar / menu ----------------------------------------------------- */
  --bs-menu-bg: var(--zic-surface-primary);
  --bs-menu-bg-rgb: var(--zic-surface-primary-rgb);
  --bs-menu-color: var(--zic-text-secondary);
  --bs-menu-color-rgb: var(--zic-text-secondary-rgb);
  --bs-menu-hover-bg: var(--zic-interactive-hover);
  --bs-menu-hover-color: var(--zic-text-primary);
  --bs-menu-active-bg: var(--zic-primary-fill);
  --bs-menu-active-color: var(--zic-primary-contrast);
  --bs-menu-sub-active-bg: var(--zic-interactive-active);
  --bs-menu-sub-active-color: var(--zic-primary-text);
  --bs-menu-item-icon-color: var(--zic-text-secondary);
  --bs-menu-header-color: var(--zic-text-disabled);
  --bs-menu-divider-color: var(--zic-border-default);
  --bs-menu-box-shadow: var(--zic-shadow-lg);

  /* --- Navbar ------------------------------------------------------------- */
  --bs-navbar-bg: color-mix(in srgb, var(--zic-surface-primary) 85%, transparent);
  --bs-navbar-color: var(--zic-text-primary);
  --bs-navbar-border-color: color-mix(in srgb, var(--zic-border-default) 70%, transparent);
  --bs-navbar-box-shadow: var(--zic-shadow-sm);
  --bs-nav-link-color: var(--zic-text-primary);
  --bs-nav-link-disabled-color: var(--zic-text-disabled);
  --bs-nav-box-shadow: var(--zic-shadow-sm);
  --bs-nav-border-color: var(--zic-border-default);

  /* --- Floating surfaces -------------------------------------------------- */
  --bs-card-bg: var(--zic-surface-primary);
  --bs-card-border-color: var(--zic-border-default);
  --bs-dropdown-bg: var(--zic-surface-elevated);
  --bs-dropdown-link-hover-bg: var(--zic-interactive-hover);
  --bs-dropdown-link-active-bg: var(--zic-interactive-active);
  --bs-dropdown-link-active-color: var(--zic-primary-text);
  --bs-dropdown-border-color: var(--zic-border-default);
  --bs-modal-bg: var(--zic-surface-elevated);
  --bs-modal-border-color: var(--zic-border-default);
  --bs-offcanvas-bg: var(--zic-surface-elevated);
  --bs-offcanvas-border-color: var(--zic-border-default);
  --bs-popover-bg: var(--zic-surface-elevated);
  --bs-popover-header-bg: var(--zic-surface-elevated);
  --bs-popover-border-color: var(--zic-border-default);
  --bs-accordion-bg: var(--zic-surface-primary);
  --bs-accordion-border-color: var(--zic-border-default);
  --bs-accordion-active-bg: var(--zic-surface-primary);
  --bs-accordion-active-color: var(--zic-primary-text);
  /* Opaque. These were `color-mix(... 92%, transparent)` — body content showed
     through toast text. The tone fills live in `zic/overlays/toasts.css`. */
  --bs-toast-bg: var(--zic-surface-elevated);
  --bs-toast-header-bg: var(--zic-surface-elevated);
  --bs-toast-border-color: var(--zic-border-default);

  /* --- Tables ------------------------------------------------------------- */
  --bs-table-color: var(--zic-text-secondary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--zic-border-default);
  --bs-table-striped-bg: var(--zic-surface-tertiary);
  --bs-table-hover-bg: var(--zic-interactive-hover);
  --bs-table-active-bg: var(--zic-interactive-active);
}

/* ===========================================================================
 * 2. Text utilities — hold every one to AA on the surface it sits on.
 *
 * Bootstrap paints `.text-*` from the *-rgb triplet, which is the decorative
 * hue, not the readable one. `--zic-status-*-text` is the AA-safe partner, so
 * the utilities are repointed explicitly. `!important` is required because the
 * Bootstrap rules it overrides carry it too.
 * ======================================================================== */
.text-primary {
  color: var(--zic-primary-text) !important;
}

.text-success {
  color: var(--zic-status-success-text) !important;
}

.text-warning {
  color: var(--zic-status-warning-text) !important;
}

.text-danger {
  color: var(--zic-status-danger-text) !important;
}

.text-info {
  color: var(--zic-status-info-text) !important;
}

.text-body {
  color: var(--zic-text-primary) !important;
}

.text-muted,
.text-body-secondary {
  color: var(--zic-text-secondary) !important;
}

/* Solid background utilities move from the decorative hue to the AA fill so
   the conventional `.bg-*` + `.text-white` pairing always passes. */
.bg-primary {
  background-color: var(--zic-primary-fill) !important;
}

.bg-success {
  background-color: var(--zic-status-success-fill) !important;
}

.bg-warning {
  background-color: var(--zic-status-warning-fill) !important;
}

.bg-danger {
  background-color: var(--zic-status-danger-fill) !important;
}

.bg-info {
  background-color: var(--zic-status-info-fill) !important;
}

/* ===========================================================================
 * 3. Sidebar active item.
 *
 * Materio paints the active link with a primary -> 52% primary/white gradient
 * and white text. The light end of that gradient never reached AA, in either
 * theme. A flat, token-driven fill does — and it is the one place the sidebar
 * genuinely needs to shout.
 * ======================================================================== */
.menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--zic-primary-fill);
  color: var(--zic-primary-contrast);
  box-shadow: var(--zic-shadow-sm);
}

.menu-item.active > .menu-link:not(.menu-toggle):hover,
.menu-item.active > .menu-link:not(.menu-toggle):focus {
  background: var(--zic-primary-hover);
  color: var(--zic-primary-contrast);
}

/* The pointer notch drawn by Materio on the active item follows the fill. */
.menu-vertical .menu-item.active:not(.open) > .menu-link:not(.menu-toggle)::before {
  border-color: var(--zic-primary-contrast);
}

/* Section headers inside the menu must stay legible in both themes. */
.menu-header {
  color: var(--zic-text-disabled);
}

/* ===========================================================================
 * 4. Sidebar brand mark.
 *
 * The supplied logo assets are fully opaque — every pixel of both
 * `zic-logo.png` and the collapsed `zic-logo-64.png` carries a white field.
 * On the light sidebar that is invisible; on the dark sidebar it renders as a
 * bare white rectangle that reads as a broken image.
 *
 * Until the transparent `*-dark` variants from the logo bundle replace these
 * files, the mark is presented as a deliberate white plate so the chrome looks
 * intentional rather than glitched. `content-box` because Materio's reset sets
 * `border-box` globally, which would otherwise eat into the logo's height.
 * ======================================================================== */
[data-bs-theme="dark"] .app-brand-img,
[data-bs-theme="dark"] .app-brand-img-collapsed,
html.dark-style .app-brand-img,
html.dark-style .app-brand-img-collapsed {
  box-sizing: content-box;
  padding: 0.125rem 0.375rem;
  background-color: #fff;
  border-radius: var(--zic-radius-sm);
}

/* ===========================================================================
 * 5. Navbar and card surfaces.
 *
 * `--bs-navbar-bg` is deliberately translucent: Materio blurs what sits
 * underneath it, and an opaque fill would defeat that in both themes.
 * ======================================================================== */
.layout-navbar {
  border-color: var(--bs-navbar-border-color);
}

.card {
  border-color: var(--zic-border-default);
}

.card .card-header,
.card .card-footer {
  border-color: var(--zic-border-default);
}

/* ===========================================================================
 * 6. Focus visibility.
 *
 * One ring definition for keyboard users, drawn from the token layer so it
 * reads correctly on both the light and the dark canvas.
 * ======================================================================== */
:where(a, button, .btn, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--zic-focus-ring-width) solid var(--zic-border-focus);
  outline-offset: var(--zic-focus-ring-offset);
}

/* ===========================================================================
 * 7. Dark-only corrections that `[data-bs-theme=dark]` handles in core.css,
 *    restated for the `.dark-style` class so that either switch is sufficient.
 * ======================================================================== */
html.dark-style {
  color-scheme: dark;

  --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
  --bs-carousel-indicator-active-bg: var(--zic-text-primary);
  --bs-carousel-caption-color: var(--zic-text-primary);
  --bs-carousel-control-icon-filter: invert(1) grayscale(100);
}

/* ===========================================================================
 * 8. Component-scoped corrections.
 *
 * Materio re-declares several `--bs-*` variables *on the component itself*
 * (`.dropdown-menu`, `.modal`, `.toast`, `.pagination`). A declaration at that
 * scope shadows anything mapped at `:root`, so the override has to happen at
 * the same scope. Everything below was caught by an audit of rendered pages in
 * both themes, not guessed at.
 * ======================================================================== */

/* --- Elevated (floating) surfaces, one step above the raised card surface -- */
.dropdown-menu {
  --bs-dropdown-bg: var(--zic-surface-elevated);
  --bs-dropdown-border-color: var(--zic-border-default);
}

.modal {
  --bs-modal-bg: var(--zic-surface-elevated);
  --bs-modal-border-color: var(--zic-border-default);
  --bs-modal-header-border-color: var(--zic-border-default);
  --bs-modal-footer-border-color: var(--zic-border-default);
}

.popover {
  --bs-popover-bg: var(--zic-surface-elevated);
}

.offcanvas {
  --bs-offcanvas-bg: var(--zic-surface-elevated);
  --bs-offcanvas-border-color: var(--zic-border-default);
}

.toast {
  --bs-toast-bg: var(--zic-surface-elevated);
  --bs-toast-header-bg: var(--zic-surface-elevated);
  --bs-toast-border-color: var(--zic-border-default);
  --bs-toast-header-color: var(--zic-text-secondary);
}

/* --- Pagination -----------------------------------------------------------
 * Stock Materio paints the page links from `--bs-gray-100`, part of a gray
 * scale that is declared once and never re-themed. In dark mode the links kept
 * a near-white background under near-white text — measured at 1.10:1, i.e.
 * effectively invisible. Rebuilt on theme-aware tokens.
 * ------------------------------------------------------------------------ */
.pagination {
  --bs-pagination-color: var(--zic-text-secondary);
  --bs-pagination-bg: var(--zic-surface-primary);
  --bs-pagination-border-color: var(--zic-border-default);
  --bs-pagination-hover-color: var(--zic-primary-text);
  --bs-pagination-hover-bg: var(--zic-interactive-hover);
  --bs-pagination-hover-border-color: var(--zic-border-strong);
  --bs-pagination-focus-color: var(--zic-primary-text);
  --bs-pagination-focus-bg: var(--zic-interactive-hover);
  --bs-pagination-active-color: var(--zic-primary-contrast);
  --bs-pagination-active-bg: var(--zic-primary-fill);
  --bs-pagination-active-border-color: var(--zic-primary-fill);
  --bs-pagination-disabled-color: var(--zic-text-disabled);
  --bs-pagination-disabled-bg: var(--zic-surface-tertiary);
  --bs-pagination-disabled-border-color: var(--zic-border-default);
}

/* --- Soft label chips -----------------------------------------------------
 * Stock Materio draws the chip label with the raw `--bs-primary` and tints the
 * background from the paper colour, leaving the label at 3.09:1 in dark. One
 * pattern — translucent tint plus the AA `-text` token — fixes every variant.
 * `!important` is required to outrank the Bootstrap utilities.
 * ------------------------------------------------------------------------ */
.bg-label-primary {
  background-color: color-mix(in srgb, var(--zic-primary) 14%, transparent) !important;
  color: var(--zic-primary-text) !important;
}

.bg-label-secondary {
  background-color: color-mix(in srgb, var(--zic-status-neutral) 14%, transparent) !important;
  color: var(--zic-status-neutral-text) !important;
}

.bg-label-success {
  background-color: color-mix(in srgb, var(--zic-status-success) 14%, transparent) !important;
  color: var(--zic-status-success-text) !important;
}

.bg-label-info {
  background-color: color-mix(in srgb, var(--zic-status-info) 14%, transparent) !important;
  color: var(--zic-status-info-text) !important;
}

.bg-label-warning {
  background-color: color-mix(in srgb, var(--zic-status-warning) 14%, transparent) !important;
  color: var(--zic-status-warning-text) !important;
}

.bg-label-danger {
  background-color: color-mix(in srgb, var(--zic-status-danger) 14%, transparent) !important;
  color: var(--zic-status-danger-text) !important;
}

.bg-label-dark {
  background-color: color-mix(in srgb, var(--zic-text-primary) 12%, transparent) !important;
  color: var(--zic-text-primary) !important;
}

.bg-label-light,
.bg-label-gray {
  background-color: color-mix(in srgb, var(--zic-text-secondary) 10%, transparent) !important;
  color: var(--zic-text-secondary) !important;
}

/* --- Tables ---------------------------------------------------------------
 * Three separate leaks met here. `.table` hard-codes its Firefox header
 * background as #f6f7fb and its hover/active states as dark ink; separately,
 * the app marks header rows `table-light`, which resolves to the static
 * `--bs-light` (#dfdfe3) paired with black text. In dark mode the header row
 * rendered as a bright bar across the middle of the table.
 * ------------------------------------------------------------------------ */
.table {
  --bs-table-header-bg-color: var(--zic-surface-tertiary);
  --bs-table-hover-bg: var(--zic-interactive-hover);
  --bs-table-active-bg: var(--zic-interactive-active);
  --bs-table-border-color: var(--zic-border-default);
}

.table .table-light,
.table-light {
  --bs-table-bg: var(--zic-surface-tertiary);
  --bs-table-color: var(--zic-text-secondary);
  --bs-table-striped-bg: var(--zic-surface-tertiary);
  --bs-table-striped-color: var(--zic-text-secondary);
  --bs-table-hover-bg: var(--zic-interactive-hover);
  --bs-table-hover-color: var(--zic-text-primary);
  --bs-table-active-bg: var(--zic-interactive-active);
  --bs-table-active-color: var(--zic-text-primary);
  --bs-table-border-color: var(--zic-border-default);
}

/* --- Remaining static-gray leaks ------------------------------------------
 * A hovered floating input group and the placeholder colour were the last two
 * places where the never-re-themed gray scale reached a surface.
 * ------------------------------------------------------------------------ */
.input-group:hover.input-group-floating .input-group-text {
  background-color: var(--zic-surface-tertiary);
}

.form-control::placeholder {
  color: var(--zic-text-disabled);
}