/* ============================================================
   Gokul Sales CRM — plan site
   Design language: freight waybill / shipment-tracking dossier
   ============================================================ */
:root{
  --paper:#F5F6F8; --panel:#FFFFFF; --panel-2:#FBFCFD;
  --ink:#16202B; --ink-soft:#48586A; --ink-faint:#7C8B98;
  --line:#DFE4EA; --line-strong:#C7D0D9;
  --accent:#0E5C6E; --accent-2:#0B7387; --accent-soft:#E4EEF1;
  --brass:#8A5E10; --brass-soft:#F3E9D2;
  --alert:#B23A1E; --alert-soft:#F7E2DA;
  --grid:rgba(20,32,43,.045);
  --shadow:0 1px 2px rgba(16,32,43,.06),0 8px 24px -12px rgba(16,32,43,.14);
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0D141A; --panel:#141D25; --panel-2:#101820;
    --ink:#E8EEF3; --ink-soft:#AAB7C2; --ink-faint:#6C7C89;
    --line:#233039; --line-strong:#33434E;
    --accent:#43AABE; --accent-2:#5CC1D3; --accent-soft:#10303A;
    --brass:#D6A24A; --brass-soft:#2A2413;
    --alert:#E58063; --alert-soft:#2F1B12;
    --grid:rgba(255,255,255,.04);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px;
}
::selection{background:var(--accent);color:#fff}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.mono{font-family:var(--mono)}

/* ---------- Layout ---------- */
.shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh;max-width:1360px;margin:0 auto}

/* ---------- Sidebar ---------- */
.side{
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  border-right:1px solid var(--line);background:var(--panel);padding:0 0 30px;
}
.side-mast{padding:16px 20px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.side-mast b{display:block;font-size:12.5px;letter-spacing:.18em;margin-bottom:3px}
.side nav{padding:14px 12px;display:flex;flex-direction:column;gap:2px}
.side nav a{
  display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:8px;color:var(--ink-soft);
  font-size:13.5px;font-weight:500;
}
.side nav a .num{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.side nav a:hover{background:var(--panel-2);text-decoration:none;color:var(--ink)}
.side nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:650}
.side nav a[aria-current="page"] .num{color:var(--accent)}
.side-foot{padding:14px 20px;margin-top:8px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);letter-spacing:.06em}

/* ---------- Content ---------- */
.main{padding:clamp(24px,4vw,56px) clamp(20px,4vw,64px) 96px;max-width:960px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
.main h1{font-size:clamp(26px,4vw,40px);font-weight:800;margin:10px 0 0}
.intro{color:var(--ink-soft);font-size:clamp(15px,1.6vw,17px);max-width:68ch;margin-top:14px}
.main h2{font-size:clamp(18px,2.2vw,23px);font-weight:750;margin:44px 0 6px;padding-top:8px}
.main h3{font-size:16px;font-weight:700;margin:22px 0 4px}
.main p+p{margin-top:10px}
.main section{scroll-margin-top:20px}

/* panels / cards */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:20px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:10px}
.card .head{display:flex;align-items:center;gap:10px}
.card .num{font-family:var(--mono);font-weight:800;font-size:13px;width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--accent);color:#fff}
.card h3{margin:0;font-size:15.5px}

/* tables */
.table-scroll{overflow-x:auto;margin:14px 0;border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:460px;background:var(--panel);font-size:13.5px}
thead th{background:var(--panel-2);text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);padding:10px 14px;border-bottom:1px solid var(--line-strong)}
tbody td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-soft)}
tbody tr:last-child td{border-bottom:0}
tbody td:first-child{color:var(--ink);font-weight:600}
tbody code,.main p code,li code{font-family:var(--mono);font-size:12px;background:var(--accent-soft);color:var(--accent);padding:1px 6px;border-radius:5px}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;letter-spacing:.02em;
  color:var(--h,var(--accent));background:color-mix(in srgb,var(--h,var(--accent)) 14%,transparent);border:1px solid color-mix(in srgb,var(--h,var(--accent)) 34%,transparent);white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--h,var(--accent))}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.team-chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;padding:3px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.owner-tag{display:inline-flex;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--brass);background:var(--brass-soft);border:1px solid color-mix(in srgb,var(--brass) 30%,transparent);padding:3px 9px;border-radius:6px}

/* flow / state chains */
.flow{font-family:var(--mono);font-size:12.5px;line-height:2;color:var(--ink-soft);background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow-x:auto}
.flow b{color:var(--ink)}
.flow .arw{color:var(--accent);font-weight:700}
.flow .br{color:var(--alert);font-weight:700}

/* steps */
.steps{list-style:none;padding:0;margin:6px 0;display:flex;flex-direction:column;gap:7px}
.steps li{font-size:14px;color:var(--ink-soft);padding-left:18px;position:relative}
.steps li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:1px;background:var(--accent);transform:rotate(45deg)}
.steps li b{color:var(--ink)}

/* tracks / meta line */
.tracks{font-family:var(--mono);font-size:12px;color:var(--ink-faint);border-top:1px dashed var(--line-strong);padding-top:10px;margin-top:2px;line-height:1.6}
.tracks b{color:var(--ink-soft)}

/* callouts */
.callout{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 9px 9px 0;padding:14px 16px;margin:16px 0;font-size:14px}
.callout.warn{border-color:var(--alert);background:var(--alert-soft)}
.callout b{color:var(--accent)}
.callout.warn b{color:var(--alert)}

/* kpi */
.kpi{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:14px}
.kpi .val{font-family:var(--mono);font-weight:800;font-size:18px;color:var(--accent);line-height:1.1}
.kpi .lab{font-size:12.5px;color:var(--ink-soft);margin-top:6px}

/* pager */
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:52px;border-top:1px solid var(--line);padding-top:20px}
.pager a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-width:160px}
.pager a:hover{text-decoration:none;border-color:var(--accent)}
.pager .dir{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.pager .ttl{font-weight:650;color:var(--ink)}
.pager .next{text-align:right}

/* mobile */
.topbar{display:none}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .side nav{flex-direction:row;flex-wrap:wrap}
  .side nav a{padding:7px 10px}
  .side-foot{display:none}
  .g2,.g3{grid-template-columns:1fr}
}