/* ============================================================
   WIZZ PANEL — Liquid Glass design system
   ------------------------------------------------------------
   One source of truth for every page: auth, customer dashboard
   and admin console.

   Structure:
     1.  Design tokens (Liquid Glass layers, type, motion)
     2.  Reset + base + canvas atmosphere
     3.  Typography
     4.  Buttons
     5.  Forms
     6.  Auth page
     7.  App shell (sidebar / navbar / body / bottom nav)
     8.  Panels, stat strips, page headers, toolbars
     9.  Tables + badges
     10. Drawers + modals
     11. Toasts
     12. Chat thread + feeds + settings
     13. Utilities
     14. Responsive

   Layer model (background → foreground):
     canvas wash → navigation glass → content surface →
     elevated component → modal / drawer
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS

   Light theme is defined here. Dark theme re-points the SAME token
   names in the block below (see "THEME: DARK"), so every component
   is written once and inherits both themes automatically.

   `color-scheme` is declared here so the browser also themes its own
   widgets — scrollbars, date pickers, select popups and `<option>`
   lists — which no amount of CSS variables can reach.
   ============================================================ */
:root {
  color-scheme: light;

  /* --- Canvas and surfaces (opaque content surfaces) --- */
  --bg-base:        #f2f2f7;
  --bg-canvas:      #ffffff;
  --bg-surface:     #ffffff;
  --bg-card:        #ffffff;
  --bg-panel:       #ffffff;
  --bg-elevated:    #f7f7fa;
  --bg-tertiary:    #f2f2f7;
  --bg-card-hover:  #fbfbfd;
  --bg-row-hover:   #f5f5f7;
  --bg-muted:       #f2f2f7;
  --bg-hover:       rgba(0, 0, 0, 0.035);
  --input-bg:       #ffffff;

  /* --- Liquid Glass layers (translucent chrome) --- */
  --glass-nav:      rgba(255, 255, 255, 0.66);
  --glass-surface:  rgba(255, 255, 255, 0.74);
  --glass-raised:   rgba(255, 255, 255, 0.86);
  --glass-overlay:  rgba(255, 255, 255, 0.94);
  --glass-blur:     saturate(180%) blur(20px);
  --glass-blur-lg:  saturate(180%) blur(30px);
  --glass-specular: inset 0 1px 0 rgba(255, 255, 255, 0.75);

  /* --- Hairlines --- */
  --border-subtle:    rgba(0, 0, 0, 0.065);
  --border-default:   rgba(0, 0, 0, 0.105);
  --border-medium:    rgba(0, 0, 0, 0.175);
  --border-color:     rgba(0, 0, 0, 0.105);
  --border-primary:   rgba(0, 0, 0, 0.105);
  --border-accent:    rgba(0, 102, 204, 0.26);
  --divider:          rgba(0, 0, 0, 0.075);

  /* --- Text --- */
  --text-primary:   #1d1d1f;
  --text-secondary: #5b5b62;
  /* Was #86868b (Apple's tertiaryLabel), which measured 3.2:1 on the
     canvas — below WCAG AA for the 11-13px metadata it is used on.
     #6b6b70 clears 4.7:1 on the canvas and 6.7:1 on white while keeping
     a visible step below --text-secondary. */
  --text-muted:     #6b6b70;
  --text-on-dark:   #ffffff;
  --text-on-dark-2: rgba(255, 255, 255, 0.68);

  /* --- Accent (one interactive colour: Action Blue) --- */
  --accent:          #0066cc;
  --accent-hover:    #0071e3;
  --accent-focus:    #0071e3;
  --accent-active:   #0055aa;
  --accent-on-dark:  #2997ff;
  --primary:         #0066cc;
  --secondary:       #0071e3;
  --accent-cyan:     #0066cc;
  --accent-gradient: linear-gradient(180deg, #0a74d8 0%, #0066cc 100%);
  --accent-glow:     rgba(0, 102, 204, 0.22);
  --accent-glow-lg:  rgba(0, 102, 204, 0.14);
  --accent-soft:     rgba(0, 102, 204, 0.085);
  --accent-cyan-soft: rgba(0, 102, 204, 0.085);

  /* --- Semantic: green --- */
  --success:        #1a7f4b;
  --success-bright: #34c759;
  --success-bg:     rgba(52, 199, 89, 0.12);
  --success-border: rgba(52, 199, 89, 0.28);
  --success-glow:   rgba(52, 199, 89, 0.24);

  /* --- Semantic: orange (pending / warning) --- */
  --orange:         #b25000;
  --orange-bg:      rgba(255, 149, 0, 0.14);
  --orange-border:  rgba(255, 149, 0, 0.3);
  --orange-glow:    rgba(255, 149, 0, 0.24);
  --warning:        #b25000;
  --warning-bg:     rgba(255, 149, 0, 0.14);
  --warning-border: rgba(255, 149, 0, 0.3);

  /* --- Semantic: red --- */
  --danger:         #d70015;
  --danger-bg:      rgba(255, 59, 48, 0.1);
  --danger-border:  rgba(255, 59, 48, 0.26);
  --danger-glow:    rgba(255, 59, 48, 0.22);

  /* --- Semantic: purple --- */
  --purple:         #7c3aed;
  --purple-bg:      rgba(124, 58, 237, 0.1);
  --purple-border:  rgba(124, 58, 237, 0.26);
  --purple-glow:    rgba(124, 58, 237, 0.22);

  /* --- Semantic: info (teal) --- */
  --info:           #0b7285;
  --info-bg:        rgba(48, 176, 199, 0.13);
  --info-border:    rgba(48, 176, 199, 0.28);

  /* --- Theme-sensitive tokens -------------------------------------
     These are the values that CANNOT be derived from the tokens
     above, because their job is to sit *against* an accent or a
     semantic colour. Each one has a light and a dark value, chosen
     so the pairing clears WCAG AA (4.5:1 for text, 3:1 for large
     text and non-text indicators) in both themes. */

  /* Accent used as a *background* behind white label text (primary
     buttons, the admin chat bubble, the mobile FAB). Kept separate
     from --accent, which is the accent used as *text and icon* on a
     surface. One blue cannot satisfy both jobs in dark mode. */
  --accent-strong:      #0066cc;
  --accent-strong-hover:#0071e3;

  /* Inverted pairs: a filled pill whose colour is derived from the
     theme's own text colour (selected chips). */
  --inverse-bg:         #1d1d1f;
  --inverse-text:       #ffffff;

  /* Hover / emphasis steps for the semantic families. */
  --success-strong:     #14603a;
  --danger-strong:      #b3000f;

  /* Chrome the browser draws for us, which needs a theme value. */
  --scrollbar-thumb:        rgba(0, 0, 0, 0.16);
  --scrollbar-thumb-hover:  rgba(0, 0, 0, 0.28);
  --spinner-track:          rgba(0, 0, 0, 0.12);

  /* Scrims. A dark scrim is nearly invisible on a dark canvas, so
     dark mode needs a heavier one to keep the modal legible. */
  --scrim-backdrop: rgba(0, 0, 0, 0.18);
  --scrim-drawer:   rgba(0, 0, 0, 0.16);
  --scrim-modal:    rgba(0, 0, 0, 0.24);

  /* The one dark tile in the system. In light mode it is near-black
     on a light canvas; in dark mode it steps *up* off the canvas so
     it still reads as a raised block. */
  --tile-dark-bg:     #1d1d1f;
  --tile-dark-border: rgba(0, 0, 0, 0.6);

  /* Atmosphere behind the glass layers. */
  --canvas-atmosphere:
    radial-gradient(1100px 620px at 8% -12%, rgba(0, 102, 204, 0.075) 0%, transparent 68%),
    radial-gradient(900px 560px at 96% 2%, rgba(48, 176, 199, 0.06) 0%, transparent 66%),
    radial-gradient(1000px 700px at 78% 106%, rgba(255, 149, 0, 0.05) 0%, transparent 66%);
  --grid-line:      rgba(0, 0, 0, 0.018);
  --grid-line-auth: rgba(0, 0, 0, 0.022);
  --orb-accent:     rgba(0, 102, 204, 0.22);
  --orb-warm:       rgba(255, 149, 0, 0.14);

  /* --- Layout --- */
  --sidebar-width:      256px;
  --topbar-height:      58px;
  --content-max-width:  1560px;
  --sp:                 8px;

  /* --- Radii --- */
  --radius-xs:    6px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* --- Elevation (soft, surface-first) --- */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:    0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px -6px rgba(0, 0, 0, 0.1);
  --shadow-lg:    0 2px 6px rgba(0, 0, 0, 0.05), 0 14px 34px -14px rgba(0, 0, 0, 0.18);
  --shadow-xl:    0 4px 12px rgba(0, 0, 0, 0.06), 0 30px 68px -24px rgba(0, 0, 0, 0.26);
  --shadow-glow:  0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* --- Motion --- */
  --t-fast:   140ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   280ms cubic-bezier(0.32, 0.72, 0, 1);
  --transition-fast: var(--t-fast);

  /* --- Typography --- */
  --font-heading: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                   'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter',
                   'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* ============================================================
   1b. THEME: DARK

   Same token names, different values. Nothing below this point
   knows which theme is active — that is the whole point.

   Wrapped in `@media screen` so printing always resolves to the
   light tokens defined above, instead of trying to un-dark them.

   Palette follows Apple's dark surfaces: a near-black canvas with
   progressively lighter raised surfaces, hairlines that ADD light
   rather than remove it, and the system accent set brightened one
   step (systemBlue #0a84ff / systemGreen #30d158 / systemOrange
   #ff9f0a / systemRed #ff453a / systemPurple #bf5af2 / teal
   #40c8e0) so semantic text stays readable on the dark canvas.
   ============================================================ */
@media screen {
  [data-theme="dark"] {
    color-scheme: dark;

    /* --- Canvas and surfaces --- */
    --bg-base:        #08080a;
    --bg-canvas:      #161618;
    --bg-surface:     #161618;
    --bg-card:        #161618;
    --bg-panel:       #161618;
    --bg-elevated:    #202024;
    --bg-tertiary:    #1a1a1d;
    --bg-card-hover:  #1f1f23;
    --bg-row-hover:   #1e1e22;
    --bg-muted:       #1a1a1d;
    --bg-hover:       rgba(255, 255, 255, 0.06);
    --input-bg:       #1a1a1e;

    /* --- Liquid Glass: dark translucent chrome --- */
    --glass-nav:      rgba(22, 22, 26, 0.72);
    --glass-surface:  rgba(22, 22, 26, 0.78);
    --glass-raised:   rgba(28, 28, 32, 0.88);
    --glass-overlay:  rgba(20, 20, 23, 0.96);
    --glass-specular: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* --- Hairlines add light on dark --- */
    --border-subtle:    rgba(255, 255, 255, 0.08);
    --border-default:   rgba(255, 255, 255, 0.13);
    --border-medium:    rgba(255, 255, 255, 0.22);
    --border-color:     rgba(255, 255, 255, 0.13);
    --border-primary:   rgba(255, 255, 255, 0.13);
    --border-accent:    rgba(10, 132, 255, 0.40);
    --divider:          rgba(255, 255, 255, 0.09);

    /* --- Text: white primary, muted greys that still clear AA --- */
    --text-primary:   #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-muted:     #8a8a8f;
    --text-on-dark:   #ffffff;
    --text-on-dark-2: rgba(255, 255, 255, 0.62);

    /* --- Accent: brightened for use as text and icons --- */
    --accent:          #2997ff;
    --accent-hover:    #4da3ff;
    --accent-focus:    #409cff;
    --accent-active:   #0a72e8;
    --accent-on-dark:  #2997ff;
    --primary:         #2997ff;
    --secondary:       #2997ff;
    --accent-cyan:     #2997ff;
    --accent-gradient: linear-gradient(180deg, #0a84ff 0%, #0a72e8 100%);
    --accent-glow:     rgba(10, 132, 255, 0.28);
    --accent-glow-lg:  rgba(10, 132, 255, 0.16);
    --accent-soft:     rgba(10, 132, 255, 0.16);
    --accent-cyan-soft: rgba(10, 132, 255, 0.16);

    /* --- Semantics: Apple's dark system colours --- */
    --success:        #30d158;
    --success-bright: #30d158;
    --success-bg:     rgba(48, 209, 88, 0.16);
    --success-border: rgba(48, 209, 88, 0.32);
    --success-glow:   rgba(48, 209, 88, 0.28);

    --orange:         #ff9f0a;
    --orange-bg:      rgba(255, 159, 10, 0.16);
    --orange-border:  rgba(255, 159, 10, 0.34);
    --orange-glow:    rgba(255, 159, 10, 0.26);
    --warning:        #ff9f0a;
    --warning-bg:     rgba(255, 159, 10, 0.16);
    --warning-border: rgba(255, 159, 10, 0.34);

    --danger:         #ff453a;
    --danger-bg:      rgba(255, 69, 58, 0.16);
    --danger-border:  rgba(255, 69, 58, 0.32);
    --danger-glow:    rgba(255, 69, 58, 0.28);

    --purple:         #bf5af2;
    --purple-bg:      rgba(191, 90, 242, 0.16);
    --purple-border:  rgba(191, 90, 242, 0.32);
    --purple-glow:    rgba(191, 90, 242, 0.28);

    --info:           #40c8e0;
    --info-bg:        rgba(64, 200, 224, 0.16);
    --info-border:    rgba(64, 200, 224, 0.32);

    /* --- Theme-sensitive tokens (see the light block above) --- */
    /* #0a72e8 keeps white button labels at 4.58:1 — #0a84ff would
       drop them to 3.0:1, which fails AA at button text sizes. */
    --accent-strong:      #0a72e8;
    --accent-strong-hover:#0a84ff;

    --inverse-bg:         #f5f5f7;
    --inverse-text:       #08080a;

    --success-strong:     #30d158;
    --danger-strong:      #ff6b61;

    --scrollbar-thumb:        rgba(255, 255, 255, 0.18);
    --scrollbar-thumb-hover:  rgba(255, 255, 255, 0.30);
    --spinner-track:          rgba(255, 255, 255, 0.14);

    --scrim-backdrop: rgba(0, 0, 0, 0.55);
    --scrim-drawer:   rgba(0, 0, 0, 0.55);
    --scrim-modal:    rgba(0, 0, 0, 0.62);

    --tile-dark-bg:     #1f1f23;
    --tile-dark-border: rgba(255, 255, 255, 0.10);

    --canvas-atmosphere:
      radial-gradient(1100px 620px at 8% -12%, rgba(10, 132, 255, 0.10) 0%, transparent 68%),
      radial-gradient(900px 560px at 96% 2%, rgba(64, 200, 224, 0.055) 0%, transparent 66%),
      radial-gradient(1000px 700px at 78% 106%, rgba(255, 159, 10, 0.04) 0%, transparent 66%);
    --grid-line:      rgba(255, 255, 255, 0.022);
    --grid-line-auth: rgba(255, 255, 255, 0.026);
    --orb-accent:     rgba(10, 132, 255, 0.20);
    --orb-warm:       rgba(255, 159, 10, 0.10);

    /* --- Elevation: deeper and more diffuse, since dark surfaces
           separate by lightness far more than by shadow --- */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md:    0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px -6px rgba(0, 0, 0, 0.50);
    --shadow-lg:    0 2px 6px rgba(0, 0, 0, 0.40), 0 14px 34px -14px rgba(0, 0, 0, 0.60);
    --shadow-xl:    0 4px 12px rgba(0, 0, 0, 0.45), 0 30px 68px -24px rgba(0, 0, 0, 0.70);
    --shadow-glow:  0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}

/* ============================================================
   2. RESET + BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 0.9333rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-primary);
  background-color: var(--bg-base);
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Atmosphere. Deliberately whisper-soft: it exists so the glass layers
   have something to refract, not to decorate. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    var(--canvas-atmosphere);
}

/* A barely-there structural grid keeps large empty areas from feeling flat. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 20%, transparent 100%);
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--accent-hover); }

ul, ol { list-style: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}

input, select, textarea { font-family: inherit; }

::selection { background: rgba(0, 102, 204, 0.18); color: var(--text-primary); }

/* One focus grammar for the whole product. */
:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 2px;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 3px solid transparent;
  border-radius: var(--radius-full);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
  letter-spacing: -0.021em;
}

h1 { font-size: 1.875rem; letter-spacing: -0.026em; }
h2 { font-size: 1.4375rem; }
h3 { font-size: 1.1875rem; }
h4 { font-size: 1.0625rem; }
h5 { font-size: 0.9375rem; }
h6 { font-size: 0.8125rem; letter-spacing: 0.01em; }

p { color: var(--text-secondary); line-height: 1.55; }
small { font-size: 0.8125rem; color: var(--text-muted); }
strong { font-weight: 600; color: var(--text-primary); }

.text-primary   { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-accent    { color: var(--accent) !important; }
.text-success   { color: var(--success) !important; }
.value-success  { font-weight: 600; color: var(--success) !important; }
.text-warning   { color: var(--warning) !important; }
.text-danger    { color: var(--danger) !important; }

.tabular-nums { font-variant-numeric: tabular-nums; }

/* Logo — the mark is a quiet white tile with a hairline, so the chrome
   recedes; the glyph itself is the only Action Blue in the identity.
   The inline SVG inherits `currentColor` from here, so the brand colour
   is defined in exactly one place. */
.wizz-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  user-select: none;
  min-width: 0;
}

.wizz-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  color: var(--accent);
  flex-shrink: 0;
  transition: border-color var(--t-normal), box-shadow var(--t-normal), transform var(--t-normal);
}
.wizz-logo:hover .wizz-logo-mark {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-md);
  transform: scale(1.04);
}

.wizz-wordmark {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.055em;
  color: var(--text-primary);
  line-height: 1;
}

/* ============================================================
   4. BUTTONS
   Signature grammar: the pill IS the action signal.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 0.8438rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.006em;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--bg-canvas);
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast),
              transform var(--t-fast), opacity var(--t-fast);
}
.btn:hover { background: var(--bg-elevated); border-color: var(--border-medium); color: var(--text-primary); }
.btn:active { transform: scale(0.975); }

.btn:disabled, .btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--accent-strong);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px -10px rgba(0, 102, 204, 0.7);
}
.btn-primary:hover {
  background: var(--accent-strong-hover);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 20px -8px rgba(0, 102, 204, 0.6);
}
.btn-primary:active { transform: scale(0.975); }

.btn-secondary {
  background: var(--bg-canvas);
  border-color: var(--border-default);
  color: var(--text-secondary);
}
.btn-secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--border-medium);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.btn-success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
  box-shadow: none;
}
.btn-success:hover { background: rgba(52, 199, 89, 0.18); border-color: var(--success-bright); color: var(--success-strong); }

.btn-danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
  box-shadow: none;
}
.btn-danger:hover { background: rgba(255, 59, 48, 0.16); border-color: var(--danger); color: var(--danger-strong); }

.btn-sm {
  height: 31px;
  padding: 0 13px;
  font-size: 0.7813rem;
  gap: 6px;
}

.btn-lg {
  height: 46px;
  padding: 0 26px;
  font-size: 0.9375rem;
  font-weight: 400;
}

.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
}
.btn-icon.btn-sm { width: 31px; height: 31px; }

.btn-full { width: 100%; }

/* Ghost button — used for the favourite star. */
.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--text-muted);
  transition: all var(--t-fast);
}
.btn-ghost:hover {
  background: var(--bg-hover);
  border-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost i.fa-solid.fa-star { color: #ffb020 !important; }

/* ============================================================
   5. FORMS
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}
.form-group:last-child { margin-bottom: 0; }
.form-group-flush { margin-bottom: 0; }

.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.004em;
}

.form-control {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: var(--input-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:hover { border-color: var(--border-medium); }
.form-control:focus {
  border-color: var(--accent);
  background: var(--bg-canvas);
  box-shadow: 0 0 0 3.5px rgba(0, 102, 204, 0.15);
}
.form-control:disabled,
.form-control[readonly] {
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 1;
}

textarea.form-control {
  height: auto;
  min-height: 96px;
  padding: 11px 14px;
  resize: vertical;
  line-height: 1.55;
}

select.form-control {
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
select.form-control option {
  background: var(--bg-canvas);
  color: var(--text-primary);
}

/* The chevron is a data-URI image, so it cannot read a token. Re-point it
   for dark mode rather than leaving a light-grey glyph on a dark field. */
[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238a8a8f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
}

input[type="search"].form-control::-webkit-search-decoration,
input[type="search"].form-control::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Icon-prefixed input */
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-wrapper .form-control { padding-left: 40px; }
.input-wrapper .input-icon {
  position: absolute;
  left: 14px;
  display: flex;
  color: var(--text-muted);
  font-size: 0.85rem;
  pointer-events: none;
  transition: color var(--t-fast);
}
.input-wrapper:focus-within .input-icon { color: var(--accent); }

/* Plain input group (auth layout) */
.input-group { position: relative; display: flex; align-items: center; width: 100%; }

.form-control.has-icon { padding-left: 42px; }
.form-control.has-icon-right { padding-right: 44px; }

.input-icon-left {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
  transition: color var(--t-fast);
}
.input-icon-left svg { width: 17px; height: 17px; }
.input-group:focus-within .input-icon-left { color: var(--accent); }

.input-icon-right {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  z-index: 2;
  transition: color var(--t-fast), background var(--t-fast);
}
.input-icon-right:hover { color: var(--accent); background: var(--bg-hover); }
.password-field-wrapper { position: relative; display: flex; align-items: center; }
.password-toggle-btn { padding: 0; border: none; cursor: pointer; }
.password-toggle-btn svg { width: 17px; height: 17px; }

.form-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 1px;
}

.info-alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-bottom: 18px;
}
.info-alert i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.info-alert strong { color: var(--text-primary); }
.info-alert-flush { margin-bottom: 0; }

/* Inline (JS-toggled) danger notice — visibility is controlled by JS */
.inline-alert {
  margin-bottom: 18px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
}
.inline-alert i { margin-right: 8px; }

.input-icon.positive { color: var(--success); }

.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form-actions-end { display: flex; justify-content: flex-end; gap: 10px; }

/* ============================================================
   6. AUTH PAGE — Split layout
   ============================================================ */
.auth-page {
  display: block;
  background: var(--bg-base);
}

.auth-visual {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.visual-grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(var(--grid-line-auth) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-auth) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 15%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 15%, transparent 100%);
}
.visual-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5; }
.orb-one {
  width: 560px;
  height: 560px;
  top: -180px;
  right: -140px;
  background: radial-gradient(circle, var(--orb-accent) 0%, transparent 70%);
}
.orb-two {
  width: 460px;
  height: 460px;
  bottom: -170px;
  left: -130px;
  background: radial-gradient(circle, var(--orb-warm) 0%, transparent 70%);
}

.auth-page-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  padding: 0;
}

.auth-layout-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.auth-form-column {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  min-height: 100vh;
  background: transparent;
}

.auth-card-wrap { width: 100%; max-width: 420px; }

.auth-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 34px 32px 30px;
  background: var(--glass-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.auth-brand-row { display: flex; align-items: center; gap: 12px; }
/* On the auth cards the brand row is the only header, so the toggle
   sits at its trailing edge rather than in an action cluster. */
.auth-brand-row .theme-toggle { margin-left: auto; }
.auth-logo-lg .wizz-logo-mark { width: 38px; height: 38px; }
.auth-logo-lg .wizz-wordmark { font-size: 1.1875rem; letter-spacing: 0.06em; }

.auth-copy { display: flex; flex-direction: column; gap: 9px; }
.eyebrow {
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.6563rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.auth-copy h1 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.026em;
  color: var(--text-primary);
}
.auth-copy p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }

#form-login, #form-register { display: block; }
#form-login > *, #form-register > * { margin-bottom: 16px; }
#form-login > *:last-child, #form-register > *:last-child { margin-bottom: 0; }

.auth-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}
.auth-switch a { font-weight: 500; }

/* Right column: trust showcase */
.auth-showcase-column {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
  min-height: 100vh;
  overflow: hidden;
  background: transparent;
}

.showcase-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.showcase-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 0.7188rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  width: fit-content;
  box-shadow: var(--shadow-sm);
}

.showcase-content h2 {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: var(--text-primary);
}

.showcase-lead {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 48ch;
}

.showcase-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.showcase-feature {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--glass-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color var(--t-normal), box-shadow var(--t-normal), transform var(--t-normal);
}
.showcase-feature:hover {
  border-color: var(--border-default);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  font-size: 0.9375rem;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.feature-icon.primary { background: var(--accent-soft); color: var(--accent); }
.feature-icon.success { background: var(--success-bg); color: var(--success); }
.feature-icon.warning { background: var(--orange-bg); color: var(--orange); }
.feature-icon.purple  { background: var(--purple-bg); color: var(--purple); }

.showcase-feature h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  letter-spacing: -0.008em;
}
.showcase-feature p {
  font-size: 0.7813rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.showcase-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

.showcase-stat { text-align: center; }
.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.022em;
}
.stat-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 3px;
}

.showcase-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.showcase-footer p { font-size: 0.875rem; color: var(--text-secondary); }
.showcase-footer .btn { width: 100%; }

.showcase-background { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.showcase-grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(var(--grid-line-auth) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-auth) 1px, transparent 1px);
  background-size: 60px 60px;
}
.showcase-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.35; }

.form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -4px;
}
.remember-me {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  user-select: none;
}
.remember-me input {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--border-medium);
  background: var(--bg-canvas);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.remember-me input:checked { background: var(--accent-strong); border-color: var(--accent-strong); }
.remember-me input:checked::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.inline-link { color: var(--accent); font-size: 0.8125rem; font-weight: 400; }
.inline-link:hover { color: var(--accent-hover); }

#btn-login-submit, #btn-register-submit { height: 46px; }

.crm-list-title { margin-bottom: 10px; }

/* ============================================================
   7. APP SHELL
   ============================================================ */
.dashboard-container {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  transition: margin-left var(--t-normal);
}

.body-container {
  flex: 1;
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: 24px 28px 44px;
}

/* --- Sidebar (navigation glass) --- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 200;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--glass-nav);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--border-subtle);
  transition: transform var(--t-normal);
}

.sidebar-header {
  display: flex;
  align-items: center;
  height: var(--topbar-height);
  padding: 0 18px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.sidebar-logo i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-menu::-webkit-scrollbar { width: 6px; }
.sidebar-menu::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: none; }

/* Apple sidebar row: quiet by default, filled when selected. */
.sidebar-menu .menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8438rem;
  font-weight: 400;
  letter-spacing: -0.006em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-menu .menu-item i {
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8125rem;
  transition: color var(--t-fast);
}
.sidebar-menu .menu-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-menu .menu-item:hover i { color: var(--text-secondary); }
.sidebar-menu .menu-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.sidebar-menu .menu-item.active i { color: var(--accent); }
.sidebar-menu .menu-item.active::before { content: none; }

.sidebar-footer {
  flex-shrink: 0;
  padding: 12px 10px;
  border-top: 1px solid var(--border-subtle);
}

.sidebar-section-label {
  padding: 16px 12px 5px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.sidebar-menu .menu-item + .sidebar-section-label { margin-top: 6px; }

.sidebar-footer .btn,
.sidebar-footer .menu-item {
  width: 100%;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  font-weight: 500;
  box-shadow: none;
}
.sidebar-footer .menu-item {
  display: flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.8438rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.sidebar-footer .menu-item i { width: 18px; text-align: center; }
.sidebar-footer .menu-item:hover { background: rgba(255, 59, 48, 0.16); border-color: var(--danger); color: var(--danger-strong); }

.sidebar-brand-tag {
  margin-left: auto;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}

/* --- Navbar (frosted sub-nav) --- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--topbar-height);
  padding: 0 28px;
  background: var(--glass-nav);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-subtle);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.page-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.menu-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ============================================================
   THEME TOGGLE

   One compact circular control, sized like `.modal-close` so it
   sits naturally in the nav action cluster. Both icons are always
   in the DOM and the CSS picks which one is visible, so the control
   never depends on JavaScript having run to look right.
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-canvas);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.theme-toggle:hover {
  background: var(--bg-elevated);
  border-color: var(--border-default);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}
.theme-toggle:active { transform: scale(0.94); }

/* Icon shows the CURRENT appearance, per the ☀ / ☾ convention. */
.theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: inline-block; }

.wallet-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.wallet-badge i { color: var(--success); font-size: 0.75rem; }
.wallet-badge:hover { border-color: var(--border-medium); box-shadow: var(--shadow-md); }

.user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 13px 4px 5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  max-width: 220px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.user-profile:hover { background: var(--bg-hover); border-color: var(--border-subtle); }

.profile-name-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.profile-name-stack > span:first-child {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-wallet-balance {
  display: none;
  color: var(--success);
  font-size: 0.7188rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--scrim-backdrop);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t-normal);
}
.sidebar-backdrop.active { display: block; opacity: 1; }

/* ============================================================
   8. PANELS, STAT STRIPS, PAGE HEADERS, TOOLBARS
   ============================================================ */
.tab-section { display: block; }

.panel-card,
.glass-panel {
  position: relative;
  background: var(--glass-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md), var(--shadow-inset-top);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  overflow: hidden;
  transition: border-color var(--t-normal), box-shadow var(--t-normal);
}
.panel-card::before,
.glass-panel::before { content: none; }

.panel-card {
  margin-bottom: 18px;
  padding: 20px 22px;
}
.panel-card-flush { margin-bottom: 0; }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--divider);
}
.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--text-primary);
}
.panel-title i { color: var(--text-muted); font-size: 0.8125rem; }
.panel-subtitle {
  font-size: 0.7813rem;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.45;
}
.panel-title-sm { font-size: 0.8125rem; }

/* Split layouts (existing two-column sections) */
.split-2 { display: grid; gap: 18px; align-items: start; }
.split-tickets   { grid-template-columns: 1fr 1.2fr; }
.split-services  { grid-template-columns: 1fr 1.3fr; }
.split-crm       { grid-template-columns: 1fr 1fr; gap: 18px; }

/* --- Page header: compact, one clear voice --- */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.page-head-text { min-width: 0; }
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}
.page-eyebrow i { font-size: 0.625rem; }
.page-title-lg {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.024em;
  color: var(--text-primary);
  line-height: 1.22;
}
.page-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 4px;
  max-width: 74ch;
  line-height: 1.5;
}
.page-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }

/* --- Toolbar (glass control bar) --- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 11px;
  background: var(--glass-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--shadow-inset-top);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.toolbar .form-control {
  margin-bottom: 0;
  min-width: 0;
  height: 36px;
  background: var(--bg-canvas);
  font-size: 0.8125rem;
}
.toolbar-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 170px;
  max-width: 360px;
}
.toolbar-search .form-control { padding-left: 34px; }
.toolbar-search > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.75rem;
  pointer-events: none;
  z-index: 1;
}
.toolbar-select { flex: 0 1 160px; }
.toolbar-spacer { flex: 1 1 auto; }
.toolbar-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-inline: 4px;
}

/* --- Tabs (segmented) --- */
.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  margin-bottom: 16px;
  background: var(--glass-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  overflow-x: auto;
  scrollbar-width: none;
  width: fit-content;
  max-width: 100%;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.tab-btn i { margin-right: 5px; font-size: 0.75rem; color: var(--text-muted); }
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.tab-btn.active i { color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* --- Chip filters --- */
.chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.chip {
  appearance: none;
  border: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 5px 13px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip:hover { border-color: var(--border-medium); color: var(--text-primary); }
.chip.active {
  background: var(--inverse-bg);
  border-color: var(--inverse-bg);
  color: var(--inverse-text);
}
.chip.active:hover { color: var(--inverse-text); }

/* --- Stat strip ---
   One surface, hairline dividers, no card-per-number. The 1px gap
   over a divider-coloured background produces the separators, so the
   strip stays correct at every column count. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--divider);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.kpi {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 17px;
  background: var(--glass-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  overflow: hidden;
  transition: background var(--t-fast);
}
.kpi::after { content: none; }

.kpi-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  background: var(--accent-soft);
  color: var(--accent);
}
.kpi.success .kpi-icon { background: var(--success-bg); color: var(--success); }
.kpi.warning .kpi-icon { background: var(--warning-bg); color: var(--warning); }
.kpi.danger  .kpi-icon { background: var(--danger-bg);  color: var(--danger); }
.kpi.purple  .kpi-icon { background: var(--purple-bg);  color: var(--purple); }
.kpi.cyan    .kpi-icon { background: var(--info-bg);    color: var(--info); }

.kpi-body { min-width: 0; flex: 1; }
.kpi-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.4375rem;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.kpi-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 3px;
  letter-spacing: -0.004em;
}
.kpi-meta {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { background: var(--bg-card-hover); }

/* --- Legacy stat cards / support metrics (kept for parity) --- */
.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.grid-stats-2 { grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }

/* Repeated content cards stay opaque. Blur is reserved for the chrome and
   elevated layers, so a page with many panels still composites cheaply. */
.stat-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 18px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-normal), transform var(--t-normal);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  font-size: 1.125rem;
  flex-shrink: 0;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.stat-icon.primary   { background: var(--accent-soft);  color: var(--accent); }
.stat-icon.secondary { background: var(--purple-bg);   color: var(--purple); }
.stat-icon.success   { background: var(--success-bg);  color: var(--success); }
.stat-icon.warning   { background: var(--orange-bg);   color: var(--orange); }
.stat-icon.danger    { background: var(--danger-bg);   color: var(--danger); }
.stat-info { display: flex; flex-direction: column; min-width: 0; }
.stat-value {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.024em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); margin-top: 2px; }

.support-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.support-metric {
  min-height: 96px;
  padding: 15px 16px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-normal), transform var(--t-normal);
}
.support-metric:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.support-metric-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.support-metric-value {
  display: block;
  margin-top: 10px;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.024em;
}
.support-metric.payment-priority { background: var(--accent-soft); border-color: var(--border-accent); }
.support-metric.payment-priority .support-metric-label { color: var(--accent); }
.support-metric.payment-priority .support-metric-value { color: var(--accent); }

.admin-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-filter-row .form-control { min-width: 150px; height: 38px; margin: 0; }

/* --- Profile (customer panel) --- */
.profile-list { display: flex; flex-direction: column; gap: 14px; }
.profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--divider);
}
.profile-row:last-of-type { border-bottom: none; }
.profile-row-label { color: var(--text-secondary); font-weight: 500; }
.profile-row-value { font-weight: 600; color: var(--text-primary); text-align: right; word-break: break-word; }

.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--divider);
}
.profile-stat-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 13px 14px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}
.profile-stat-item > span { font-size: 0.75rem; color: var(--text-muted); }
.profile-stat-item strong {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.profile-password-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--text-secondary);
}
.masked-password { color: var(--text-primary); letter-spacing: 0.14em; font-weight: 600; }
.password-reset-dialog { max-width: 460px; }

/* ============================================================
   9. TABLES + BADGES
   ============================================================ */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* A table inside a panel or a table-wrap inherits that surface, so it
   must not paint a second border */
.table-wrap > .table-responsive,
.panel-card > .table-responsive {
  border: 0;
  border-radius: 0;
  background: transparent;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8438rem;
}

thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--glass-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.002em;
  color: var(--text-muted);
  background: transparent;
  border-bottom: 1px solid var(--divider);
  white-space: nowrap;
}

td {
  padding: 11px 14px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
  line-height: 1.45;
}

td:first-child, th:first-child { padding-left: 18px; }
td:last-child, th:last-child { padding-right: 18px; }

/* Wide data tables (admin consoles) keep a readable minimum column width */
.table-responsive-wide table { min-width: 720px; }

tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: var(--bg-row-hover); }
tbody tr:last-child td { border-bottom: none; }

/* Category header rows for grouped catalog tables */
.category-header-row td {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  background: var(--bg-elevated) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-top: 1px solid var(--border-default) !important;
}
.category-header-row:first-child td { border-top: none !important; }

.td-primary { color: var(--text-primary); font-weight: 500; }
.td-mono { font-family: var(--font-mono); font-size: 0.7813rem; letter-spacing: -0.02em; }
.td-actions { display: flex; align-items: center; gap: 6px; }
.cell-stack { display: flex; flex-direction: column; gap: 2px; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7188rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.004em;
  white-space: nowrap;
  border: 1px solid;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}
.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* Status classes arrive in two shapes: `badge-pending` (static markup) and
   `badge pending` (built by JS template strings), so both are declared. */

/* Green — success / positive / complete */
.badge-completed, .badge-answered, .badge-active, .badge-success,
.badge.completed, .badge.answered, .badge.active, .badge.success {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}

/* Blue — active, processing */
.badge-started, .badge-processing, .badge-primary, .badge-info,
.badge.started, .badge.processing, .badge.primary, .badge.info {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--border-accent);
}

/* Orange — pending / warning */
.badge-pending, .badge-warning,
.badge.pending, .badge.warning {
  background: var(--orange-bg);
  color: var(--orange);
  border-color: var(--orange-border);
}

/* Red — error / cancelled */
.badge-cancelled, .badge-closed, .badge-inactive, .badge-suspended, .badge-danger,
.badge.cancelled, .badge.closed, .badge.inactive, .badge.suspended, .badge.danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}

/* Purple — special / secondary */
.badge-refunded, .badge-admin,
.badge.refunded, .badge.admin {
  background: var(--purple-bg);
  color: var(--purple);
  border-color: var(--purple-border);
}

.badge-user, .badge-muted,
.badge.user, .badge.muted {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}

.badge-category {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--border-accent);
}

/* ============================================================
   10. DRAWERS + MODALS
   ============================================================ */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 480;
  background: var(--scrim-drawer);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-normal), visibility var(--t-normal);
}
.drawer-scrim.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 490;
  width: min(480px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--glass-overlay);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border-left: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transform: translateX(101%);
  transition: transform var(--t-slow);
}
.drawer.open { transform: none; }

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--divider);
  background: var(--glass-raised);
  flex-shrink: 0;
}
.drawer-head h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.016em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.drawer-head h3 i { color: var(--text-muted); font-size: 0.8125rem; }
.drawer-head p {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 3px;
  word-break: break-word;
}
.drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.drawer-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--divider);
  background: var(--glass-raised);
}
.drawer-foot .btn { flex: 1 1 auto; }

/* Definition list (label / value pairs) */
.kv {
  display: grid;
  grid-template-columns: minmax(118px, 34%) 1fr;
  gap: 1px;
  background: var(--divider);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.kv > dt,
.kv > dd {
  background: var(--glass-raised);
  padding: 9px 12px;
  margin: 0;
  font-size: 0.7813rem;
  min-width: 0;
  word-break: break-word;
}
.kv > dt {
  color: var(--text-secondary);
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 7px;
}
.kv > dt i { width: 14px; text-align: center; color: var(--text-muted); font-size: 0.6875rem; }
.kv > dd {
  color: var(--text-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

/* Inline edit affordance for the editable Account rows. The row stays the
   same <dd>; only its contents swap between value+pencil and input+actions. */
.kv > dd.kv-edit { gap: 8px; }

.kv-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.6875rem;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.kv-edit-btn:hover { color: var(--accent); background: var(--accent-soft); }
.kv-edit-btn:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 1px; }

.kv > dd.kv-editing { flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; }
.kv > dd.kv-editing .kv-edit-input {
  flex: 1 1 190px;
  min-width: 0;
  height: 32px;
  margin: 0;
  font-size: 0.7813rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  padding: 0 10px;
}
.kv > dd.kv-editing .btn { flex: 0 0 auto; }

.kv-group-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--scrim-modal);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.modal-overlay.active,
.modal-overlay.open { display: flex; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--glass-overlay);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl), var(--shadow-inset-top);
  overflow-y: auto;
}
.modal-card.glass-panel { box-shadow: var(--shadow-xl), var(--shadow-inset-top); }
.modal-overlay.active .modal-card,
.modal-overlay.open .modal-card {
  animation: wizz-modal-in var(--t-slow) both;
}
@keyframes wizz-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.modal-header > div { min-width: 0; }
.modal-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.016em;
  color: var(--text-primary);
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.modal-body { padding: 2px 0; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
}
.modal-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal-row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.modal-body-copy { padding: 2px 0; }
.modal-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 13px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  font-size: 0.8125rem;
  color: var(--success);
  line-height: 1.5;
}
.modal-note i { color: var(--success); margin-top: 2px; flex-shrink: 0; }
.modal-note strong { color: var(--success-strong); }

.modal-amount-tag {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 22px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  font-family: var(--font-heading);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.modal-center { text-align: center; padding: 20px 0; }
.modal-status-msg { font-size: 1rem; margin-bottom: 8px; }
.modal-sub-msg { color: var(--text-secondary); font-size: 0.8125rem; }
.modal-subtitle { font-size: 0.7813rem; color: var(--text-secondary); margin-top: 3px; }
.modal-text { color: var(--text-secondary); font-size: 0.8438rem; line-height: 1.5; }
.modal-alias { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.modal-actions { margin-top: 20px; }
.modal-empty { text-align: center; color: var(--text-muted); padding: 22px 16px; font-size: 0.8125rem; }
.modal-card-sm { max-width: 460px; }
.modal-card-md { max-width: 640px; }
.modal-card-lg { max-width: 780px; }

.icon-accent  { color: var(--accent); }
.icon-success { color: var(--success); }
.icon-danger  { color: var(--danger); }
.icon-purple  { color: var(--purple); }
.glow-success { filter: none; }

/* CRM leftovers kept so existing markup never loses styling */
.crm-scroll-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.crm-scroll-empty { text-align: center; color: var(--text-muted); font-size: 0.7813rem; padding: 12px; }
.crm-modal-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.crm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--divider);
}
.crm-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
}
.crm-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.crm-stat-box {
  padding: 12px 11px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  text-align: center;
}
.crm-stat-num {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.crm-stat-desc {
  margin-top: 3px;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

/* ============================================================
   11. TOASTS
   ============================================================ */
.toast-container {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(100vw - 36px);
  max-width: 352px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--glass-overlay);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(16px) scale(0.98);
  transition: opacity var(--t-normal), transform var(--t-normal);
}
.toast.active { opacity: 1; transform: none; }
.toast i { flex-shrink: 0; margin-top: 2px; font-size: 0.8125rem; color: var(--text-muted); }

/* index.html emits `toast-success`, app.js/admin.js emit `toast success` */
.toast-success, .toast.success { border-left: 3px solid var(--success); }
.toast-success i, .toast.success i { color: var(--success); }
.toast-danger, .toast.danger { border-left: 3px solid var(--danger); }
.toast-danger i, .toast.danger i { color: var(--danger); }
.toast-warning, .toast.warning { border-left: 3px solid var(--warning); }
.toast-warning i, .toast.warning i { color: var(--warning); }
.toast-info, .toast.info, .toast-primary, .toast.primary { border-left: 3px solid var(--accent); }
.toast-info i, .toast.info i, .toast-primary i, .toast.primary i { color: var(--accent); }

/* ============================================================
   12. CHAT, FEEDS, TIMELINE, HEALTH, SETTINGS
   ============================================================ */
.chat-thread-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  max-height: 400px;
  margin-bottom: 14px;
  padding: 14px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  scroll-behavior: smooth;
}

.chat-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 46vh;
  min-height: 170px;
  overflow-y: auto;
  padding: 2px;
}

/* The console operator (WIZZ Support) is the "right-hand" voice in both
   consoles; the customer is the "left-hand" one. */
.chat-bubble {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  max-width: 84%;
  padding: 10px 13px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
  font-size: 0.8438rem;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
  animation: wizz-chat-in var(--t-normal) ease-out both;
}
@keyframes wizz-chat-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.chat-bubble.admin-msg,
.chat-bubble.admin {
  align-self: flex-end;
  background: var(--accent-strong);
  border-color: transparent;
  color: #fff;
  border-bottom-right-radius: var(--radius-xs);
}
.chat-bubble.client,
.chat-bubble.user-msg {
  align-self: flex-start;
  border-bottom-left-radius: var(--radius-xs);
}

.chat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  color: var(--text-muted);
}
.chat-sender {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6563rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.chat-bubble.admin-msg .chat-sender { color: rgba(255, 255, 255, 0.75); }
.chat-body { font-size: 0.8125rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.chat-bubble .chat-meta { margin-top: 6px; font-size: 0.625rem; color: var(--text-muted); }
.chat-bubble.admin-msg .chat-meta { color: rgba(255, 255, 255, 0.7); }

/* Timeline (order lifecycle) */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: var(--border-default);
}
.timeline-item { position: relative; padding-bottom: 14px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg-canvas);
  border: 2px solid var(--border-medium);
}
.timeline-item.done::before { background: var(--success); border-color: var(--success); }
.timeline-item.current::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.timeline-label { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); }
.timeline-time { font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px; }

/* Health cards */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 12px;
}
.health-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
  box-shadow: var(--shadow-sm);
}
.health-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}
.health-card.ok   .health-dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.health-card.warn .health-dot { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }
.health-card.down .health-dot { background: var(--danger);  box-shadow: 0 0 0 3px var(--danger-bg); }
.health-body { min-width: 0; }
.health-name { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); }
.health-note { font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px; word-break: break-word; }

/* Attention list (admin) */
.attention-list { display: flex; flex-direction: column; }
.attention-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  transition: background var(--t-fast);
}
.attention-item:last-child { border-bottom: 0; }
.attention-item:hover { background: var(--bg-hover); }
.attention-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.attention-item.danger  .attention-icon { background: var(--danger-bg);  color: var(--danger); }
.attention-item.warning .attention-icon { background: var(--warning-bg); color: var(--warning); }
.attention-item.info    .attention-icon { background: var(--info-bg);    color: var(--info); }
.attention-body { flex: 1; min-width: 0; }
.attention-title { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); }
.attention-note { font-size: 0.7188rem; color: var(--text-muted); margin-top: 2px; }
.attention-value {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.attention-item.danger  .attention-value { color: var(--danger); }
.attention-item.warning .attention-value { color: var(--warning); }

/* Quick action tiles */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.quick-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.quick-tile:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.quick-tile i {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  background: var(--accent-soft);
  color: var(--accent);
}
.quick-tile small {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 1px;
}

/* Quick actions as one compact strip above the stat strip, so the primary
   actions sit directly under the page title instead of inside their own card. */
.quick-bar {
  gap: 1px;
  background: var(--divider);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 16px;
}
.quick-bar .quick-tile {
  border: 0;
  border-radius: 0;
  background: var(--glass-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: none;
  padding: 13px 15px;
}
.quick-bar .quick-tile:hover {
  background: var(--bg-card-hover);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

/* Balance hero — the one dark tile in the system. It anchors the wallet
   pages the way an Apple dark tile anchors a product section. */
.balance-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--tile-dark-border);
  background: var(--tile-dark-bg);
  box-shadow: var(--shadow-lg);
}
.balance-hero-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.balance-hero-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.125rem;
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.08;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  margin-top: 5px;
}
/* Inside the dark tile the value and label invert. Outside it (a stat
   inside a normal card) they keep the ink palette. */
.balance-hero .balance-hero-label { color: var(--text-on-dark-2); }
.balance-hero .balance-hero-value  { color: var(--text-on-dark); }
.balance-hero .balance-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.balance-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.balance-hero .btn-secondary {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: none;
}
.balance-hero .btn-secondary:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.balance-hero .btn-success {
  background: rgba(52, 199, 89, 0.18);
  border-color: rgba(52, 199, 89, 0.4);
  color: #4cd964;
}
.balance-hero .btn-success:hover { background: rgba(52, 199, 89, 0.28); color: #6ee787; }

/* Order / funds summary */
.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--divider);
}
.summary-row:last-of-type { border-bottom: 0; }
.summary-row dt { color: var(--text-secondary); margin: 0; }
.summary-row dd { margin: 0; font-weight: 500; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--border-default);
}
.summary-total span { font-size: 0.8125rem; color: var(--text-secondary); }
.summary-total strong {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.026em;
}
.summary-after {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  font-size: 0.8125rem;
}
.summary-after span { color: var(--text-secondary); }
.summary-after strong { font-weight: 500; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.summary-after.is-short { background: var(--danger-bg); }
.summary-after.is-short span,
.summary-after.is-short strong { color: var(--danger); }

/* Service catalog cards */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: 14px;
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 17px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-normal), transform var(--t-normal), border-color var(--t-normal);
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border-default); }
.service-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.service-card-name {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  letter-spacing: -0.014em;
}
.service-card-desc {
  font-size: 0.7813rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.service-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.7188rem;
  color: var(--text-muted);
}
.service-card-meta i { width: 12px; text-align: center; font-size: 0.6875rem; }
.service-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
}
.service-price {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.service-price small { font-size: 0.6875rem; color: var(--text-muted); font-weight: 400; }

/* Segmented progress (delivery) */
.meter {
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  overflow: hidden;
  min-width: 60px;
}
.meter > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--accent);
}
.meter.done > span { background: var(--success); }
.meter.warn > span { background: var(--warning); }

/* Notification / activity feed */
.feed { display: flex; flex-direction: column; }
.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--divider);
}
.feed-item:last-child { border-bottom: 0; }
.feed-item i.feed-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.feed-item.ok   i.feed-icon { background: var(--success-bg); color: var(--success); }
.feed-item.warn i.feed-icon { background: var(--warning-bg); color: var(--warning); }
.feed-item.bad  i.feed-icon { background: var(--danger-bg);  color: var(--danger); }
.feed-body { flex: 1; min-width: 0; }
.feed-title { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); }
.feed-text { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; word-break: break-word; }
.feed-time { font-size: 0.6875rem; color: var(--text-muted); margin-top: 4px; }

/* Ticket thread list */
.thread-list { display: flex; flex-direction: column; }
.thread-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid var(--divider);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background var(--t-fast);
}
.thread-item:last-child { border-bottom: 0; }
.thread-item:hover { background: var(--bg-hover); }
.thread-item.active { background: var(--accent-soft); }
.thread-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.7813rem;
}
.thread-body { flex: 1; min-width: 0; }
.thread-subject { font-size: 0.8125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-preview { font-size: 0.7188rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.thread-time { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; }

/* Settings rows */
.settings-group {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-raised);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: 1px solid var(--divider);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row-label { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); }
.settings-row-note { font-size: 0.7188rem; color: var(--text-muted); margin-top: 2px; }
.settings-row-control { flex: 0 1 240px; min-width: 150px; }
.settings-row-control .form-control { margin-bottom: 0; }

/* Amount presets (add funds) */
.amount-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px;
}
.amount-btn {
  appearance: none;
  cursor: pointer;
  padding: 13px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.amount-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.amount-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.pay-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-accent);
  background: var(--accent-soft);
}
.pay-method-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-canvas);
  color: var(--accent);
  font-size: 0.9375rem;
  flex-shrink: 0;
}
.pay-method-name { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); }
.pay-method-note { font-size: 0.7188rem; color: var(--text-secondary); margin-top: 2px; }

/* Two column layouts */
.split-main {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.95fr);
  gap: 16px;
  align-items: start;
}
.split-even {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
}
.sticky-rail { position: sticky; top: calc(var(--topbar-height) + 16px); }

/* Table helpers */
.table-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-surface);
  box-shadow: var(--shadow-md);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.table-note {
  font-size: 0.7188rem;
  color: var(--text-muted);
  padding: 10px 14px;
  border-top: 1px solid var(--divider);
  background: var(--bg-elevated);
}
.table-compact th,
.table-compact td { padding: 9px 12px; font-size: 0.8125rem; }
.table-compact th { font-size: 0.7188rem; }
/* `col-tight` / `col-actions` are applied to both <th> and <td>, so these
   must not be scoped to a `.table` class the markup does not carry. */
.col-actions { width: 1%; white-space: nowrap; text-align: right; }
.col-tight { width: 1%; white-space: nowrap; }

.cell-main { font-weight: 500; color: var(--text-primary); }
.cell-sub { font-size: 0.7188rem; color: var(--text-muted); margin-top: 1px; }

.amount { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.amount.pos { color: var(--success); }
.amount.neg { color: var(--danger); }

.row-clickable { cursor: pointer; }
.row-clickable:hover td { background: var(--bg-row-hover); }

/* Data cards (mobile table replacement) */
.data-cards { display: none; flex-direction: column; gap: 10px; }
.data-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--glass-raised);
  padding: 13px 14px;
  box-shadow: var(--shadow-sm);
}
.data-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.data-card-id {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.875rem;
  letter-spacing: -0.012em;
}
.data-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
  margin-bottom: 10px;
}
.data-card-grid > div { min-width: 0; }
.data-card-label { font-size: 0.625rem; color: var(--text-muted); }
.data-card-value { font-size: 0.8125rem; color: var(--text-primary); font-weight: 500; margin-top: 2px; word-break: break-word; }
.data-card-actions { display: flex; gap: 7px; flex-wrap: wrap; }

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 44px 20px;
  text-align: center;
}
.empty-state i { font-size: 1.625rem; color: var(--border-medium); }
.empty-state h4 { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.empty-state p { font-size: 0.8125rem; color: var(--text-secondary); max-width: 44ch; }

.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-row-hover) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: wizz-skeleton 1.2s linear infinite;
  border-radius: var(--radius-sm);
  height: 12px;
}
@keyframes wizz-skeleton {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Inline alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.alert i { margin-top: 2px; flex-shrink: 0; }
.alert strong { color: var(--text-primary); }
.alert.danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger); }
.alert.danger i, .alert.danger strong { color: var(--danger); }
.alert.warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.alert.warning i, .alert.warning strong { color: var(--warning); }
.alert.success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.alert.success i, .alert.success strong { color: var(--success); }
.alert.info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info); }
.alert.info i, .alert.info strong { color: var(--info); }

/* Mobile bottom navigation */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--glass-nav);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--border-subtle);
  padding: 7px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}
.mobile-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  padding: 6px 4px;
  color: var(--text-muted);
  font-size: 0.625rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-fast);
}
.mobile-bottom-nav .nav-item i { font-size: 1.125rem; line-height: 1; }
.mobile-bottom-nav .nav-item:hover,
.mobile-bottom-nav .nav-item.active { color: var(--accent); }
.mobile-bottom-nav .nav-item-primary { position: relative; }
.mobile-bottom-nav .nav-item-primary i {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-strong);
  border-radius: 50%;
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 6px 18px -8px rgba(0, 102, 204, 0.75);
  margin-bottom: 2px;
  transform: translateY(-10px);
}
.mobile-bottom-nav .nav-item-primary span { display: none; }

/* ============================================================
   13. UTILITIES
   ============================================================ */
.hidden { display: none !important; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-all { word-break: break-all; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

.divider { height: 1px; background: var(--divider); margin: 18px 0; }

.spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--spinner-track);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: wizz-spin 0.6s linear infinite;
}
@keyframes wizz-spin { to { transform: rotate(360deg); } }

.fa-indian-rupee-sign {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900;
}

/* Reseller / white-label surfaces (retained for parity) */
.reseller-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.reseller-panel-card {
  background: var(--glass-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 22px;
  transition: var(--transition-fast);
}
.reseller-panel-card:hover { border-color: var(--border-default); box-shadow: var(--shadow-md); }
.reseller-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--divider);
}
.reseller-panel-header i { font-size: 1.125rem; color: var(--text-muted); }
.reseller-panel-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }

/* Legacy catalog tables (retained for parity) */
.active-services-table { width: 100%; border-collapse: collapse; }
.active-services-table th,
.active-services-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--divider);
}
.active-services-table th {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-elevated);
}
.active-services-table tr:hover td { background: var(--bg-row-hover); }
.active-services-table .btn-sm { height: 31px; padding: 0 12px; font-size: 0.7813rem; }

.reseller-catalog-table { width: 100%; }
.reseller-catalog-table th { font-size: 0.6875rem; }
.reseller-catalog-table td { font-size: 0.8438rem; }

/* Keep the page itself free of horizontal scroll at every width */
html, body { overflow-x: hidden; }
.body-container > * { min-width: 0; }
.grid-stats > *, .kpi-grid > *, .service-grid > *, .split-even > * { min-width: 0; }

/* ============================================================
   Live Status Components
   ============================================================ */

.live-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.live-status-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 14px;
    transition: box-shadow var(--fast), border-color var(--fast);
}
.live-status-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-default);
}

.live-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.live-status-id {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.live-status-service {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-status-progress {
    margin-bottom: 12px;
}

.live-status-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.live-status-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}

.live-status-sync {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.live-status-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-preview-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 14px;
}

.live-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.live-preview-service {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.live-preview-progress {
    margin-bottom: 12px;
}

.live-preview-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.live-preview-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}

.live-preview-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.live-preview-detail i {
    color: var(--accent);
    font-size: 0.8125rem;
}

/* ============================================================
   14. RESPONSIVE
   ============================================================ */

/* ≤1440px — tighten the wide-screen rhythm a touch */
@media (max-width: 1440px) {
  .body-container { padding: 22px 24px 40px; }
  .navbar { padding: 0 24px; }
}

/* ≤1280px */
@media (max-width: 1280px) {
  :root { --sidebar-width: 232px; }
  .split-main { grid-template-columns: minmax(0, 1fr); }
  .sticky-rail { position: static; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }
}

/* ≤1080px — the sidebar becomes an overlay drawer */
@media (max-width: 1080px) {
  .sidebar {
    width: 268px;
    transform: translateX(-101%);
    box-shadow: none;
    background: var(--glass-overlay);
  }
  .sidebar.active {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }
  .main-content { margin-left: 0; }
  .menu-toggle { display: flex; }
  .split-tickets, .split-services, .split-crm { grid-template-columns: minmax(0, 1fr); }
}

/* ≤900px — toolbars stack, filters go full width */
@media (max-width: 900px) {
  .body-container { padding: 20px 18px 36px; }
  .navbar { padding: 0 18px; }
  .page-title-lg { font-size: 1.25rem; }
  .balance-hero-value { font-size: 1.875rem; }
  .toolbar-search { max-width: none; flex-basis: 100%; }
  .toolbar-select { flex: 1 1 140px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .settings-row-control { flex: 1 1 100%; }
  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .support-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .profile-stat-grid { grid-template-columns: 1fr; }
  .crm-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-card { padding: 18px; }
  .user-profile { max-width: 180px; }
}

/* ≤768px — phone. Tables become cards, drawers become sheets. */
@media (max-width: 768px) {
  :root { --topbar-height: 54px; }

  .navbar { padding: 0 14px; gap: 10px; }
  .nav-actions { gap: 6px; }
  .page-title { font-size: 1rem; }
  .body-container { padding: 18px 14px 36px; }
  /* Only the customer dashboard ships a bottom nav, so only it needs the
     extra clearance. The admin console navigates from the sidebar drawer. */
  body:not(.admin-page) .body-container { padding-bottom: 92px; }
  .mobile-bottom-nav { display: flex; }

  .page-head { flex-direction: column; align-items: stretch; }
  .page-head-actions .btn { flex: 1 1 auto; }
  .page-desc { font-size: 0.7813rem; }

  .stack { gap: 14px; }
  .panel-card { padding: 16px; }
  .panel-header { align-items: flex-start; flex-wrap: wrap; }

  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 12px 13px; gap: 9px; }
  .kpi-icon { width: 30px; height: 30px; font-size: 0.75rem; }
  .kpi-value { font-size: 1.1875rem; }
  .kpi-label { font-size: 0.7188rem; }

  .health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .table-responsive { display: none; }
  .data-cards { display: flex; }
  .table-wrap { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
  .table-note { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-top: 10px; }

  .drawer {
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    transform: translateY(100%);
  }
  .drawer.open { transform: none; }
  .drawer-head { padding: 14px 16px; }
  .drawer-body { padding: 16px; }
  .drawer-foot { padding: 12px 16px; }
  .drawer-foot .btn { min-height: 42px; }

  .kv { grid-template-columns: 1fr; }
  .kv > dt { padding-bottom: 3px; }
  .kv > dd { padding-top: 3px; }

  .service-grid { grid-template-columns: 1fr; }
  .chat-scroll { max-height: 52vh; }
  .chat-bubble { max-width: 92%; }

  .modal-overlay { padding: 14px; }
  .modal-card { padding: 18px; border-radius: var(--radius-xl); }

  .admin-filter-row { width: 100%; }
  .admin-filter-row .form-control { flex: 1; min-width: 0; }

  .toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }

  .form-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ≤560px */
@media (max-width: 560px) {
  .wallet-badge { display: none; }
  .mobile-wallet-balance { display: block; }
  .user-profile { padding: 4px 11px 4px 5px; max-width: 150px; }
  .navbar-left { gap: 10px; }
  .page-title { font-size: 0.9375rem; }

  .grid-stats { grid-template-columns: 1fr; }
  .grid-stats-2 { grid-template-columns: 1fr; }
  .support-metrics-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .profile-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .profile-row-value { text-align: left; }

  .balance-hero { padding: 18px; }
  .balance-hero-value { font-size: 1.75rem; }
  .summary-total strong { font-size: 1.3125rem; }
  .amount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { padding: 8px; }
  .toolbar-select { flex: 1 1 100%; }
  .showcase-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ≤430px */
@media (max-width: 430px) {
  .body-container { padding: 15px 12px 36px; }
  body:not(.admin-page) .body-container { padding-bottom: 88px; }
  .navbar { padding: 0 12px; }
  .panel-card { padding: 14px; }
  .page-title { font-size: 0.875rem; }
  .user-profile { max-width: 124px; }

  .kpi-grid { grid-template-columns: 1fr; }
  .health-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: 1fr; }
  .data-card-actions .btn { flex: 1 1 auto; min-height: 38px; }
  .summary-total strong { font-size: 1.25rem; }
  .modal-card { padding: 16px; }
  .btn { height: 36px; font-size: 0.8125rem; padding: 0 14px; }
  .showcase-stats { grid-template-columns: 1fr; }
}

/* ≤375px */
@media (max-width: 375px) {
  body { font-size: 0.9rem; }
  .body-container { padding: 14px 10px 32px; }
  body:not(.admin-page) .body-container { padding-bottom: 84px; }
  .navbar { padding: 0 10px; }
  .mobile-bottom-nav .nav-item i { font-size: 1rem; }
  .mobile-bottom-nav .nav-item-primary i { width: 42px; height: 42px; font-size: 1.125rem; }
  .user-profile { max-width: 106px; padding: 4px 9px 4px 4px; }
  .amount-grid { gap: 7px; }
  .amount-btn { padding: 11px 6px; font-size: 0.9375rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print */
@media print {
  .sidebar, .navbar, .sidebar-backdrop, .toast-container,
  .mobile-bottom-nav { display: none !important; }
  .main-content { margin-left: 0; }
  body { background: #fff; color: #000; }
  .panel-card, .kpi-grid, .table-wrap { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* --- Wizz Services management table --- */
.service-error-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-canvas);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  color: var(--danger);
  font-size: 0.8125rem;
}
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.pagination-controls { display: flex; align-items: center; gap: 8px; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text-primary); }
th.sort-active { color: var(--accent); }
.service-sort-ind { font-size: 0.625rem; color: var(--text-muted); margin-left: 3px; }
.catalog-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--glass-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.catalog-bulk-count { font-size: 0.8125rem; color: var(--text-secondary); }
.catalog-bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }