/* ============================================================================
   B2B Portal — Core Stylesheet
   Hand-written (no CDN dependency) design system with CSS variables driving
   a Light / Dark theme switch via [data-theme] on <html>.
   ========================================================================= */

:root {
  --font-sans: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;

  /* ---- Brand ---- */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-500: #4f46e5;
  --brand-600: #4338ca;
  --brand-700: #3730a3;
  --accent:    #06b6d4;

  /* ---- Light theme (default) ---- */
  --bg:            #f8fafc;
  --bg-elevated:   #ffffff;
  --bg-subtle:     #f1f5f9;
  --text-primary:  #0f172a;
  --text-secondary:#475569;
  --text-muted:    #94a3b8;
  --border:        #e2e8f0;
  --shadow-color:  220 3% 15%;
  --nav-bg:        rgba(255, 255, 255, 0.8);
  --success: #16a34a;
  --danger:  #dc2626;
  --warning: #d97706;
}

[data-theme='dark'] {
  --bg:             #0b1120;
  --bg-elevated:    #111827;
  --bg-subtle:      #1a2333;
  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #64748b;
  --border:         #253248;
  --nav-bg:         rgba(11, 17, 32, 0.75);
  --brand-50:  #1e1b4b;
  --brand-100: #312e81;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-primary);
  transition: background-color .25s ease, color .25s ease;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ---------------------------------------------------------------------- */
/* Navbar                                                                  */
/* ---------------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .6rem;
  background: linear-gradient(135deg, var(--brand-500), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: .95rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  font-size: .93rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color .2s ease;
}
.nav-links a:hover { color: var(--brand-500); }

.nav-actions { display: flex; align-items: center; gap: .9rem; }

/* Theme switcher */
.theme-toggle {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background .2s ease, transform .2s ease;
}
.theme-toggle:hover { transform: translateY(-1px); background: var(--brand-50); color: var(--brand-600); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
[data-theme='dark'] .icon-sun { display: block; }
[data-theme='dark'] .icon-moon { display: none; }
.icon-sun { display: none; }
.icon-moon { display: block; }

.nav-toggle {
  display: none;
  width: 2.4rem; height: 2.4rem;
  border-radius: .5rem;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.4rem;
  border-radius: .6rem;
  font-weight: 600;
  font-size: .92rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(79, 70, 229, .55);
}
.btn-primary:hover { box-shadow: 0 10px 26px -8px rgba(79, 70, 229, .7); }

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text-primary);
}
.btn-outline:hover { border-color: var(--brand-500); color: var(--brand-500); }

.btn-block { width: 100%; }
.btn-sm { padding: .45rem .9rem; font-size: .82rem; }

/* Generic status/label pill — used standalone (e.g. "Connected") and inside
   the dashboard sidebar (which adds its own spacing/case overrides below). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  background: var(--brand-50);
  color: var(--brand-600);
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 32rem;
  background: radial-gradient(60% 60% at 30% 20%, rgba(79,70,229,.20), transparent 70%),
              radial-gradient(50% 50% at 80% 10%, rgba(6,182,212,.18), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; text-align: center; max-width: 780px; margin-inline: auto; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  font-weight: 800;
}
.hero h1 span {
  background: linear-gradient(135deg, var(--brand-500), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  color: var(--text-secondary);
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0 0 2.25rem;
}
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 4rem auto 0;
  position: relative;
}
.hero-stat { text-align: center; }
.hero-stat strong { display: block; font-size: 1.9rem; font-weight: 800; color: var(--text-primary); }
.hero-stat span { font-size: .85rem; color: var(--text-muted); }

/* ---------------------------------------------------------------------- */
/* Sections / Services                                                    */
/* ---------------------------------------------------------------------- */
.section { padding: 5rem 0; }
.section-subtle { background: var(--bg-subtle); }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 3rem; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  margin: 0 0 .85rem;
  font-weight: 800;
}
.section-head p { color: var(--text-secondary); line-height: 1.7; margin: 0; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.service-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2rem 1.6rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px hsl(var(--shadow-color) / 0.35);
  border-color: var(--brand-500);
}
.service-icon {
  width: 3rem;
  height: 3rem;
  border-radius: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-500), var(--accent));
  color: #fff;
  margin-bottom: 1.25rem;
}
.service-icon svg { width: 1.5rem; height: 1.5rem; }
.service-card h3 { margin: 0 0 .6rem; font-size: 1.08rem; font-weight: 700; }
.service-card p { margin: 0; color: var(--text-secondary); font-size: .92rem; line-height: 1.65; }

/* ---------------------------------------------------------------------- */
/* Feature / role strip                                                   */
/* ---------------------------------------------------------------------- */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.role-card {
  border: 1px dashed var(--border);
  border-radius: .9rem;
  padding: 1.5rem;
  text-align: center;
}
.role-card strong { display: block; font-size: 1rem; margin-bottom: .35rem; }
.role-card span { font-size: .82rem; color: var(--text-muted); }

/* ---------------------------------------------------------------------- */
/* CTA band                                                                */
/* ---------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500) 60%, var(--accent));
  border-radius: 1.5rem;
  padding: 3.5rem 2.5rem;
  text-align: center;
  color: #fff;
  margin-inline: 1.5rem;
}
.cta-band h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .75rem; }
.cta-band p { opacity: .9; margin: 0 0 2rem; }
.cta-band .btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }
.cta-band .btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.cta-band .btn-primary { background: #fff; color: var(--brand-600); box-shadow: none; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 3.5rem 0 2rem;
  margin-top: 3rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.footer-grid h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 1rem; }
.footer-grid li { margin-bottom: .6rem; }
.footer-grid a { color: var(--text-secondary); font-size: .9rem; }
.footer-grid a:hover { color: var(--brand-500); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: .75rem;
}

/* ---------------------------------------------------------------------- */
/* Auth pages (login / register / forgot / reset)                         */
/* ---------------------------------------------------------------------- */
.auth-shell {
  min-height: calc(100vh - 4.25rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-visual {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--brand-700), var(--brand-500) 55%, var(--accent));
  color: #fff;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth-visual h2 { font-size: 2rem; line-height: 1.25; max-width: 24rem; letter-spacing: -0.02em; }
.auth-visual p { opacity: .85; max-width: 22rem; line-height: 1.7; }
.auth-visual-badges { display: flex; flex-direction: column; gap: 1rem; }
.auth-badge {
  display: flex; align-items: center; gap: .75rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: .75rem;
  padding: .85rem 1rem;
  font-size: .88rem;
}

.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 1.6rem; margin: 0 0 .5rem; font-weight: 800; letter-spacing: -0.02em; }
.auth-card > p.lead { color: var(--text-secondary); margin: 0 0 2rem; font-size: .93rem; }

.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--text-primary);
}
.field .hint { font-size: .78rem; color: var(--text-muted); margin-top: .35rem; }

.input, select.input {
  width: 100%;
  padding: .72rem .9rem;
  border-radius: .6rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: .92rem;
  transition: border-color .2s ease, box-shadow .2s ease;
  appearance: none;
}
.input:focus, select.input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

.input-wrap { position: relative; }
.input-wrap .input { padding-right: 2.6rem; }
.input-toggle {
  position: absolute;
  right: .7rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
}

.checkbox-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; font-size: .85rem; }
.checkbox-row label { display: flex; align-items: center; gap: .5rem; color: var(--text-secondary); cursor: pointer; }
.checkbox-row a { color: var(--brand-500); font-weight: 600; }

.divider { display: flex; align-items: center; gap: 1rem; margin: 1.75rem 0; color: var(--text-muted); font-size: .8rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.auth-switch { text-align: center; margin-top: 1.75rem; font-size: .88rem; color: var(--text-secondary); }
.auth-switch a { color: var(--brand-500); font-weight: 700; }

/* Alert / flash banners */
.alert {
  padding: .85rem 1rem;
  border-radius: .6rem;
  font-size: .87rem;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.alert-success { background: rgba(22,163,74,.1); color: var(--success); border-color: rgba(22,163,74,.25); }
.alert-error   { background: rgba(220,38,38,.1); color: var(--danger); border-color: rgba(220,38,38,.25); }
.alert-info    { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-100); }

/* ---------------------------------------------------------------------- */
/* Toggle switch (Telegram / WhatsApp alert ON-OFF)                       */
/* ---------------------------------------------------------------------- */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: var(--bg-elevated);
  margin-bottom: 1rem;
}
.toggle-row .toggle-label { display: flex; align-items: center; gap: .8rem; }
.toggle-row .toggle-icon {
  width: 2.4rem; height: 2.4rem; border-radius: .6rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-600);
}
.toggle-row strong { display: block; font-size: .93rem; }
.toggle-row span.desc { font-size: .8rem; color: var(--text-muted); }

.switch { position: relative; display: inline-block; width: 3rem; height: 1.7rem; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background .2s ease;
}
.switch .slider::before {
  content: '';
  position: absolute;
  height: 1.3rem; width: 1.3rem;
  left: .2rem; bottom: .2rem;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked + .slider { background: var(--success); }
.switch input:checked + .slider::before { transform: translateX(1.3rem); }
.switch input:disabled + .slider { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------------- */
/* Dashboard shell — premium dark-green theme                             */
/* ---------------------------------------------------------------------- */
:root {
  --dg-900: #052e1c;
  --dg-800: #073d24;
  --dg-700: #0a4d2d;
  --dg-600: #0f6339;
  --dg-500: #158049;
  --dg-accent: #34d399;
  --dg-accent-strong: #10b981;
  --dg-sidebar-text: #cdebd9;
  --dg-sidebar-text-muted: #7fae94;
}

/* ---------------------------------------------------------------------- */
/* Accent color picker                                                    */
/* ---------------------------------------------------------------------- */
/* Applied via [data-accent="..."] on <html>, independent of [data-theme]
   (light/dark) — a visitor can pick any accent regardless of light/dark
   mode, and switch light/dark without losing their accent choice. With no
   [data-accent] attribute (the default, e.g. a first-time visitor), the
   site looks exactly as it did before this feature — the indigo brand
   color on public pages and the dark-green dashboard sidebar are both
   untouched. Each named accent below recolors BOTH: the public-page brand
   variables (--brand-*, --accent) AND the dashboard's dark sidebar/banner
   palette (--dg-*) shift to the same hue family, so picking one color
   really does change the header, sidebar, footer links, buttons and
   badges together — not just an isolated button somewhere.
   --brand-50/100 (used for light tinted badge backgrounds) additionally
   need a dark-mode-appropriate version, same as the built-in indigo
   default already has at [data-theme='dark'] above — so each accent gets
   a light-mode block here AND a [data-theme='dark'][data-accent="..."]
   block right after it with just the 50/100 swapped for a dark tint,
   exactly mirroring how the default indigo brand already behaves. */

[data-accent='emerald'] {
  --brand-50: #ecfdf5; --brand-100: #d1fae5;
  --brand-500: #059669; --brand-600: #047857; --brand-700: #065f46; --accent: #22d3ee;
  --dg-900: #052e1c; --dg-800: #073d24; --dg-700: #0a4d2d; --dg-600: #0f6339; --dg-500: #158049;
  --dg-accent: #34d399; --dg-accent-strong: #10b981;
}
[data-theme='dark'][data-accent='emerald'] { --brand-50: #022c22; --brand-100: #064e3b; }

[data-accent='violet'] {
  --brand-50: #f5f3ff; --brand-100: #ede9fe;
  --brand-500: #7c3aed; --brand-600: #6d28d9; --brand-700: #5b21b6; --accent: #c084fc;
  --dg-900: #1e1033; --dg-800: #2a1547; --dg-700: #38195e; --dg-600: #6d28d9; --dg-500: #7c3aed;
  --dg-accent: #c4b5fd; --dg-accent-strong: #a78bfa;
}
[data-theme='dark'][data-accent='violet'] { --brand-50: #2e1065; --brand-100: #4c1d95; }

[data-accent='blue'] {
  --brand-50: #eff6ff; --brand-100: #dbeafe;
  --brand-500: #2563eb; --brand-600: #1d4ed8; --brand-700: #1e40af; --accent: #38bdf8;
  --dg-900: #0c1e3d; --dg-800: #0f2a52; --dg-700: #133a6b; --dg-600: #1d4ed8; --dg-500: #2563eb;
  --dg-accent: #60a5fa; --dg-accent-strong: #3b82f6;
}
[data-theme='dark'][data-accent='blue'] { --brand-50: #172554; --brand-100: #1e3a8a; }

[data-accent='rose'] {
  --brand-50: #fff1f2; --brand-100: #ffe4e6;
  --brand-500: #e11d48; --brand-600: #be123c; --brand-700: #9f1239; --accent: #fb7185;
  --dg-900: #3f0a17; --dg-800: #530f1f; --dg-700: #6d1327; --dg-600: #9f1239; --dg-500: #be123c;
  --dg-accent: #fb7185; --dg-accent-strong: #f43f5e;
}
[data-theme='dark'][data-accent='rose'] { --brand-50: #4c0519; --brand-100: #881337; }

[data-accent='amber'] {
  --brand-50: #fffbeb; --brand-100: #fef3c7;
  --brand-500: #d97706; --brand-600: #b45309; --brand-700: #92400e; --accent: #fbbf24;
  --dg-900: #3a2205; --dg-800: #4d2e07; --dg-700: #653d09; --dg-600: #92400e; --dg-500: #b45309;
  --dg-accent: #fbbf24; --dg-accent-strong: #f59e0b;
}
[data-theme='dark'][data-accent='amber'] { --brand-50: #451a03; --brand-100: #78350f; }

[data-accent='teal'] {
  --brand-50: #f0fdfa; --brand-100: #ccfbf1;
  --brand-500: #0d9488; --brand-600: #0f766e; --brand-700: #115e59; --accent: #2dd4bf;
  --dg-900: #062421; --dg-800: #08302b; --dg-700: #0b3f38; --dg-600: #115e59; --dg-500: #0f766e;
  --dg-accent: #2dd4bf; --dg-accent-strong: #14b8a6;
}
[data-theme='dark'][data-accent='teal'] { --brand-50: #042f2e; --brand-100: #134e4a; }

[data-accent='slate'] {
  --brand-50: #f8fafc; --brand-100: #f1f5f9;
  --brand-500: #475569; --brand-600: #334155; --brand-700: #1e293b; --accent: #94a3b8;
  --dg-900: #0f172a; --dg-800: #16213a; --dg-700: #1e293b; --dg-600: #334155; --dg-500: #475569;
  --dg-accent: #94a3b8; --dg-accent-strong: #64748b;
}
[data-theme='dark'][data-accent='slate'] { --brand-50: #1e293b; --brand-100: #334155; }

.accent-picker { position: relative; }
.accent-swatch-btn {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--border); cursor: pointer; padding: 0;
  background: conic-gradient(from 180deg, #4f46e5, #059669, #7c3aed, #2563eb, #e11d48, #d97706, #0d9488, #475569, #4f46e5);
  flex-shrink: 0;
  transition: transform .2s ease;
}
.accent-swatch-btn:hover { transform: translateY(-1px); }
.accent-picker-popover {
  position: absolute; right: 0; top: calc(100% + .6rem);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: .9rem;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.25);
  padding: .9rem;
  width: 15.5rem;
  max-width: calc(100vw - 2rem);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 40;
}
.accent-picker.open .accent-picker-popover { opacity: 1; visibility: visible; transform: translateY(0); }
.accent-picker-title { font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .7rem; }
.accent-swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.accent-swatch {
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, border-color .12s ease;
}
.accent-swatch:hover { transform: scale(1.1); }
.accent-swatch[aria-pressed='true'] { border-color: var(--text-primary); }
.accent-swatch svg { display: none; width: 1rem; height: 1rem; color: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.accent-swatch[aria-pressed='true'] svg { display: block; }
.accent-swatch[data-accent-name='default'] { background: linear-gradient(135deg, #4f46e5 50%, #0f6339 50%); }
.accent-swatch[data-accent-name='emerald'] { background: #059669; }
.accent-swatch[data-accent-name='violet']  { background: #7c3aed; }
.accent-swatch[data-accent-name='blue']    { background: #2563eb; }
.accent-swatch[data-accent-name='rose']    { background: #e11d48; }
.accent-swatch[data-accent-name='amber']   { background: #d97706; }
.accent-swatch[data-accent-name='teal']    { background: #0d9488; }
.accent-swatch[data-accent-name='slate']   { background: #475569; }

body.dash-body { background: var(--bg-subtle); }

.dash-shell {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
}

/* ---- Sidebar : fixed dark-green brand color in both themes ---- */
.dash-sidebar {
  background: linear-gradient(180deg, var(--dg-900), var(--dg-800) 60%, var(--dg-700));
  padding: 1.5rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.dash-sidebar-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .6rem 1.5rem;
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.dash-sidebar-brand .brand-mark {
  width: 2.15rem; height: 2.15rem; border-radius: .6rem;
  background: linear-gradient(135deg, var(--dg-accent), var(--dg-accent-strong));
  display: flex; align-items: center; justify-content: center;
  color: var(--dg-900); font-weight: 800; font-size: .9rem;
}
.dash-sidebar .badge {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(52, 211, 153, .16); color: var(--dg-accent);
  margin: 0 .6rem 1.25rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.dash-nav-group-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--dg-sidebar-text-muted); padding: .8rem .9rem .35rem;
}
.dash-nav a {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .9rem; border-radius: .6rem;
  font-size: .89rem; color: var(--dg-sidebar-text); font-weight: 500;
  margin-bottom: .2rem;
  transition: background .15s ease, color .15s ease;
}
.dash-nav a .nav-icon { font-size: 1rem; width: 1.4rem; text-align: center; flex-shrink: 0; }
.dash-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.dash-nav a.active {
  background: rgba(52, 211, 153, .16);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--dg-accent);
}
/* ---- Sidebar nav dropdown (round 20) -------------------------------------
   One nav item that expands into a small submenu (e.g. "ID Mobile Update"
   → Apply / All List), instead of two separate top-level links. Inline
   accordion within the sidebar's own flow — NOT the .profile-dropdown
   pattern above, which is an absolutely-positioned popover meant for the
   topbar; this one pushes the items below it down when opened, like any
   other nested sidebar nav. Reusable for future services — duplicate the
   markup block in dashboard/header.php and give it a new [data-nav-dropdown]. */
.dash-nav-dropdown-trigger {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: .7rem .9rem; border-radius: .6rem;
  font-size: .89rem; color: var(--dg-sidebar-text); font-weight: 500;
  background: none; border: none; cursor: pointer; text-align: left;
  transition: background .15s ease, color .15s ease;
}
.dash-nav-dropdown-trigger .nav-icon { font-size: 1rem; width: 1.4rem; text-align: center; flex-shrink: 0; }
.dash-nav-dropdown-trigger:hover { background: rgba(255,255,255,.08); color: #fff; }
.dash-nav-chevron { margin-left: auto; font-size: .7rem; opacity: .7; transition: transform .15s ease; }
.dash-nav-dropdown.open .dash-nav-dropdown-trigger .dash-nav-chevron { transform: rotate(180deg); }
.dash-nav-dropdown.has-active .dash-nav-dropdown-trigger {
  background: rgba(52, 211, 153, .16); color: #fff;
  box-shadow: inset 3px 0 0 var(--dg-accent);
}
.dash-nav-submenu {
  max-height: 0; overflow: hidden; transition: max-height .2s ease;
  padding-left: 1.55rem;
}
/* Round 47: the open height is worked out from how many children the menu
   actually has, instead of a fixed 8rem.

   8rem was sized when the only dropdown had TWO items (Apply / All List). The
   Demographics menu now has four, and each row is ~2.26rem, so the fourth one
   ("Full Name Update") was being clipped by overflow:hidden — present in the
   DOM, invisible on screen. A fifth type would have hidden two.

   dashboard/header.php sets --submenu-items on each dropdown, so every menu
   gets its own correct height and adding a service type never needs a CSS
   edit. The fallback covers any dropdown that doesn't set it. */
.dash-nav-dropdown.open .dash-nav-submenu { max-height: calc(var(--submenu-items, 3) * 2.4rem + .5rem); }
.dash-nav-submenu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem; border-radius: .5rem;
  font-size: .84rem; color: var(--dg-sidebar-text-muted); font-weight: 500;
  margin-bottom: .15rem;
  transition: background .15s ease, color .15s ease;
}
.dash-nav-submenu a::before { content: '—'; opacity: .5; font-size: .75rem; }
.dash-nav-submenu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.dash-nav-submenu a.active { background: rgba(52, 211, 153, .16); color: #fff; }

.dash-sidebar-footer {
  margin-top: auto;
  padding: 1rem .9rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--dg-sidebar-text-muted);
  font-size: .74rem;
}

/* ---- Right column: topbar + banner + content ---- */
.dash-right { display: flex; flex-direction: column; min-width: 0; }

.dash-topbar {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 0 1.75rem;
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
}
.dash-topbar-left { display: flex; align-items: center; gap: .9rem; font-size: .92rem; color: var(--text-secondary); font-weight: 600; }
.dash-topbar-right { display: flex; align-items: center; gap: .9rem; }

.sidebar-toggle {
  display: none;
  width: 2.4rem; height: 2.4rem;
  border-radius: .5rem;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.wallet-pill {
  display: flex; align-items: center; gap: .55rem;
  background: rgba(16, 185, 129, .1);
  border: 1px solid rgba(16, 185, 129, .3);
  color: var(--dg-accent-strong);
  padding: .5rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .88rem;
  white-space: nowrap;
}
.wallet-pill .wallet-pill-icon { font-size: 1rem; }
[data-theme='dark'] .wallet-pill { color: var(--dg-accent); }

.profile-dropdown { position: relative; }
.profile-trigger {
  display: flex; align-items: center; gap: .6rem;
  background: none; border: none; cursor: pointer;
  padding: .3rem .5rem .3rem .3rem;
  border-radius: 999px;
  transition: background .15s ease;
}
.profile-trigger:hover { background: var(--bg-subtle); }
.profile-avatar {
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--dg-600), var(--dg-accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.profile-meta { text-align: left; line-height: 1.2; }
.profile-meta strong { display: block; font-size: .85rem; color: var(--text-primary); }
.profile-meta span { font-size: .74rem; color: var(--text-muted); }
.profile-menu {
  position: absolute; right: 0; top: calc(100% + .6rem);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: .7rem;
  min-width: 12rem;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.25);
  padding: .5rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 30;
}
.profile-dropdown.open .profile-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.profile-menu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: .45rem;
  font-size: .85rem; color: var(--text-secondary); font-weight: 500;
}
.profile-menu a:hover { background: var(--bg-subtle); color: var(--text-primary); }
.profile-menu hr { border: none; border-top: 1px solid var(--border); margin: .4rem 0; }

.dash-content { padding: 1.75rem; }

/* ---- Welcome banner ---- */
.welcome-banner {
  background: linear-gradient(120deg, var(--dg-800), var(--dg-600) 70%, var(--dg-500));
  border-radius: 1.1rem;
  padding: 2rem 2.25rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.welcome-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(40% 80% at 90% 0%, rgba(255,255,255,.12), transparent 70%);
  pointer-events: none;
}
.welcome-banner h1 { margin: 0 0 .4rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; position: relative; }
.welcome-banner .welcome-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .82rem; color: rgba(255,255,255,.82); position: relative; }
.welcome-banner .welcome-meta strong { color: #fff; font-weight: 600; }
.welcome-banner-badge {
  position: relative;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  padding: .55rem 1.1rem;
  border-radius: .7rem;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- Stat cards ---- */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 1.75rem; }
.stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.35rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 8px 24px -16px hsl(var(--shadow-color) / 0.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px hsl(var(--shadow-color) / 0.55); }
.stat-card span.label { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.stat-card strong { display: block; font-size: 1.55rem; margin-top: .35rem; letter-spacing: -0.02em; }
.stat-card-icon {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
  background: rgba(16, 185, 129, .12);
  color: var(--dg-accent-strong);
}
.stat-card-icon.icon-blue   { background: rgba(79, 70, 229, .12); color: var(--brand-500); }
.stat-card-icon.icon-amber  { background: rgba(217, 119, 6, .12); color: var(--warning); }
.stat-card-icon.icon-rose   { background: rgba(220, 38, 38, .12); color: var(--danger); }

/* ---- Quick actions ---- */
.section-label { font-size: .95rem; font-weight: 700; margin: 0 0 1rem; color: var(--text-primary); }
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.quick-action-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.4rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.quick-action-btn:hover {
  transform: translateY(-3px);
  border-color: var(--dg-accent-strong);
  box-shadow: 0 16px 32px -18px hsl(var(--shadow-color) / 0.55);
}
.quick-action-icon {
  width: 3rem; height: 3rem; border-radius: .8rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: linear-gradient(135deg, var(--dg-600), var(--dg-accent-strong));
  color: #fff;
}
.quick-action-btn.disabled { opacity: .55; pointer-events: none; }

.dash-main { padding: 2rem; }
.panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 1rem; padding: 1.75rem; }
.panel h2 { margin-top: 0; font-size: 1.15rem; }
.panel-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem .75rem; flex-wrap: wrap; margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------- */
/* DataTables chrome — centralised (round 23)                             */
/*                                                                        */
/* The stock dataTables.dataTables.min.css styles its own search box,     */
/* page-length select, info line and pagination for a light page and      */
/* nothing else — in dark mode they stayed white. Every DataTables page   */
/* therefore carried its own copy of this re-theme in a page <style>      */
/* block (wallet_history, users, system_logs, and the three ID-update     */
/* queues = six copies of the same rules). They now live here once,       */
/* matched on the wrapper class DataTables always emits rather than each  */
/* page's table id, so any new table gets the theme for free.             */
/*                                                                        */
/* Every value below resolves from a CSS variable, so this follows        */
/* light/dark mode and all 8 accent presets automatically.                */
/* ---------------------------------------------------------------------- */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: .3rem .5rem;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  border-color: var(--brand-500);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  color: var(--text-muted);
  font-size: .82rem;
}
.dataTables_wrapper .dataTables_processing {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: .6rem;
  color: var(--text-secondary) !important;
  box-shadow: 0 10px 30px -18px hsl(var(--shadow-color) / .5);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: .5rem !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  background: var(--bg-elevated) !important;
  margin-left: .3rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: var(--brand-500) !important;
  color: var(--brand-600) !important;
  background: var(--bg-subtle) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--text-muted) !important;
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  opacity: .6;
}
table.dataTable thead th {
  border-bottom: 1px solid var(--border);
  padding: .6rem .5rem;
  text-align: left;
  color: var(--text-primary);
}
table.dataTable tbody td {
  padding: .6rem .5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-primary);
}
table.dataTable tbody tr { background: transparent; }
table.dataTable tbody tr:hover { background: var(--bg-subtle); }
table.dataTable.no-footer { border-bottom-color: var(--border); }

/* ---------------------------------------------------------------------- */
/* DataTables 2.x chrome — the other half of the same theme (round 27)     */
/*                                                                        */
/* The block above was written for DataTables 1.10, which wraps its table  */
/* in .dataTables_wrapper and names its controls .dataTables_length /      */
/* _filter / _info / _paginate. The self-hosted copy in                    */
/* assets/js/vendor/dataTables.min.js is DataTables **2.1.8**, which       */
/* renames every one of those to .dt-container / .dt-length / .dt-search / */
/* .dt-info / .dt-paging. So none of the rules above ever reached the      */
/* pages that load the self-hosted build — service_id_mobile_list.php,     */
/* admin_service_id_mobile_list.php, admin_demographics_list.php,          */
/* operator_demographics_list.php and friends were quietly falling back to */
/* the vendor stylesheet, which is written for a light page and leaves the */
/* search box and pagination white in dark mode.                          */
/*                                                                        */
/* These are the same values as above against the 2.x class names, so both */
/* generations now get one identical, theme-following look. Keep the two   */
/* blocks in step if either is edited.                                     */
/* ---------------------------------------------------------------------- */
.dt-container .dt-input,
.dt-container .dt-length select,
.dt-container .dt-search input {
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: .35rem .55rem;
  font: inherit;
  font-size: .84rem;
}
.dt-container .dt-input:focus,
.dt-container .dt-length select:focus,
.dt-container .dt-search input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent);
}
.dt-container .dt-info,
.dt-container .dt-length,
.dt-container .dt-search {
  color: var(--text-muted);
  font-size: .82rem;
}
.dt-container .dt-processing {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: .6rem;
  color: var(--text-secondary) !important;
  box-shadow: 0 10px 30px -18px hsl(var(--shadow-color) / .5);
}
.dt-container .dt-paging .dt-paging-button {
  border-radius: .5rem !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  background: var(--bg-elevated) !important;
  margin-left: .3rem !important;
  min-width: 2.1rem;
}
.dt-container .dt-paging .dt-paging-button:hover:not(.disabled) {
  border-color: var(--brand-500) !important;
  color: var(--brand-600) !important;
  background: var(--bg-subtle) !important;
}
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover {
  background: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
  color: #fff !important;
}
.dt-container .dt-paging .dt-paging-button.disabled,
.dt-container .dt-paging .dt-paging-button.disabled:hover {
  color: var(--text-muted) !important;
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  opacity: .55;
}
/* 2.x draws its sort arrows as two stacked ::before/::after triangles in a
   .dt-column-order box. Left alone they inherit a hardcoded colour that
   disappears against a dark header. */
.dt-container table.dataTable thead th .dt-column-order::before,
.dt-container table.dataTable thead th .dt-column-order::after { opacity: .35; }
.dt-container table.dataTable thead th.dt-ordering-asc  .dt-column-order::before,
.dt-container table.dataTable thead th.dt-ordering-desc .dt-column-order::after {
  opacity: 1;
  color: var(--brand-500);
}

/* ---------------------------------------------------------------------- */
/* Mobile: turn a wide list table into stacked cards (round 27)           */
/*                                                                        */
/* A ten-column request list cannot be read on a phone by scrolling        */
/* sideways. Any table given class="stack-table" collapses below 720px     */
/* into one card per row, each cell labelled from the `data-th` attribute  */
/* its page's DataTables rowCallback copies out of the <thead>. Nothing is */
/* hidden — every column is still there, just stacked.                     */
/* ---------------------------------------------------------------------- */
@media (max-width: 720px) {
  table.stack-table,
  table.stack-table tbody,
  table.stack-table tr,
  table.stack-table td { display: block; width: 100%; }

  table.stack-table thead { display: none; }

  table.stack-table tbody tr {
    border: 1px solid var(--border);
    border-radius: .8rem;
    background: var(--bg-elevated);
    padding: .35rem .2rem;
    margin-bottom: .7rem;
    overflow: hidden;
  }
  table.stack-table tbody tr:hover { background: var(--bg-elevated); }

  table.stack-table tbody td {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    text-align: right;
    padding: .5rem .8rem !important;
    border: none !important;
    border-bottom: 1px dashed var(--border) !important;
    white-space: normal !important;
    min-height: 2.6rem;
  }
  table.stack-table tbody td:last-child { border-bottom: none !important; }

  table.stack-table tbody td::before {
    content: attr(data-th);
    flex: 0 0 auto;
    margin-right: auto;
    text-align: left;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  /* A cell with no label (the serial number) reads as the card's heading. */
  table.stack-table tbody td[data-th=""]::before { content: none; }

  /* Buttons inside a stacked card get full-width tap targets. */
  table.stack-table .row-actions { width: 100%; justify-content: flex-end; }
  table.stack-table .row-actions .btn { min-height: 2.5rem; }
}

/* ---------------------------------------------------------------------- */
/* Table cell helpers emitted by the SSP endpoints (round 25)             */
/*                                                                        */
/* Every *_list_data.php wraps its date column in .cell-date and its empty */
/* placeholder in .cell-empty, but neither class was ever defined anywhere */
/* — so dates rendered in full body colour and wrapped mid-value. They sit */
/* here rather than in a page <style> because six list pages emit them.    */
/* ---------------------------------------------------------------------- */
.cell-date  { color: var(--text-muted); white-space: nowrap; }
.cell-empty { color: var(--text-muted); }

/* ---------------------------------------------------------------------- */
/* Report/list page shell (round 30)                                      */
/*                                                                        */
/* wallet_history.php defined this whole family — header card, filter     */
/* panel, quick-range/status chips, table card — in its own <style>       */
/* block. payment_report.php then reused the SAME class names (same       */
/* family on purpose, see that file's header comment) without redefining  */
/* them, on the assumption they already lived here — they didn't, so the  */
/* page rendered with an unstyled filter form and a bare table. Exactly   */
/* the round-25 .cell-date/.cell-empty mistake, one level up: shared      */
/* markup, never actually shared as CSS. service_demographics_list.php    */
/* also carries its own copy of .status-chip with identical rules.        */
/*                                                                        */
/* Defined once, here, for every current and future page in this family.  */
/* A page-local <style> block that repeats any of these selectors still   */
/* works (last one wins, same specificity) — safe to leave as-is, and     */
/* safe to delete next time that file is touched.                         */
/* ---------------------------------------------------------------------- */

/* ---- Header card (page title + primary CTA) --------------------------- */
.wh-head-panel { padding: 1.15rem 1.25rem; margin-bottom: 1.25rem; }
.wh-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.wh-head-icon {
  width: 2.7rem; height: 2.7rem; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: .78rem; font-size: 1.25rem;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff;
}
.wh-head-text { flex: 1 1 18rem; min-width: 0; }
.wh-head-text h2 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--text-primary); }
.wh-head-text p { margin: .2rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--text-secondary); }
.wh-head-cta { flex: 0 0 auto; }

/* ---- Filter panel (date range / search / quick-range chips) ----------- */
.id-filter-panel { padding: 1.15rem 1.25rem; margin-bottom: 1.25rem; }
.id-filter-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.id-filter-icon {
  width: 2.45rem; height: 2.45rem; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: .72rem; font-size: 1.05rem;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff;
}
.id-filter-text strong { display: block; font-size: .9rem; font-weight: 800; color: var(--text-primary); }
.id-filter-text span { display: block; color: var(--text-muted); font-size: .75rem; margin-top: .1rem; }

.id-filter-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; }
.id-filter-row .field { margin-bottom: 0; }
.id-filter-row label { display: block; margin-bottom: .4rem; font-size: .78rem; font-weight: 700; color: var(--text-secondary); }
.id-date-field   { flex: 1 1 10rem; min-width: 9rem; max-width: 13rem; }
.id-search-field { flex: 2 1 15rem; min-width: 12rem; }
.id-filter-actions { flex: 0 0 auto; display: flex; gap: .5rem; }

/* Quick-range chips (date presets, and the demographics/payment status presets) */
.id-status-tabs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .55rem;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--border);
}
.id-status-tabs .wh-preset,
.wh-preset {
  min-height: 2.75rem; display: flex; align-items: center; justify-content: center; gap: .35rem;
  border: 1px solid var(--border); border-radius: .72rem; background: var(--bg-elevated);
  color: var(--text-secondary); font-weight: 700; font-size: .82rem; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.id-status-tabs .wh-preset:hover,
.wh-preset:hover { border-color: var(--brand-500); color: var(--brand-500); }
.id-status-tabs .wh-preset.is-active,
.wh-preset.is-active {
  color: #fff; border-color: var(--brand-500);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
}

/* ---- Table card (header + badge + scroll wrap) ------------------------- */
.request-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; }
.request-card-head {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: 1rem 1.15rem; border-bottom: 1px solid var(--border);
}
.request-card-title { display: flex; align-items: center; gap: .8rem; }
.request-card-icon {
  width: 2.7rem; height: 2.7rem; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: .78rem; font-size: 1.15rem;
  background: color-mix(in srgb, var(--brand-500) 10%, var(--bg-elevated));
}
.request-card-title h2 { margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--text-primary); }
.request-card-title p  { margin: .18rem 0 0; color: var(--text-muted); font-size: .78rem; }
.request-card-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .75rem; border-radius: 999px; font-size: .74rem; font-weight: 800;
  color: var(--brand-600); border: 1px solid color-mix(in srgb, var(--brand-500) 20%, var(--border));
  background: color-mix(in srgb, var(--brand-500) 6%, transparent);
}
.request-card-badge span {
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}
.request-card-body { padding: .9rem 1rem 1rem; }
.request-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Status chip — used by wallet_history.php, service_demographics_list.php
   and payment_report.php alike. Each page may add its OWN extra status
   variant locally (e.g. payment_report.php's .status-expired) without
   redefining the base or the three shared variants here. */
.status-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
  background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border);
}
.status-chip.status-pending {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--warning) 26%, transparent);
}
.status-chip.status-success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border-color: color-mix(in srgb, var(--success) 26%, transparent);
}
.status-chip.status-rejected {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger) 26%, transparent);
}

@media (max-width: 640px) {
  .wh-head-cta { width: 100%; }
  .id-filter-row { gap: .7rem; }
  .id-date-field, .id-search-field { flex: 1 1 100%; max-width: none; }
  .id-filter-actions { width: 100%; }
  .id-filter-actions .btn { flex: 1; min-height: 2.75rem; }
  /* 16px stops iOS Safari zooming the whole page when a field is focused. */
  .id-filter-row .input { font-size: 16px; min-height: 2.9rem; }
}


/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */
@media (max-width: 960px) {
  .services-grid, .roles-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .dash-shell { grid-template-columns: 1fr; }
  .dash-sidebar {
    position: fixed; left: -280px; top: 0; bottom: 0; width: 264px; z-index: 100;
    transition: left .25s ease; box-shadow: 16px 0 40px -20px rgba(0,0,0,.4);
  }
  .dash-sidebar.open { left: 0; }
  .sidebar-toggle { display: flex !important; }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90;
  }
  .sidebar-backdrop.open { display: block; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .services-grid, .roles-grid, .footer-grid, .card-grid { grid-template-columns: 1fr; }
  .cta-band { margin-inline: 0; border-radius: 0; }
  .welcome-banner { flex-direction: column; align-items: flex-start; }
  .dash-topbar { padding: 0 1rem; }
  .dash-topbar-left span.topbar-page-title { display: none; }
  .dash-topbar-right { gap: .5rem; }
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-content { padding: 1.1rem; }
  /* Topbar gets tight on a phone with wallet pill + theme toggle + accent
     picker + profile all in one row — keep the avatar/icons, drop the
     name/role text and the pill's rupee icon so nothing wraps or overflows
     off-screen. */
  .profile-meta { display: none; }
  .profile-trigger svg { display: none; }
  .wallet-pill { padding: .45rem .75rem; font-size: .8rem; }
  .theme-toggle, .accent-swatch-btn { width: 2.3rem; height: 2.3rem; }
}

@media (max-width: 480px) {
  /* .panel/.pending-orders-box are the main content cards on pages like
     wallet_topup.php — their fixed 1.75rem padding eats too much of a
     narrow phone's width, and the "Add Money" heading + wallet-pill row
     needs a smaller heading so it doesn't crowd against the pill. */
  .panel { padding: 1.15rem; }
  .panel h2 { font-size: 1.02rem; }
  .pending-orders-box { padding: .85rem 1rem; }
  .qr-modal-box { padding: 1.15rem 1.1rem 1rem; }
}

@media (max-width: 400px) {
  .wallet-pill .wallet-pill-icon { display: none; }
  .dash-topbar-right { gap: .35rem; }
  .navbar-inner .btn-sm { padding: .5rem .7rem; font-size: .78rem; }
}

@media (max-width: 720px) {
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 4.25rem; left: 0; right: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    gap: 1rem;
  }
}

/* ==================== Wallet self-service top-up (UPI QR) ==================== */

.pending-orders-box {
  margin-top: 1.5rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: .75rem;
  padding: 1rem 1.15rem;
}
.pending-orders-title {
  font-weight: 700;
  color: var(--danger);
  font-size: .92rem;
  margin-bottom: .5rem;
  display: flex; align-items: center; gap: .5rem;
}
.pending-orders-desc { font-size: .84rem; color: var(--text-muted); margin-bottom: .75rem; line-height: 1.5; }
.pending-order-item {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: .6rem;
  padding: .55rem .9rem; margin-bottom: .5rem; font-size: .85rem;
}
.pending-order-item .amt { font-weight: 700; color: var(--text-primary); }
.pending-order-item .oid { color: var(--text-muted); }

.qr-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.6);
  backdrop-filter: blur(3px); z-index: 9999;
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.qr-modal-overlay.open { display: flex; animation: qrFadeIn .18s ease; }
@keyframes qrFadeIn { from { opacity: 0; } to { opacity: 1; } }

.qr-modal-box {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 1.25rem;
  width: 340px; max-width: 100%; padding: 1.4rem 1.4rem 1.25rem; position: relative; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  animation: qrPopIn .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes qrPopIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

.qr-modal-close {
  position: absolute; top: .75rem; right: .75rem; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--bg-subtle); border: none; font-size: 1.15rem; line-height: 1; cursor: pointer;
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
}
.qr-modal-close:hover { background: var(--border); color: var(--text-primary); }

.qr-modal-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; text-align: left; }
.qr-modal-head-icon {
  width: 2.4rem; height: 2.4rem; border-radius: .75rem;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0;
}
.qr-modal-head-title { font-weight: 800; font-size: 1rem; color: var(--text-primary); line-height: 1.3; }
.qr-modal-head-sub { font-size: .78rem; color: var(--text-muted); font-weight: 600; }

.qr-modal-amount-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: .75rem;
  padding: .6rem .9rem; margin-bottom: .9rem;
}
.qr-modal-amount-label { font-size: .7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.qr-modal-amount { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); }

.qr-modal-img-wrap { display: flex; justify-content: center; margin-bottom: .75rem; }
.qr-modal-img-inner {
  position: relative; background: #fff; padding: .6rem; border-radius: 1rem;
  box-shadow: 0 4px 14px rgba(79,70,229,.18); border: 1px solid var(--border);
}
.qr-modal-img-inner img { width: 190px; height: 190px; display: block; border-radius: .4rem; }

.qr-modal-apps { display: flex; gap: .4rem; justify-content: center; margin-bottom: .9rem; flex-wrap: wrap; }
.qr-app-chip { font-size: .68rem; font-weight: 700; color: var(--brand-600); background: var(--brand-50); padding: .25rem .6rem; border-radius: 30px; }

.qr-modal-timer-row { margin-bottom: .75rem; }
.qr-modal-timer-bar { height: 5px; background: var(--bg-subtle); border-radius: 10px; overflow: hidden; margin-bottom: .4rem; }
.qr-modal-timer-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); border-radius: 10px; transition: width 1s linear, background .3s ease; }
.qr-modal-timer-fill.warn { background: linear-gradient(90deg, var(--warning), #b45309); }
.qr-modal-timer-fill.danger { background: linear-gradient(90deg, var(--danger), #991b1b); }
.qr-modal-timer-text { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.qr-modal-timer-text b { color: var(--text-primary); }

.qr-modal-status { display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: .84rem; font-weight: 700; color: var(--text-secondary); min-height: 1.25rem; margin-bottom: .6rem; }
.qr-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); animation: qrPulse 1.2s infinite ease-in-out; flex-shrink: 0; }
@keyframes qrPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.qr-modal-status.success { color: var(--success); }
.qr-modal-status.success .qr-status-dot { background: var(--success); animation: none; }
.qr-modal-status.failed { color: var(--danger); }
.qr-modal-status.failed .qr-status-dot { background: var(--danger); animation: none; }

.qr-modal-safe-note { font-size: .7rem; color: var(--text-muted); line-height: 1.5; background: var(--bg-subtle); border-radius: .6rem; padding: .5rem .65rem; }