/* ══════════════════════════════════════════════════════════════════════════════
   DASHBOARD — Purple / Lavender Glassmorphism
   ══════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root{
  /* Purple brand scale */
  --p50:  #f5f3ff;
  --p100: #ede9fe;
  --p200: #ddd6fe;
  --p300: #c4b5fd;
  --p400: #a78bfa;
  --p500: #8b5cf6;
  --p600: #7c3aed;
  --p700: #6d28d9;
  --p800: #5b21b6;
  --p900: #4c1d95;

  /* Blue accent */
  --b300: #93c5fd;
  --b400: #60a5fa;
  --b500: #3b82f6;

  /* Surfaces — glassmorphism */
  --glass-card:    rgba(255,255,255,0.68);
  --glass-sidebar: rgba(255,255,255,0.22);
  --glass-topbar:  rgba(255,255,255,0.55);
  --glass-modal:   rgba(255,255,255,0.88);
  --glass-border:  rgba(255,255,255,0.55);
  --glass-border-strong: rgba(255,255,255,0.75);
  --glass-input:   rgba(255,255,255,0.80);

  /* Backgrounds */
  --bg:     #f0ebff;          /* fallback */
  --bg2:    rgba(255,255,255,0.75);
  --bg3:    rgba(255,255,255,0.50);
  --bg-tint:rgba(var(--accent-rgb),0.06);
  --border:      rgba(167,139,250,0.25);
  --border-soft: rgba(167,139,250,0.18);
  --border-strong: rgba(var(--shadow-rgb),0.30);

  /* Text */
  --text:      #1e1b4b;
  --text-soft: #3730a3;
  --muted:     #6b7280;
  --muted-soft:#9ca3af;

  /* Accents */
  --accent:        var(--p500);
  --accent2:       var(--p600);
  --accent-deep:   var(--p800);
  --accent-bright: var(--p300);
  --accent-ghost:  rgba(var(--accent-rgb),0.10);
  --accent-ring:   rgba(var(--accent-rgb),0.22);

  /* Status */
  --success:    #16a34a;
  --success-bg: rgba(22,163,74,0.10);
  --warning:    #d97706;
  --warning-bg: rgba(217,119,6,0.10);
  --danger:     #dc2626;
  --danger-bg:  rgba(220,38,38,0.10);
  --info:       var(--p600);
  --info-bg:    rgba(var(--accent-rgb),0.12);

  /* Semantic aliases kept for JS compatibility */
  --green: var(--success);
  --amber: var(--warning);
  --teal:  var(--p600);
  --red:   var(--danger);
  --blue:  var(--b500);
  --pink:  var(--p400);

  /* Theme-aware RGB triplets for dynamic rgba() usage */
  --shadow-rgb: 109,40,217;   /* p700 — used in shadows */
  --accent-rgb: 139,92,246;   /* p500 — used in tints, rings, hover states */

  /* Gradients */
  --grad-primary: linear-gradient(135deg, var(--p600) 0%, var(--p400) 100%);
  --grad-deep:    linear-gradient(160deg, rgba(109,40,217,0.85) 0%, rgba(91,33,182,0.75) 60%, rgba(67,56,202,0.80) 100%);
  --grad-card:    rgba(255,255,255,0.68);
  --grad-stripe:  linear-gradient(90deg, var(--p600), var(--p400));

  /* Glassmorphism shadows — deeper, more layered for 3-D depth */
  --shadow-xs: 0 2px 10px rgba(var(--shadow-rgb),0.10), 0 0 0 1px rgba(255,255,255,0.65), 0 1px 0 rgba(255,255,255,0.80) inset;
  --shadow-sm: 0 6px 24px rgba(var(--shadow-rgb),0.15), 0 2px 6px rgba(var(--shadow-rgb),0.08), 0 0 0 1px rgba(255,255,255,0.70), 0 2px 0 rgba(255,255,255,0.85) inset, -1px 0 0 rgba(255,255,255,0.55) inset;
  --shadow-md: 0 14px 44px rgba(var(--shadow-rgb),0.22), 0 4px 12px rgba(var(--shadow-rgb),0.12), 0 0 0 1px rgba(255,255,255,0.75), 0 2px 0 rgba(255,255,255,0.90) inset, -1px 0 0 rgba(255,255,255,0.65) inset;
  --shadow-lg: 0 32px 80px rgba(var(--shadow-rgb),0.30), 0 12px 28px rgba(var(--shadow-rgb),0.18), 0 0 0 1px rgba(255,255,255,0.65), 0 2px 0 rgba(255,255,255,0.85) inset;
  --shadow-glow: 0 0 0 4px var(--accent-ring);
  --shadow-press: 0 1px 0 rgba(var(--shadow-rgb),0.12) inset;

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .12s;
  --dur:      .2s;
  --dur-slow: .35s;

  /* Chart palette — derives from theme p-scale so all themes are covered automatically */
  --chart-1:  var(--p50);
  --chart-2:  var(--p100);
  --chart-3:  var(--p200);
  --chart-4:  var(--p300);
  --chart-5:  var(--p400);
  --chart-6:  var(--p500);
  --chart-7:  var(--p600);
  --chart-8:  var(--p700);
  --chart-9:  var(--p800);
  --chart-10: var(--p900);
  --chart-cat-1: var(--p900);
  --chart-cat-2: var(--p500);
  --chart-cat-3: var(--p800);
  --chart-cat-4: var(--p300);
  --chart-cat-5: var(--p700);
  --chart-cat-6: var(--p200);
  --chart-cat-7: var(--p600);
  --chart-cat-8: var(--p100);
  --chart-grid:    rgba(var(--shadow-rgb),0.07);
  --chart-axis:    rgba(var(--shadow-rgb),0.30);
  --chart-tooltip-bg:#1e1b4b;
  --chart-tooltip-fg:#ffffff;
}

/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
*::selection{background:var(--accent-ring);color:var(--accent-deep)}
html,body{
  min-height:100vh;
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%,  #c4b5fd 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 110%,  #93c5fd 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%,   #e0d7ff 0%, transparent 65%),
    linear-gradient(145deg, #ddd6fe 0%, #bfdbfe 50%, #e9d5ff 100%);
  background-attachment: fixed;
}
body{
  color:var(--text);
  font-family:"Inter","Helvetica Neue",system-ui,-apple-system,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.005em;
  font-feature-settings:"cv11","ss01","ss03";
}
.num,.stat-value,.pss-card-val,.dt-info b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum","cv11"}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:248px;
  background:var(--grad-deep);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  color:#e9d5ff;
  display:flex;flex-direction:column;z-index:10;
  transition:transform .28s var(--ease);
  overflow-y:auto;
  border-right:1px solid rgba(255,255,255,0.12);
  box-shadow:4px 0 40px rgba(var(--shadow-rgb),0.25);
}
.sidebar::before{
  content:"";position:absolute;top:-80px;right:-80px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(196,181,253,0.30), transparent 70%);
  pointer-events:none;
}
.sidebar::after{
  content:"";position:absolute;bottom:-60px;left:-60px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(147,197,253,0.18), transparent 70%);
  pointer-events:none;
}
.sidebar::-webkit-scrollbar{display:none}
.sidebar{scrollbar-width:none;-ms-overflow-style:none}
.sidebar{overflow-x:hidden}

.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(30,27,75,0.45);backdrop-filter:blur(4px);z-index:9}
.sidebar-overlay.open{display:block}

.menu-btn{
  display:none;align-items:center;justify-content:center;
  width:38px;height:38px;background:var(--glass-card);cursor:pointer;
  font-size:18px;color:var(--text);border-radius:10px;padding:0;
  border:1px solid var(--glass-border);
  flex-shrink:0;margin-right:8px;
  transition:all var(--dur) var(--ease);
  backdrop-filter:blur(12px);
}
.menu-btn:hover{border-color:var(--accent);color:var(--accent2);box-shadow:var(--shadow-sm)}

.sidebar-header{
  padding:26px 20px 20px;
  border-bottom:1px solid rgba(255,255,255,0.09);
  position:relative;z-index:1;
}
.sidebar-logo{
  display:flex;align-items:center;gap:11px;margin-bottom:6px;
}
.sidebar-logo-icon{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--p400),var(--p600));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(var(--shadow-rgb),0.45), 0 0 0 2px rgba(255,255,255,0.20);
  flex-shrink:0;
}
.sidebar-logo-icon svg{width:18px;height:18px;color:#fff;stroke:#fff}
.sidebar-title{
  font-size:16px;font-weight:700;color:#fff;letter-spacing:-.02em;
  line-height:1.2;
}
.sidebar-title span{display:block;font-size:11px;font-weight:400;color:rgba(233,213,255,0.55);margin-top:1px;letter-spacing:.01em}
.company-name{
  font-size:10.5px;color:rgba(233,213,255,0.45);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.05em;text-transform:uppercase;font-weight:500;
}

/* ── Navigation ────────────────────────────────────────────────────────────── */
.nav-section{padding:16px 12px 4px;position:relative;z-index:1}
.nav-label{
  font-size:10px;color:rgba(233,213,255,0.38);
  text-transform:uppercase;letter-spacing:1.5px;
  padding:0 10px;margin-bottom:8px;display:block;font-weight:600;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;border-radius:11px;cursor:pointer;
  color:rgba(233,213,255,0.72);font-size:13px;font-weight:500;
  transition:all var(--dur) var(--ease);margin-bottom:2px;
  border:none;background:none;width:100%;text-align:left;
  position:relative;
}
.nav-item .nav-icon{
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  flex-shrink:0;
  transition:all var(--dur) var(--ease);
}
.nav-item .nav-icon svg{width:17px;height:17px;stroke:rgba(233,213,255,0.65);stroke-width:1.75}
.nav-item:hover{background:rgba(255,255,255,0.08);color:#fff}
.nav-item:hover .nav-icon{background:transparent}
.nav-item:hover .nav-icon svg{stroke:#fff}
.nav-item.active{
  background:rgba(255,255,255,0.14);
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.15) inset;
}
.nav-item.active .nav-icon{
  background:transparent;
}
.nav-item.active .nav-icon svg{stroke:#fff;stroke-width:2}
.nav-item.active::before{
  content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;
  background:#fff;opacity:0.5;
}

.nav-group{margin-bottom:2px}
.nav-group-header{
  display:flex;align-items:center;gap:10px;padding:10px 10px;
  border-radius:11px;cursor:pointer;color:rgba(233,213,255,0.72);
  font-size:13px;font-weight:500;transition:all var(--dur) var(--ease);
  border:none;background:none;width:100%;text-align:left;
  justify-content:space-between;
}
.nav-group-header:hover{background:rgba(255,255,255,0.08);color:#fff}
.nav-group-header.open{color:#fff}
.nav-group-header-left{display:flex;align-items:center;gap:10px}
.nav-group-header-left .nav-icon{
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;flex-shrink:0;
  transition:all var(--dur) var(--ease);
}
.nav-group-header-left .nav-icon svg{width:17px;height:17px;stroke:rgba(233,213,255,0.65);stroke-width:1.75}
.nav-group-header:hover .nav-icon{background:transparent}
.nav-group-header:hover .nav-icon svg{stroke:#fff}
.nav-group-header.open .nav-icon{background:transparent}
.nav-group-header.open .nav-icon svg{stroke:#fff;stroke-width:2}
.nav-chevron{font-size:10px;transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .2s ease;opacity:0.45;flex-shrink:0}
.nav-chevron.open{transform:rotate(180deg);opacity:0.85}
.nav-group-children{
  overflow:hidden;max-height:0;
  opacity:0;transform:translateY(-6px);
  transition:
    max-height .32s cubic-bezier(.22,.61,.36,1),
    opacity .22s ease,
    transform .22s ease;
}
.nav-group-children.open{max-height:600px;opacity:1;transform:translateY(0)}
.nav-child{
  padding-left:52px!important;font-size:12px!important;
  color:rgba(233,213,255,0.50)!important;
  position:relative;
}
.nav-child::before{
  content:"";position:absolute;left:36px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.18);
}
.nav-child:hover{color:#fff!important;background:rgba(255,255,255,0.06)!important}
.nav-child:hover::before{background:var(--p300)}
.nav-child.active{color:var(--p300)!important;background:rgba(196,181,253,0.08)!important;box-shadow:none!important}
.nav-child.active::before{background:var(--p300);box-shadow:0 0 8px rgba(196,181,253,0.7)}
.nav-child.active::after{display:none}

/* ── Main + Topbar ─────────────────────────────────────────────────────────── */
.main{margin-left:248px;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.topbar{
  background:var(--glass-topbar);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--glass-border);
  padding:13px 28px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;position:relative;z-index:5;
}
.topbar h1{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-.012em}
.topbar-right{display:flex;gap:10px;align-items:center}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-sm{
  padding:7px 15px;border-radius:10px;
  font-size:12px;font-weight:500;
  border:1px solid var(--glass-border-strong);
  background:var(--glass-card);
  color:var(--text-soft);cursor:pointer;
  transition:all var(--dur) var(--ease);
  box-shadow:var(--shadow-xs);
  backdrop-filter:blur(10px);
}
.btn-sm:hover{
  border-color:var(--accent);color:var(--accent2);
  box-shadow:var(--shadow-sm), 0 0 0 3px var(--accent-ring);
  transform:translateY(-1px);
}
.btn-sm:active{transform:translateY(0);box-shadow:var(--shadow-press)}
.btn-danger{border-color:rgba(220,38,38,0.28);color:var(--danger);}
.btn-danger:hover{
  border-color:var(--danger);background:var(--danger-bg);
  box-shadow:var(--shadow-sm), 0 0 0 3px rgba(220,38,38,0.14);
  color:var(--danger);
}

.user-chip-wrap{position:relative}
.user-chip{
  display:flex;align-items:center;gap:9px;
  background:var(--glass-card);
  border:1px solid var(--glass-border-strong);
  border-radius:var(--radius-pill);padding:4px 12px 4px 5px;
  font-size:12px;font-weight:500;color:var(--text-soft);white-space:nowrap;
  transition:all var(--dur) var(--ease);
  box-shadow:var(--shadow-xs);
  cursor:pointer;
  backdrop-filter:blur(10px);
}
.user-chip:hover,.user-chip-wrap.open .user-chip{
  border-color:var(--accent);box-shadow:var(--shadow-sm),0 0 0 3px var(--accent-ring)
}
.user-chip-chevron{
  font-size:10px;color:var(--muted);margin-left:2px;
  transition:transform var(--dur) var(--ease);display:inline-block;
}
.user-chip-chevron.open{transform:rotate(180deg)}
.avatar{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
  background:var(--grad-primary);
  box-shadow:0 0 0 2px rgba(255,255,255,0.80), 0 2px 8px rgba(var(--shadow-rgb),0.35);
  letter-spacing:.02em;
}

/* ── User dropdown menu ────────────────────────────────────────────────────── */
.user-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--glass-modal);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid var(--glass-border-strong);
  border-radius:14px;box-shadow:var(--shadow-lg);
  padding:6px;z-index:50;min-width:190px;
  opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s var(--ease),visibility .18s var(--ease),transform .18s var(--ease);
  pointer-events:none;
}
.user-chip-wrap:hover .user-menu,
.user-chip-wrap.open .user-menu{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
.user-menu-item{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 12px;border-radius:9px;border:none;background:none;
  font-size:12px;font-weight:500;color:var(--text-soft);
  cursor:pointer;text-align:left;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.user-menu-item:hover{background:var(--accent-ghost);color:var(--accent2)}
.user-menu-danger{color:var(--danger)}
.user-menu-danger:hover{background:var(--danger-bg);color:var(--danger)}
.user-menu-chevron{
  font-size:10px;margin-left:auto;color:var(--muted);
  transition:transform var(--dur) var(--ease);display:inline-block;
}
.user-menu-chevron.open{transform:rotate(180deg)}
.user-menu-divider{height:1px;background:var(--glass-border-strong);margin:4px 6px}
.user-theme-section{
  overflow:hidden;max-height:0;
  transition:max-height .22s var(--ease);
}
.user-theme-section.open{max-height:200px}
.user-theme-section .theme-swatches{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:8px 12px 4px;
}
.user-theme-section .theme-names{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:0 12px 8px;
}
.theme-dot-sm{width:14px;height:14px;border-radius:50%;flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,0.22),0 0 0 1.5px rgba(255,255,255,0.60)}

/* ── Content area ──────────────────────────────────────────────────────────── */
.content{
  padding:24px 28px;flex:1;min-height:0;overflow-y:auto;
  background:transparent;display:flex;flex-direction:column;
}

/* ── Stats Grid ────────────────────────────────────────────────────────────── */
.stats-grid{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:20px;margin-bottom:24px;
}
.stat-card{
  background:linear-gradient(145deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.48) 100%);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border:1px solid rgba(255,255,255,0.80);
  box-shadow:var(--shadow-sm);
  border-radius:var(--radius);
  padding:18px 16px 15px;position:relative;overflow:hidden;
  transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--c, var(--grad-stripe));
  border-radius:var(--radius) var(--radius) 0 0;
  box-shadow:0 0 14px rgba(var(--accent-rgb),0.50);
}
.stat-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.90) 0%,
      rgba(255,255,255,0.30) 25%,
      transparent 55%),
    linear-gradient(to bottom right,
      transparent 50%,
      rgba(var(--accent-rgb),0.04) 100%);
}
.stat-card:hover{
  box-shadow:var(--shadow-md), 0 0 0 1px rgba(var(--accent-rgb),0.18);
  transform:translateY(-6px) scale(1.012);
}
.stat-label{
  position:relative;z-index:1;
  font-size:10px;color:var(--text);
  text-transform:uppercase;letter-spacing:.9px;
  margin-bottom:7px;font-weight:700;
}
.stat-value{
  position:relative;z-index:1;
  font-size:26px;font-weight:700;line-height:1.05;
  color:var(--text);letter-spacing:-.025em;
}
.stat-icon{
  position:absolute;right:13px;top:13px;z-index:1;
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-rgb),0.12);
  opacity:0.8;
}
.stat-icon svg{width:15px;height:15px;stroke:var(--p600);stroke-width:2}
.stat-trend{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:4px;
  margin-top:8px;font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:var(--radius-pill);
  background:var(--success-bg);color:var(--success);
}
.stat-trend.down{background:var(--danger-bg);color:var(--danger)}

/* ── Chart rows ────────────────────────────────────────────────────────────── */
.charts-row{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  height:calc(50vh - 140px);min-height:160px;margin-bottom:20px;
}
.charts-bottom{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  height:calc(50vh - 140px);min-height:160px;
}
.chart-card{
  background:linear-gradient(150deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.48) 100%);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border:1px solid rgba(255,255,255,0.80);
  box-shadow:var(--shadow-sm);
  border-radius:var(--radius);
  padding:18px 20px;display:flex;flex-direction:column;
  height:100%;overflow:hidden;
  transition:box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  position:relative;
}
.chart-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.88) 0%,
      rgba(255,255,255,0.28) 28%,
      transparent 55%),
    linear-gradient(to bottom right,
      transparent 50%,
      rgba(var(--accent-rgb),0.03) 100%);
}
.chart-card:hover{
  box-shadow:var(--shadow-md), 0 0 0 1px rgba(var(--accent-rgb),0.16);
  transform:translateY(-5px) scale(1.008);
}
.chart-card h3{
  position:relative;z-index:1;
  font-size:11px;font-weight:700;color:var(--muted);
  margin-bottom:14px;text-transform:uppercase;letter-spacing:.9px;
  flex-shrink:0;display:flex;align-items:center;gap:8px;
}
.chart-card h3::before{
  content:"";width:3px;height:11px;border-radius:2px;
  background:var(--grad-stripe);
}
.chart-fill{flex:1;position:relative;overflow:hidden;min-height:0}

/* ── Utility states ────────────────────────────────────────────────────────── */
.loading{display:flex;align-items:center;gap:12px;color:var(--muted);padding:48px;justify-content:center;font-size:13px}
.spinner{
  width:20px;height:20px;
  border:2.5px solid rgba(var(--accent-rgb),0.20);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:60px 40px;color:var(--muted);font-size:13px}
.err-box{
  background:var(--danger-bg);
  border:1px solid rgba(220,38,38,0.20);
  color:#991b1b;padding:13px 18px;border-radius:10px;
  font-size:13px;margin-bottom:16px;
  backdrop-filter:blur(10px);
}
.info-bar{font-size:13px;color:var(--muted);margin-bottom:10px}
.info-bar strong{color:var(--text);font-weight:600}

.skel{
  background:linear-gradient(90deg,rgba(255,255,255,0.30) 0%,rgba(255,255,255,0.60) 50%,rgba(255,255,255,0.30) 100%);
  background-size:200% 100%;animation:skel 1.4s linear infinite;
  border-radius:6px;
}
@keyframes skel{to{background-position:-200% 0}}

/* ── Animations ────────────────────────────────────────────────────────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}

/* ── Modal (base) ──────────────────────────────────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;
  background:rgba(30,27,75,0.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .2s var(--ease-out);
}
.modal-box{
  background:var(--glass-modal);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid var(--glass-border-strong);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  width:100%;max-width:820px;max-height:85vh;
  display:flex;flex-direction:column;overflow:hidden;
  animation:popIn .25s var(--ease-out);
}
.modal-header{
  padding:22px 26px;border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.60),rgba(255,255,255,0.30));
}
.modal-title{font-size:16px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.modal-sub{font-size:12px;color:var(--muted);margin-top:4px}
.modal-close{
  border:none;background:rgba(var(--accent-rgb),0.08);font-size:18px;cursor:pointer;
  color:var(--muted);line-height:1;padding:6px 10px;border-radius:9px;
  transition:all var(--dur) var(--ease);
}
.modal-close:hover{background:rgba(var(--accent-rgb),0.15);color:var(--text)}
.modal-body{overflow-y:auto;padding:20px 26px;flex:1}
.modal-body table{width:100%;border-collapse:collapse;font-size:13px}
.modal-body thead th{
  background:rgba(255,255,255,0.50);padding:11px 14px;text-align:left;
  font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);font-weight:600;
  border-bottom:1px solid var(--border-soft);position:sticky;top:0;
}
.modal-body tbody tr{border-bottom:1px solid var(--border-soft);transition:background var(--dur-fast)}
.modal-body tbody tr:hover{background:rgba(var(--accent-rgb),0.05)}
.modal-body tbody tr:last-child{border-bottom:none}
.modal-body td{padding:11px 14px;vertical-align:top;color:var(--text-soft)}
.modal-footer{
  padding:14px 26px;border-top:1px solid var(--border-soft);
  font-size:12px;color:var(--muted);flex-shrink:0;
  background:rgba(255,255,255,0.30);
}
.drill-btn{
  background:none;border:none;cursor:pointer;
  font-size:inherit;padding:0;font-weight:600;color:var(--accent2);
  transition:color var(--dur-fast);
}
.drill-btn:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}

/* ── Drill Page ────────────────────────────────────────────────────────────── */
.drill-pg-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.drill-pg-title{flex:1;min-width:0}
.drill-pg-title h2{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.022em}
.drill-pg-title p{font-size:12px;color:var(--muted);margin-top:4px}
.drill-tbl-wrap{
  background:linear-gradient(150deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.48) 100%);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border:1px solid rgba(255,255,255,0.80);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.drill-tbl-wrap table{width:100%;border-collapse:collapse;font-size:13px}
.drill-tbl-wrap thead th{
  background:rgba(255,255,255,0.55);
  padding:12px 16px;text-align:left;
  font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);font-weight:700;
  border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:1;
  transition:background var(--dur-fast);
}
.drill-tbl-wrap thead th:hover{background:rgba(var(--accent-rgb),0.08);color:var(--accent2)}
.drill-tbl-wrap tbody tr{border-bottom:1px solid var(--border-soft);transition:background var(--dur-fast)}
.drill-tbl-wrap tbody tr.clickable{cursor:pointer}
.drill-tbl-wrap tbody tr.clickable:hover{background:rgba(var(--accent-rgb),0.05)}
.drill-tbl-wrap tbody tr:last-child{border-bottom:none}
.drill-tbl-wrap td{padding:12px 16px;vertical-align:top;color:var(--text-soft)}
.drill-pg-footer{font-size:12px;color:var(--muted);margin-top:12px;text-align:right}

/* ── Entry Detail Modal ────────────────────────────────────────────────────── */
.entry-modal{
  position:fixed;inset:0;background:rgba(30,27,75,0.45);
  backdrop-filter:blur(6px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .2s var(--ease-out);
}
.entry-modal-box{
  background:var(--glass-modal);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid var(--glass-border-strong);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  width:100%;max-width:720px;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
  animation:popIn .25s var(--ease-out);
}
.entry-modal-header{
  padding:20px 26px;border-bottom:1px solid var(--border-soft);
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(255,255,255,0.60),rgba(255,255,255,0.30));
}
.entry-meta{
  display:flex;gap:24px;flex-wrap:wrap;
  padding:13px 26px;background:rgba(255,255,255,0.40);
  border-bottom:1px solid var(--border-soft);
  font-size:12px;color:var(--muted);flex-shrink:0;
}
.entry-meta strong{color:var(--text);font-weight:600}
.entry-modal-body{overflow-y:auto;flex:1}
.entry-field-row{display:grid;grid-template-columns:2fr 3fr;border-bottom:1px solid var(--border-soft)}
.entry-field-row:last-child{border-bottom:none}
.entry-field-row:nth-child(even){background:rgba(var(--accent-rgb),0.04)}
.entry-field-label{
  padding:11px 20px;font-size:12px;color:var(--muted);
  font-weight:600;border-right:1px solid var(--border-soft);
  letter-spacing:.01em;
}
.entry-field-value{padding:11px 20px;font-size:13px;color:var(--text);word-break:break-word}

/* ── Admin ─────────────────────────────────────────────────────────────────── */
.admin-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-table th{
  background:rgba(255,255,255,0.55);
  padding:12px 14px;text-align:left;
  font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);font-weight:700;border-bottom:1px solid var(--border-soft);
}
.admin-table td{padding:12px 14px;border-bottom:1px solid var(--border-soft);vertical-align:middle;color:var(--text-soft)}
.admin-table tbody tr:last-child td{border-bottom:none}
.admin-table tbody tr:hover td{background:rgba(var(--accent-rgb),0.05)}

.chart-card:has(.admin-form-panel){overflow:visible}
.admin-form-panel{
  background:var(--glass-card);
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border-strong);
  border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;
  box-shadow:var(--shadow-sm);
  position:relative;z-index:10;
}
.admin-form-panel h4{font-size:14px;font-weight:600;margin-bottom:18px;color:var(--text);letter-spacing:-.012em}
.form-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{
  font-size:11px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.7px;
}
.form-control{
  padding:9px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:13px;
  background:var(--glass-input);color:var(--text);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow:var(--shadow-xs);
  backdrop-filter:blur(8px);
  appearance:none;-webkit-appearance:none;
  color-scheme:light;
}
select.form-control{
  padding-right:32px;
  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='%238b5cf6' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  background-size:12px 12px;
  background-color:var(--glass-input);
}
.form-control:hover{border-color:var(--border-strong)}
.form-control:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-ring), var(--shadow-xs);
}

.btn-primary{
  padding:9px 20px;border:none;border-radius:var(--radius-sm);
  background:var(--grad-primary);color:#fff;
  font-size:12px;font-weight:600;cursor:pointer;
  transition:all var(--dur) var(--ease);letter-spacing:.015em;
  box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 4px 14px rgba(var(--shadow-rgb),0.35);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,0.30) inset, 0 8px 22px rgba(var(--shadow-rgb),0.45);
}
.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-press)}

.ss-wrap{position:relative;z-index:1}
.ss-wrap:has(.ss-open){z-index:1000}
.ss-dropdown{
  display:none;position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:9999;
  background:var(--glass-modal);
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border-strong);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
  max-height:240px;overflow-y:auto;
  animation:popIn .2s var(--ease-out);
}
.ss-dropdown.ss-open{display:block}
.ss-opts{padding:5px 0}
.ss-option{
  padding:9px 13px;font-size:13px;color:var(--text);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:all var(--dur-fast);
}
.ss-option:hover{background:rgba(var(--accent-rgb),0.08);color:var(--accent2);padding-left:16px}
.ss-empty{padding:9px 13px;font-size:12px;color:var(--muted);font-style:italic}
.ss-input[disabled]{opacity:.55;cursor:not-allowed}

.btn-del{
  padding:5px 11px;border:1px solid rgba(220,38,38,0.28);
  border-radius:6px;background:rgba(255,255,255,0.70);color:var(--danger);
  font-size:11px;cursor:pointer;font-weight:500;transition:all var(--dur) var(--ease);
}
.btn-del:hover{background:var(--danger-bg);border-color:var(--danger);box-shadow:0 0 0 3px rgba(220,38,38,0.12)}

.btn-edit{
  padding:5px 11px;border:1px solid var(--border);
  border-radius:6px;background:rgba(255,255,255,0.70);color:var(--muted);
  font-size:11px;cursor:pointer;font-weight:500;transition:all var(--dur) var(--ease);
}
.btn-edit:hover{background:rgba(var(--accent-rgb),0.08);color:var(--accent2);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:var(--radius-pill);
  font-size:10.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  border:1px solid transparent;line-height:1.4;
}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85}
.badge-on{background:var(--success-bg);color:#15803d;border-color:rgba(22,163,74,0.20)}
.badge-off{background:rgba(156,163,175,0.12);color:var(--muted);border-color:rgba(156,163,175,0.20)}
.badge-info{background:var(--info-bg);color:var(--accent-deep);border-color:rgba(var(--accent-rgb),0.22)}
.badge-warn{background:var(--warning-bg);color:#92400e;border-color:rgba(217,119,6,0.20)}
.badge-danger{background:var(--danger-bg);color:#991b1b;border-color:rgba(220,38,38,0.20)}

/* ── DataTables theme override ─────────────────────────────────────────────── */
.dt-container{font-size:13px;font-family:inherit;color:var(--text)}
.dt-container .dt-layout-row:first-child{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--border-soft);
  background:rgba(255,255,255,0.55);
  border-radius:var(--radius) var(--radius) 0 0;
}
.dt-container .dt-search{display:flex;align-items:center;gap:9px}
.dt-container .dt-search label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.7px}
.dt-container .dt-search input{
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 14px;
  font-size:13px;color:var(--text);background:var(--glass-input);outline:none;min-width:240px;
  transition:all var(--dur) var(--ease);box-shadow:var(--shadow-xs);
  backdrop-filter:blur(8px);
}
.dt-container .dt-search input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring),var(--shadow-xs)}
.dt-container .dt-length label{font-size:12px;color:var(--muted)}
.dt-container .dt-length select{
  border:1px solid var(--border);border-radius:6px;padding:6px 8px;
  font-size:12px;color:var(--text);background:var(--glass-input);margin:0 4px;
}
.dt-container table.dataTable{width:100%!important;border-collapse:collapse;font-size:13px}
.dt-container table.dataTable thead th{
  background:rgba(255,255,255,0.55);
  padding:12px 16px;text-align:left;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);border-bottom:1px solid var(--border-soft);
  border-top:none;cursor:pointer;user-select:none;white-space:nowrap;
  transition:all var(--dur-fast);
}
.dt-container table.dataTable thead th:hover{background:rgba(var(--accent-rgb),0.08);color:var(--accent2)}
.dt-container table.dataTable thead th.dt-ordering-asc::after{content:' ↑';color:var(--accent);font-weight:700}
.dt-container table.dataTable thead th.dt-ordering-desc::after{content:' ↓';color:var(--accent);font-weight:700}
.dt-container table.dataTable tbody tr{border-bottom:1px solid var(--border-soft);transition:background var(--dur-fast)}
.dt-container table.dataTable tbody tr:hover{background:rgba(var(--accent-rgb),0.05)}
.dt-container table.dataTable tbody tr:last-child{border-bottom:none}
.dt-container table.dataTable tbody td{padding:12px 16px;vertical-align:top;color:var(--text-soft)}
.dt-container table.dataTable tbody tr.clickable-row{cursor:pointer}
.dt-container .dt-layout-row:last-child{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;padding:12px 18px;
  border-top:1px solid var(--border-soft);
  background:rgba(255,255,255,0.55);
  border-radius:0 0 var(--radius) var(--radius);
}
.dt-container .dt-info{font-size:12px;color:var(--muted)}
.dt-container .dt-paging .dt-paging-button{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 11px;margin:0 2px;
  border:1px solid var(--border)!important;border-radius:8px;
  background:rgba(255,255,255,0.70)!important;color:var(--text-soft)!important;
  font-size:12px;font-weight:500;cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.dt-container .dt-paging .dt-paging-button:hover:not(.disabled){
  border-color:var(--accent)!important;color:var(--accent2)!important;
  background:rgba(var(--accent-rgb),0.08)!important;
  box-shadow:0 0 0 3px var(--accent-ring);
}
.dt-container .dt-paging .dt-paging-button.current{
  background:var(--grad-primary)!important;
  border-color:transparent!important;
  color:#fff!important;font-weight:700;
  box-shadow:0 4px 12px rgba(var(--shadow-rgb),0.35);
}
.dt-container .dt-paging .dt-paging-button.disabled{opacity:.35;cursor:default;box-shadow:none}

.drill-dt-card{
  background:linear-gradient(150deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.48) 100%);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border:1px solid rgba(255,255,255,0.80);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;
}

/* ── Form Entries Page ─────────────────────────────────────────────────────── */
.fe-header{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.fe-title{flex:1;min-width:0}
.fe-title h2{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.022em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fe-title p{font-size:12px;color:var(--muted);margin-top:4px}
.fe-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}

/* ── Pre-Start Summary Report ──────────────────────────────────────────────── */
.pss-page{display:flex;flex-direction:column;gap:20px;min-height:0;flex:1}

.pss-filter-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex-shrink:0;
  background:linear-gradient(145deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.48) 100%);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  padding:13px 18px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(255,255,255,0.80);
  position:relative;z-index:2;
}
.pss-filter-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;white-space:nowrap}
.pss-date-in{
  padding:8px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:13px;
  background:var(--glass-input);color:var(--text);
  transition:all var(--dur) var(--ease);box-shadow:var(--shadow-xs);
  backdrop-filter:blur(8px);
  appearance:none;-webkit-appearance:none;
  color-scheme:light;
  padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  background-size:14px 14px;
  background-color:var(--glass-input);
}
.pss-date-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring),var(--shadow-xs)}
.pss-form-sel{
  padding:8px 12px 8px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:13px;
  background:var(--glass-input);color:var(--text);
  cursor:pointer;min-width:220px;flex:1;max-width:380px;
  transition:all var(--dur) var(--ease);box-shadow:var(--shadow-xs);
  backdrop-filter:blur(8px);
  appearance:none;-webkit-appearance:none;
  padding-right:32px;
  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='%238b5cf6' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  background-size:12px 12px;
  background-color:var(--glass-input);
}
.pss-form-sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring),var(--shadow-xs)}
.pss-apply-btn{
  padding:9px 22px;border:none;border-radius:var(--radius-sm);
  background:var(--grad-primary);color:#fff;
  font-size:12px;font-weight:600;cursor:pointer;
  transition:all var(--dur) var(--ease);
  white-space:nowrap;letter-spacing:.015em;
  box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 4px 14px rgba(var(--shadow-rgb),0.35);
}
.pss-apply-btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,0.30) inset, 0 8px 22px rgba(var(--shadow-rgb),0.45)}
.pss-apply-btn:active{transform:translateY(0)}

.pss-filter-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(var(--accent-rgb),0.12);
  border:1px solid rgba(var(--accent-rgb),0.28);
  border-radius:var(--radius-pill);
  padding:5px 12px 5px 14px;
  font-size:12px;color:var(--accent2);white-space:nowrap;font-weight:500;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.06);
}
.pss-badge-text strong{color:var(--accent-deep);font-weight:700}
.pss-badge-clear{
  background:rgba(var(--accent-rgb),0.12);border:none;cursor:pointer;
  font-size:13px;color:var(--accent2);line-height:1;padding:0;
  border-radius:50%;transition:all var(--dur) var(--ease);
  width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;
}
.pss-badge-clear:hover{background:var(--accent2);color:#fff}

.pss-ctx-menu{
  position:fixed;z-index:9999;
  background:var(--glass-modal);
  backdrop-filter:blur(24px);
  border:1px solid var(--glass-border-strong);
  border-radius:14px;
  box-shadow:var(--shadow-lg);
  padding:6px;min-width:180px;
  animation:popIn .18s var(--ease-out);
}
.pss-ctx-lbl{
  font-size:10px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.8px;
  padding:8px 12px 6px;border-bottom:1px solid var(--border-soft);margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;
}
.pss-ctx-item{
  display:block;width:100%;text-align:left;background:none;border:none;
  cursor:pointer;padding:9px 12px;font-size:13px;color:var(--text-soft);
  border-radius:9px;transition:all var(--dur-fast);
}
.pss-ctx-item:hover{background:rgba(var(--accent-rgb),0.08);color:var(--accent2);padding-left:16px}

.pss-drill-modal{
  position:fixed;inset:0;z-index:150;
  background:rgba(30,27,75,0.45);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .2s var(--ease-out);
}
.pss-drill-box{
  background:var(--glass-modal);
  backdrop-filter:blur(28px);
  border:1px solid var(--glass-border-strong);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  width:min(92vw,900px);max-height:82vh;
  display:flex;flex-direction:column;overflow:hidden;
  animation:popIn .25s var(--ease-out);
}
.pss-drill-hdr{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:22px 26px 18px;border-bottom:1px solid var(--border-soft);flex-shrink:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.60),rgba(255,255,255,0.30));
}
.pss-drill-title{font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.pss-drill-sub{font-size:12px;color:var(--muted);margin-top:5px}
.pss-drill-close{
  background:rgba(var(--accent-rgb),0.08);border:none;font-size:20px;cursor:pointer;
  color:var(--muted);line-height:1;padding:5px 9px;flex-shrink:0;
  border-radius:9px;transition:all var(--dur) var(--ease);
}
.pss-drill-close:hover{color:var(--text);background:rgba(var(--accent-rgb),0.15)}
.pss-drill-body{flex:1;overflow-y:auto;min-height:0}
.pss-drill-table{width:100%;border-collapse:collapse;font-size:13px}
.pss-drill-table th{
  position:sticky;top:0;
  background:rgba(255,255,255,0.55);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);padding:12px 18px;text-align:left;
  border-bottom:1px solid var(--border-soft);
}
.pss-drill-table td{padding:11px 18px;border-bottom:1px solid var(--border-soft);color:var(--text-soft);vertical-align:top}
.pss-drill-table tr:last-child td{border-bottom:none}
.pss-drill-table tbody tr:hover td{background:rgba(var(--accent-rgb),0.04)}
.pss-drill-view{background:none;border:none;cursor:pointer;font-size:15px;opacity:.55;padding:0;color:var(--accent2);transition:opacity var(--dur)}
.pss-drill-view:hover{opacity:1}
.pss-dt-tags{max-width:260px}
.pss-tag{
  display:inline-block;
  background:rgba(var(--accent-rgb),0.10);color:var(--accent-deep);
  border:1px solid rgba(var(--accent-rgb),0.22);
  border-radius:5px;padding:2px 9px;font-size:11px;
  margin:2px 3px 2px 0;font-weight:500;
}

.pss-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:20px}

.pss-stat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;flex-shrink:0}
.pss-card{
  background:linear-gradient(145deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.48) 100%);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border:1px solid rgba(255,255,255,0.80);
  border-radius:var(--radius);
  padding:18px 17px 15px;
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
  transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.pss-card:hover{
  box-shadow:var(--shadow-md), 0 0 0 1px rgba(var(--accent-rgb),0.18);
  transform:translateY(-7px) scale(1.014);
}
.pss-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--pc, var(--grad-stripe));
  border-radius:var(--radius) var(--radius) 0 0;
  box-shadow:0 0 14px rgba(var(--accent-rgb),0.50);
}
.pss-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.90) 0%,
      rgba(255,255,255,0.30) 25%,
      transparent 55%),
    linear-gradient(to bottom right,
      transparent 50%,
      rgba(var(--accent-rgb),0.04) 100%);
}
.pss-card-icon{
  position:absolute;right:12px;top:12px;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-rgb),0.12);border-radius:8px;
  opacity:0.75;
}
.pss-card-icon svg{width:15px;height:15px;stroke:var(--p600);stroke-width:2}
.pss-card-val{font-size:28px;font-weight:800;line-height:1.05;margin-bottom:6px;color:var(--text);letter-spacing:-.03em}
.pss-card-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:600}

.pss-main-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;
  gap:20px;flex:1;min-height:0;
}
.pss-chart-card{
  background:linear-gradient(150deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.48) 100%);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border:1px solid rgba(255,255,255,0.80);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:18px 20px 16px;display:flex;flex-direction:column;
  overflow:hidden;min-height:0;
  transition:box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  position:relative;
}
.pss-chart-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.88) 0%,
      rgba(255,255,255,0.28) 28%,
      transparent 55%),
    linear-gradient(to bottom right,
      transparent 50%,
      rgba(var(--accent-rgb),0.03) 100%);
}
.pss-chart-card:hover{
  box-shadow:var(--shadow-md), 0 0 0 1px rgba(var(--accent-rgb),0.16);
  transform:translateY(-5px) scale(1.008);
}
.pss-chart-h{
  font-size:12px;font-weight:700;color:var(--text-soft);
  text-transform:uppercase;letter-spacing:.65px;
  margin-bottom:14px;flex-shrink:0;
  display:flex;align-items:center;gap:9px;
}
.pss-chart-h::before{content:"";width:4px;height:14px;border-radius:3px;background:var(--grad-stripe)}
.pss-chart-h svg{width:14px;height:14px;stroke:var(--accent2);stroke-width:2;flex-shrink:0}
.pss-filter-lbl svg{width:11px;height:11px;stroke:var(--accent);stroke-width:2;vertical-align:-1px;flex-shrink:0}
.pss-ctx-item svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;vertical-align:-2px;margin-right:2px}
.pss-chart-body{flex:1;min-height:0;position:relative;overflow:hidden}
.pss-flow-body{flex:1;min-height:0;overflow:hidden}
.pss-flow-body>div{height:100%;width:100%}

/* ── Chart canvas drop shadow ──────────────────────────────────────────────── */
.chart-fill canvas{filter:drop-shadow(0 2px 6px rgba(var(--shadow-rgb),0.12)) drop-shadow(0 0 1px rgba(var(--shadow-rgb),0.06))}
.pss-chart-body canvas{filter:drop-shadow(0 2px 6px rgba(var(--shadow-rgb),0.12)) drop-shadow(0 0 1px rgba(var(--shadow-rgb),0.06))}

/* ── Scrollbars ────────────────────────────────────────────────────────────── */
.content::-webkit-scrollbar,.modal-body::-webkit-scrollbar,.pss-drill-body::-webkit-scrollbar{width:8px;height:8px}
.content::-webkit-scrollbar-track,.modal-body::-webkit-scrollbar-track,.pss-drill-body::-webkit-scrollbar-track{background:transparent}
.content::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb,.pss-drill-body::-webkit-scrollbar-thumb{
  background:rgba(var(--accent-rgb),0.25);border-radius:4px;border:2px solid transparent;background-clip:padding-box;
}
.content::-webkit-scrollbar-thumb:hover{background:rgba(var(--accent-rgb),0.40);background-clip:padding-box;border:2px solid transparent}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print{
  .sidebar,.topbar,.menu-btn,.btn-sm,.btn-primary,.pss-apply-btn{display:none!important}
  .main{margin:0}
  .content{padding:0;background:#fff}
  .stat-card,.chart-card,.pss-card,.pss-chart-card{box-shadow:none;border:1px solid #ddd6fe;backdrop-filter:none}
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media(max-width:1280px){
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .pss-stat-grid{grid-template-columns:repeat(3,1fr);gap:14px}
}
@media(max-width:900px){
  .charts-row{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-248px)}
  .sidebar.open{transform:translateX(0);box-shadow:8px 0 40px rgba(30,27,75,0.35)}
  .main{margin-left:0;height:auto;overflow:visible}
  .content{overflow-y:visible;padding:16px}
  .menu-btn{display:flex}
  .topbar{padding:12px 16px}
  #user-label{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:14px}
  .charts-row{grid-template-columns:1fr!important;height:auto!important;margin-bottom:14px}
  .charts-bottom{grid-template-columns:1fr!important;height:auto!important}
  .chart-card{height:auto}
  .chart-fill{height:200px;flex:none}
  .pss-page{flex:none}
  .pss-body{flex:none}
  .pss-stat-grid{grid-template-columns:repeat(2,1fr)}
  .pss-main-grid{grid-template-columns:1fr;grid-template-rows:auto;flex:none;gap:14px}
  .pss-chart-body,.pss-flow-body{flex:none;height:200px}
}
@media(max-width:480px){
  .pss-stat-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr!important}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COMPETENCY SUMMARY  (cs-*)
   ═══════════════════════════════════════════════════════════════════════════════ */
.cs-page{display:flex;flex-direction:column;gap:20px;min-height:0;flex:1}
.cs-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:20px}

/* KPI grid — 5 columns */
.cs-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;flex-shrink:0}

/* Main 3-column × 2-row grid */
.cs-main-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1.3fr;
  grid-template-rows:1fr 1fr;
  gap:20px;flex:1;min-height:0;
}

/* Table column spans both rows */
.cs-table-col{grid-column:3;grid-row:1/3}

/* Table toolbar */
.cs-table-toolbar{
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;flex-shrink:0;
}
.cs-search{
  flex:1;padding:8px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:13px;
  background:var(--glass-input);color:var(--text);
  backdrop-filter:blur(8px);
  transition:all var(--dur) var(--ease);
}
.cs-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.cs-table-count{font-size:11px;color:var(--muted);white-space:nowrap}

/* Scrollable table container */
.cs-table-wrap{flex:1;min-height:0;overflow-y:auto;overflow-x:auto}
.cs-table-wrap::-webkit-scrollbar{width:8px;height:8px}
.cs-table-wrap::-webkit-scrollbar-track{background:transparent}
.cs-table-wrap::-webkit-scrollbar-thumb{
  background:rgba(var(--accent-rgb),0.25);border-radius:4px;
  border:2px solid transparent;background-clip:padding-box;
}
.cs-table-wrap::-webkit-scrollbar-thumb:hover{background:rgba(var(--accent-rgb),0.40);background-clip:padding-box;border:2px solid transparent}

.cs-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cs-th{
  position:sticky;top:0;z-index:2;
  background:rgba(255,255,255,0.72);backdrop-filter:blur(8px);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.65px;
  color:var(--muted);padding:10px 14px;text-align:left;
  border-bottom:1px solid var(--border-soft);
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:color var(--dur-fast);
}
.cs-th:hover{color:var(--accent2)}
.cs-table td{
  padding:10px 14px;
  border-bottom:1px solid var(--border-soft);
  color:var(--text-soft);
  vertical-align:middle;
}
.cs-table tr:last-child td{border-bottom:none}
.cs-table tbody tr:hover td{background:rgba(var(--accent-rgb),0.04)}
.cs-td-name{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Responsive */
@media(max-width:1280px){
  .cs-stat-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .cs-main-grid{grid-template-columns:1fr 1fr}
  .cs-table-col{grid-column:1/3;grid-row:auto}
}
@media(max-width:900px){
  .cs-stat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .cs-page,.cs-body{flex:none}
  .cs-stat-grid{grid-template-columns:repeat(2,1fr)}
  .cs-main-grid{grid-template-columns:1fr;grid-template-rows:auto;flex:none;gap:14px}
  .cs-table-col{grid-column:auto;grid-row:auto}
  .cs-table-wrap{height:260px}
}
@media(max-width:480px){
  .cs-stat-grid{grid-template-columns:1fr}
}

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

/* ══════════════════════════════════════════════════════════════════════════════
   THEME PICKER UI
   ══════════════════════════════════════════════════════════════════════════════ */
.theme-picker{position:relative}
.theme-btn{
  width:36px;height:36px;border-radius:10px;
  border:1px solid var(--glass-border-strong);
  background:var(--glass-card);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;flex-shrink:0;
  transition:all var(--dur) var(--ease);
  box-shadow:var(--shadow-xs);
  backdrop-filter:blur(10px);
}
.theme-btn:hover{border-color:var(--accent);box-shadow:var(--shadow-sm),0 0 0 3px var(--accent-ring)}
.theme-dot{width:17px;height:17px;border-radius:50%;display:block;box-shadow:0 1px 4px rgba(0,0,0,0.22),0 0 0 2px rgba(255,255,255,0.70)}
.theme-panel{
  display:none;position:absolute;top:calc(100% + 8px);right:0;
  background:var(--glass-modal);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid var(--glass-border-strong);
  border-radius:18px;box-shadow:var(--shadow-lg);
  padding:16px;z-index:50;min-width:180px;
}
.theme-panel.open{display:block;animation:popIn .18s var(--ease-out)}
.theme-panel-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:12px}
.theme-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.theme-swatch{
  position:relative;width:100%;aspect-ratio:1;border-radius:11px;
  border:2px solid transparent;cursor:pointer;outline:none;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .15s;
}
.theme-swatch:hover{transform:scale(1.10);box-shadow:0 6px 18px rgba(0,0,0,0.22)}
.theme-swatch.active{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,0.35)}
.theme-swatch.active::after{
  content:"✓";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,0.40);
}
.theme-names{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:6px}
.theme-name{font-size:10px;text-align:center;color:var(--muted);font-weight:500;line-height:1.2;white-space:nowrap}
.theme-name.active{color:var(--accent2);font-weight:700}

/* ══════════════════════════════════════════════════════════════════════════════
   COLOUR THEMES  (override :root tokens via html[data-theme])
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Blue ─────────────────────────────────────────────────────────────────── */
html[data-theme="blue"] {
  --p50:  #eef4ff; --p100: #d5e5fd; --p200: #b0ccfa;
  --p300: #7aaaef; --p400: #4a7fe0; --p500: #2f60d4;
  --p600: #1e47bc; --p700: #163898; --p800: #0d2878; --p900: #071b58;

  --shadow-rgb: 14,55,152;   --accent-rgb: 47,96,212;
  --grad-deep: linear-gradient(160deg,rgba(22,56,152,.88) 0%,rgba(13,40,120,.80) 60%,rgba(30,71,188,.84) 100%);

  --text: #071b58;           --text-soft: #163898;
  --border:        rgba(74,127,224,.22);
  --border-soft:   rgba(74,127,224,.15);
  --border-strong: rgba(14,55,152,.28);
  --accent-ghost:  rgba(47,96,212,.10);
  --accent-ring:   rgba(47,96,212,.20);
  --info-bg:       rgba(47,96,212,.11);
  --chart-grid:    rgba(14,55,152,.06);
  --chart-axis:    rgba(14,55,152,.28);
}

html[data-theme="blue"] body {
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%, #8fb8f8 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 110%, #b0ccfa 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%,  #cddaf6 0%, transparent 65%),
    linear-gradient(145deg, #cddaf6 0%, #e8f1fd 50%, #d5e5fd 100%);
  background-attachment: fixed;
}
html[data-theme="blue"] .pss-date-in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232f60d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E")}

/* ── Emerald ──────────────────────────────────────────────────────────────── */
html[data-theme="emerald"]{
  --p50:#ecfdf5;--p100:#d1fae5;--p200:#a7f3d0;
  --p300:#6ee7b7;--p400:#34d399;--p500:#10b981;
  --p600:#059669;--p700:#047857;--p800:#065f46;--p900:#064e3b;
  --shadow-rgb:4,120,87;--accent-rgb:16,185,129;
  --grad-deep:linear-gradient(160deg,rgba(4,120,87,.88) 0%,rgba(6,95,70,.78) 60%,rgba(5,150,105,.82) 100%);
  --text:#064e3b;--text-soft:#047857;
  --border:rgba(52,211,153,.25);--border-soft:rgba(52,211,153,.18);--border-strong:rgba(4,120,87,.30);
  --accent-ghost:rgba(16,185,129,.10);--accent-ring:rgba(16,185,129,.22);
  --info-bg:rgba(16,185,129,.12);
  --chart-grid:rgba(4,120,87,.07);--chart-axis:rgba(4,120,87,.30);
}
html[data-theme="emerald"] body{
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%,#6ee7b7 0%,transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 110%,#a7f3d0 0%,transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%, #d1fae5 0%,transparent 65%),
    linear-gradient(145deg,#a7f3d0 0%,#ecfdf5 50%,#d1fae5 100%);
  background-attachment:fixed;
}
html[data-theme="emerald"] .pss-date-in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E")}

/* ── Rose ─────────────────────────────────────────────────────────────────── */
html[data-theme="rose"]{
  --p50:#fff1f2;--p100:#ffe4e6;--p200:#fecdd3;
  --p300:#fda4af;--p400:#fb7185;--p500:#f43f5e;
  --p600:#e11d48;--p700:#be123c;--p800:#9f1239;--p900:#881337;
  --shadow-rgb:190,18,60;--accent-rgb:244,63,94;
  --grad-deep:linear-gradient(160deg,rgba(190,18,60,.88) 0%,rgba(159,18,57,.78) 60%,rgba(225,29,72,.82) 100%);
  --text:#881337;--text-soft:#be123c;
  --border:rgba(251,113,133,.25);--border-soft:rgba(251,113,133,.18);--border-strong:rgba(190,18,60,.30);
  --accent-ghost:rgba(244,63,94,.10);--accent-ring:rgba(244,63,94,.22);
  --info-bg:rgba(244,63,94,.12);
  --chart-grid:rgba(190,18,60,.07);--chart-axis:rgba(190,18,60,.30);
}
html[data-theme="rose"] body{
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%,#fda4af 0%,transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 110%,#fecdd3 0%,transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%, #ffe4e6 0%,transparent 65%),
    linear-gradient(145deg,#fecdd3 0%,#fff1f2 50%,#ffe4e6 100%);
  background-attachment:fixed;
}
html[data-theme="rose"] .pss-date-in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f43f5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E")}

/* ── Amber ────────────────────────────────────────────────────────────────── */
html[data-theme="amber"]{
  --p50:#fffbeb;--p100:#fef3c7;--p200:#fde68a;
  --p300:#fcd34d;--p400:#fbbf24;--p500:#f59e0b;
  --p600:#d97706;--p700:#b45309;--p800:#92400e;--p900:#78350f;
  --shadow-rgb:180,83,9;--accent-rgb:245,158,11;
  --grad-deep:linear-gradient(160deg,rgba(180,83,9,.88) 0%,rgba(146,64,14,.78) 60%,rgba(217,119,6,.82) 100%);
  --text:#78350f;--text-soft:#b45309;
  --border:rgba(251,191,36,.25);--border-soft:rgba(251,191,36,.18);--border-strong:rgba(180,83,9,.30);
  --accent-ghost:rgba(245,158,11,.10);--accent-ring:rgba(245,158,11,.22);
  --info-bg:rgba(245,158,11,.12);
  --chart-grid:rgba(180,83,9,.07);--chart-axis:rgba(180,83,9,.30);
}
html[data-theme="amber"] body{
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%,#fcd34d 0%,transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 110%,#fde68a 0%,transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%, #fef3c7 0%,transparent 65%),
    linear-gradient(145deg,#fde68a 0%,#fffbeb 50%,#fef3c7 100%);
  background-attachment:fixed;
}
html[data-theme="amber"] .pss-date-in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E")}

/* ── Slate ────────────────────────────────────────────────────────────────── */
html[data-theme="slate"]{
  --p50:#f8fafc;--p100:#f1f5f9;--p200:#e2e8f0;
  --p300:#cbd5e1;--p400:#94a3b8;--p500:#64748b;
  --p600:#475569;--p700:#334155;--p800:#1e293b;--p900:#0f172a;
  --shadow-rgb:51,65,85;--accent-rgb:100,116,139;
  --grad-deep:linear-gradient(160deg,rgba(51,65,85,.92) 0%,rgba(30,41,59,.85) 60%,rgba(71,85,105,.88) 100%);
  --text:#0f172a;--text-soft:#334155;
  --border:rgba(148,163,184,.25);--border-soft:rgba(148,163,184,.18);--border-strong:rgba(51,65,85,.30);
  --accent-ghost:rgba(100,116,139,.10);--accent-ring:rgba(100,116,139,.22);
  --info-bg:rgba(100,116,139,.12);
  --chart-grid:rgba(51,65,85,.07);--chart-axis:rgba(51,65,85,.30);
}
html[data-theme="slate"] body{
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%,#cbd5e1 0%,transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 110%,#e2e8f0 0%,transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%, #f1f5f9 0%,transparent 65%),
    linear-gradient(145deg,#e2e8f0 0%,#f8fafc 50%,#f1f5f9 100%);
  background-attachment:fixed;
}
html[data-theme="slate"] .pss-date-in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E")}


/* ── Violet ───────────────────────────────────────────────────────────────── */
html[data-theme="violet"] {
  --p50:  #f5f3ff; --p100: #ede9fe; --p200: #ddd6fe;
  --p300: #c4b5fd; --p400: #a78bfa; --p500: #7c3aed;
  --p600: #6d28d9; --p700: #5b21b6; --p800: #4c1d95; --p900: #2e1065;

  --shadow-rgb: 91,33,182;   --accent-rgb: 124,58,237;
  --grad-deep: linear-gradient(160deg,rgba(91,33,182,.88) 0%,rgba(76,29,149,.80) 60%,rgba(109,40,217,.84) 100%);

  --text: #2e1065;            --text-soft: #4c1d95;
  --border:        rgba(167,139,250,.22);
  --border-soft:   rgba(167,139,250,.15);
  --border-strong: rgba(91,33,182,.28);
  --accent-ghost:  rgba(124,58,237,.10);
  --accent-ring:   rgba(124,58,237,.20);
  --info-bg:       rgba(124,58,237,.11);
  --chart-grid:    rgba(91,33,182,.06);
  --chart-axis:    rgba(91,33,182,.28);
}

html[data-theme="violet"] body {
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%, #c4b5fd 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 110%, #ddd6fe 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%,  #ede9fe 0%, transparent 65%),
    linear-gradient(145deg, #ddd6fe 0%, #f5f3ff 50%, #ede9fe 100%);
  background-attachment: fixed;
}

/* ── Teal ─────────────────────────────────────────────────────────────────── */
html[data-theme="teal"] {
  --p50:  #f0fdfa; --p100: #ccfbf1; --p200: #99f6e4;
  --p300: #5eead4; --p400: #2dd4bf; --p500: #0d9488;
  --p600: #0f766e; --p700: #115e59; --p800: #134e4a; --p900: #042f2e;

  --shadow-rgb: 15,118,110;  --accent-rgb: 13,148,136;
  --grad-deep: linear-gradient(160deg,rgba(15,118,110,.88) 0%,rgba(19,78,74,.80) 60%,rgba(17,94,89,.84) 100%);

  --text: #042f2e;            --text-soft: #134e4a;
  --border:        rgba(45,212,191,.22);
  --border-soft:   rgba(45,212,191,.15);
  --border-strong: rgba(15,118,110,.28);
  --accent-ghost:  rgba(13,148,136,.10);
  --accent-ring:   rgba(13,148,136,.20);
  --info-bg:       rgba(13,148,136,.11);
  --chart-grid:    rgba(15,118,110,.06);
  --chart-axis:    rgba(15,118,110,.28);
}

html[data-theme="teal"] body {
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%, #5eead4 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 110%, #99f6e4 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%,  #ccfbf1 0%, transparent 65%),
    linear-gradient(145deg, #99f6e4 0%, #f0fdfa 50%, #ccfbf1 100%);
  background-attachment: fixed;
}

/* ── Orange ───────────────────────────────────────────────────────────────── */
html[data-theme="orange"] {
  --p50:  #fff7ed; --p100: #ffedd5; --p200: #fed7aa;
  --p300: #fdba74; --p400: #fb923c; --p500: #ea580c;
  --p600: #c2410c; --p700: #9a3412; --p800: #7c2d12; --p900: #431407;

  --shadow-rgb: 194,65,12;   --accent-rgb: 234,88,12;
  --grad-deep: linear-gradient(160deg,rgba(194,65,12,.88) 0%,rgba(154,52,18,.80) 60%,rgba(124,45,18,.84) 100%);

  --text: #431407;            --text-soft: #7c2d12;
  --border:        rgba(251,146,60,.22);
  --border-soft:   rgba(251,146,60,.15);
  --border-strong: rgba(194,65,12,.28);
  --accent-ghost:  rgba(234,88,12,.10);
  --accent-ring:   rgba(234,88,12,.20);
  --info-bg:       rgba(234,88,12,.11);
  --chart-grid:    rgba(194,65,12,.06);
  --chart-axis:    rgba(194,65,12,.28);
}

html[data-theme="orange"] body {
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%, #fdba74 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 110%, #fed7aa 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%,  #ffedd5 0%, transparent 65%),
    linear-gradient(145deg, #fed7aa 0%, #fff7ed 50%, #ffedd5 100%);
  background-attachment: fixed;
}

/* ── Indigo ───────────────────────────────────────────────────────────────── */
html[data-theme="indigo"] {
  --p50:  #eef2ff; --p100: #e0e7ff; --p200: #c7d2fe;
  --p300: #a5b4fc; --p400: #818cf8; --p500: #4f46e5;
  --p600: #4338ca; --p700: #3730a3; --p800: #312e81; --p900: #1e1b4b;

  --shadow-rgb: 55,48,163;   --accent-rgb: 79,70,229;
  --grad-deep: linear-gradient(160deg,rgba(55,48,163,.88) 0%,rgba(49,46,129,.80) 60%,rgba(67,56,202,.84) 100%);

  --text: #1e1b4b;            --text-soft: #312e81;
  --border:        rgba(129,140,248,.22);
  --border-soft:   rgba(129,140,248,.15);
  --border-strong: rgba(55,48,163,.28);
  --accent-ghost:  rgba(79,70,229,.10);
  --accent-ring:   rgba(79,70,229,.20);
  --info-bg:       rgba(79,70,229,.11);
  --chart-grid:    rgba(55,48,163,.06);
  --chart-axis:    rgba(55,48,163,.28);
}

html[data-theme="indigo"] body {
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%, #a5b4fc 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 110%, #c7d2fe 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%,  #e0e7ff 0%, transparent 65%),
    linear-gradient(145deg, #c7d2fe 0%, #eef2ff 50%, #e0e7ff 100%);
  background-attachment: fixed;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CUSTOM SELECT
   ══════════════════════════════════════════════════════════════════════════════ */
.csel-wrap{position:relative;display:inline-flex;flex-direction:column}
.csel-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:13px;
  background:var(--glass-input);color:var(--text);
  cursor:pointer;backdrop-filter:blur(8px);
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  user-select:none;white-space:nowrap;min-height:37px;
}
.csel-trigger:hover{border-color:var(--border-strong)}
.csel-wrap.open .csel-trigger{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-ring),var(--shadow-xs);
}
.csel-arrow{
  width:12px;height:12px;fill:var(--accent);flex-shrink:0;
  transition:transform var(--dur) var(--ease);
}
.csel-wrap.open .csel-arrow{transform:rotate(180deg)}
.csel-label{flex:1;overflow:hidden;text-overflow:ellipsis}
.csel-dropdown{
  display:none;position:absolute;top:calc(100% + 4px);left:0;
  min-width:100%;z-index:9999;
  background:var(--glass-modal);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
  backdrop-filter:blur(16px);overflow:hidden;
  max-height:240px;overflow-y:auto;
}
.csel-wrap.open .csel-dropdown{display:block}
.csel-option{
  padding:9px 14px;font-size:13px;color:var(--text);
  cursor:pointer;transition:background var(--dur) var(--ease);
  white-space:nowrap;
}
.csel-option:hover{background:var(--accent-ghost)}
.csel-option.selected{background:var(--bg-tint);color:var(--accent);font-weight:600}

/* Filter-bar variant (flex:1 sizing) */
.pss-form-sel-wrap{flex:1;min-width:220px;max-width:380px}
.pss-form-sel-wrap .csel-trigger{min-width:220px}

/* Admin form-control variant */
.form-control-wrap{}
.form-control-wrap .csel-trigger{
  padding:9px 12px;min-width:120px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FLATPICKR THEME OVERRIDE
   ══════════════════════════════════════════════════════════════════════════════ */
.flatpickr-input.pss-date-in{cursor:pointer}
.flatpickr-calendar{
  background:var(--glass-modal) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-lg) !important;
  backdrop-filter:blur(20px) !important;
  font-family:"Inter","Helvetica Neue",system-ui,-apple-system,sans-serif !important;
}
.flatpickr-calendar::before,.flatpickr-calendar::after{display:none !important}
.flatpickr-months{padding:6px 0 2px}
.flatpickr-months .flatpickr-month{
  background:transparent !important;color:var(--text) !important;height:38px
}
.flatpickr-current-month{
  color:var(--text) !important;font-size:14px !important;font-weight:700 !important;
  padding-top:6px !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months{
  background:transparent !important;color:var(--text) !important;
  font-weight:700 !important;font-size:14px !important;border:none !important;
}
.flatpickr-current-month input.cur-year{
  color:var(--text) !important;font-weight:700 !important;
}
.flatpickr-prev-month,.flatpickr-next-month{
  color:var(--accent) !important;fill:var(--accent) !important;
}
.flatpickr-prev-month:hover svg,.flatpickr-next-month:hover svg{fill:var(--accent2) !important}
.flatpickr-weekdays{background:transparent !important}
span.flatpickr-weekday{
  background:transparent !important;color:var(--muted) !important;
  font-size:11px !important;font-weight:700 !important;
  text-transform:uppercase;letter-spacing:.5px;
}
.flatpickr-days{border:none !important}
.dayContainer{border:none !important}
.flatpickr-day{
  color:var(--text) !important;border-radius:var(--radius-sm) !important;
  font-size:13px !important;border:1px solid transparent !important;
}
.flatpickr-day:hover,.flatpickr-day:focus{
  background:var(--accent-ghost) !important;
  border-color:transparent !important;color:var(--accent) !important;
}
.flatpickr-day.selected,.flatpickr-day.selected:focus,.flatpickr-day.selected:hover{
  background:var(--accent) !important;border-color:var(--accent) !important;
  color:#fff !important;
}
.flatpickr-day.today{border-color:var(--accent) !important}
.flatpickr-day.today:not(.selected):hover{background:var(--accent-ghost) !important}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{
  color:var(--muted) !important;opacity:.45 !important;
}
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{
  color:var(--muted) !important;opacity:.6 !important;
}