/*
 * Ezitech theme - Ink & Sky
 * =========================
 * ONE palette for the whole portal, defined once, in variables, so that a
 * page cannot quietly keep its own colours and so that light/dark is a single
 * switch rather than a second stylesheet.
 *
 * Why this file exists at all
 * ---------------------------
 * Colour in this portal used to live in three places at once: the compiled
 * Vuexy build, two shared sweeps (ezitech-dark.css, portal-ui.css), and a
 * `<style>` block inside almost every page - 923 hardcoded colours in the
 * admin views alone, across teal, purple, pink, amber and four different
 * blues. So "change the theme" meant editing a hundred files and always
 * missing some, which is exactly what happened last time: parts of the portal
 * changed and parts did not.
 *
 * Now every one of those values is a token from this file. Nothing downstream
 * holds a colour of its own, so nothing can be left behind.
 *
 * How it is scoped
 * ----------------
 * The tokens are declared on :root, which paints nothing by itself. They are
 * APPLIED under `body.ez-admin` only. Manager, supervisor and intern are
 * untouched until their own class is added here - deliberately, so each part
 * of the portal moves over as a whole rather than half at a time.
 *
 * Why data-bs-theme stays 'dark' in light mode
 * --------------------------------------------
 * Every custom rule in this portal - 7,134 lines of ezitech-dark.css and all
 * of portal-ui.css - is gated on `:root[data-bs-theme='dark']`. Flipping that
 * attribute to 'light' would switch ALL of it off at once: the page would not
 * merely change colour, it would lose the hairlines, the radii, the monospace
 * figures, the table headers - the design itself. So the Bootstrap attribute
 * stays where it is and `data-ez-theme` carries the light/dark decision. The
 * tokens below flip; the design does not.
 *
 * The consequence to know about: a few Vuexy components hardcode dark colours
 * instead of reading --bs-*. Those are overridden by name at the bottom of
 * this file. If something stays dark in light mode, it belongs in that list.
 */

/* ==========================================================================
   1. The palette
   ========================================================================== */

:root {
  /* --- surfaces --------------------------------------------------------- */
  --ez-bg: #0d1117;          /* the page */
  --ez-bg-2: #11171f;        /* a band on the page: sticky heads, table heads */
  --ez-menu: #0a0e14;        /* the sidebar, one step deeper than the page */
  --ez-card: #151b23;        /* a card */
  --ez-card-2: #1b222c;      /* something raised on a card: input, chip, hover */
  --ez-raise: rgba(255, 255, 255, .045);
  --ez-sink: rgba(0, 0, 0, .22);

  /* --- lines ------------------------------------------------------------ */
  --ez-border: #242c37;      /* the hairline. Almost every border is this one */
  --ez-border-2: #313b48;    /* hover, and a border that must actually be seen */

  /* --- text ------------------------------------------------------------- */
  --ez-text: #f0f4f9;        /* headings and figures */
  --ez-text-2: #c6d0dc;      /* body text */
  --ez-muted: #8b96a5;       /* labels, captions, column headings */
  --ez-faint: #6a7482;       /* the faintest thing still meant to be read */

  /* --- the one accent --------------------------------------------------- */
  --ez-accent: #4c8dff;      /* links, active state, icons, thin borders */
  --ez-accent-2: #86b4ff;    /* accent text that has to stay readable */
  --ez-accent-solid: #2e6fe3;/* a filled button - deeper, so white text passes */
  --ez-on-accent: #ffffff;
  --ez-accent-ink: #132742;  /* an accent-tinted surface */
  --ez-accent-soft: rgba(76, 141, 255, .13);
  --ez-accent-line: rgba(76, 141, 255, .32);
  --ez-accent-glow: rgba(76, 141, 255, .28);
  --ez-accent-rgb: 76, 141, 255;   /* Bootstrap wants the channels, not the colour */

  /* --- status ----------------------------------------------------------- *
   * Three colours survive beside the accent, and only these three, because
   * each one IS the information: accepted, due soon, overdue. Everything else
   * that used to be coloured - teal, purple, pink, a second and third blue -
   * is now the accent. */
  --ez-ok: #3fbf7f;
  --ez-ok-2: #7fe3b0;
  --ez-ok-solid: #2fa36a;
  --ez-ok-ink: #0f2a1f;
  --ez-ok-soft: rgba(63, 191, 127, .13);
  --ez-ok-line: rgba(63, 191, 127, .30);
  --ez-ok-glow: rgba(63, 191, 127, .25);

  --ez-warn: #dfa23a;
  --ez-warn-2: #f3c97a;
  --ez-warn-solid: #c98a22;
  --ez-warn-ink: #2c2110;
  --ez-warn-soft: rgba(223, 162, 58, .13);
  --ez-warn-line: rgba(223, 162, 58, .30);
  --ez-warn-glow: rgba(223, 162, 58, .25);

  --ez-danger: #e8656c;
  --ez-danger-2: #ff9b9f;
  --ez-danger-solid: #cf4c53;
  --ez-danger-ink: #2e1518;
  --ez-danger-soft: rgba(232, 101, 108, .13);
  --ez-danger-line: rgba(232, 101, 108, .30);
  --ez-danger-glow: rgba(232, 101, 108, .25);

  /* --- depth ------------------------------------------------------------ */
  --ez-shadow-c: rgba(0, 0, 0, .35);
  --ez-shadow: 0 10px 30px rgba(0, 0, 0, .30);
  --ez-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Light. Same palette, same accent family - only the surfaces invert. The
   accent darkens because #4c8dff on white does not carry enough contrast for
   text; it is the same blue, one step down. */
:root[data-ez-theme='light'] {
  --ez-bg: #f2f5f9;
  --ez-bg-2: #e9eef5;
  --ez-menu: #ffffff;
  --ez-card: #ffffff;
  --ez-card-2: #f5f8fc;
  --ez-raise: rgba(13, 17, 23, .035);
  --ez-sink: rgba(13, 17, 23, .055);

  --ez-border: #e2e8f0;
  --ez-border-2: #cbd5e1;

  --ez-text: #0f1722;
  --ez-text-2: #33414f;
  --ez-muted: #64748b;
  --ez-faint: #8a95a3;

  --ez-accent: #2b6fe0;
  --ez-accent-2: #1b52b4;
  --ez-accent-solid: #2b6fe0;
  --ez-on-accent: #ffffff;
  --ez-accent-ink: #e8f0fe;
  --ez-accent-soft: rgba(43, 111, 224, .10);
  --ez-accent-line: rgba(43, 111, 224, .26);
  --ez-accent-glow: rgba(43, 111, 224, .20);
  --ez-accent-rgb: 43, 111, 224;

  --ez-ok: #0f7a4c;
  --ez-ok-2: #0b5c39;
  --ez-ok-solid: #128554;
  --ez-ok-ink: #e6f6ee;
  --ez-ok-soft: rgba(21, 144, 92, .10);
  --ez-ok-line: rgba(21, 144, 92, .26);
  --ez-ok-glow: rgba(21, 144, 92, .18);

  --ez-warn: #8f6109;
  --ez-warn-2: #6e4a07;
  --ez-warn-solid: #b9800e;
  --ez-warn-ink: #fbf2e0;
  --ez-warn-soft: rgba(169, 114, 12, .10);
  --ez-warn-line: rgba(169, 114, 12, .26);
  --ez-warn-glow: rgba(169, 114, 12, .18);

  --ez-danger: #c8323c;
  --ez-danger-2: #9d232c;
  --ez-danger-solid: #c8323c;
  --ez-danger-ink: #fdecec;
  --ez-danger-soft: rgba(200, 50, 60, .09);
  --ez-danger-line: rgba(200, 50, 60, .24);
  --ez-danger-glow: rgba(200, 50, 60, .16);

  --ez-shadow-c: rgba(16, 24, 40, .10);
  --ez-shadow: 0 8px 24px rgba(16, 24, 40, .08);
}

/* ==========================================================================
   2. Admin scope - hand the tokens to everything that already exists
   ==========================================================================
   Nothing here restyles anything. It redefines the variables that Vuexy,
   ezitech-dark.css and portal-ui.css already read, so their existing rules
   paint the new palette. A variable set on <body> beats the one inherited
   from <html> whatever the specificity of the rule that set it there, which
   is why this works without a single !important. */

body.ez-admin {
  /* ezitech-dark.css */
  --ezi-bg: var(--ez-bg);
  --ezi-surface: var(--ez-card);
  --ezi-menu: var(--ez-menu);
  --ezi-border: var(--ez-border);
  --ezi-text: var(--ez-text-2);
  --ezi-muted: var(--ez-muted);
  --ezi-bg-light: var(--ez-card);
  --ezi-surface-2: var(--ez-card-2);
  --ezi-line-2: var(--ez-border);
  --ezi-text-2: var(--ez-text-2);
  --ezi-side-grad-1: var(--ez-menu);
  --ezi-side-grad-2: var(--ez-menu);

  /* portal-ui.css */
  --pu-surface: var(--ez-card);
  --pu-surface-2: var(--ez-card-2);
  --pu-line: var(--ez-border);
  --pu-line-soft: var(--ez-border);
  --pu-blue: var(--ez-accent-solid);
  --pu-blue-soft: var(--ez-accent-2);
  --pu-text: var(--ez-text-2);
  --pu-dim: var(--ez-muted);
  --cr-bg: var(--ez-bg);
  --pfl-bg: var(--ez-bg);

  /* the intern stylesheet's variables, which a few shared partials read */
  --tlt-bg: var(--ez-bg);
  --tlt-text: var(--ez-text-2);
  --tlt-muted: var(--ez-muted);
  --tlt-border: var(--ez-border);
  --tlt-primary: var(--ez-accent);
  --tlt-primary-dark: var(--ez-accent-solid);

  /* Bootstrap 5.3. Most of Vuexy is built on these, so setting them here
     carries far more than the list suggests. */
  --bs-body-bg: var(--ez-bg);
  --bs-body-color: var(--ez-text-2);
  --bs-emphasis-color: var(--ez-text);
  --bs-heading-color: var(--ez-text);
  --bs-border-color: var(--ez-border);
  --bs-border-color-translucent: var(--ez-border);
  --bs-secondary-color: var(--ez-muted);
  --bs-secondary-bg: var(--ez-card-2);
  --bs-tertiary-color: var(--ez-faint);
  --bs-tertiary-bg: var(--ez-card-2);
  --bs-card-bg: var(--ez-card);
  --bs-card-color: var(--ez-text-2);
  --bs-paper-bg: var(--ez-card);
  --bs-menu-bg: var(--ez-menu);
  --bs-link-color: var(--ez-accent);
  --bs-link-hover-color: var(--ez-accent-2);
  /* The Vuexy primary is injected inline in <head> as #2f76f4 and everything
     Bootstrap tints - links, focus rings, .text-primary, subtle backgrounds -
     reads it. Setting it here is what stops the old blue reappearing on any
     element nobody thought to style. */
  --bs-primary: var(--ez-accent);
  --bs-primary-rgb: var(--ez-accent-rgb);
  --bs-primary-bg-subtle: var(--ez-accent-soft);
  --bs-primary-border-subtle: var(--ez-accent-line);

  background-color: var(--ez-bg);
  color: var(--ez-text-2);
}

/* ==========================================================================
   3. The leftovers
   ==========================================================================
   portal-ui.css and the Vuexy build hold a number of colours that are not
   variables. Each one below is a value that would otherwise stay navy in
   light mode, or stay off-palette in dark. They are listed by name rather
   than swept, because a sweep of a shared file would change the manager,
   supervisor and intern portals at the same time - and those move later. */

/* --- the shell -------------------------------------------------------- */
:root[data-ez-theme] body.ez-admin .content-wrapper,
:root[data-ez-theme] body.ez-admin .layout-page {
  background-color: transparent;
}

:root[data-ez-theme] body.ez-admin .layout-navbar {
  background: var(--ez-card) !important;
  border-bottom: 1px solid var(--ez-border) !important;
  box-shadow: none !important;
}

:root[data-ez-theme] body.ez-admin .layout-navbar .nav-link,
:root[data-ez-theme] body.ez-admin .layout-navbar .nav-link.btn-icon,
:root[data-ez-theme] body.ez-admin .layout-navbar .navbar-nav .nav-link,
:root[data-ez-theme] body.ez-admin .layout-navbar i {
  color: var(--ez-text-2) !important;
}

:root[data-ez-theme] body.ez-admin #layout-menu,
:root[data-ez-theme] body.ez-admin aside.layout-menu,
:root[data-ez-theme] body.ez-admin .bg-menu-theme {
  background: var(--ez-menu) !important;
  background-image: none !important;
  border-right: 1px solid var(--ez-border) !important;
}

:root[data-ez-theme] body.ez-admin #layout-menu .menu-link,
:root[data-ez-theme] body.ez-admin .bg-menu-theme .menu-link {
  color: var(--ez-muted) !important;
}

:root[data-ez-theme] body.ez-admin #layout-menu .menu-link:hover,
:root[data-ez-theme] body.ez-admin #layout-menu .menu-item:not(.active) > .menu-link:hover {
  color: var(--ez-text) !important;
  background: var(--ez-raise) !important;
}

:root[data-ez-theme] body.ez-admin #layout-menu .menu-item.active > .menu-link {
  color: var(--ez-on-accent) !important;
  background: var(--ez-accent-solid) !important;
  box-shadow: none !important;
}

:root[data-ez-theme] body.ez-admin #layout-menu .menu-item.open > .menu-link.menu-toggle {
  color: var(--ez-text) !important;
  background: var(--ez-raise) !important;
}

:root[data-ez-theme] body.ez-admin #layout-menu .menu-header-text,
:root[data-ez-theme] body.ez-admin .bg-menu-theme .menu-header-text {
  color: var(--ez-faint) !important;
}

:root[data-ez-theme] body.ez-admin #layout-menu .menu-sub .menu-link {
  background: transparent !important;
}

:root[data-ez-theme] body.ez-admin #layout-menu .menu-sub .menu-item.active > .menu-link {
  color: var(--ez-accent) !important;
  background: var(--ez-accent-soft) !important;
}

:root[data-ez-theme] body.ez-admin .bg-menu-theme hr,
:root[data-ez-theme] body.ez-admin #layout-menu hr,
:root[data-ez-theme] body.ez-admin .bg-menu-theme .menu-divider {
  background: var(--ez-border) !important;
  border-color: var(--ez-border) !important;
}

:root[data-ez-theme] body.ez-admin #layout-menu .ps__thumb-y,
:root[data-ez-theme] body.ez-admin .bg-menu-theme .ps__thumb-y {
  background: var(--ez-border-2) !important;
}

:root[data-ez-theme] body.ez-admin .app-brand-text,
:root[data-ez-theme] body.ez-admin .app-brand-logo {
  color: var(--ez-text) !important;
}

:root[data-ez-theme] body.ez-admin .menu-toggle::after {
  color: var(--ez-faint);
}

/* --- cards, tables, controls ------------------------------------------ */
:root[data-ez-theme] body.ez-admin .card,
:root[data-ez-theme] body.ez-admin .ez-card,
:root[data-ez-theme] body.ez-admin .ez-stat-card {
  background: var(--ez-card) !important;
  border: 1px solid var(--ez-border) !important;
  color: var(--ez-text-2);
  box-shadow: none;
}

:root[data-ez-theme] body.ez-admin .card:hover,
:root[data-ez-theme] body.ez-admin .ez-card:hover,
:root[data-ez-theme] body.ez-admin .ez-stat-card:hover {
  border-color: var(--ez-border-2) !important;
  box-shadow: var(--ez-shadow);
}

:root[data-ez-theme] body.ez-admin .card-header h5,
:root[data-ez-theme] body.ez-admin .card-title,
:root[data-ez-theme] body.ez-admin .modal-title,
:root[data-ez-theme] body.ez-admin .content-wrapper h1,
:root[data-ez-theme] body.ez-admin .content-wrapper h2,
:root[data-ez-theme] body.ez-admin .content-wrapper h3,
:root[data-ez-theme] body.ez-admin .content-wrapper h4,
:root[data-ez-theme] body.ez-admin .content-wrapper h5,
:root[data-ez-theme] body.ez-admin .content-wrapper h6 {
  color: var(--ez-text) !important;
}

:root[data-ez-theme] body.ez-admin .content-wrapper .text-muted,
:root[data-ez-theme] body.ez-admin .text-body-secondary {
  color: var(--ez-muted) !important;
}

:root[data-ez-theme] body.ez-admin .table > thead th,
:root[data-ez-theme] body.ez-admin .content-wrapper thead th[style*="sticky"],
:root[data-ez-theme] body.ez-admin .content-wrapper .to-scroll table thead th {
  background: var(--ez-bg-2) !important;
  color: var(--ez-muted) !important;
  border-bottom: 1px solid var(--ez-border) !important;
}

:root[data-ez-theme] body.ez-admin .table {
  --bs-table-color: var(--ez-text-2);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ez-border);
  --bs-table-hover-bg: var(--ez-accent-soft);
  --bs-table-hover-color: var(--ez-text);
  --bs-table-striped-bg: var(--ez-raise);
  --bs-table-striped-color: var(--ez-text-2);
  color: var(--ez-text-2);
}

:root[data-ez-theme] body.ez-admin .table td small,
:root[data-ez-theme] body.ez-admin .table td .text-muted {
  color: var(--ez-muted) !important;
}

:root[data-ez-theme] body.ez-admin .form-control,
:root[data-ez-theme] body.ez-admin .form-select,
:root[data-ez-theme] body.ez-admin .input-group-text,
:root[data-ez-theme] body.ez-admin textarea {
  background: var(--ez-card-2) !important;
  border-color: var(--ez-border) !important;
  color: var(--ez-text-2) !important;
}

:root[data-ez-theme] body.ez-admin .form-control::placeholder,
:root[data-ez-theme] body.ez-admin textarea::placeholder {
  color: var(--ez-faint) !important;
  opacity: 1;
}

:root[data-ez-theme] body.ez-admin .form-control:focus,
:root[data-ez-theme] body.ez-admin .form-select:focus {
  border-color: var(--ez-accent) !important;
  box-shadow: 0 0 0 .18rem var(--ez-accent-soft) !important;
}

:root[data-ez-theme] body.ez-admin .form-label,
:root[data-ez-theme] body.ez-admin label {
  color: var(--ez-text-2) !important;
}

:root[data-ez-theme] body.ez-admin .form-check-input {
  background-color: var(--ez-card-2);
  border-color: var(--ez-border-2);
}

:root[data-ez-theme] body.ez-admin .form-check-input:checked {
  background-color: var(--ez-accent-solid);
  border-color: var(--ez-accent-solid);
}

/* --- buttons ----------------------------------------------------------- */
:root[data-ez-theme] body.ez-admin .btn-primary {
  background: var(--ez-accent-solid) !important;
  border-color: var(--ez-accent-solid) !important;
  color: var(--ez-on-accent) !important;
  box-shadow: none;
}

:root[data-ez-theme] body.ez-admin .btn-primary:hover,
:root[data-ez-theme] body.ez-admin .btn-primary:focus {
  filter: brightness(1.08);
}

:root[data-ez-theme] body.ez-admin .btn-outline-primary,
:root[data-ez-theme] body.ez-admin .btn-label-primary,
:root[data-ez-theme] body.ez-admin .btn-text-primary {
  background: var(--ez-accent-soft) !important;
  border-color: var(--ez-accent-line) !important;
  color: var(--ez-accent) !important;
}

:root[data-ez-theme] body.ez-admin .btn-outline-primary:hover,
:root[data-ez-theme] body.ez-admin .btn-label-primary:hover {
  background: var(--ez-accent-soft) !important;
  color: var(--ez-accent-2) !important;
}

:root[data-ez-theme] body.ez-admin .btn-secondary,
:root[data-ez-theme] body.ez-admin .btn-label-secondary,
:root[data-ez-theme] body.ez-admin .btn-outline-secondary,
:root[data-ez-theme] body.ez-admin .btn-text-secondary {
  background: var(--ez-raise) !important;
  border-color: var(--ez-border) !important;
  color: var(--ez-text-2) !important;
}

:root[data-ez-theme] body.ez-admin .btn-success,
:root[data-ez-theme] body.ez-admin .btn-label-success {
  background: var(--ez-ok-soft) !important;
  border-color: var(--ez-ok-line) !important;
  color: var(--ez-ok) !important;
}

:root[data-ez-theme] body.ez-admin .btn-danger,
:root[data-ez-theme] body.ez-admin .btn-label-danger {
  background: var(--ez-danger-soft) !important;
  border-color: var(--ez-danger-line) !important;
  color: var(--ez-danger) !important;
}

:root[data-ez-theme] body.ez-admin .btn-warning,
:root[data-ez-theme] body.ez-admin .btn-label-warning {
  background: var(--ez-warn-soft) !important;
  border-color: var(--ez-warn-line) !important;
  color: var(--ez-warn) !important;
}

/* --- badges and pills -------------------------------------------------- */
:root[data-ez-theme] body.ez-admin .badge.bg-primary,
:root[data-ez-theme] body.ez-admin .badge.bg-label-primary,
:root[data-ez-theme] body.ez-admin .ez-pill.info,
:root[data-ez-theme] body.ez-admin .ez-pill.submitted {
  background: var(--ez-accent-soft) !important;
  color: var(--ez-accent) !important;
  border-color: var(--ez-accent-line) !important;
}

:root[data-ez-theme] body.ez-admin .badge.bg-success,
:root[data-ez-theme] body.ez-admin .badge.bg-label-success,
:root[data-ez-theme] body.ez-admin .ez-pill.approved,
:root[data-ez-theme] body.ez-admin .ez-pill.paid,
:root[data-ez-theme] body.ez-admin .ez-pill.success {
  background: var(--ez-ok-soft) !important;
  color: var(--ez-ok) !important;
  border-color: var(--ez-ok-line) !important;
}

:root[data-ez-theme] body.ez-admin .badge.bg-warning,
:root[data-ez-theme] body.ez-admin .badge.bg-label-warning,
:root[data-ez-theme] body.ez-admin .ez-pill.pending {
  background: var(--ez-warn-soft) !important;
  color: var(--ez-warn) !important;
  border-color: var(--ez-warn-line) !important;
}

:root[data-ez-theme] body.ez-admin .badge.bg-danger,
:root[data-ez-theme] body.ez-admin .badge.bg-label-danger,
:root[data-ez-theme] body.ez-admin .ez-pill.rejected,
:root[data-ez-theme] body.ez-admin .ez-pill.overdue,
:root[data-ez-theme] body.ez-admin .ez-pill.danger {
  background: var(--ez-danger-soft) !important;
  color: var(--ez-danger) !important;
  border-color: var(--ez-danger-line) !important;
}

/* Info was a fifth colour - cyan. It is the accent now. */
:root[data-ez-theme] body.ez-admin .badge.bg-info,
:root[data-ez-theme] body.ez-admin .badge.bg-label-info {
  background: var(--ez-accent-soft) !important;
  color: var(--ez-accent) !important;
  border-color: var(--ez-accent-line) !important;
}

:root[data-ez-theme] body.ez-admin .badge.bg-secondary,
:root[data-ez-theme] body.ez-admin .badge.bg-label-secondary,
:root[data-ez-theme] body.ez-admin .ez-pill.neutral {
  background: var(--ez-raise) !important;
  color: var(--ez-muted) !important;
  border-color: var(--ez-border) !important;
}

:root[data-ez-theme] body.ez-admin .ez-stat-card .ez-stat-value {
  color: var(--ez-text);
}

:root[data-ez-theme] body.ez-admin .ez-stat-card .ez-stat-label,
:root[data-ez-theme] body.ez-admin .ez-page-head p {
  color: var(--ez-muted);
}

/* --- progress ---------------------------------------------------------- */
:root[data-ez-theme] body.ez-admin .progress {
  background: var(--ez-raise) !important;
}

:root[data-ez-theme] body.ez-admin .progress-bar {
  background: var(--ez-accent-solid) !important;
  box-shadow: none;
}

:root[data-ez-theme] body.ez-admin .progress-bar.bg-success { background: var(--ez-ok) !important; }
:root[data-ez-theme] body.ez-admin .progress-bar.bg-warning { background: var(--ez-warn) !important; }
:root[data-ez-theme] body.ez-admin .progress-bar.bg-danger  { background: var(--ez-danger) !important; }

/* --- overlays ---------------------------------------------------------- */
:root[data-ez-theme] body.ez-admin .modal-content,
:root[data-ez-theme] body.ez-admin .dropdown-menu,
:root[data-ez-theme] body.ez-admin .offcanvas,
:root[data-ez-theme] body.ez-admin .popover,
:root[data-ez-theme] body.ez-admin .toast {
  background: var(--ez-card) !important;
  border: 1px solid var(--ez-border) !important;
  color: var(--ez-text-2) !important;
}

:root[data-ez-theme] body.ez-admin .modal-header,
:root[data-ez-theme] body.ez-admin .modal-footer,
:root[data-ez-theme] body.ez-admin .offcanvas-header {
  border-color: var(--ez-border) !important;
}

:root[data-ez-theme] body.ez-admin .dropdown-item {
  color: var(--ez-text-2) !important;
}

:root[data-ez-theme] body.ez-admin .dropdown-item:hover,
:root[data-ez-theme] body.ez-admin .dropdown-item:focus {
  background: var(--ez-accent-soft) !important;
  color: var(--ez-text) !important;
}

:root[data-ez-theme] body.ez-admin .dropdown-divider {
  border-color: var(--ez-border) !important;
}

:root[data-ez-theme] body.ez-admin .tooltip-inner {
  background: var(--ez-card-2) !important;
  color: var(--ez-text) !important;
  border: 1px solid var(--ez-border);
}

:root[data-ez-theme] body.ez-admin .btn-close {
  filter: none;
  opacity: .6;
}

:root[data-ez-theme] body.ez-admin .page-link {
  background: var(--ez-card-2) !important;
  border-color: var(--ez-border) !important;
  color: var(--ez-text-2) !important;
}

:root[data-ez-theme] body.ez-admin .page-item.active .page-link {
  background: var(--ez-accent-solid) !important;
  border-color: var(--ez-accent-solid) !important;
  color: var(--ez-on-accent) !important;
}

:root[data-ez-theme] body.ez-admin .nav-tabs,
:root[data-ez-theme] body.ez-admin .nav-pills {
  border-bottom-color: var(--ez-border) !important;
}

:root[data-ez-theme] body.ez-admin .nav-tabs .nav-link,
:root[data-ez-theme] body.ez-admin .nav-pills .nav-link {
  color: var(--ez-muted) !important;
}

:root[data-ez-theme] body.ez-admin .nav-tabs .nav-link.active {
  color: var(--ez-text) !important;
  background: transparent !important;
  border-color: transparent transparent var(--ez-accent) !important;
}

:root[data-ez-theme] body.ez-admin .nav-pills .nav-link.active {
  background: var(--ez-accent-solid) !important;
  color: var(--ez-on-accent) !important;
}

:root[data-ez-theme] body.ez-admin .alert {
  border-width: 1px;
  border-style: solid;
}

:root[data-ez-theme] body.ez-admin .alert-primary { background: var(--ez-accent-soft) !important; color: var(--ez-accent) !important; border-color: var(--ez-accent-line) !important; }
:root[data-ez-theme] body.ez-admin .alert-success { background: var(--ez-ok-soft) !important;     color: var(--ez-ok) !important;     border-color: var(--ez-ok-line) !important; }
:root[data-ez-theme] body.ez-admin .alert-warning { background: var(--ez-warn-soft) !important;   color: var(--ez-warn) !important;   border-color: var(--ez-warn-line) !important; }
:root[data-ez-theme] body.ez-admin .alert-danger  { background: var(--ez-danger-soft) !important; color: var(--ez-danger) !important; border-color: var(--ez-danger-line) !important; }
:root[data-ez-theme] body.ez-admin .alert-info    { background: var(--ez-accent-soft) !important; color: var(--ez-accent) !important; border-color: var(--ez-accent-line) !important; }

:root[data-ez-theme] body.ez-admin hr,
:root[data-ez-theme] body.ez-admin .divider {
  border-color: var(--ez-border);
  opacity: 1;
}

:root[data-ez-theme] body.ez-admin .text-primary { color: var(--ez-accent) !important; }
:root[data-ez-theme] body.ez-admin .text-success { color: var(--ez-ok) !important; }
:root[data-ez-theme] body.ez-admin .text-warning { color: var(--ez-warn) !important; }
:root[data-ez-theme] body.ez-admin .text-danger  { color: var(--ez-danger) !important; }
:root[data-ez-theme] body.ez-admin .text-info    { color: var(--ez-accent) !important; }

/* Third-party widgets that bring their own surface */
:root[data-ez-theme] body.ez-admin .swal2-popup {
  background: var(--ez-card) !important;
  color: var(--ez-text-2) !important;
  border: 1px solid var(--ez-border);
}

:root[data-ez-theme] body.ez-admin .swal2-title,
:root[data-ez-theme] body.ez-admin .swal2-html-container {
  color: var(--ez-text-2) !important;
}

:root[data-ez-theme] body.ez-admin .select2-container--default .select2-selection--single,
:root[data-ez-theme] body.ez-admin .select2-container--default .select2-selection--multiple,
:root[data-ez-theme] body.ez-admin .select2-dropdown,
:root[data-ez-theme] body.ez-admin .flatpickr-calendar,
:root[data-ez-theme] body.ez-admin .ts-control,
:root[data-ez-theme] body.ez-admin .ts-dropdown {
  background: var(--ez-card-2) !important;
  border-color: var(--ez-border) !important;
  color: var(--ez-text-2) !important;
}

/* ==========================================================================
   4. The toggle itself
   ========================================================================== */

.ez-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--ez-border);
  background: var(--ez-raise);
  color: var(--ez-text-2);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.ez-theme-toggle:hover {
  border-color: var(--ez-accent-line);
  color: var(--ez-accent);
}

/* One icon is shown at a time - whichever mode the click will take you TO. */
.ez-theme-toggle .ez-icon-light { display: none; }
:root[data-ez-theme='light'] .ez-theme-toggle .ez-icon-light { display: inline-flex; }
:root[data-ez-theme='light'] .ez-theme-toggle .ez-icon-dark { display: none; }

/* Light mode needs the images and the one place that still assumes a dark
   page to be told. Screenshots, logos and QR codes are left alone. */
:root[data-ez-theme='light'] body.ez-admin ::-webkit-scrollbar-thumb {
  background: var(--ez-border-2);
}

/* ==========================================================================
   5. What the first live walk found
   ==========================================================================
   Forty-five admin pages were loaded and measured rather than looked at - the
   computed colour of every element, in both modes, against what is actually
   behind it. These are the things that came back. */

/* Vuexy's fifth colour. `info` is cyan, and it survived the sweep because it
   is painted by the compiled build, not by any page. */
:root[data-ez-theme] body.ez-admin .btn-info,
:root[data-ez-theme] body.ez-admin .btn-label-info,
:root[data-ez-theme] body.ez-admin .btn-outline-info,
:root[data-ez-theme] body.ez-admin .btn-text-info {
  background: var(--ez-accent-soft) !important;
  border-color: var(--ez-accent-line) !important;
  color: var(--ez-accent) !important;
}

/* A button with only a size class - `.btn.btn-sm` - kept Vuexy's #494a5d,
   which is nearly unreadable on either surface. This sits BEFORE nothing and
   after the variants above only in source order, so a coloured variant still
   wins. */
:root[data-ez-theme] body.ez-admin .btn {
  color: var(--ez-text-2);
}

:root[data-ez-theme] body.ez-admin .btn-primary,
:root[data-ez-theme] body.ez-admin .page-item.active .page-link,
:root[data-ez-theme] body.ez-admin .nav-pills .nav-link.active,
:root[data-ez-theme] body.ez-admin #layout-menu .menu-item.active > .menu-link {
  color: var(--ez-on-accent) !important;
}

/* Laravel's default paginator is the Tailwind one, and Tailwind is not loaded
   in this portal - so `bg-white` and `text-gray-500` are literally white boxes
   with grey text on a dark page. Not caused by the theme; it has been that way
   as long as those pages have paginated, and it is only obvious now that
   everything around it is consistent. */
:root[data-ez-theme] body.ez-admin .bg-white {
  background-color: var(--ez-card-2) !important;
}

:root[data-ez-theme] body.ez-admin [class*="text-gray-"] {
  color: var(--ez-text-2) !important;
}

:root[data-ez-theme] body.ez-admin [class*="text-gray-4"],
:root[data-ez-theme] body.ez-admin [class*="text-gray-5"] {
  color: var(--ez-muted) !important;
}

:root[data-ez-theme] body.ez-admin [class*="border-gray-"] {
  border-color: var(--ez-border) !important;
}

/* Vuexy's initials avatar takes its colour from a `bg-label-*` class. In light
   mode the surface turns white underneath and the letters stay pale. */
:root[data-ez-theme] body.ez-admin .avatar-initial {
  background: var(--ez-accent-soft) !important;
  color: var(--ez-accent) !important;
}

:root[data-ez-theme] body.ez-admin .avatar-initial.bg-label-success,
:root[data-ez-theme] body.ez-admin .bg-label-success .avatar-initial { background: var(--ez-ok-soft) !important; color: var(--ez-ok) !important; }
:root[data-ez-theme] body.ez-admin .avatar-initial.bg-label-warning,
:root[data-ez-theme] body.ez-admin .bg-label-warning .avatar-initial { background: var(--ez-warn-soft) !important; color: var(--ez-warn) !important; }
:root[data-ez-theme] body.ez-admin .avatar-initial.bg-label-danger,
:root[data-ez-theme] body.ez-admin .bg-label-danger .avatar-initial { background: var(--ez-danger-soft) !important; color: var(--ez-danger) !important; }

/* Vuexy paints these from the compiled build, where the dark values are
   literal - so they stay dark however the theme is set. Each one was found by
   measuring a page in light mode, not by reading the CSS. */

/* `.bg-light` is #494a5d in the dark build: a dark panel inside a white modal,
   with dark text on it. */
:root[data-ez-theme] body.ez-admin .bg-light,
:root[data-ez-theme] body.ez-admin .bg-lighter,
:root[data-ez-theme] body.ez-admin .bg-body {
  background-color: var(--ez-card-2) !important;
}

:root[data-ez-theme] body.ez-admin .bg-dark {
  background-color: var(--ez-bg-2) !important;
  color: var(--ez-text-2) !important;
}

/* List groups kept #cfcde4 - light text, on white. */
:root[data-ez-theme] body.ez-admin .list-group,
:root[data-ez-theme] body.ez-admin .list-group-item {
  background-color: transparent !important;
  border-color: var(--ez-border) !important;
  color: var(--ez-text-2) !important;
}

:root[data-ez-theme] body.ez-admin .list-group-item-action:hover {
  background-color: var(--ez-raise) !important;
  color: var(--ez-text) !important;
}

/* `.text-white` means "the colour that reads on this surface", not the literal
   colour - in dark that is still almost white. The exception is anything sat
   on the accent, where white is the point. */
:root[data-ez-theme] body.ez-admin .text-white {
  color: var(--ez-text) !important;
}

:root[data-ez-theme] body.ez-admin .btn.text-white,
:root[data-ez-theme] body.ez-admin .badge.text-white,
:root[data-ez-theme] body.ez-admin [class*="bg-primary"] .text-white,
:root[data-ez-theme] body.ez-admin [class*="bg-primary"].text-white {
  color: var(--ez-on-accent) !important;
}

/* Links, at exactly Bootstrap's own weight.
   `:where()` contributes nothing to specificity, so this rule is (0,0,1) -
   the same as Bootstrap's own `a`, and it wins only because it comes later.
   Any page that styles its own links beats it without a fight. That matters:
   the first version was a blanket `body.ez-admin a`, which outranked
   `.ur-tabs a.on` and painted that page's active tab accent-on-accent, a
   contrast ratio of 1.00. This one cannot do that to anybody. */
:where(body.ez-admin) a {
  color: var(--ez-accent);
}

:where(body.ez-admin) a:hover {
  color: var(--ez-accent-2);
}