/* ══════════════════════════════════════════════════════════════
   PORTFOLIO DASHBOARD — STYLES
   Organized sections: Theme → Base → Top bar/search → KPI cards →
   Panels → Tables → Chart triggers → Drawer → Modal → Login →
   Overview pages (Net Worth / Total Profit, shared) →
   Free-form Layout Manager (drag/resize) → Responsive
   ══════════════════════════════════════════════════════════════ */

/* ── THEME TOKENS ── */
[data-theme="dark"]{
  --bg:#080b12;--card-bg:#0d1320;--text:#dde4f0;--accent:#38bdf8;
  --muted:#8fa3bf;--border:#334155;--green:#22c55e;--red:#f43f5e;
  --input-bg:#1e2d3d;--input-border:#475569;--btn-bg:#1e2d3d;
  --modal-bg:#0d1320;--total-row-bg:#1a2b3c;--hover-row:#1a2b3c;
  --drawer-bg:#0d1320;--icon-stroke:#8fa3bf;
}
[data-theme="light"] {
  /* Background */
  --bg: #f1f5f9;

  /* Cards / Containers */
  --card-bg: #f8fafc;
  --drawer-bg: #f8fafc;
  --modal-bg: #f8fafc;

  /* Text */
  --text: #0f172a;
  --muted: #5b6b80;

  /* Accent */
  --accent: #2563eb;

  /* Borders */
  --border: #d8e1eb;

  /* Status */
  --green: #16a34a;
  --red: #dc2626;

  /* Inputs */
  --input-bg: #f8fafc;
  --input-border: #bcc8d6;

  /* Buttons */
  --btn-bg: #e8eef5;

  /* Tables */
  --total-row-bg: #f1f5f9;
  --hover-row: #e8eef5;

  /* Icons */
  --icon-stroke: #425267;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',Inter,system-ui,sans-serif;transition:background .25s,color .25s}

/* Safe-area aware padding — main content avoids notch & home bar */
body{
  padding: env(safe-area-inset-top,0px) 20px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom,0px));
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}

/* ── TICKER ── */
.top-widget-area{margin:0 -20px 20px;width:calc(100% + 40px);background:var(--bg)}

/* ── TOP BAR ── */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
.topbar-title{font-size:1.1rem;font-weight:700;margin:0;letter-spacing:-.01em}
.topbar-right{display:flex;align-items:center;gap:8px}

/* ── SEARCH BAR ── */
.search-row{margin-bottom:18px}
input[type="text"]{background:var(--input-bg);border:1px solid var(--input-border);border-radius:10px;color:var(--text);padding:10px 14px;width:100%;font-size:.9rem;outline:none;transition:border-color .2s}
input[type="text"]:focus{border-color:var(--accent)}

/* ── ICON BUTTONS ── */
.icon-btn{background:var(--btn-bg);border:1px solid var(--input-border);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;transition:background .15s,border-color .15s;color:var(--text);min-width:38px;min-height:38px}
.icon-btn:hover{border-color:var(--accent)}
.icon-btn.active{background:var(--accent);border-color:var(--accent)}
.icon-btn svg{width:18px;height:18px;stroke:var(--icon-stroke);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s;flex-shrink:0}
.icon-btn.active svg{stroke:#0f172a}

/* ── KPI CARDS ── */
.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.metric-card{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:14px 12px;text-align:center;position:relative}
.metric-card h3{color:var(--muted);font-size:.62rem;text-transform:uppercase;margin:0 0 6px;letter-spacing:.06em;font-weight:600}
.kpi-row{display:flex;align-items:center;justify-content:center;gap:6px}
.kpi-val{font-size:1.2rem;font-weight:700;margin:0;transition:filter .25s,opacity .25s;white-space:nowrap}
.kpi-val.blurred{filter:blur(7px);pointer-events:none;user-select:none}
.eye-btn{background:none;border:none;cursor:pointer;padding:3px;display:flex;align-items:center;color:var(--muted);flex-shrink:0;transition:color .15s}
.eye-btn:hover{color:var(--accent)}
.eye-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.clickable-card{cursor:pointer;transition:border-color .2s,transform .15s}
.clickable-card:active{transform:scale(.98)}

/* ── PANELS ── */
.main-wrapper{display:flex;align-items:stretch;gap:0;width:100%}
.panel{min-width:120px;overflow:hidden;display:flex;flex-direction:column;flex-shrink:0}
.panel-tables{padding-right:8px}
.panel-analytics{padding:0 8px}
.panel-history{padding-left:8px}
.panel-header{font-size:.68rem;text-transform:uppercase;color:var(--accent);letter-spacing:.08em;padding:5px 2px 8px;margin-bottom:8px;border-bottom:1px solid var(--border);font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px}
.resizer{position:relative;width:10px;flex-shrink:0;cursor:col-resize;user-select:none;touch-action:none;background:transparent;align-self:stretch}
.resizer::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:2px;border-radius:999px;background:transparent;transition:background .2s}
.resizer:hover::before,.resizer.active::before{background:var(--accent)}

/* ── TABLES ── */
.table-container{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:10px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th,td{white-space:nowrap}
th{text-align:left;color:var(--muted);padding:6px 4px;border-bottom:1.5px solid var(--border);cursor:pointer;font-size:.67rem;text-transform:uppercase;letter-spacing:.03em}
th:hover{color:var(--accent)}
td{padding:5px 4px;border-bottom:1px solid var(--border);font-size:.78rem}
td.blurred{filter:blur(5px);pointer-events:none;user-select:none;transition:filter .25s}
tbody tr:hover:not(.total-row){background:var(--hover-row)}
.total-row,.net-worth-total-row{border-top:1.5px solid var(--input-border);font-weight:700;background:var(--total-row-bg)}
.editable-cell{background:rgba(56,189,248,.1);border-bottom:1px dashed var(--accent);cursor:text;transition:.2s}
.editable-cell:hover,.editable-cell:focus{background:rgba(56,189,248,.3);outline:none}
.saving-indicator{opacity:.5;pointer-events:none}

/* ── CHART TRIGGERS ── */
.chart-trigger{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:24px 15px;min-height: 160px;margin-bottom:10px;cursor:pointer;transition:border-color .2s,transform .15s;display:flex;align-items:center;justify-content:space-between;gap:10px}
.chart-trigger:hover{border-color:var(--accent)}
.chart-trigger:active{transform:scale(.98)}
.chart-trigger-info{display:flex;flex-direction:column;gap:3px ; position: relative; z-index: 5;}
.chart-trigger-label{font-size:.67rem;text-transform:uppercase;color:var(--muted);letter-spacing:.05em}
.chart-trigger-value{font-size:1rem;font-weight:700;color:var(--text)}
.chart-trigger-icon svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8}

/* ── ESAP ── */
.esap-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}

/* ── SWITCH ── */
.switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:var(--input-border);transition:.3s;border-radius:22px}
.slider:before{content:"";position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:#fff;transition:.3s;border-radius:50%}
input:checked+.slider{background:var(--accent)}
input:checked+.slider:before{transform:translateX(16px);background:#0f172a}

/* ── SETTINGS DRAWER ── */
#settingsDrawer{position:fixed;top:0;right:-300px;width:280px;height:100%;background:var(--drawer-bg);border-left:1px solid var(--border);z-index:6000;transition:right .28s cubic-bezier(.4,0,.2,1);padding:env(safe-area-inset-top,20px) 20px 20px;display:flex;flex-direction:column;gap:0;overflow-y:auto}
#settingsDrawer.open{right:0}
#settingsScrim{display:none;position:fixed;inset:0;z-index:5999;background:rgba(0,0,0,.45)}
#settingsScrim.show{display:block}
.drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-top:4px}
.drawer-title{font-size:1rem;font-weight:700;margin:0}
.drawer-section{margin-bottom:20px}
.drawer-section-label{font-size:.65rem;text-transform:uppercase;color:var(--muted);letter-spacing:.08em;margin-bottom:10px;font-weight:700}
.drawer-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);gap:12px}
.drawer-row:last-child{border-bottom:none}
.drawer-row-label{font-size:.85rem;font-weight:500;display:flex;align-items:center;gap:8px}
.drawer-row-label svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.drawer-btn{background:var(--btn-bg);border:1px solid var(--input-border);border-radius:8px;color:var(--text);font-size:.8rem;font-weight:600;padding:8px 14px;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap}
.drawer-btn:hover{border-color:var(--accent)}
.drawer-btn.active{background:var(--accent);border-color:var(--accent);color:#0f172a}
.drawer-hint{font-size:.72rem;color:var(--muted);line-height:1.4;margin-top:2px}

/* Theme toggle pill */
.theme-toggle{display:flex;background:var(--btn-bg);border:1px solid var(--input-border);border-radius:8px;overflow:hidden}
.theme-opt{padding:7px 14px;font-size:.78rem;font-weight:600;cursor:pointer;color:var(--muted);transition:background .15s,color .15s;border:none;background:none}
.theme-opt.active{background:var(--accent);color:#0f172a}

/* ── MODAL ── */
#modalOverlay{display:none;position:fixed;inset:0;z-index:7000;background:rgba(0,0,0,.65);padding:16px;align-items:center;justify-content:center}
#modalOverlay.active{display:flex}
#modalContent{background:var(--modal-bg);border:1px solid var(--border);border-radius:18px;padding:20px;width:100%;max-width:900px;max-height:90vh;overflow:auto;position:relative}
.modal-close{position:absolute;top:12px;right:14px;background:var(--btn-bg);border:1px solid var(--input-border);border-radius:8px;color:var(--muted);font-size:.85rem;cursor:pointer;line-height:1;padding:6px 9px;font-weight:700}
.modal-close:hover{color:var(--text)}
.modal-title{font-size:.95rem;font-weight:700;color:var(--text);margin:0 0 14px}

/* ── TF BUTTONS ── */
.tf-btn{background:var(--btn-bg);border:1px solid var(--input-border);border-radius:6px;color:var(--muted);padding:5px 4px;font-size:.7rem;flex:1;text-align:center;cursor:pointer;transition:.15s}
.tf-btn.active{background:var(--accent);color:#0f172a;border-color:var(--accent);font-weight:700}

/* ── LOGIN ── */
#loginScreen{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .4s}

/* ══════════════════════════════════════════════════════════════
   OVERVIEW PAGES (shared by Net Worth & Total Profit)
   ══════════════════════════════════════════════════════════════ */
.overview-page{display:none;position:fixed;inset:0;z-index:4000;background:var(--bg);overflow:auto;padding:env(safe-area-inset-top,0px) 20px 20px}
.overview-page.active{display:block}
.ov-header{display:flex;align-items:center;gap:12px;margin-bottom:6px;padding-top:16px}
.ov-title{margin:0;font-size:1.2rem;font-weight:700;flex:1}
.ov-nav-btn{background:var(--btn-bg);border:1px solid var(--input-border);border-radius:10px;color:var(--muted);font-size:.72rem;font-weight:600;padding:8px 12px;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}
.ov-nav-btn:hover{border-color:var(--accent);color:var(--accent)}
.ov-hero{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin:14px 0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ov-hero-label{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:0 0 4px}
.ov-hero-ath{text-align:right}
.ov-hero-ath-label{font-size:.65rem;color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.ov-hero-ath-val{font-size:1.05rem;font-weight:700;color:var(--green)}
.nw-section{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:14px}
.nw-section h3{margin:0 0 12px;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.big-stat{font-size:1.9rem;font-weight:800;margin:4px 0 0}
.mini-pill{border:1px solid var(--border);background:var(--card-bg);border-radius:12px;padding:12px}
.mini-pill .label{color:var(--muted);font-size:.72rem;text-transform:uppercase;margin-bottom:6px;font-weight:600}
.mini-pill .value{font-size:1rem;font-weight:700}

.shake{animation:shake .3s;border-color:var(--red)!important}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .main-wrapper{flex-direction:column;gap:14px}
  .panel{padding:0!important;min-width:0!important;width:100%!important}
  .resizer{display:none}
  #panelHistory{order:-1} /* History jumps to the top once panels stack */
}
@media(max-width:900px){
  .ov-grid-legacy{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  body{padding:env(safe-area-inset-top,0px) 14px calc(24px + env(safe-area-inset-bottom,0px))}
  .top-widget-area{display:none}
  .topbar{margin-top:14px}
  .topbar-title{font-size:1rem}
  .dashboard-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
  .metric-card{padding:12px 8px;border-radius:14px}
  .kpi-val{font-size:1rem}
  .metric-card h3{font-size:.58rem}
  .table-container{border-radius:14px}
  .chart-trigger{border-radius:14px}
  th,td{font-size:.72rem;padding:7px 4px}
  #modalContent{border-radius:16px;padding:16px;max-height:85vh}
  #modalContent .modal-flex{flex-direction:column!important}
  #modalContent .modal-side{width:100%!important;margin-top:12px}
  .big-stat{font-size:1.5rem}
  .ov-hero{flex-direction:column;align-items:flex-start}
  .ov-hero-ath{text-align:left}
}

.mini-chart-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.4;
  pointer-events: none;
}
.mini-chart-bg canvas {
  width: 100% !important;
  height: 100% !important;
}