/*
 * StockSaku Friendly UI
 * Light design layer based on the approved ExpenseKu reference.
 * Loaded last so existing module behavior remains unchanged.
 */
:root {
  color-scheme: light;
  --bg: #fff9ed;
  --bg-2: #fffdf7;
  --panel: #ffffff;
  --panel-2: #f4fbf6;
  --line: #e7e1d4;
  --text: #14231e;
  --muted: #6e786f;
  --cyan: #078c63;
  --cyan-2: #10b981;
  --blue: #3284d6;
  --green: #0b9b68;
  --red: #e25757;
  --amber: #e99a13;
  --shadow: 0 12px 34px rgba(40, 74, 58, .08);
  --radius: 18px;
}

body, .dashboard, .app-loading {
  color: var(--text);
  background: var(--bg);
}
::selection { color: #fff; background: var(--cyan); }
button, input, select, textarea { accent-color: var(--cyan); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(112, 87, 238, .18);
  outline-offset: 2px;
}

/* Shared surfaces */
.surface-card, .chart-card, .info-card, .panel, .metric-card,
.feature-card, .paper-card, .ai-agent-result,
.ai-history-list article, .ai-desk-form {
  color: var(--text);
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.panel, .metric-card, .surface-card, .chart-card,
.info-card, .paper-card { border-radius: var(--radius); }
p, .muted, .card-subtitle { color: var(--muted); }
.btn, .small-btn, .icon-btn { border-color: var(--line); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
  box-shadow: 0 8px 20px rgba(112, 87, 238, .2);
}
.btn-secondary {
  color: var(--cyan);
  background: #f2efff;
  border-color: #ded8ff;
}
.small-btn {
  color: #596277;
  background: #fff;
  box-shadow: 0 3px 12px rgba(50, 42, 105, .05);
}
.small-btn:hover:not(:disabled), .btn-secondary:hover {
  color: #563fd2;
  background: #ebe7ff;
  border-color: #cfc6ff;
}

/* Public pages */
.glass, .site-header { background: rgba(255, 255, 255, .9); }
.header-nav { color: #646d81; }
.ticker-shell {
  color: #edf2ff;
  background: #172039;
  border-color: rgba(255, 255, 255, .08);
}
.hero {
  background:
    radial-gradient(circle at 78% 14%, rgba(112, 87, 238, .12), transparent 30%),
    linear-gradient(180deg, #fbfbfe, #f5f6fb);
}
.hero h1 span, .eyebrow, .feature-card b { color: var(--cyan); }
.section.alt { background: #f0f2f8; border-color: var(--line); }
.feature-card { background: #fff; }
.flow div, .metric-row span {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 6px 20px rgba(50, 42, 105, .06);
}
footer { background: #fff; }

/* Authentication */
.login-panel { background: #f8f9fd; }
.login-box {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.login-box input, .google-btn {
  color: var(--text);
  background: #fafafe;
  border-color: var(--line);
}
.login-box input:focus {
  background: #fff;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(112, 87, 238, .1);
}
.login-visual {
  background:
    radial-gradient(circle at 45% 38%, rgba(112, 87, 238,.2), transparent 36%),
    linear-gradient(145deg, #5f4ed8, #537cf2);
}
.signup-visual {
  background:
    radial-gradient(circle at 45% 38%, rgba(255,255,255,.16), transparent 36%),
    linear-gradient(145deg, #6551dd, #4e8bea);
}
.login-visual h2, .login-visual p { color: #fff; }
.floating-card {
  color: var(--text);
  background: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.45);
}

/* Dashboard shell and navigation */
#dashboard-page .dashboard { background: var(--bg-2); }
.sidebar {
  background: #fff;
  border-color: var(--line);
  box-shadow: 8px 0 28px rgba(50,42,105,.035);
}
.sidebar-head { color: #2e3650; border-color: var(--line); }
.sidebar nav { padding: 13px 10px; }
.side-group-toggle { color: #778095; }
.side-group-toggle:hover,
.side-group.has-active > .side-group-toggle {
  color: var(--cyan);
  background: #f5f2ff;
}
.side-group-caret { color: #9ba2b2; }
.side-submenu { border-color: #e5e1f7; }
.side-item {
  min-height: 38px;
  color: #626c80;
  border-radius: 11px;
}
.side-item:hover, .side-item.active,
.side-item.ready:hover, .side-item.ready.active {
  color: var(--cyan);
  background: #f0edff;
}
.side-item.ready { color: #4b5568; }
.side-item.ready:not(.active) .side-icon::after { color: var(--green); }
.sidebar-user { background: #fafafe; border-color: var(--line); }
.avatar, .brand-mark {
  color: var(--cyan);
  background: #f0edff;
  border-color: #ded8ff;
}
.dash-topbar {
  background: rgba(248,249,253,.9);
  border-color: var(--line);
  box-shadow: 0 5px 22px rgba(50,42,105,.035);
}
.market-open { color: var(--green); background: #e8f8f2; }
.dash-content { padding-top: 26px; }
.module-header h1 {
  color: #20283b;
  font-size: 24px;
  letter-spacing: -.025em;
}
.metric-card strong { color: #20283b; }

/* Inputs and controls */
.search input, .technical-controls input, .inline-form input,
.source-form input, .source-form select, .database-toolbar select,
.database-toolbar input, .category-add-form input,
.news-search-form {
  color: var(--text);
  background: #fff;
  border-color: var(--line);
}
.search input:focus, .technical-controls input:focus,
.inline-form input:focus, .source-form input:focus,
.source-form select:focus, .database-toolbar select:focus,
.database-toolbar input:focus, .category-add-form input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(112,87,238,.1);
}
.status-row, .search-result, .overview-ranked-list > button,
.overview-resource-grid > div, .overview-timeframes button,
.category-registry-item, .news-category-chip {
  color: var(--text);
  background: #f8f8fc;
  border-color: var(--line);
}
.search-result {
  color: #5b43dc;
  background: #f2efff;
  border-color: #ded8ff;
}
.news-category-chip.active {
  color: #fff;
  background: var(--cyan);
  border-color: var(--cyan);
}
.news-list-head { background: #fafafe; }
.accordion-detail-row > td { background: #f8f8fc; }
.clickable-row:hover, .clickable-row:focus,
.news-list-row:hover, .news-list-row:focus,
.overview-ranked-list > button:hover { background: #f4f1ff; }

/* Tables and status */
table { color: var(--text); }
th { color: #778095; background: #fafafe; }
th, td, .news-list-row, .overview-feed > a,
.overview-event-list > button { border-color: var(--line); }
tbody tr:hover { background: #faf9ff; }
.pill.cyan { color: #5a43d3; background: #eeeaff; }
.pill.green { color: #117a5b; background: #e6f7f0; }
.pill.amber { color: #9a6208; background: #fff3da; }
.pill.red { color: #bf3d55; background: #ffe9ed; }
.progress, .overview-resource-grid i,
.paper-allocation-row > div { background: #ececf3; }

/* Financial charts stay dark for candle contrast. */
.dashboard-chart, .overview-tv-chart, .canvas-wrap,
.login-visual canvas, .chart { background: #10192a; }

/* Paper trading and AI controls */
.ai-desk-form input[type="text"], .ai-desk-form input[name="symbol"],
.ai-desk-form select, .ai-desk-form textarea,
.paper-onboarding input, .paper-portfolio input {
  color: var(--text);
  background: #fafafe;
  border-color: var(--line);
}
.ai-desk-form input:focus, .ai-desk-form select:focus,
.ai-desk-form textarea:focus, .paper-onboarding input:focus,
.paper-portfolio input:focus {
  background: #fff;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(112,87,238,.1);
}
.paper-controls .small-btn.active, .paper-tabs .small-btn.active,
.ai-desk-actions .primary {
  color: #fff;
  background: var(--cyan);
  border-color: var(--cyan);
}
.paper-tabs, .paper-onboarding form, .paper-portfolio form,
.paper-levels span, .paper-audit-body dl div, .paper-audit-body li,
.paper-position span, .ai-auto-context, .ai-trade-summary > div,
.ai-trade-plans article, .ai-report-metrics > div,
.ai-evidence-node, .ai-agent-node, .ai-evidence-detail,
.ai-agent-dialog article, .ai-scenarios article {
  color: var(--text);
  background: #f8f8fc;
  border-color: var(--line);
}
.ai-evidence-detail pre { color: #4f596e; background: #f0f1f6; }
.paper-card > p, .paper-learning p, .ai-direct-answer p {
  color: #4f596e;
}
.paper-performance-chart {
  background: linear-gradient(180deg,rgba(112,87,238,.04),transparent);
}

/* AI Desk remains focused but friendlier. */
.ai-desk {
  color: var(--text);
  background: #f6f7fb;
  border-color: #ddd8f5;
  box-shadow: -24px 0 60px rgba(50,42,105,.2);
}
.ai-desk-backdrop { background: rgba(30,35,53,.42); }
.ai-desk-head {
  background: linear-gradient(135deg,#fff,#f0edff);
  border-color: var(--line);
}
.ai-desk-status, .ai-desk-empty, .ai-live-message, .ai-live-dialog {
  color: #58647b;
  background: #f8f8fc;
  border-color: var(--line);
}
.ai-committee-live {
  background: linear-gradient(145deg,#fff,#f7f5ff);
  border-color: #ded8ff;
}
.ai-live-network {
  background:
    radial-gradient(circle at 50% 52%,rgba(112,87,238,.12),transparent 36%),
    #f7f7fc;
  border-color: var(--line);
}
.ai-live-members article, .ai-live-agent-strip span {
  color: var(--muted);
  background: #f8f8fc;
  border-color: var(--line);
}
.ai-live-members article.speaking {
  color: var(--text);
  background: #f0edff;
  border-color: #bfb3ff;
}
.ai-desk-fab {
  color: #fff;
  background: linear-gradient(145deg,var(--cyan),var(--cyan-2));
  box-shadow: 0 14px 34px rgba(90,67,211,.28);
}

/* Mobile: clearer controls and thumb-friendly navigation. */
@media (max-width: 760px) {
  .mobile-nav {
    height: calc(78px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.98);
    border-color: var(--line);
    box-shadow: 0 -8px 26px rgba(50,42,105,.08);
  }
  .mobile-nav button { color: #757e91; font-size: 10px; }
  .mobile-nav button.active {
    color: var(--cyan);
    background: #f0edff;
  }
  .dash-topbar { background: rgba(255,255,255,.94); }
  .dash-content { padding-inline: 12px; }
  .metric-card, .panel { border-radius: 16px; }
  .login-panel { padding: 20px 14px; }
  .login-box { padding: 22px 18px; border-radius: 18px; }
}
@media (max-width: 460px) {
  .metric-grid, .module-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .metric-card { min-height: 112px; }
  .metric-card strong { font-size: 18px; }
  .module-header { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}


/* Emerald–Amber dashboard refinement */
#dashboard-page .sidebar {
  color: #ecfdf5;
  background:
    radial-gradient(circle at 86% 82%, rgba(233,154,19,.13), transparent 28%),
    linear-gradient(180deg,#064e3b 0%,#033d31 100%);
  border-color: rgba(255,255,255,.09);
  box-shadow: 10px 0 30px rgba(3,61,49,.16);
}
#dashboard-page .sidebar-head,
#dashboard-page .sidebar-user { color:#fff; background:transparent; border-color:rgba(255,255,255,.1); }
#dashboard-page .side-group-toggle { color:#f6bb45; }
#dashboard-page .side-group-toggle:hover,
#dashboard-page .side-group.has-active > .side-group-toggle { color:#ffd77c; background:rgba(255,255,255,.07); }
#dashboard-page .side-submenu { border-color:rgba(255,255,255,.12); }
#dashboard-page .side-item,
#dashboard-page .side-item.ready { color:#d8eee6; }
#dashboard-page .side-item:hover,
#dashboard-page .side-item.active,
#dashboard-page .side-item.ready:hover,
#dashboard-page .side-item.ready.active { color:#fff; background:linear-gradient(135deg,#078c63,#0b9b68); }
#dashboard-page .brand-mark,
#dashboard-page .avatar { color:#fff; background:rgba(233,154,19,.2); border-color:rgba(246,187,69,.45); }
#dashboard-page .dash-topbar { background:rgba(255,253,247,.94); }
#dashboard-page .metric-card { position:relative; overflow:hidden; }
#dashboard-page .metric-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#078c63,#f6bb45); }
#dashboard-page .panel,
#dashboard-page .metric-card,
#dashboard-page .surface-card { border-color:#eadfca; }
#dashboard-page .overview-timeframes button { background:#f6fbf8; border-color:#d9e9e0; }
#dashboard-page .overview-timeframes button:hover,
#dashboard-page .overview-timeframes button:disabled { color:#fff; background:#078c63; border-color:#078c63; }
#dashboard-page .overview-ranked-list > button,
#dashboard-page .overview-resource-grid > div { background:#f7fbf8; }
#dashboard-page .overview-tv-chart { border:1px solid #e7e1d4; box-shadow:0 14px 36px rgba(40,74,58,.09); }
@media (max-width:760px) {
  #dashboard-page .sidebar { background:linear-gradient(180deg,#064e3b,#033d31); }
  #dashboard-page .overview-tv-chart { border-radius:12px; }
}