/*==============================================================================

 VELTRIX · THEME LAYER  (light + dark)

 Every page keeps the stylesheet it already had. This file adds the *colour
 system* on top of it:

   1. light tokens   — `:root`               (identical to the old literals,
                                               so light mode does not change)
   2. dark tokens    — `:root[data-theme="dark"]`
   3. admin light    — light variant for the console, which is dark by default
   4. primitives     — color-scheme, scrollbars, focus ring, reduced motion
   5. theme toggle   — the control docked at the top of every page
   6. dark touch-ups — the few places that used a literal that is not a token
   7. marketing page — WordPress preset remap for `templates/index.html`
   8. console light  — the handful of rules that are dark-only by design

 Pages load this file *before* their own stylesheet, so a page keeps the last
 word in light mode while the dark block (higher specificity) always wins.

==============================================================================*/


/*==============================================================================
  1 · LIGHT TOKENS — the app's original palette
==============================================================================*/

:root{
  color-scheme:light;

  /* brand ------------------------------------------------------------------*/
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --primary-light:#3b82f6;
  --accent:#22d3ee;

  /* surfaces ---------------------------------------------------------------*/
  --bg:#f4f7fc;
  --card:#ffffff;
  --topbar-bg:rgba(255,255,255,.85);   /* sticky header sheet (blurred)      */
  --surface-2:#f8fbff;      /* softest panel  (inputs, tiles)      */
  --surface-3:#eef5ff;      /* row / card hover wash               */
  --surface-4:#eef4ff;      /* soft blue chip                      */
  --surface-5:#f8fafc;      /* icon chip, skeleton highlight       */
  --surface-6:#f4f8ff;      /* ghost hover, inner panel            */
  --line:#eef2f9;           /* hairline borders                    */
  --line-2:#edf2f7;         /* scrollbar track, list divider       */
  --line-3:#e8eefb;         /* chat outlines                       */
  --line-4:#e8eef8;         /* composer outline                    */
  --track:#e2e8f0;          /* sliders, meters, skeletons          */
  --scroll-thumb:#c9d8f2;   /* sidebar scrollbar thumb             */
  --muted-fill:#cbd5e1;     /* disabled dots, slider track         */

  /* page washes & tiles ----------------------------------------------------*/
  --paper:#f6f8fc;          /* page base under the wash            */
  --paper-2:#f2f6fa;        /* recessed phone / preview mock       */
  --paper-3:#fbfdff;        /* raised inner panel                  */
  --tile:#f1f5fb;           /* chips, tab strips                   */
  --tile-2:#f8faff;         /* sidebar footer, quiet rows          */
  --tile-3:#f1f5f9;         /* neutral step / prefix tiles         */

  /* hairlines that are not the default border colour ----------------------*/
  --line-soft:#e3edfb;      /* card outlines on white              */
  --line-dash:#d6e3f5;      /* dashed dividers                     */
  --line-dash-2:#d3def0;    /* dashed dividers (warmer)            */
  --line-blue:#dbe6ff;      /* blue hairline for hover states      */

  /* text -------------------------------------------------------------------*/
  --text:#1e293b;
  --muted:#64748b;
  --text-2:#475569;
  --text-3:#334155;
  --placeholder:#9aa7bd;
  --faint:#94a3b8;
  --faint-2:#cbd5e1;

  /* status -----------------------------------------------------------------*/
  --green:#16a34a;
  --green-bg:#dcfce7;
  --green-bg-2:#f0fdf4;     /* success wash on white               */
  --green-line:#a7f3d0;
  --green-ink:#047857;
  --green-ink-2:#15803d;

  --red:#dc2626;
  --red-2:#ef4444;          /* the brighter red used for badges     */
  --red-bg:#fee2e2;
  --red-line:#fecaca;

  --amber:#d97706;
  --orange:#f59e0b;         /* stars, ratings, ribbons             */
  --orange-2:#f97316;
  --orange-3:#fbbf24;
  --amber-bg:#fef3c7;
  --amber-bg-2:#fffbeb;     /* amber notice wash on white          */
  --amber-line:#fde68a;
  --amber-line-2:#fcd34d;
  --amber-ink:#b45309;
  --amber-ink-2:#92400e;

  --blue-bg:#dbeafe;
  --blue-line:#bfdbfe;

  --mpesa:#1e9e55;          /* M-PESA brand green                  */
  --mpesa-dark:#178043;
  --mpesa-bg:#e7f6ee;       /* its security-note wash              */
  --mpesa-ink:#14633a;

  /* depth ------------------------------------------------------------------*/
  --shadow:0 10px 35px rgba(15,23,42,.08);
  --shadow-lg:0 24px 60px rgba(15,23,42,.14);
}


/*==============================================================================
  2 · DARK TOKENS — one palette for the whole app
  The console, the error page and the marketing page are dark *by design* and
  carry their own tokens, so they are excluded here (sections 3, 6 and 7
  repaint those three instead). This block is the app itself: dashboard, auth,
  task, payment and the wifi storefront.
==============================================================================*/

:root[data-theme="dark"]:not([data-surface="marketing"]):not([data-surface="admin"]):not([data-surface="404"]){
  color-scheme:dark;

  /* brand ------------------------------------------------------------------*/
  --primary:#4f8cff;
  --primary-dark:#3b6fe0;
  --primary-light:#78a8ff;
  --accent:#22d3ee;

  /* surfaces ---------------------------------------------------------------*/
  --bg:#0b1020;
  --card:#141a2e;
  --topbar-bg:rgba(13,18,34,.82);      /* sticky header sheet (blurred)      */
  --surface-2:#1a2138;
  --surface-3:#1f2842;
  --surface-4:#1e2742;
  --surface-5:#151d33;
  --surface-6:#1a2340;
  --line:#232d4d;
  --line-2:#242f4f;
  --line-3:#26314f;
  --line-4:#26314f;
  --track:#2c3757;
  --scroll-thumb:#3b4a6e;
  --muted-fill:#46536f;

  /* page washes & tiles ----------------------------------------------------*/
  --paper:#070c18;
  --paper-2:#0a1020;
  --paper-3:#0e1426;
  --tile:#182036;
  --tile-2:#141b2f;
  --tile-3:#1c2540;

  /* hairlines that are not the default border colour ----------------------*/
  --line-soft:#22304f;
  --line-dash:#28365c;
  --line-dash-2:#28365c;
  --line-blue:#24315a;

  /* text -------------------------------------------------------------------*/
  --text:#e6ecff;
  --muted:#8b96b8;
  --text-2:#b9c4e0;
  --text-3:#c8d2ea;
  --placeholder:#6f7c9e;
  --faint:#7f8cae;
  --faint-2:#5b6892;

  /* status -----------------------------------------------------------------*/
  --green:#2dd4a7;
  --green-bg:rgba(45,212,167,.14);
  --green-bg-2:rgba(45,212,167,.12);
  --green-line:rgba(45,212,167,.36);
  --green-ink:#4ade80;
  --green-ink-2:#34d399;

  --red:#ff6b7a;
  --red-2:#ff7a85;
  --red-bg:rgba(255,107,122,.14);
  --red-line:rgba(255,107,122,.36);

  --amber:#ffc26b;
  --orange:#fbbf24;
  --orange-2:#fb923c;
  --orange-3:#fcd34d;
  --amber-bg:rgba(255,194,107,.14);
  --amber-bg-2:rgba(255,194,107,.10);  /* amber notice wash on dark           */
  --amber-line:rgba(255,194,107,.32);
  --amber-line-2:rgba(255,194,107,.46);
  --amber-ink:#ffc26b;
  --amber-ink-2:#fcd34d;

  --blue-bg:rgba(79,140,255,.16);
  --blue-line:rgba(79,140,255,.36);

  --mpesa:#3ddc84;          /* M-PESA brand green, lifted for dark */
  --mpesa-dark:#25a45f;
  --mpesa-bg:rgba(61,220,132,.13);
  --mpesa-ink:#7fe0a8;

  /* depth ------------------------------------------------------------------*/
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --shadow-lg:0 26px 64px rgba(0,0,0,.55);
}



/*==============================================================================
  3 · ADMIN CONSOLE — light variant
  The console was designed dark-first. When the visitor picks "light" we keep
  its layout untouched and only remap the console's own tokens.
==============================================================================*/

:root[data-surface="admin"][data-theme="light"]{
  color-scheme:light;

  --bg:#f4f7fc;
  --panel:#ffffff;
  --panel2:#f1f5fb;
  --line:#e2e8f0;
  --text:#0f172a;
  --muted:#64748b;
  --brand:#2563eb;
  --brand2:#7c5cff;

  --green:#0f9d76;
  --green-bg:rgba(15,157,118,.12);
  --red:#e11d48;
  --red-bg:rgba(225,29,72,.10);
  --amber:#b45309;
  --amber-bg:rgba(180,83,9,.12);

  --shadow:0 8px 30px rgba(15,23,42,.10);
}


/*==============================================================================
  4 · PRIMITIVES
   Deliberately few.  Every layout already paints its own page wash on <body>
   from the palette tokens, and <html> must stay unpainted: a background there
   would stop the body wash from propagating to the canvas and would hide the
   decorative blurred blobs the pages sit behind the body (they are painted
   with z-index:-1).
==============================================================================*/

::selection{background:rgba(37,99,235,.22)}
:root[data-theme="dark"] ::selection{background:rgba(79,140,255,.32)}

/* Scrollbars follow the theme instead of shouting white. */
*{scrollbar-color:var(--track) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--track);border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:var(--faint-2)}

/* A single visible focus ring for keyboard users. */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}



/*==============================================================================
  5 · THEME TOGGLE
  One button per page. It either docks into a page slot (topbar / WP header)
  or floats at the top-right corner, and it is the same control everywhere.
==============================================================================*/

.theme-dock{
  position:fixed;
  top:14px;
  right:16px;
  z-index:900;
  display:flex;
  align-items:center;
}
@media (max-width:600px){
  .theme-dock{top:10px;right:10px}
}

.theme-toggle{
  position:relative;
  width:42px;
  height:42px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--card);
  color:var(--text-2);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .25s ease,background .25s ease,color .25s ease,
             border-color .25s ease,box-shadow .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle:hover{
  transform:translateY(-2px);
  color:var(--primary);
  border-color:var(--blue-line);
  background:var(--surface-2);
}
.theme-toggle:active{transform:translateY(0) scale(.95)}
.theme-toggle i{pointer-events:none;transition:transform .45s cubic-bezier(.22,1,.36,1)}
:root[data-theme="dark"] .theme-toggle i{transform:rotate(-22deg)}

/* One button, two icons: the control shows the side you are *not* on, and CSS
   picks it — a toggle injected later by a page or by the dashboard's SPA loader
   therefore renders correctly without any script having to touch it. */
.theme-toggle .fa-sun{display:none}
:root[data-theme="dark"] .theme-toggle .fa-moon{display:none}
:root[data-theme="dark"] .theme-toggle .fa-sun{display:inline-block}

/* Small label bubble, follows the button. */
.theme-toggle::after{
  content:attr(data-tip);
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  padding:5px 9px;
  border-radius:8px;
  background:var(--text);
  color:var(--bg);
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:.18s ease;
}
.theme-toggle:hover::after,
.theme-toggle:focus-visible::after{opacity:1;transform:none}

/* Flat — sits in an icon row (dashboard topbar, admin topbar). */
.theme-toggle--flat{
  width:40px;
  height:40px;
  background:var(--surface-2);
  border-color:var(--line);
  box-shadow:none;
}

/* On-dark — sits on the marketing header's blue gradient. */
.theme-toggle--on-dark{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.26);
  color:#fff;
  box-shadow:none;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.theme-toggle--on-dark:hover{
  background:rgba(255,255,255,.26);
  border-color:rgba(255,255,255,.45);
  color:#fff;
}


/*==============================================================================
  6 · DARK TOUCH-UPS
  A few colours never lived in a declaration the tokenizer could rewrite: they
  are browser defaults (native widgets, autofill) or belong to a page that was
  designed dark and only ever had one palette. Both are handled here.
==============================================================================*/

/* Native widgets follow the palette instead of the operating system's. */
:root[data-theme="dark"] select option,
:root[data-theme="dark"] select optgroup{background:var(--card);color:var(--text)}
:root[data-theme="dark"] ::-webkit-calendar-picker-indicator{filter:invert(.85)}

/* Chrome fills autofilled inputs with its own pale yellow — repaint them. */
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:hover,
:root[data-theme="dark"] input:-webkit-autofill:focus,
:root[data-theme="dark"] textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 100px var(--surface-2) inset;
  caret-color:var(--text);
}

/* --- 404 page -------------------------------------------------------------
   The error page is dark-first: its own `:root` holds that palette, so the
   dark side needs nothing. Light mode remaps the same five tokens — the night
   illustration in the <svg> stays a night illustration on purpose. */
:root[data-surface="404"][data-theme="light"]{
  color-scheme:light;
  --bg:#f4f7fc;
  --panel:#ffffff;
  --panel2:#f1f5fb;
  --line:#e2e8f0;
  --text:#1e293b;
  --muted:#64748b;
  --brand:#2563eb;
  --brand2:#7c5cff;
}
:root[data-surface="404"][data-theme="light"] body{
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(255,157,77,.10), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(123,92,255,.12), transparent 60%),
    var(--bg);
}
:root[data-surface="404"][data-theme="light"] .brand img{
  border-color:var(--line);
  box-shadow:0 6px 18px rgba(15,23,42,.12);
}
:root[data-surface="404"][data-theme="light"] footer{color:var(--muted)}




/*==============================================================================
  7 · MARKETING PAGE — WordPress preset remap
  `templates/index.html` is a saved WordPress page: every colour on it resolves
  through the `--wp--preset--color--*` custom properties declared in its own
  inline stylesheet. It is designed dark, so `dark` (and "no choice yet") simply
  leaves those presets alone — the page is its own reference. Picking `light`
  remaps the presets, which repaints the page without touching a single rule of
  its markup or its theme CSS.
==============================================================================*/

:root[data-surface="marketing"][data-theme="light"]{
  color-scheme:light;

  /* surfaces */
  --wp--preset--color--body-background:#eef2f9;
  --wp--preset--color--button-hover-bg:#ffffff;

  /* ink — the theme's names mislead: `base` and `base-2` are this page's *ink*
     presets (every rule that reads them sets `color:`), so on the light page
     they have to become dark ink, exactly like `custom-text`. */
  --wp--preset--color--base:#0f172a;
  --wp--preset--color--base-2:#1e293b;
  --wp--preset--color--custom-text:#334155;
  --wp--preset--color--contrast:#0f172a;
  --wp--preset--color--contrast-2:#64748b;
  --wp--preset--color--contrast-3:#94a3b8;
  --wp--preset--color--custom-secondary:#0e7490;

  /* The decorative gradients (hero panels, CTA bands) are part of the visual
     identity and are left as designed, exactly like the wifi page's hero. */
}

/* Whatever paints its *own* dark surface keeps the white type the dark design
   gave it: the solid buttons (`--contrast` is the button fill) and every
   gradient panel.  Without this the flipped ink presets above would put dark
   type on those surfaces. */
:root[data-surface="marketing"][data-theme="light"] .wp-element-button,
:root[data-surface="marketing"][data-theme="light"] .wp-block-button__link,
:root[data-surface="marketing"][data-theme="light"] [class*="gradient-background"]{
  color:#fff !important;
}

/* The page's own blue headers keep white type, so the toggle rides them. */
:root[data-surface="marketing"] .theme-toggle{color:#fff}


/*==============================================================================
  8 · ADMIN CONSOLE — the last dark-only literals
  `admin.css` builds its surfaces from its own tokens, which section 3 already
  repaints. These rules are the places where a translucent *white* or *black*
  wash was hard-coded because the console had no light mode.
==============================================================================*/

:root[data-surface="admin"][data-theme="light"] .topbar{
  background:rgba(255,255,255,.92);
}

:root[data-surface="admin"][data-theme="light"] tbody tr:hover{
  background:rgba(15,23,42,.035);
}

:root[data-surface="admin"][data-theme="light"] .log-line{
  border-bottom-color:rgba(15,23,42,.07);
}

/* The log pane was a black terminal; on the light console it becomes a paper
   pane, because the rows it holds already paint with the console's own ink
   tokens (`--text` for the action, `--muted` for the detail) — leaving the
   background black would put dark ink on black. */
:root[data-surface="admin"][data-theme="light"] .log-view{
  background:var(--panel2);
}
:root[data-surface="admin"][data-theme="light"] .log-line .t{
  color:var(--muted);
}

/* `.btn` carries a hard-coded `color:#fff` because its fills are saturated
   gradients; the Cancel button's fill is a plain panel, so on the light console
   it takes the muted ink instead (white on a pale panel is invisible). */
:root[data-surface="admin"][data-theme="light"] .modal-cancel{
  color:var(--muted);
}

/* The console and the error page never see the app palette (section 2 skips
   them), so the theme control borrows *their* tokens instead. */
:root[data-surface="admin"] .theme-toggle,
:root[data-surface="404"] .theme-toggle{
  background:var(--panel);
  border-color:var(--line);
  color:var(--muted);
  box-shadow:var(--shadow);
}
:root[data-surface="admin"] .theme-toggle:hover,
:root[data-surface="404"] .theme-toggle:hover{
  background:var(--panel2);
  border-color:var(--brand);
  color:var(--brand);
}

:root[data-surface="admin"][data-theme="light"] .modal-overlay{
  background:rgba(15,23,42,.45);
}