/* ============================================================
   Litespeed AI Demos — shared dashboard shell
   Brand: navy #080d14, blue #4AA6FF, Barlow Condensed / Barlow
   Used by all /ai-demos/*.html mockups (for VSL screen recording)
   ============================================================ */

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

:root {
  --navy:       #080d14;
  --navy-2:     #0d1622;
  --panel:      #111c2b;
  --panel-2:    #16253a;
  --line:       #1f3046;
  --blue:       #4AA6FF;
  --blue-dim:   #2f6fb0;
  --blue-l:     #7fc2ff;
  --blue-soft:  rgba(74,166,255,.05);
  --blue-14:    rgba(74,166,255,.14);
  --on-accent:  #04101e;
  --text:       #e8eef6;
  --text-dim:   #8ba0bb;
  --text-faint: #5e718c;
  --green:      #3ad29f;
  --amber:      #ffb648;
  --red:        #ff6b6b;
  --radius:     12px;
  --shadow:     0 10px 30px rgba(0,0,0,.35);
  /* highlight ("AI Assistant") cards + glass nav — themeable for light mode */
  --hi-bg-1:    #13243a;
  --hi-bg-2:    #111c2b;
  --hi-border:  #274b73;
  --nav-glass:  rgba(8,13,20,.88);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: 'Barlow', system-ui, sans-serif;
  background: var(--navy);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  display: flex;
  min-height: 100vh;
}

h1, h2, h3, h4, .cond {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  letter-spacing: .3px;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: 232px;
  flex: 0 0 232px;
  background: var(--navy-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.brand .logo {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dim));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; color: var(--on-accent); font-size: 18px;
}
.brand .name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 19px; line-height: 1;
}
.brand .name small { display:block; font-size: 10.5px; letter-spacing:1.5px; color: var(--text-dim); font-family:'Barlow',sans-serif; font-weight:600; margin-top:3px; }

.nav { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; }
.nav .label { font-size: 10.5px; letter-spacing: 1.4px; color: var(--text-faint); padding: 12px 12px 6px; font-weight: 600; text-transform: uppercase; }
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14.5px; font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
  border: 1px solid transparent;
}
.nav a:hover { background: var(--panel); color: var(--text); }
.nav a.active { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.nav a.active .ic { color: var(--blue); }
.nav .ic { width: 18px; text-align: center; font-size: 15px; opacity: .9; }
.nav a .badge { margin-left: auto; background: var(--blue); color:var(--on-accent); font-size: 11px; font-weight:700; border-radius: 20px; padding: 1px 8px; }

.side-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display:flex; align-items:center; gap:10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,var(--blue-dim),#16253a); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; }
.side-foot .who { font-size: 13px; }
.side-foot .who small { display:block; color: var(--text-dim); font-size: 11.5px; }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 52px;
  flex: 0 0 auto; /* body is height-capped flex — without this the bar gets squished on tall pages */
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  display: flex; align-items: center; gap: 18px;
  padding: 0 28px;
  position: sticky; top: 0; z-index: 5;
}
.topbar h1 { font-size: 23px; font-weight: 700; }
.search {
  margin-left: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 14px;
  color: var(--text-dim);
  font-size: 13.5px;
  width: 240px;
}
.tb-btn { width: 38px; height: 38px; border-radius: 9px; background: var(--panel); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color: var(--text-dim); font-size:16px; position:relative; cursor:pointer; }
.tb-btn .dot { position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background: var(--blue); }

.content { padding: 26px 28px 60px; }

/* page panels (for clickable demos) */
.page { display: none; }
.page.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity:1; transform:none; } }

/* ---------- Stat tiles ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
}
.stat .k { font-size: 12px; color: var(--text-dim); letter-spacing:.4px; font-weight:600; text-transform:uppercase; }
.stat .v { font-family:'Barlow Condensed',sans-serif; font-size: 32px; font-weight: 700; margin: 6px 0 2px; }
.stat .d { font-size: 12.5px; font-weight:600; display:flex; align-items:center; gap:5px; }
.up { color: var(--green); }
.down { color: var(--red); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: 2fr 1fr; }
.g-2b { grid-template-columns: 1fr 1fr; }
.g-3 { grid-template-columns: repeat(3,1fr); }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.card h3 { font-size: 18px; font-weight: 600; margin-bottom: 2px; }
.card .sub { color: var(--text-dim); font-size: 13px; margin-bottom: 16px; }
.card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; }
.card-head h3 { margin: 0; }
.link { color: var(--blue); font-size: 13px; font-weight:600; text-decoration:none; cursor:pointer; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; color: var(--text-dim); font-weight: 600; font-size: 11.5px; letter-spacing:.6px; text-transform: uppercase; padding: 0 12px 11px; border-bottom: 1px solid var(--line); }
td { padding: 13px 12px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--blue-soft); }
.who-cell { display:flex; align-items:center; gap:10px; }
.who-cell .av { width:30px; height:30px; border-radius:50%; background:var(--panel-2); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:var(--blue); }

/* ---------- Pills / status ---------- */
.pill { font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: 20px; display: inline-block; letter-spacing:.3px; }
.pill.green { background: rgba(58,210,159,.14); color: var(--green); }
.pill.amber { background: rgba(255,182,72,.14); color: var(--amber); }
.pill.blue  { background: var(--blue-14); color: var(--blue); }
.pill.red   { background: rgba(255,107,107,.14); color: var(--red); }
.pill.gray  { background: rgba(139,160,187,.14); color: var(--text-dim); }

/* ---------- Bars / progress ---------- */
.bar { height: 8px; border-radius: 20px; background: var(--panel-2); overflow: hidden; }
.bar > span { display:block; height:100%; background: linear-gradient(90deg,var(--blue),var(--blue-l)); border-radius:20px; }

/* ---------- Mini bar chart ---------- */
.chart { display:flex; align-items:flex-end; gap: 10px; height: 180px; padding-top: 10px; }
.chart .col { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; justify-content:flex-end; height:100%; }
.chart .col .b { width: 60%; background: linear-gradient(180deg,var(--blue),var(--blue-dim)); border-radius: 6px 6px 0 0; transition: height .4s; }
.chart .col .b.muted { background: var(--panel-2); }
.chart .col .lab { font-size: 11px; color: var(--text-dim); }

/* donut */
.donut { width: 150px; height: 150px; border-radius: 50%; display:flex; align-items:center; justify-content:center; position:relative; }
.donut::after { content:''; position:absolute; width: 96px; height:96px; background: var(--panel); border-radius:50%; }
.donut .mid { position:relative; z-index:2; text-align:center; }
.donut .mid b { font-family:'Barlow Condensed',sans-serif; font-size:28px; display:block; }
.donut .mid small { color: var(--text-dim); font-size:11.5px; }

/* list rows */
.lrow { display:flex; align-items:center; gap:12px; padding: 12px 0; border-bottom:1px solid var(--line); }
.lrow:last-child { border-bottom:none; }
.lrow .ic-box { width:38px; height:38px; border-radius:9px; background:var(--panel-2); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--blue); flex:0 0 38px; }
.lrow .body { flex:1; min-width:0; }
.lrow .body b { font-weight:600; font-size:14px; }
.lrow .body small { display:block; color:var(--text-dim); font-size:12.5px; }
.lrow .amt { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:17px; }

.section-title { font-family:'Barlow Condensed',sans-serif; font-size: 15px; letter-spacing:1px; text-transform:uppercase; color: var(--text-dim); margin: 26px 0 12px; }

.mt { margin-top: 16px; }
.flex { display:flex; align-items:center; gap:10px; }
.muted { color: var(--text-dim); }
.right { text-align:right; }

@media (max-width: 880px) {
  .sidebar { display:none; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .g-2, .g-2b, .g-3 { grid-template-columns: 1fr; }
}
/* ---------- Demo switcher (cross-demo nav, recordable / croppable) ---------- */
.demo-switcher{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:rgba(13,22,34,.93);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 14px;box-shadow:0 12px 34px rgba(0,0,0,.45);backdrop-filter:blur(10px);font-size:13.5px;z-index:99;max-width:94vw;}
.demo-switcher .lbl{color:var(--text-faint);font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-size:11px;margin-right:6px;white-space:nowrap;}
.demo-switcher a{color:var(--text-dim);text-decoration:none;font-weight:500;padding:7px 13px;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s;}
.demo-switcher a:hover{background:var(--panel-2);color:var(--text);}
.demo-switcher a.active{background:var(--blue);color:var(--on-accent);font-weight:700;}
.demo-switcher .sep{width:1px;height:22px;background:var(--line);margin:0 4px;}
.demo-switcher .book{background:transparent;border:1px solid var(--blue);color:var(--blue);}
.demo-switcher .book:hover{background:var(--blue);color:var(--on-accent);}
@media (max-width:880px){.demo-switcher{display:none;}}

/* ============================================================
   Theme schemes — swap the brand accent to preview other looks.
   Applied via data-theme on <html> by /assets/js/ai-demos-theme.js
   ============================================================ */
[data-theme="emerald"]{
  --blue:#10b981; --blue-dim:#0b7a5e; --blue-l:#5eead4;
  --blue-soft:rgba(16,185,129,.06); --blue-14:rgba(16,185,129,.15); --on-accent:#04140e;
}
[data-theme="violet"]{
  --blue:#9a8cff; --blue-dim:#6d5bd0; --blue-l:#c4b5fd;
  --blue-soft:rgba(154,140,255,.06); --blue-14:rgba(154,140,255,.16); --on-accent:#100a26;
}
[data-theme="amber"]{
  --blue:#f59e0b; --blue-dim:#b26f06; --blue-l:#fcd34d;
  --blue-soft:rgba(245,158,11,.06); --blue-14:rgba(245,158,11,.15); --on-accent:#1c1200;
}

/* ---------- Theme switcher control ---------- */
.theme-switch{position:fixed;left:18px;bottom:18px;z-index:100;display:flex;align-items:center;gap:11px;background:var(--panel-2);border:1.5px solid var(--blue);border-radius:999px;padding:9px 16px;box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 0 4px var(--blue-14);backdrop-filter:blur(10px);}
.theme-switch .ts-lbl{color:var(--blue);font-weight:700;letter-spacing:.7px;text-transform:uppercase;font-size:11.5px;font-family:'Barlow',sans-serif;white-space:nowrap;}
.theme-switch .ts-dots{display:flex;gap:8px;}
.theme-switch .ts-dot{width:20px;height:20px;border-radius:50%;border:2px solid transparent;background:var(--sw);cursor:pointer;padding:0;transition:transform .12s ease,box-shadow .12s ease;}
.theme-switch .ts-dot:hover{transform:scale(1.14);}
.theme-switch .ts-dot.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.16);}
.theme-switch .ts-sep{width:1px;height:20px;background:var(--line);}
.theme-switch .ts-mode{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text-dim);cursor:pointer;padding:0;transition:color .12s ease,border-color .12s ease;}
.theme-switch .ts-mode:hover{color:var(--text);border-color:var(--blue);}
.theme-switch .ts-mode svg{width:15px;height:15px;display:block;}
.theme-switch .ts-wand{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text-dim);cursor:pointer;padding:0;transition:color .12s ease,border-color .12s ease,background .12s ease;}
.theme-switch .ts-wand:hover{color:var(--blue);border-color:var(--blue);}
.theme-switch .ts-wand.on{background:var(--blue);border-color:var(--blue);color:var(--on-accent);}
.theme-switch .ts-wand svg{width:15px;height:15px;display:block;}

/* brand-match popover */
.ts-pop{position:absolute;left:0;bottom:calc(100% + 12px);width:270px;max-width:82vw;background:var(--navy-2);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 18px 44px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .15s ease,transform .15s ease,visibility .15s;}
.ts-pop.is-open{opacity:1;visibility:visible;transform:translateY(0);}
.ts-pop-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;color:var(--text);letter-spacing:.3px;}
.ts-pop-sub{font-size:12px;color:var(--text-dim);margin:3px 0 12px;line-height:1.4;}
.ts-pop-form{display:flex;gap:6px;}
.ts-pop-input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--text);font-size:13px;font-family:'Barlow',sans-serif;}
.ts-pop-input:focus{outline:none;border-color:var(--blue);}
.ts-pop-input::placeholder{color:var(--text-faint);}
.ts-pop-go{flex:0 0 auto;background:var(--blue);color:var(--on-accent);border:none;border-radius:9px;padding:0 14px;font-weight:700;font-size:13px;font-family:'Barlow',sans-serif;cursor:pointer;transition:opacity .12s ease;}
.ts-pop-go:hover{opacity:.9;}
.ts-pop-go.is-loading{opacity:.6;cursor:progress;}
.ts-pop-msg{margin-top:10px;font-size:12px;line-height:1.4;color:var(--text-dim);}
.ts-pop-msg--ok{color:var(--green);}
.ts-pop-msg--err{color:var(--red);}
.ts-pop-msg--load{color:var(--blue);}
.ts-pop-reset{margin-top:12px;width:100%;background:transparent;border:1px solid var(--line);color:var(--text-dim);border-radius:9px;padding:8px;font-size:12px;font-weight:600;font-family:'Barlow',sans-serif;cursor:pointer;transition:color .12s ease,border-color .12s ease;}
.ts-pop-reset:hover{color:var(--text);border-color:var(--blue);}

/* ---- brand-match logo swap ---- */
.brand .logo.logo--img{overflow:hidden;display:flex;align-items:center;justify-content:center;}
.brand .logo.logo--img img{width:100%;height:100%;object-fit:contain;display:block;}

/* legibility chip: white by default; dark tile when the logo art is white/light */
.brand--logo .logo-mark,
.brand--logo .logo.logo--img{background:#fff;border-radius:7px;}
.brand--logo.brand--chipdark .logo-mark,
.brand--logo.brand--chipdark .logo.logo--img{background:#0d1622;}
.brand--logo:not(.brand--wide) .logo.logo--img{padding:3px;}

/* wide wordmark: show it full-width and hide the placeholder company name */
.brand--wide .name{display:none;}
.brand--wide .logo-mark,
.brand--wide .logo.logo--img{width:auto !important;height:34px !important;max-width:186px;padding:4px 9px;box-sizing:border-box;overflow:hidden;}
.brand--wide .logo.logo--img img{width:auto;height:100%;max-width:100%;object-fit:contain;}
.topnav .brand--wide .logo-mark{height:34px;}

@media (max-width:880px){.theme-switch{left:50%;transform:translateX(-50%);bottom:18px;}.ts-pop{left:50%;transform:translateX(-50%) translateY(8px);}.ts-pop.is-open{transform:translateX(-50%) translateY(0);}}

/* ---------- Light mode (composes with any accent) ---------- */
[data-mode="light"]{
  --navy:#eef1f6; --navy-2:#ffffff; --panel:#ffffff; --panel-2:#e9eef5; --line:#dbe2ec;
  --text:#14202f; --text-dim:#5a6980; --text-faint:#8492a4;
  --shadow:0 10px 30px rgba(30,50,90,.10);
  --hi-bg-1:#eaf2ff; --hi-bg-2:#ffffff; --hi-border:#cfe0f7;
  --nav-glass:rgba(255,255,255,.85);
}
[data-mode="light"] .theme-switch{background:rgba(255,255,255,.9);}
[data-mode="light"] .demo-switcher{background:rgba(255,255,255,.9);}