/* ==========================================================================
   XeloTrack — CRM Dashboard theme
   Navy #0A0E18 + Teal #3FD8D8, Inter Tight / JetBrains Mono, light canvas.
   Class names are unchanged so all pages inherit the new look automatically.
   ========================================================================== */

:root{
  --navy:#0A0E18; --teal:#3FD8D8;
  --teal-100:oklch(94% 0.05 195); --teal-200:oklch(88% 0.08 195);
  --teal-600:oklch(64% 0.14 195); --teal-700:oklch(54% 0.13 195);

  --ink-50:oklch(98.5% 0.003 250); --ink-100:oklch(96.5% 0.005 250);
  --ink-200:oklch(92% 0.008 250);  --ink-300:oklch(85% 0.012 250);
  --ink-400:oklch(70% 0.015 250);  --ink-500:oklch(55% 0.018 250);
  --ink-600:oklch(42% 0.020 250);  --ink-700:oklch(30% 0.022 250);
  --ink-800:oklch(20% 0.020 250);  --ink-900:oklch(13% 0.018 250);

  --success:oklch(58% 0.14 150); --success-bg:oklch(95% 0.04 150);
  --warning:oklch(64% 0.13 70);  --warning-bg:oklch(95% 0.05 80);
  --danger:oklch(58% 0.19 25);   --danger-bg:oklch(95% 0.04 25);

  --shadow-sm:0 1px 2px 0 rgba(10,14,24,.06),0 1px 1px 0 rgba(10,14,24,.04);
  --shadow-md:0 4px 12px -2px rgba(10,14,24,.10),0 2px 4px -1px rgba(10,14,24,.05);
  --shadow-lg:0 16px 40px -12px rgba(10,14,24,.22);

  --font-sans:"Inter Tight",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  /* aliases used by page inline styles + components */
  --ink:var(--navy);
  --paper:var(--ink-50);
  --card:#ffffff;
  --line:var(--ink-200);
  --muted:var(--ink-500);
  --forest:var(--teal-700);
  --forest-dk:var(--teal-700);
  --forest-tint:var(--teal-100);
  --amber:var(--warning);
  --rust:var(--danger);
  --radius:10px;
  --radius-sm:6px;
  --shadow:var(--shadow-sm);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font-sans); color:var(--ink-900);
  background:var(--paper); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--teal-700); text-decoration:none;}
a:hover{color:var(--teal-600);}

/* ---------- Layout ------------------------------------------------------- */
.layout{display:flex; min-height:100vh;}

.sidebar{
  width:250px; flex:0 0 250px; background:var(--navy); color:#c3ccd6;
  display:flex; flex-direction:column; padding:0;
  position:sticky; top:0; height:100vh; border-right:1px solid #05070d;
}
.brand{
  display:flex; gap:11px; align-items:center;
  padding:22px 20px 18px; border-bottom:1px solid rgba(255,255,255,.07);
}
.brand-mark{
  width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center;
  background:var(--navy); border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
}
.brand-mark svg{display:block;}
.brand-text{display:flex; flex-direction:column; line-height:1;}
.brand-name{font-family:var(--font-sans); font-weight:700; color:#fff; font-size:17px; letter-spacing:-.02em;}
.brand-sub{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; color:var(--teal); margin-top:4px; text-transform:uppercase;
}

.nav{display:flex; flex-direction:column; gap:2px; flex:1; padding:14px 12px; overflow-y:auto;}
.nav-eyebrow{
  font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--ink-500); margin:16px 6px 6px; padding:0 2px;
}
.nav-link{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:6px; color:#c3ccd6; text-decoration:none; font-weight:500;
  font-size:14px; border-left:2px solid transparent; transition:background .12s,color .12s;
}
.nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-link.active{background:rgba(63,216,216,.12); color:#fff; border-left-color:var(--teal);}

.sidebar-foot{border-top:1px solid rgba(255,255,255,.07); padding:12px;}
.who{display:flex; flex-direction:column; padding:2px 6px 10px;}
.who-name{color:#fff; font-weight:600; font-size:14px;}
.who-role{font-size:11.5px; color:var(--ink-500);}
.logout{
  display:block; text-align:center; padding:8px; font-size:13px; font-weight:500;
  color:#c3ccd6; text-decoration:none; border:1px solid rgba(255,255,255,.14); border-radius:6px;
}
.logout:hover{background:rgba(255,255,255,.06); color:#fff;}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; gap:14px; padding:18px 30px;
  border-bottom:1px solid var(--line); background:var(--card);
}
.page-title{font-family:var(--font-sans); font-size:21px; font-weight:700; margin:0; letter-spacing:-.02em; color:var(--ink-900);}
.nav-toggle{display:none; font-size:22px; cursor:pointer; line-height:1;}
.content{padding:26px 30px; flex:1;}
.pagefoot{padding:16px 30px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px;}

/* ---------- Flash -------------------------------------------------------- */
.flash{margin:18px 30px -6px; padding:11px 14px; border-radius:var(--radius-sm); font-size:14px; font-weight:500;}
.flash-ok{background:var(--success-bg); color:var(--success); border:1px solid oklch(85% 0.08 150);}
.flash-warn{background:var(--warning-bg); color:var(--warning); border:1px solid oklch(85% 0.09 80);}
.flash-err{background:var(--danger-bg); color:var(--danger); border:1px solid oklch(85% 0.10 25);}

/* ---------- Cards & grid ------------------------------------------------- */
.grid{display:grid; gap:16px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:20px;}
.card h2{font-family:var(--font-sans); font-size:16px; font-weight:600; margin:0 0 14px; letter-spacing:-.01em;}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.card-head h2{margin:0;}

.stat-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:500;}
.stat-num{font-family:var(--font-mono); font-weight:600; font-size:28px; line-height:1.1; margin-top:5px; color:var(--ink-900); letter-spacing:-.02em;}
.stat-sub{font-size:12.5px; color:var(--muted); margin-top:3px;}

/* ---------- Score ring / hero ------------------------------------------- */
.score-hero{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.score-dial{
  --v:0; width:128px; height:128px; flex:0 0 128px; border-radius:50%;
  background:conic-gradient(var(--teal-700) calc(var(--v)*1%), var(--teal-100) 0);
  display:grid; place-items:center;
}
.score-dial::after{content:""; width:96px; height:96px; border-radius:50%; background:var(--card); grid-area:1/1;}
.score-dial .score-val{grid-area:1/1; z-index:1; text-align:center; font-family:var(--font-mono); font-weight:600; font-size:34px; line-height:1; color:var(--ink-900);}
.score-dial .score-val small{display:block; font-size:11px; color:var(--muted); font-weight:500;}
.score-meta{flex:1; min-width:200px;}
.score-band{font-family:var(--font-sans); font-weight:700; font-size:20px; letter-spacing:-.01em;}

.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600;}
.b-high{background:var(--success-bg); color:var(--success);}
.b-good{background:var(--teal-100); color:var(--teal-700);}
.b-fair{background:var(--warning-bg); color:var(--warning);}
.b-low{background:var(--danger-bg); color:var(--danger);}
.b-none{background:var(--ink-100); color:var(--muted);}

/* ---------- Pillar bar --------------------------------------------------- */
.pillars{display:flex; flex-direction:column; gap:13px;}
.pillar-row{display:grid; grid-template-columns:150px 1fr 46px; align-items:center; gap:12px;}
.pillar-name{font-size:13.5px; font-weight:500;}
.pillar-track{height:9px; border-radius:999px; background:var(--ink-100); overflow:hidden;}
.pillar-fill{height:100%; border-radius:999px; background:var(--teal-700);}
.pillar-fill.warn{background:var(--warning);}
.pillar-fill.low{background:var(--danger);}
.pillar-fill.none{background:var(--ink-200);}
.pillar-val{font-family:var(--font-mono); font-weight:600; font-size:14px; text-align:right;}
.pillar-val.muted{color:var(--muted);}

/* ---------- Tables ------------------------------------------------------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);}
table.data{width:100%; border-collapse:collapse; background:var(--card);}
table.data th,table.data td{padding:11px 14px; text-align:left; font-size:14px;}
table.data th{
  background:var(--ink-100); color:var(--ink-600); font-family:var(--font-mono);
  font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
table.data tbody tr{border-top:1px solid var(--line);}
table.data tbody tr:hover{background:var(--ink-50);}
table.data td.num,table.data th.num{font-family:var(--font-mono); text-align:right;}
.empty{padding:34px; text-align:center; color:var(--muted);}
.empty strong{display:block; color:var(--ink-900); font-family:var(--font-sans); font-weight:600; margin-bottom:4px;}

/* ---------- Pills -------------------------------------------------------- */
.pill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600;}
.pill-green{background:var(--success-bg); color:var(--success);}
.pill-amber{background:var(--warning-bg); color:var(--warning);}
.pill-red{background:var(--danger-bg); color:var(--danger);}
.pill-grey{background:var(--ink-100); color:var(--ink-600);}

/* ---------- Forms -------------------------------------------------------- */
.field{margin-bottom:14px;}
.field label{display:block; font-size:13px; font-weight:500; margin-bottom:5px; color:var(--ink-700);}
.field input,.field select,.field textarea{
  width:100%; padding:9px 11px; border:1px solid var(--border-strong,var(--ink-300));
  border-radius:var(--radius-sm); font:inherit; background:#fff; color:var(--ink-900);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--teal-600); box-shadow:0 0 0 3px oklch(88% 0.08 195 / .5);
}
.field textarea{resize:vertical; min-height:76px;}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

.btn{
  display:inline-block; padding:9px 18px; border:1px solid var(--navy); border-radius:var(--radius-sm);
  background:var(--navy); color:#fff; font:inherit; font-weight:600; cursor:pointer;
  text-decoration:none; transition:background .12s,border-color .12s;
}
.btn:hover{background:#151b2b; border-color:#151b2b; color:#fff;}
.btn.ghost{background:#fff; color:var(--ink-800); border:1px solid var(--ink-300);}
.btn.ghost:hover{background:var(--ink-50); color:var(--ink-900);}
.btn.sm{padding:6px 12px; font-size:13px;}
.btn.danger{background:var(--danger); border-color:var(--danger);}
.btn.danger:hover{background:oklch(50% 0.19 25); border-color:oklch(50% 0.19 25);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}

/* ---------- Login -------------------------------------------------------- */
.auth-wrap{min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--navy);}
.auth-card{width:100%; max-width:400px; background:var(--card); border-radius:16px; padding:34px; box-shadow:var(--shadow-lg);}
.auth-brand{display:flex; align-items:center; gap:12px; margin-bottom:6px;}
.auth-brand .brand-mark{width:42px; height:42px; flex:0 0 42px;}
.auth-title{font-family:var(--font-sans); font-size:24px; font-weight:700; margin:0; letter-spacing:-.02em;}
.auth-sub{color:var(--muted); font-size:13.5px; margin:2px 0 22px;}
.auth-demo{margin-top:18px; padding:12px 14px; background:var(--ink-50); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:12.5px; color:var(--ink-700); line-height:1.8;}
.auth-demo code{font-family:var(--font-mono); color:var(--teal-700);}
.auth-demo strong{color:var(--ink-900);}

.section-gap{margin-top:22px;}
.muted{color:var(--muted);}
.mono{font-family:var(--font-mono);}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:1fr 1fr;}}
@media (max-width:720px){
  .sidebar{position:fixed; z-index:40; left:0; top:0; transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 60px rgba(0,0,0,.5);}
  .nav-toggle-cb:checked ~ .layout .sidebar{transform:translateX(0);}
  .nav-toggle{display:block;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .row-2{grid-template-columns:1fr;}
  .content,.topbar,.pagefoot{padding-left:18px; padding-right:18px;}
  .flash{margin-left:18px; margin-right:18px;}
  .pillar-row{grid-template-columns:110px 1fr 40px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important;}}