/* RACV CES EV Design Studio: shared design system.
   Loaded by BOTH the main application and the sandboxed Design Lab so the two
   look and behave as one product. Palette from the supplied RACV CES Manual
   Generator 1.9 (navy, yellow, blue, cyan, stone). */
:root{
  --navy:#001657;--navy-2:#0b2470;--blue:#0067f6;--blue-2:#0052c4;--yellow:#f8db00;--cyan:#43e6eb;
  --ink:#0e1430;--muted:#5d6679;--faint:#8a93a6;--line:#d5ddeb;--line-2:#e6ebf3;
  --paper:#fff;--stone:#f3f2ec;--wash:#f5f8ff;--tint:#edf3ff;--tint-2:#e3ecff;
  --ok:#16825b;--ok-bg:#e6f4ed;--warn:#9c5b00;--warn-bg:#fff3de;--err:#c2261a;--err-bg:#fdecea;
  --data:#008d99;--meter:#ac6500;
  --radius:12px;--radius-sm:7px;
  --shadow:0 1px 2px rgba(0,22,87,.05),0 6px 24px rgba(0,22,87,.06);
  --shadow-lg:0 16px 48px rgba(0,22,87,.18);
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* White-label hooks: set at runtime from each company's branding. */
  --brand-primary:var(--navy);--brand-accent:var(--blue);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stone);color:var(--ink);font:13px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--blue);outline-offset:2px}
a{color:var(--brand-accent);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--navy);margin:0;line-height:1.2}
h1{font-size:26px;letter-spacing:-.6px}
h2{font-size:22px;letter-spacing:-.5px}
h3{font-size:15px;letter-spacing:-.1px}
h4{font-size:12px}
p{margin:6px 0 12px}
small{font-size:11px}
.muted{color:var(--muted)}.sm{font-size:12px}.mono{font-family:var(--mono);font-size:12px}
.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:700;text-transform:uppercase;color:var(--muted);margin:0 0 6px}

/* ── Header (navy bar, yellow rule) ─────────────────────────────────────── */
.app-header,.lab-header{background:var(--navy);color:var(--paper);border-bottom:4px solid var(--yellow);
  padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.brand-block,.lab-brand{display:flex;gap:20px;align-items:center;min-width:0;color:inherit;text-decoration:none}
.brand-block:hover{text-decoration:none}
.brand-block img,.lab-brand img{width:170px;max-height:44px;object-fit:contain;object-position:left center}
.brand-block .brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;background:var(--brand-accent);color:#fff;font-weight:700;font-size:18px}
.brand-title,.lab-brand>div{border-inline-start:1px solid #4a6094;padding-inline-start:20px;display:grid;gap:2px;min-width:0}
.brand-title strong,.lab-brand strong{font-size:21px;letter-spacing:-.5px;line-height:1.1;white-space:nowrap}
.brand-title span,.lab-brand span{font-size:9px;letter-spacing:1.6px;color:var(--cyan);font-weight:700;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-actions,.lab-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.app-header .btn,.lab-header .lab-btn{color:var(--paper);border-color:#486096;background:transparent}
.app-header .btn:hover,.lab-header .lab-btn:hover{background:rgba(255,255,255,.1);border-color:#8fa3cf}
.app-header .btn-primary,.lab-header .lab-btn.primary{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.app-header .btn-primary:hover,.lab-header .lab-btn.primary:hover{background:#ffe84d;border-color:#ffe84d}

/* ── Tab strip (two-line tabs, blue underline) ──────────────────────────── */
.tabstrip,.lab-tabs{display:flex;background:var(--paper);border-bottom:1px solid var(--line);padding-inline:26px;gap:2px;overflow-x:auto;scrollbar-width:thin}
.tab,.lab-tab{flex:1 1 0;min-width:140px;padding:13px 16px 11px;border:0;border-bottom:3px solid transparent;background:none;text-align:start;
  display:grid;gap:1px;color:var(--muted);text-decoration:none;border-radius:0}
.tab strong,.lab-tab strong{font-size:13px;font-weight:700;white-space:nowrap}
.tab span,.lab-tab span{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab:hover,.lab-tab:hover{background:var(--wash);color:var(--navy);text-decoration:none}
.tab.active,.lab-tab.active{color:var(--navy);border-bottom-color:var(--blue);background:#f3f7ff}
.tab .tab-num{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--line-2);color:var(--muted);font-size:10px;font-weight:700;margin-inline-end:6px}
.tab.active .tab-num{background:var(--blue);color:#fff}
.tab.done .tab-num{background:var(--ok);color:#fff}

/* ── Notice strip ───────────────────────────────────────────────────────── */
.notice,.lab-notice{padding:9px 26px;color:#34506f;background:#e8f0fb;font-size:12px;border-bottom:1px solid #d6e3f5}
.notice.error,.lab-notice.error{background:var(--err-bg);color:var(--err);border-color:#f1d0c9}
.notice.warn{background:var(--warn-bg);color:var(--warn);border-color:#f0dcb4}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn,.lab-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--paper);color:var(--navy);
  padding:7px 12px;border-radius:6px;font-size:12px;font-weight:600;line-height:1.35;white-space:nowrap;text-decoration:none;
  transition:background .12s,border-color .12s,color .12s}
.btn:hover,.lab-btn:hover{border-color:var(--blue);background:var(--tint);text-decoration:none}
.btn-primary,.lab-btn.primary{background:var(--brand-primary);color:var(--paper);border-color:var(--brand-primary)}
.btn-primary:hover,.lab-btn.primary:hover{background:var(--brand-accent);border-color:var(--brand-accent);color:#fff}
.btn.active,.btn.on,.lab-btn.active{background:var(--tint-2);border-color:var(--blue);color:var(--blue-2);box-shadow:inset 0 0 0 1px var(--blue)}
.btn.danger,.lab-btn.danger{color:var(--err);border-color:#efc4be}
.btn.danger:hover,.lab-btn.danger:hover{background:var(--err-bg);border-color:var(--err)}
.btn-sm{padding:5px 9px;font-size:11px}
.btn-lg{padding:10px 18px;font-size:13px}
.btn-block{width:100%}
.linkbtn{background:none;border:0;padding:0;color:var(--brand-accent);font-weight:600;cursor:pointer;font-size:12px}
.linkbtn:hover{text-decoration:underline}
.iconbtn{background:none;border:1px solid transparent;border-radius:6px;padding:4px 7px;color:var(--muted);cursor:pointer;font-size:11px;font-weight:600;line-height:1.2}
.iconbtn:hover{border-color:var(--line);color:var(--err);background:var(--paper)}

/* ── Panels / cards ─────────────────────────────────────────────────────── */
.card,.lab-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow)}
.card>h3:first-child,.lab-panel>h3:first-child{margin-bottom:12px}
.panel-title,.lab-panel-title{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.panel-title h3,.lab-panel-title h3{margin:0}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.field,.lab-field{display:grid;gap:5px;margin-bottom:12px;min-width:0}
.field-label,.lab-field>span{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.3px;text-transform:uppercase}
.field input,.field select,.field textarea,.lab-field input,.lab-field select,input.linkbox,.combo-input{
  width:100%;min-height:36px;border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:7px 10px;color:var(--ink);font-size:13px}
.field textarea{min-height:96px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus,.lab-field input:focus,.lab-field select:focus,.combo-input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(0,103,246,.14)}
.field input[type=range],.lab-field input[type=range]{padding:0;min-height:26px;accent-color:var(--blue);border:0;box-shadow:none}
.field input[type=checkbox]{width:auto;min-height:0}
.field-hint,.lab-hint{font-size:11px;color:var(--faint);line-height:1.4}

/* ── KPI tiles ──────────────────────────────────────────────────────────── */
.kpis,.lab-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi,.lab-kpi{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--line);padding:13px 14px;border-radius:8px;display:flex;flex-direction:column;gap:3px;min-width:0}
.kpi .kpi-l,.lab-kpi>span{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.kpi .kpi-v,.lab-kpi strong{font-size:22px;font-weight:600;letter-spacing:-.6px;color:var(--navy);line-height:1.15}
.lab-kpi small,.kpi small{font-size:11px;color:var(--muted)}
.kpi.blue,.lab-kpi.blue{border-top-color:var(--blue)}.kpi.green,.lab-kpi.green{border-top-color:var(--ok)}
.kpi.warn,.lab-kpi.warn{border-top-color:#e0a100}.kpi.bad,.lab-kpi.bad{border-top-color:var(--err)}

/* ── Chips, badges, tags ────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;background:var(--tint);color:var(--navy);border-radius:5px;padding:3px 7px;white-space:nowrap}
.chip.warn{background:var(--err-bg);color:var(--err)}.chip.man,.chip.est{background:var(--warn-bg);color:var(--warn)}
.chip.lim{background:#e4f2ff;color:#15568f}.chip.exist{background:#eef1f6;color:#475569}.chip.ok{background:var(--ok-bg);color:var(--ok)}
.badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:#eef1f6;color:var(--muted)}
.badge.s-draft{background:var(--warn-bg);color:var(--warn)}.badge.s-issued{background:var(--tint-2);color:var(--blue-2)}
.badge.s-won{background:var(--ok-bg);color:var(--ok)}.badge.s-lost{background:var(--err-bg);color:var(--err)}.badge.s-archived{background:#eef1f6;color:var(--muted)}
.tag,.lab-sim-tag{display:inline-block;letter-spacing:1.2px;font-size:9px;font-weight:700;border:1px solid #99a8c4;color:var(--navy);padding:5px 8px;border-radius:4px;white-space:nowrap}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay,.lab-modal-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(0,22,87,.45)}
.modal-card,.lab-modal{background:var(--paper);border-radius:14px;width:min(460px,100%);box-shadow:var(--shadow-lg);border-top:5px solid var(--yellow);max-height:calc(100vh - 40px);overflow:auto}
.lab-modal{padding:24px}
.lab-modal h3{font-size:17px;line-height:1.4}
.lab-modal-actions,.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.lab-dialog-input{width:100%;padding:11px;border:1px solid var(--line);border-radius:7px;font-size:16px;margin-top:10px}

@media(max-width:820px){
  .app-header,.lab-header{padding:12px 16px;flex-wrap:wrap}
  .brand-block img,.lab-brand img{width:128px}
  .brand-title,.lab-brand>div{padding-inline-start:14px}
  .brand-title strong,.lab-brand strong{font-size:18px}
  .tabstrip,.lab-tabs{padding-inline:8px}
  .tab,.lab-tab{min-width:120px;padding:11px 12px 9px}
  .notice,.lab-notice{padding:9px 16px}
  .card,.lab-panel{padding:16px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}