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

/* ===================================================================
   AlphaPilot — SaaS Boutique (Light) theme
   ui-ux-pro-max: High-Tech Boutique SaaS. Warm off-white canvas,
   electric-blue gradient CTAs, soft-shadow rounded cards, Inter body,
   JetBrains Mono for numeric/price data.
   =================================================================== */

:root{
  --bg:#FAFAFA;--panel:#FFFFFF;--panel2:#F5F7FA;--panel3:#EEF2F8;
  --border:#E2E8F0;--border-strong:#CBD5E1;
  --text:#0F172A;--muted:#64748B;--faint:#94A3B8;
  --accent:#0052FF;--accent2:#4D7CFF;--on-accent:#FFFFFF;
  --accent-tint:#EAF0FF;
  --good:#16A34A;--goodbg:#E8F8EE;--good-text:#15803D;
  --amber:#D97706;--amberbg:#FEF3E0;--amber-text:#B45309;
  --danger:#DC2626;--dangerbg:#FDEAEA;--danger-text:#B91C1C;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-card:0 4px 16px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.06);
  --line:var(--border);
  --chat-border:var(--border);--chat-muted:var(--muted);--chat-blue:var(--accent);--chat-bg:var(--bg);
}
*{box-sizing:border-box}
html,body{
  height:100vh;overflow:hidden;margin:0;padding:0;
  background:var(--bg);color:var(--text);
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.5;
}
body{background:var(--bg)!important}
h1,h2,h3{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-.015em;color:var(--text)}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background:var(--panel);border:1px solid var(--border);color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
::placeholder{color:var(--faint)}
.mono,strong[id],td:has(> .mono){font-family:'JetBrains Mono',monospace}

/* ---- shell ---- */
.ai-shell{height:100vh;min-height:0;display:flex}
.ai-sidebar{
  height:100vh;width:236px;background:var(--panel);border-right:1px solid var(--border);
  backdrop-filter:none;box-shadow:none;padding:18px 14px;position:sticky;top:0;
  display:flex;flex-direction:column
}
.ai-brand{border-bottom:1px solid var(--border);padding:4px 8px 18px}
.ai-logo,.home-logo,.auth-logo{
  border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:var(--on-accent);box-shadow:0 6px 16px rgba(0,82,255,.28)
}
.ai-brand strong,.home-brand strong,.auth-brand strong{color:var(--text)}
.ai-brand span,.home-brand span,.auth-brand span{color:var(--muted)}
.sidebar-section-title{color:var(--faint)}
.ai-nav{border-radius:10px;color:var(--muted);transition:background .18s,color .18s}
.ai-nav:hover{background:var(--panel2);color:var(--text);transform:none}
.ai-nav.active{
  background:var(--accent-tint);color:var(--accent);font-weight:600;box-shadow:none;
  border-left:2px solid var(--accent)
}
.ai-nav.active::before{display:none}
.settings-subnav{border-left-color:var(--border)}
.settings-subnav .subpage-link.active{background:var(--accent-tint);color:var(--accent)}
.sidebar-collapse-btn{color:var(--muted);border-color:var(--border)}
.mode-pill{border-radius:999px;background:var(--accent-tint);border:1px solid var(--border);color:var(--accent)}
.dot{background:var(--good)}
.dot.grey{background:var(--faint)}
.ai-sidebar-foot small{color:var(--faint)}

.ai-main{display:flex;flex-direction:column;height:100vh;overflow:hidden;padding:20px 26px;background:var(--bg)}
.ai-topbar{flex:0 0 auto;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:14px}
.ai-topbar h1{font-size:24px;letter-spacing:-.02em;color:var(--text)}
.ai-topbar p{color:var(--muted)}
.connection-badge{border:1px solid var(--border);background:var(--panel);color:var(--muted);border-radius:12px;box-shadow:var(--shadow-sm)}
.ghost-btn,.primary-btn{border-radius:10px;transition:filter .15s,box-shadow .15s,border-color .15s;min-height:38px}
.ghost-btn{border:1px solid var(--border);background:var(--panel);color:var(--text);box-shadow:var(--shadow-sm)}
.ghost-btn:hover:not(:disabled){border-color:var(--accent);transform:none}
.ghost-btn:disabled{opacity:.4}
.primary-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));border:1px solid transparent;color:var(--on-accent);font-weight:600;box-shadow:0 6px 16px rgba(0,82,255,.22)}
.primary-btn:hover{filter:brightness(1.05)}
.text-link{color:var(--accent);background:none;border:0;cursor:pointer;font-weight:500}
.text-link:hover{text-decoration:underline}

/* ---- surfaces ---- */
.panel,.metric-card,.hero-card,.modal,.chat-side,.chat-card,.report-summary-card,
.home-card,.auth-card,.email-verify-box,.tax-grid .tax-item,.dashboard-card{
  border-radius:16px;box-shadow:var(--shadow-card);background:var(--panel);border:1px solid var(--border)
}
.hero-card{background:linear-gradient(160deg,#fff 0%,var(--accent-tint) 100%)}
.eyebrow{color:var(--accent)}
.panel-head,.dashboard-card-head{border-bottom:1px solid var(--border)}
.panel-head h3,.dashboard-card-head h3{color:var(--text)}
.panel-head p,.dashboard-card-head p{color:var(--muted)}
.status-chip{border-radius:999px;background:var(--goodbg);color:var(--good-text)}
.status-chip.neutral-chip{background:var(--panel2);color:var(--muted)}
.status-chip.danger-chip{background:var(--dangerbg);color:var(--danger-text)}
.metric-card span{color:var(--muted)}
.metric-card strong,.big-number{color:var(--text);font-weight:700;font-family:'JetBrains Mono',monospace}
.metric-card small{color:var(--faint)}
.status-good{color:var(--good-text)}
.muted{color:var(--muted)}
.grid.four,.grid.two,.grid.three{gap:12px}

/* ---- tables ---- */
table,.report-table,.audit-table{background:transparent;color:var(--text)}
th,td,.report-table th,.report-table td,.audit-table th,.audit-table td{border-bottom:1px solid var(--border)}
th,.report-table th,.audit-table th{background:var(--panel2);color:var(--muted);font-weight:600}
.table-panel,.report-body{background:var(--panel)}
td{font-family:'JetBrains Mono',monospace;font-size:12.5px}
td:first-child{font-family:'Inter',sans-serif;font-size:13px}

/* ---- badges / signals ---- */
.signal-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm)}
.signal-badge{background:var(--accent-tint);color:var(--accent)}
.signal-meta div{background:var(--panel2);border-radius:10px}
.signal-meta small{color:var(--faint)}
.summary-tile{background:var(--panel2);border-radius:10px}
.summary-tile.buy strong{color:var(--good-text)}
.summary-tile.sell strong{color:var(--danger-text)}
.summary-tile.watch strong{color:var(--amber-text)}
.audit-result,.verification-badge,.envbadge,.delayed-badge{border-radius:999px}
.audit-result.success,.verification-badge.verified{background:var(--goodbg);color:var(--good-text)}
.audit-result.failure{background:var(--dangerbg);color:var(--danger-text)}
.verification-badge.verify{background:var(--amberbg);color:var(--amber-text)}
.delayed-badge{background:var(--amberbg);color:var(--amber-text);border:1px solid var(--border)}
.amber-dot{background:var(--amber)}
.pos-number{color:var(--good-text)}
.neg-number{color:var(--danger-text)}
.neutral-number{color:var(--muted)}
.audit-icon{background:var(--panel2);color:var(--muted)}
.audit-icon.security{background:var(--goodbg);color:var(--good-text)}
.audit-icon.positive{background:var(--goodbg);color:var(--good-text)}
.audit-icon.failure,.audit-icon.trade-sell{background:var(--dangerbg);color:var(--danger-text)}
.audit-category{color:var(--text)}

/* ---- allocation / bars ---- */
.allocation-bar{background:var(--panel2);border-radius:999px}
.allocation-bar span:nth-child(1){background:var(--accent)}
.allocation-bar span:nth-child(2){background:var(--accent2)}
.allocation-bar span:nth-child(3){background:#A6C1FF}
.allocation-bar .cash-bar{background:var(--border)}
.swatch.a{background:var(--accent)}.swatch.b{background:var(--accent2)}
.swatch.c{background:#A6C1FF}.swatch.d{background:var(--border)}
.legend span{color:var(--muted)}
.allocation-note,.settings-help,.otp-note,.report-note,.home-note{background:var(--panel2);border:1px solid var(--border);color:var(--muted);border-radius:10px}
.performance-bar{background:var(--panel2);border-radius:999px}
.performance-bar span{background:var(--good)}

/* ---- forms / settings ---- */
.settings-card,.settings-section{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card)}
.settings-section-icon{background:var(--accent-tint);color:var(--accent);border-radius:10px}
.money-input,.percent-input{background:var(--panel2);border:1px solid var(--border);border-radius:10px}
.money-input input,.percent-input input{background:transparent;border:0}
.settings-detail-list div{border-bottom:1px solid var(--border)}
.settings-kpi-strip div{background:var(--panel2);border-radius:10px}
.settings-live-chip{background:var(--panel2);border:1px solid var(--border);border-radius:999px;color:var(--muted)}
.connection-box,.instrument-selected,.instrument-search-results,.sandbox-test-selector,
.universe-results,.universe-saved,.watchlist-search-results{background:var(--panel2);border:1px solid var(--border);border-radius:10px}
.universe-count-pill{background:var(--accent-tint);color:var(--accent);border-radius:999px}
.sandbox-automation-box{background:var(--panel2);border:1px solid var(--border);border-radius:10px}
.env-warning{background:var(--panel2);border:1px solid var(--border);color:var(--muted);border-radius:10px}
.environment-toggle label{border:1px solid var(--border);border-radius:10px;background:var(--panel)}
.environment-toggle label:has(input:checked){border-color:var(--accent);background:var(--accent-tint)}

/* ---- backtest ---- */
.backtest-list span{border:1px solid var(--border);background:var(--panel2);border-radius:10px;color:var(--muted)}
.backtest-list span.done{color:var(--good-text);border-color:var(--good)}
.backtest-note{color:var(--muted)}
.instrument-picker{background:var(--panel2);border:1px solid var(--border);border-radius:10px}

/* ---- modals ---- */
.modal-backdrop{background:rgba(15,23,42,.45)}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:0 20px 48px rgba(15,23,42,.18)}
.modal-close{color:var(--muted)}
.duplicate-modal-eyebrow{color:var(--accent)}

/* ---- home / auth ---- */
.home,.auth-page{background:var(--bg)}
.home h1 span{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.home p,.home-brand span{color:var(--muted)}
.home-feature{border:1px solid var(--border);border-radius:14px;background:var(--panel);box-shadow:var(--shadow-sm)}
.auth-form label{color:var(--muted)}
.auth-form input{border-radius:10px}
.auth-error{background:var(--dangerbg);color:var(--danger-text);border:1px solid var(--border)}
.auth-success{background:var(--goodbg);color:var(--good-text);border:1px solid var(--border)}
.auth-link{color:var(--accent)}
.auth-foot,.home-foot{color:var(--faint)}
.password-hint,.resend-note{color:var(--faint)}

/* ---- chat ---- */
.chat-hero h2,.chat-side h3,.chat-card-head strong{color:var(--text)}
.chat-hero p,.chat-side p,.chat-card-head small{color:var(--muted)}
.chat-status{background:var(--panel);border:1px solid var(--border);color:var(--muted);box-shadow:var(--shadow-sm)}
.chat-status .dot{background:var(--good);box-shadow:none}
.prompt-btn{background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:10px;box-shadow:var(--shadow-sm)}
.prompt-btn:hover{border-color:var(--accent);background:var(--accent-tint)}
.chat-messages{background:var(--panel2)}
.chat-empty{color:var(--muted)}
.chat-empty .ai-orb{background:var(--accent-tint);color:var(--accent);border-radius:12px}
.chat-empty h3{color:var(--text)}
.bubble{background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:14px;box-shadow:var(--shadow-sm)}
.msg.user .bubble{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff}
.msg-meta{color:var(--faint)}
.composer{background:var(--panel);border-top:1px solid var(--border)}
.composer textarea{background:var(--panel2);border:1px solid var(--border);border-radius:12px;color:var(--text)}
.composer textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.send-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:10px}
.send-btn:disabled{opacity:.5}
.composer-note{color:var(--faint)}
.typing{background:var(--panel);border:1px solid var(--border);border-radius:12px}
.typing span{background:var(--muted)}

/* ---- reports ---- */
.reports-intro h2{color:var(--text)}
.reports-intro p{color:var(--muted)}
.report-picker-wrap select,.report-date-controls input,.report-fy-controls select,.audit-select,.audit-date-field input{
  background:var(--panel);border:1px solid var(--border);border-radius:10px;color:var(--text)
}
.report-summary-card span{color:var(--muted)}
.report-summary-card strong{color:var(--text);font-family:'JetBrains Mono',monospace}
.report-disclaimer{background:var(--amberbg);border:1px solid var(--border)}
.report-disclaimer p{color:var(--amber-text)}
.tax-card{border-left:3px solid var(--accent)}
.tax-grid .tax-item span{color:var(--muted)}
.risk-row{border-bottom:1px solid var(--border)}
.risk-row span{color:var(--muted)}

/* ---- audit ---- */
.audit-toolbar select,.audit-toolbar .ghost-btn{background:var(--panel);border:1px solid var(--border);color:var(--text)}
.audit-date-heading{color:var(--faint);border-bottom:1px solid var(--border)}
.audit-event{border-bottom:1px solid var(--border)}
.audit-event-top h3{color:var(--text)}
.audit-detail-grid>div{border:1px solid var(--border);background:var(--panel2)}
.audit-detail-grid span{color:var(--muted)}
.audit-detail-summary{background:var(--panel2);border-radius:10px}
.audit-technical{border-style:dashed!important;border-color:var(--border)}
.audit-count{color:var(--faint)}
.text-btn{color:var(--accent)}
.empty-cell{color:var(--faint)}

/* =================== structural layout: minimize scroll, don't force-eliminate it =================== */

/* Neutralize the legacy floating/fixed pill-sidebar variant — it fights the flex shell below
   and is what was causing the blank gap between sidebar and content. */
.ai-sidebar{position:static!important;left:auto!important;top:auto!important;bottom:auto!important;
  border-radius:0!important;backdrop-filter:none!important}
.ai-main{margin-left:0!important;max-width:none}
html.sidebar-collapsed .ai-brand-copy,html.sidebar-collapsed .sidebar-section-title,
html.sidebar-collapsed .nav-label,html.sidebar-collapsed .sidebar-group-toggle,
html.sidebar-collapsed .collapse-label,html.sidebar-collapsed .ai-sidebar-foot .mode-label,
html.sidebar-collapsed .ai-sidebar-foot small{opacity:1!important;width:auto!important}

.view{flex:1 1 auto;min-height:0}
.view:not(.hidden){display:flex;flex-direction:column}
.ai-main{overflow-y:auto}

/* Overview: keep the 3-column arrangement, but size rows to content instead of
   force-stretching every card to an equal third of the viewport. */
#view-overview .overview-dashboard{
  display:grid;
  grid-template-columns:1.05fr 1.05fr .9fr;
  grid-auto-rows:minmax(200px,auto);
  gap:14px
}
#view-overview .dashboard-card{overflow:hidden;display:flex;flex-direction:column;max-height:340px}
#view-overview .indices-dashboard-card{grid-column:1;grid-row:1}
#view-overview .portfolio-dashboard-card{grid-column:1;grid-row:2}
#view-overview .signals-dashboard-card{grid-column:1;grid-row:3}
#view-overview .watchlist-dashboard-card{grid-column:2;grid-row:1}
#view-overview .overview-side-stack{grid-column:3;grid-row:1/3;display:grid;grid-template-rows:1fr 1fr;gap:14px}
#view-overview .recent-orders-card{grid-column:2;grid-row:2}
#view-overview .performance-card{grid-column:2;grid-row:3}
#view-overview .ai-dashboard-card{grid-column:3;grid-row:3}
#view-overview .dashboard-card > *:last-child{overflow:auto;min-height:0}
#view-overview .indices-grid,#view-overview .opportunity-list,#view-overview .recent-orders-list,
#view-overview .watchlist-table-wrap,#view-overview .market-status-list{overflow:auto}

/* Portfolio / Signals / About: normal flow, page scrolls only if content genuinely overflows */
#view-portfolio,#view-signals,#view-about{gap:12px}
#view-portfolio .sandbox-orders-panel{max-height:34vh;overflow:auto}
#view-signals .signal-grid{align-content:start}

/* Settings already groups cards two-per-row (settings-config-row / settings-main-grid /
   settings-bottom-grid) — let those rows flow naturally instead of force-splitting height. */
#view-settings .settings-v26{display:flex;flex-direction:column;gap:12px}

/* Backtest: genuinely too much content for one screen (controls + checklist + full Phase 2
   panel), so real tabs instead of forced compression — same pattern as Audit's pagination. */
#view-backtest .tab-radio{position:absolute;opacity:0;pointer-events:none}
#view-backtest .tab-bar{flex:0 0 auto;display:flex;gap:6px;margin-bottom:10px;border-bottom:1px solid var(--border)}
#view-backtest .tab-bar label{padding:8px 14px;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
#view-backtest .tab-pane{display:none;flex-direction:column;gap:10px}
#btTabBasic:checked ~ .tab-bar label[for="btTabBasic"],
#btTabPhase2:checked ~ .tab-bar label[for="btTabPhase2"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
#btTabBasic:checked ~ #btPaneBasic{display:flex}
#btTabPhase2:checked ~ #btPanePhase2{display:flex}

/* Audit / Reports already have their own pagination UI — don't fight it with an artificial cap */
.chat-card,.chat-side{max-height:calc(100vh - 116px)}

@media(max-width:1180px){
  #view-overview .overview-dashboard{grid-template-columns:1fr 1fr}
  #view-overview .overview-side-stack{grid-column:1/3;grid-row:auto;grid-template-columns:1fr 1fr;grid-template-rows:1fr}
}