/* ============================================================
   Campaign Dashboard — glass design system
   4 themes, moving glow, loaders, fully responsive (no overlaps)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--text);background-color:var(--bg);background-attachment:fixed;
  min-height:100vh;
}
a{color:var(--accent-text);text-decoration:none}
img{max-width:100%}
.mono{font-family:'JetBrains Mono',monospace}

/* ---- Themes (set on <html data-theme="..">) ------------------------------ */
:root,html[data-theme="office"]{
  --bg:#0A0A0C;--panel:rgba(22,22,26,.72);--panel-bd:rgba(255,255,255,.09);
  --text:#F3F4F6;--soft:#D1D5DB;--muted:#9CA3AF;
  --chip:rgba(255,255,255,.05);--chip-bd:rgba(255,255,255,.09);
  --active:rgba(255,255,255,.10);--active-bd:rgba(255,255,255,.16);
  --accent:#F05A3C;--accent-ink:#FFFFFF;--accent-text:#FF8A66;--accent-soft:rgba(240,90,60,.16);
  --well:rgba(0,0,0,.30);--row:rgba(255,255,255,.07);
  --good:#6EE7B7;--good-bg:rgba(16,185,129,.14);--good-bd:rgba(16,185,129,.35);
  --info:#7DD3FC;--info-bg:rgba(56,189,248,.12);--info-bd:rgba(56,189,248,.35);
  --warn:#FCD34D;--warn-bg:rgba(245,158,11,.14);--warn-bd:rgba(245,158,11,.35);
  --bad:#FDA4AF;--bad-bg:rgba(244,63,94,.12);--bad-bd:rgba(244,63,94,.35);
  --purple:#C4B5FD;--purple-bg:rgba(139,92,246,.14);--purple-bd:rgba(139,92,246,.35);
  --gen:#7C3AED;--gen-ink:#FFFFFF;--gen-soft:rgba(124,58,237,.18);--gen-text:#C4B5FD;
  --cf:#F6821F;--cf-soft:rgba(246,130,31,.16);--cf-text:#FBB267;
  --pin:#FF6A3D;--land:rgba(255,255,255,.10);--coast:rgba(255,255,255,.22);--grid:rgba(255,255,255,.05);
  --tip:#1E1E23;--track-off:#3F3F46;
  --bg-image:radial-gradient(900px 500px at 85% -5%,rgba(255,255,255,.08),transparent 60%),
             radial-gradient(700px 500px at 0% 100%,rgba(255,255,255,.05),transparent 60%),
             repeating-linear-gradient(128deg,#0B0B0E 0,#0B0B0E 70px,#17171B 70px,#17171B 118px,#0E0E11 118px,#0E0E11 190px,#1C1C21 190px,#1C1C21 204px);
}
html[data-theme="ocean"]{
  --bg:#060B14;--panel:rgba(12,22,36,.70);--panel-bd:rgba(150,200,240,.18);
  --text:#EEF6FC;--soft:#C7D4E2;--muted:#93A4B8;
  --chip:rgba(150,200,240,.07);--chip-bd:rgba(150,200,240,.16);
  --active:rgba(79,179,240,.16);--active-bd:rgba(79,179,240,.40);
  --accent:#4FB3F0;--accent-ink:#06121D;--accent-text:#7CC8F5;--accent-soft:rgba(79,179,240,.16);
  --well:rgba(0,10,25,.38);--row:rgba(150,200,240,.10);
  --pin:#4FB3F0;--land:rgba(150,200,240,.13);--coast:rgba(150,200,240,.30);--grid:rgba(150,200,240,.06);
  --tip:#0F1C2B;--track-off:#2A3A4E;
  --bg-image:radial-gradient(900px 300px at 20% 12%,rgba(30,136,201,.38),transparent 70%),
             radial-gradient(800px 260px at 85% 55%,rgba(30,136,201,.26),transparent 70%),
             repeating-linear-gradient(162deg,#060B14 0,#060B14 60px,#0C1522 60px,#0C1522 96px,#08101B 96px,#08101B 150px,#13243A 150px,#13243A 156px);
}
html[data-theme="gold"]{
  --bg:#140D07;--panel:rgba(30,20,12,.70);--panel-bd:rgba(230,180,100,.20);
  --text:#F7EEDF;--soft:#E3D3BC;--muted:#B9A688;
  --chip:rgba(230,180,100,.07);--chip-bd:rgba(230,180,100,.18);
  --active:rgba(212,162,76,.16);--active-bd:rgba(212,162,76,.42);
  --accent:#D4A24C;--accent-ink:#1A1108;--accent-text:#EBC37A;--accent-soft:rgba(212,162,76,.18);
  --well:rgba(10,6,2,.40);--row:rgba(230,180,100,.12);
  --pin:#F0B94E;--land:rgba(240,200,140,.13);--coast:rgba(240,200,140,.30);--grid:rgba(240,200,140,.06);
  --tip:#22170C;--track-off:#4A3A28;
  --bg-image:radial-gradient(640px 460px at 12% 6%,rgba(120,86,40,.55),transparent 70%),
             radial-gradient(700px 520px at 85% 20%,rgba(60,42,20,.85),transparent 70%),
             linear-gradient(135deg,#1a1109,#241810 60%,#140d07);
}
html[data-theme="green"]{
  --bg:#08190F;--panel:rgba(10,30,20,.60);--panel-bd:rgba(150,220,170,.20);
  --text:#ECFBF1;--soft:#CFEAD7;--muted:#9CC4A8;
  --chip:rgba(150,220,170,.08);--chip-bd:rgba(150,220,170,.18);
  --active:rgba(120,210,140,.18);--active-bd:rgba(120,210,140,.42);
  --accent:#4FB06A;--accent-ink:#06220F;--accent-text:#9BE0A6;--accent-soft:rgba(79,176,106,.18);
  --well:rgba(0,15,8,.42);--row:rgba(150,220,170,.12);
  --pin:#8FD06A;--land:rgba(150,220,170,.12);--coast:rgba(150,220,170,.30);--grid:rgba(150,220,170,.06);
  --tip:#0E2A1A;--track-off:#2A4A36;
  /* diagonal demarcation: near-white green -> deep green */
  --bg-image:linear-gradient(130deg,#EAF8EF 0%,#C2E8D1 24%,#5AA074 46%,#1C5235 56%,#0A2114 74%,#06160D 100%);
}
body{background-image:var(--bg-image)}

/* ---- Shell / layout (responsive, no overlaps) ---------------------------- */
.shell{display:flex;align-items:flex-start;gap:20px;padding:20px;max-width:1680px;margin:0 auto}
.sidebar{
  position:sticky;top:20px;flex:0 0 260px;align-self:stretch;
  background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--panel-bd);
  border-radius:22px;padding:22px 16px;display:flex;flex-direction:column;gap:4px;
  max-height:calc(100vh - 40px);overflow:auto;
}
.main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:20px}

.brand{display:flex;align-items:center;gap:12px;padding:0 6px 20px}
.brand .logo{width:44px;height:44px;border-radius:12px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.brand b{font-size:17px}.brand small{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.navlabel{font-size:11px;letter-spacing:.14em;color:var(--muted);padding:8px 10px 6px}
.navitem{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;font-size:14px;color:var(--soft);border:1px solid transparent}
.navitem svg{width:18px;height:18px;flex:0 0 18px}
.navitem.active{background:var(--active);border-color:var(--active-bd);color:var(--text);font-weight:600}
.navitem.gen{background:var(--gen);border-color:var(--gen);color:var(--gen-ink);font-weight:700}
.navitem .badge{margin-left:auto;font-size:11px;color:var(--accent-text);background:var(--accent-soft);border-radius:999px;padding:2px 8px}
.sidebar .spacer{flex:1;min-height:12px}
.me{display:flex;align-items:center;gap:12px;padding:16px 6px 0;border-top:1px solid var(--row);margin-top:12px}
.me .av{width:40px;height:40px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}

/* ---- Topbar -------------------------------------------------------------- */
.topbar{background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--panel-bd);border-radius:18px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.topbar h1{margin:0;font-size:20px;font-weight:800}
.topbar .sub{font-size:13px;color:var(--muted)}
.hamburger{display:none;width:44px;height:44px;border-radius:10px;background:var(--chip);border:1px solid var(--chip-bd);color:var(--text);align-items:center;justify-content:center;cursor:pointer}
.search{flex:1 1 220px;max-width:360px;display:flex;align-items:center;gap:10px;background:var(--chip);border:1px solid var(--chip-bd);border-radius:12px;padding:0 14px;min-height:44px}
.search input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--text);font:inherit;font-size:14px}
.subcard{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:12px;background:var(--chip);border:1px solid var(--chip-bd)}
.subcard small{font-size:11px;color:var(--muted)}
.subcard b{font-size:14px;font-weight:700;color:var(--good)}
.subcard.low b{color:var(--warn)}
.themeswitch{display:flex;align-items:center;gap:4px;background:var(--chip);border:1px solid var(--chip-bd);border-radius:12px;padding:4px 4px 4px 12px}
.themeswitch span{font-size:12px;font-weight:600;color:var(--muted);padding-right:4px}
.themeswitch button{width:36px;height:34px;border-radius:9px;background:transparent;border:1px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.themeswitch button.on{background:var(--active);border-color:var(--accent)}
.themeswitch button i{width:20px;height:20px;border-radius:50%;display:inline-block;border:1px solid rgba(128,128,128,.5)}
.sw-office{background:linear-gradient(135deg,#2A2018,#0A0A0C 55%,#F05A3C 55%)}
.sw-ocean{background:linear-gradient(135deg,#13243A,#060B14 55%,#4FB3F0 55%)}
.sw-gold{background:linear-gradient(135deg,#6B4423,#1A1108 55%,#D4A24C 55%)}
.sw-green{background:linear-gradient(135deg,#EAF8EF,#5AA074 48%,#0B2015 54%)}

/* ---- Cards / panels ------------------------------------------------------ */
.card{background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--panel-bd);border-radius:20px;padding:22px;position:relative}
.grid{display:grid;gap:16px}
.cols-auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.row{display:flex;flex-wrap:wrap;gap:20px}
.kpi{display:flex;flex-direction:column;gap:14px}
.kpi .label{font-size:14px;color:var(--soft)}
.kpi .value{font-size:30px;font-weight:800;letter-spacing:-.01em}
.kpi .ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent-text);background:var(--accent-soft)}
.delta{font-size:13px;color:var(--good);background:var(--good-bg);border:1px solid var(--good-bd);border-radius:999px;padding:2px 10px}
h2.sec{margin:0;font-size:18px;font-weight:700}

/* ---- Moving glow on card borders ---------------------------------------- */
@property --glowa{syntax:'<angle>';inherits:false;initial-value:0deg}
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--glowa),transparent 0 248deg,var(--accent) 300deg,#fff 320deg,var(--accent) 340deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:glowspin 4.5s linear infinite;pointer-events:none}
@keyframes glowspin{to{--glowa:360deg}}
/* Fallback for browsers without @property: a static soft ring */
@supports not (background:conic-gradient(from 1deg,red,blue)){.glow::before{background:none;border:1px solid var(--accent);opacity:.4}}

/* ---- Buttons / forms ----------------------------------------------------- */
.btn{min-height:44px;padding:0 18px;border-radius:12px;border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn.ghost{background:var(--chip);border:1px solid var(--chip-bd);color:var(--text);font-weight:600}
.btn.gen{background:var(--gen);color:var(--gen-ink)}
.btn.cf{background:var(--cf);color:#fff}
.btn.danger{background:var(--bad-bg);border:1px solid var(--bad-bd);color:var(--bad);font-weight:600}
label.fld{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--soft)}
input,select,textarea{min-height:44px;border-radius:12px;border:1px solid var(--chip-bd);background:var(--well);color:var(--text);font:inherit;font-size:14px;padding:0 12px}
textarea{padding:12px 14px;line-height:1.6;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
input::placeholder,textarea::placeholder{color:var(--muted)}
.inline-ending{display:flex;align-items:center;gap:2px;background:var(--well);border:1px solid var(--chip-bd);border-radius:12px;padding:0 12px}
.inline-ending input{min-height:44px;border:0;background:transparent;padding:0}
.toggle{width:42px;height:24px;border-radius:12px;position:relative;display:inline-block;flex:0 0 42px;background:var(--track-off);cursor:pointer;border:0}
.toggle.on{background:var(--accent)}
.toggle i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.toggle.on i{left:21px}

/* ---- Tables -------------------------------------------------------------- */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;letter-spacing:.1em;color:var(--muted);font-weight:600;padding:10px}
td{padding:13px 10px;border-top:1px solid var(--row)}
.pill{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.pill.good{color:var(--good);background:var(--good-bg);border:1px solid var(--good-bd)}
.pill.info{color:var(--info);background:var(--info-bg);border:1px solid var(--info-bd)}
.pill.warn{color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-bd)}
.pill.bad{color:var(--bad);background:var(--bad-bg);border:1px solid var(--bad-bd)}
.pill.purple{color:var(--purple);background:var(--purple-bg);border:1px solid var(--purple-bd)}
.pill.muted{color:var(--muted);background:var(--chip);border:1px solid var(--chip-bd)}
.iconbtn{width:32px;height:32px;border-radius:8px;border:1px solid var(--chip-bd);background:transparent;color:var(--bad);cursor:pointer}

/* ---- Map ----------------------------------------------------------------- */
.mapwell{background:var(--well);border:1px solid var(--row);border-radius:14px;padding:8px}
.mapwell svg{width:100%;height:auto;display:block}
.pin-core{animation:blink 1.7s ease-in-out infinite}
.pin-ping{transform-box:fill-box;transform-origin:center;animation:ping 1.7s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.9}80%{transform:scale(4.6);opacity:0}100%{opacity:0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- Loaders (used on the loading page + previews) ----------------------- */
@keyframes gl-spin{to{transform:rotate(360deg)}}
@keyframes gl-bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-8px);opacity:1}}
@keyframes gl-bar{0%{left:-40%}100%{left:100%}}
@keyframes gl-pulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes gl-shimmer{0%{background-position:-160px 0}100%{background-position:160px 0}}
.gl-spinner{width:40px;height:40px;border-radius:50%;border:4px solid var(--chip-bd);border-top-color:var(--accent);animation:gl-spin .8s linear infinite;display:inline-block}
.gl-dots{display:inline-flex;gap:7px}
.gl-dots i{width:12px;height:12px;border-radius:50%;background:var(--accent);animation:gl-bounce 1.2s ease-in-out infinite}
.gl-dots i:nth-child(2){animation-delay:.15s}.gl-dots i:nth-child(3){animation-delay:.3s}
.gl-bar{position:relative;width:160px;height:8px;border-radius:4px;background:var(--chip-bd);overflow:hidden;display:inline-block}
.gl-bar i{position:absolute;top:0;width:40%;height:100%;border-radius:4px;background:var(--accent);animation:gl-bar 1.1s ease-in-out infinite}
.gl-pulse{width:34px;height:34px;border-radius:50%;background:var(--accent);animation:gl-pulse 1.2s ease-out infinite;display:inline-block}
.gl-skel{display:inline-flex;flex-direction:column;gap:7px;width:160px}
.gl-skel i{height:10px;border-radius:4px;background:linear-gradient(90deg,var(--chip-bd) 25%,var(--accent) 50%,var(--chip-bd) 75%);background-size:160px 100%;animation:gl-shimmer 1.2s linear infinite}
.gl-skel i:nth-child(2){width:80%}.gl-skel i:nth-child(3){width:60%}

.flash{background:var(--good-bg);border:1px solid var(--good-bd);color:var(--good);border-radius:12px;padding:12px 16px;font-size:14px}

/* ---- Auth (login) -------------------------------------------------------- */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.authcard{position:relative;width:100%;max-width:340px;background:var(--panel);backdrop-filter:blur(22px);
  border:1px solid var(--panel-bd);border-radius:20px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 24px 64px rgba(0,0,0,.45)}
.authcard .corner{position:absolute;width:56px;height:56px;border-radius:12px;background:var(--accent);box-shadow:0 0 24px var(--accent-soft)}
.authcard .corner.tl{top:-12px;left:-12px;clip-path:polygon(0 0,100% 0,0 100%)}
.authcard .corner.br{bottom:-12px;right:-12px;clip-path:polygon(100% 0,100% 100%,0 100%)}

/* ---- Responsive: drawer sidebar, no overlaps ----------------------------- */
.scrim{display:none}
@media (max-width:900px){
  .shell{padding:14px;gap:14px}
  .hamburger{display:flex}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:50;flex-basis:280px;max-height:none;height:100%;border-radius:0 20px 20px 0;transform:translateX(-110%);transition:transform .25s ease}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40}
  .main{width:100%}
}
@media (max-width:560px){
  .topbar h1{font-size:18px}
  .kpi .value{font-size:26px}
}