/*
What changed: Initial shared style tokens and core components for Presales UI/UX scaffold.
Why: Establish a consistent, reusable Vertical Steps aesthetic across all mockups per Sprint 3 plan.
*/
/* Design Tokens */
:root{
  --brand:#1e3a5f;
  --primary:#2196F3;
  --success:#4CAF50;
  --muted:#666666;
  --border:#e0e0e0;
  --bg:#f5f5f5;

  --text:#222222;
  --surface:#ffffff;
  --surface-alt:#fbfbfd;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;

  --radius-1:6px;
  --radius-2:10px;
  --radius-3:14px;

  --shadow-1:0 1px 2px rgba(0,0,0,0.06);
  --shadow-2:0 6px 16px rgba(0,0,0,0.10);
  --shadow-3:0 12px 24px rgba(0,0,0,0.12);

  --grad-primary: linear-gradient(90deg, #4fa8ff, #1e78d5);
  --grad-success: linear-gradient(90deg, #6ddc86, #45a049);

  --font-sys: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --fs-12:12px; --fs-13:13px; --fs-16:16px; --fs-18:18px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 600px at -10% -20%, #e9f2ff 0%, rgba(255,255,255,0) 50%),
    radial-gradient(800px 400px at 110% 10%, #e8f7ff 0%, rgba(255,255,255,0) 50%),
    var(--bg);
  font: 400 var(--fs-16)/1.5 var(--font-sys);
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:3px solid rgba(33,150,243,.3); outline-offset:2px; border-radius:8px}

/* Layout */
.app-header{
  background:linear-gradient(180deg, #1f3e63, #1b3350); color:#fff; padding:var(--space-4) var(--space-6);
  display:flex; align-items:center; justify-content:space-between; box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 12px rgba(0,0,0,.06);
}
.app-header .title{font-size:var(--fs-18); font-weight:600}
.app-header nav a{color:#e8f1ff; margin-left:var(--space-4); padding:6px 10px; border-radius:8px; transition:background .2s ease}
.app-header nav a:hover{background:rgba(255,255,255,.1); text-decoration:none}

.app-container{display:grid; grid-template-columns: 280px 1fr; gap:var(--space-6); padding:var(--space-6)}
.card{
  position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-2);
  box-shadow:var(--shadow-1); padding:var(--space-5); transition:box-shadow .2s ease, transform .2s ease;
}
.card::before{content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:3px; border-top-left-radius:inherit; border-top-right-radius:inherit; background:var(--grad-primary)}
.card:hover{box-shadow:var(--shadow-2)}
.grid{display:grid; gap:var(--space-4)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
/* Index grid */
.index-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
/* Clickable card links */
a.card{display:block; color:inherit}
a.card:hover{transform:translateY(-1px); text-decoration:none}
/* Split layout */
.split{display:grid; grid-template-columns:320px 1fr; gap:var(--space-6)}

/* Vertical Steps */
.steps{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-2); box-shadow:var(--shadow-1); padding:var(--space-4)}
.steps h3{margin:0 0 var(--space-3) 0; font-size:var(--fs-13); color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.step{position:relative; display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3); border-radius:var(--radius-1); cursor:default; transition:background .2s ease, transform .2s ease}
.step + .step{margin-top:var(--space-2)}
.step::before{content:""; position:absolute; left:calc(var(--space-3) + 13px); top:calc(32px + var(--space-3)); bottom:-12px; width:2px; background:var(--border)}
.step:last-child::before{display:none}
.step .dot{width:28px; height:28px; border-radius:50%; flex:0 0 28px; border:2px solid var(--border); background:#fff; display:grid; place-items:center; font-size:12px; color:#fff; box-shadow:var(--shadow-1)}
.step:hover{background:#f7faff}
.step.active{background:#eef6ff}
.step.active .dot{background:var(--primary); border-color:var(--primary)}
.step.done::before{background:var(--success)}
.step.done .dot{background:var(--success); border-color:var(--success)}
.step .meta{display:flex; flex-direction:column}
.step .meta .name{font-weight:600}
.step .meta .desc{font-size:var(--fs-12); color:var(--muted)}

/* Header widgets */
.progress{
  height:8px; background:#eef3f8; border-radius:999px; overflow:hidden; border:1px solid var(--border);
}
.progress > span{display:block; height:100%; background:var(--grad-primary); position:relative}
.progress > span::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.35) 40%, rgba(255,255,255,.0) 80%); transform:translateX(-100%); animation:progress-shine 2.4s infinite}
@keyframes progress-shine{to{transform:translateX(100%)}}

.kpis{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-4)}
.kpi{
  padding:var(--space-4); border:1px solid var(--border); background:linear-gradient(180deg, var(--surface), var(--surface-alt));
  border-radius:var(--radius-2); box-shadow:var(--shadow-1); transition:transform .2s ease, box-shadow .2s ease
}
.kpi:hover{transform:translateY(-1px); box-shadow:var(--shadow-2)}
.kpi .label{font-size:var(--fs-12); color:var(--muted)}
.kpi .value{font-size:22px; font-weight:700; background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent}
.kpi .delta{font-size:var(--fs-12); color:var(--success)}

/* Tables */
table{width:100%; border-collapse:separate; border-spacing:0}
th,td{padding:12px 14px; border-bottom:1px solid var(--border); font-size:var(--fs-13)}
thead th{position:sticky; top:0; background:#fafafa; text-align:left; color:#2a2a2a}
tbody tr:nth-child(odd) td{background:#fff}
tbody tr:nth-child(even) td{background:#fcfcff}
tbody tr:hover td{background:#f5f9ff}
table thead tr:first-child th:first-child{border-top-left-radius:8px}
table thead tr:first-child th:last-child{border-top-right-radius:8px}

/* Right panel */
.side-panel{border-left:1px solid var(--border); padding-left:var(--space-5)}

/* Quick actions */
.actions{display:flex; gap:var(--space-3); flex-wrap:wrap}
.btn{
  appearance:none; border:1px solid var(--border); background:#fff; color:#1f2937; padding:8px 12px;
  border-radius:8px; cursor:pointer; box-shadow:var(--shadow-1); transition:transform .15s ease, box-shadow .15s ease, background .15s ease
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--grad-primary); border-color:transparent; color:#fff}
.btn.primary::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,0) 30%); opacity:0; transition:opacity .2s ease}
.btn.primary:hover::after{opacity:1}
.btn{position:relative; overflow:hidden}
.btn.primary:hover{filter:saturate(1.1)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* Funnels: steps bars */
.funnel-steps{display:grid; gap:10px}
.funnel-step{display:flex; align-items:center; gap:10px}
.funnel-bar{height:20px; border-radius:999px; background:#e9f2ff; position:relative; overflow:hidden; border:1px solid var(--border)}
.funnel-bar > span{position:absolute; inset:0; width:50%; background:var(--grad-primary)}
.badge{font-size:var(--fs-12); color:#fff; background:#9aa4b2; border-radius:999px; padding:2px 8px}
.badge.drop{background:#ef4444}
.badge.primary{background:var(--primary)}
.badge.success{background:var(--success)}
.badge.neutral{background:#8b9db3}

/* Funnels: Sankey mock */
.sankey{position:relative; height:360px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-2); padding:var(--space-5)}
.sankey .lane{position:absolute; left:0; right:0; height:40px; display:flex; align-items:center}
.sankey .label{position:absolute; left:10px; font-size:var(--fs-12); color:var(--muted)}
.sankey .band{height:18px; border-radius:999px; background:linear-gradient(90deg, #cfe4ff, #4fa8ff); box-shadow:var(--shadow-1)}

/* Funnels: Rings */
.rings{display:grid; place-items:center; min-height:360px}
.ring{width:240px; height:240px; border-radius:50%; background:conic-gradient(var(--primary) 0 35%, #cfe7ff 0 100%); position:relative}
.ring::before{content:""; position:absolute; inset:16px; border-radius:50%; background:conic-gradient(var(--success) 0 55%, #d7f5df 0 100%)}
.ring::after{content:""; position:absolute; inset:48px; border-radius:50%; background:conic-gradient(#8b9db3 0 70%, #e8edf3 0 100%)}
.ring-legend{position:absolute; top:16px; right:16px; background:#fff; border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:var(--fs-12); box-shadow:var(--shadow-1)}

/* Utilities */
.muted{color:var(--muted)}
.danger{color:#ef4444}
.stack{display:grid; gap:var(--space-4)}
.row{display:flex; gap:var(--space-4); align-items:center}
.between{justify-content:space-between}
.end{align-items:flex-end}
.pad-6{padding:var(--space-6)}
.mt-0{margin-top:0}
.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}
.w-30{width:30%}
.w-35{width:35%}
.w-40{width:40%}
.w-50{width:50%}
.w-52{width:52%}
.w-60{width:60%}
.w-62{width:62%}
.w-64{width:64%}
.w-65{width:65%}
.w-70{width:70%}
.w-80{width:80%}
.w-100{width:100%}
.w-120px{width:120px}
.w-140px{width:140px}
.w-160px{width:160px}
.ml-120{margin-left:120px}
.ml-220{margin-left:220px}
.ml-320{margin-left:320px}
.ml-420{margin-left:420px}
.pill{display:inline-flex; align-items:center; gap:8px; background:#eef3f8; border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:var(--fs-12)}
.subtle{background:#fafafa; border:1px dashed var(--border)}

/* Responsive */
@media (max-width: 1000px){
  .app-container{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .btn,.card,.kpi{transition:none}
  .btn:hover,.card:hover,.kpi:hover{transform:none; box-shadow:var(--shadow-1)}
  .progress > span::after{animation:none}
}

/* Modern helpers using :has() */
.steps:has(.step.active){border-color:#cfe7ff}
.steps:has(.step.active) .step.active{box-shadow:inset 0 0 0 1px #cfe7ff}

/* Sankey positioning helpers */
.sankey .lane:nth-child(1){top:30px}
.sankey .lane:nth-child(2){top:120px}
.sankey .lane:nth-child(3){top:210px}
.sankey .lane:nth-child(4){top:300px}
.sankey .band.small{height:12px}
.relative{position:relative}