/*
 * v4.0 interface layer
 * UI-only: no financial data, calculations, storage, authentication or API behavior.
 * Kept separate from the legacy stylesheet so the visual system stays auditable.
 */

:root,
html:not([data-theme="dark"]){
  --v4-canvas:#F4F2ED;
  --v4-surface:#ECE9E3;
  --v4-surface-raised:#FAF9F6;
  --v4-ink:#171715;
  --v4-secondary:#615F59;
  --v4-tertiary:#817E76;
  --v4-line:rgba(53,50,44,.14);
  --v4-line-strong:rgba(53,50,44,.24);
  --v4-positive:#55725D;
  --v4-negative:#995E59;
  --v4-warning:#8B7146;
  --v4-shadow:0 18px 44px rgba(48,44,37,.055),0 2px 8px rgba(48,44,37,.03);
}
html[data-theme="dark"]{
  --v4-canvas:#1C1C1A;
  --v4-surface:#292824;
  --v4-surface-raised:#302F2B;
  --v4-ink:#F1EFE9;
  --v4-secondary:#C2BEB5;
  --v4-tertiary:#A29E95;
  --v4-line:rgba(255,255,255,.105);
  --v4-line-strong:rgba(255,255,255,.19);
  --v4-positive:#9BAF9E;
  --v4-negative:#D09A94;
  --v4-warning:#C7AD7B;
  --v4-shadow:0 20px 48px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.12);
}

html{scrollbar-color:var(--v4-line-strong) transparent}
body{background:var(--v4-canvas) !important;color:var(--v4-ink)}
.main{
  padding:28px clamp(26px,4.2vw,72px) 84px;
  scroll-behavior:smooth;
}
.page{width:min(1420px,100%);margin-inline:auto}

/* Sidebar: quiet index with a precise active marker. */
.sidebar,html:not([data-theme="dark"]) .sidebar,html[data-theme="dark"] .sidebar{
  width:208px;
  background-color:color-mix(in srgb,var(--v4-canvas) 91%,transparent) !important;
}
.sb-head{padding:30px 20px 18px}
.sb-head h1{font-size:19px}
.sb-head p{color:var(--v4-tertiary) !important}
.sb-nav{padding:20px 12px;display:flex;flex-direction:column;gap:2px}
.nav-item,html:not([data-theme="dark"]) .nav-item,html[data-theme="dark"] .nav-item{
  appearance:none;width:100%;min-height:38px;margin:0;padding:8px 10px 8px 14px;
  display:flex;align-items:center;text-align:left;font-family:inherit;line-height:1.4;
  background:transparent;border:0;border-left:2px solid transparent;border-radius:2px;
  color:var(--v4-secondary) !important;cursor:pointer;
}
.nav-item:hover,html:not([data-theme="dark"]) .nav-item:hover,html[data-theme="dark"] .nav-item:hover{
  background:color-mix(in srgb,var(--v4-ink) 5%,transparent) !important;
}
.nav-item.active,html:not([data-theme="dark"]) .nav-item.active,html[data-theme="dark"] .nav-item.active{
  background:color-mix(in srgb,var(--v4-ink) 7%,transparent) !important;
  border-left-color:var(--v4-ink) !important;color:var(--v4-ink) !important;font-weight:600;
}
.nav-item-support{margin-top:14px !important;border-top:1px solid var(--v4-line) !important;padding-top:15px !important}

/* Global workbench framing. */
.mode-bar{
  position:sticky;top:0;z-index:60;min-height:48px;margin:0 0 42px;padding:8px 0 12px;
  background:color-mix(in srgb,var(--v4-canvas) 90%,transparent);border-bottom:1px solid var(--v4-line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.mode-bar-title{color:var(--v4-tertiary);font-variant-numeric:tabular-nums}
.mode-btn,.mode-theme-btn{min-height:34px}

/* Desktop navigation uses the same calm drawer pattern as mobile. */
.desktop-sidebar-launcher{
  width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;padding:0;
  border:1px solid var(--v4-line);border-radius:4px;background:transparent;color:var(--v4-ink);
  cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.desktop-sidebar-launcher:hover{background:color-mix(in srgb,var(--v4-ink) 6%,transparent);border-color:var(--v4-line-strong)}
.desktop-sidebar-launcher svg,.mobile-hamburger svg,.sb-toggle svg{
  width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

@media(min-width:769px){
  .sidebar,html:not([data-theme="dark"]) .sidebar,html[data-theme="dark"] .sidebar{
    position:fixed;inset:0 auto 0 0;z-index:220;width:224px !important;min-width:224px !important;height:100dvh;
    transform:translateX(-102%);pointer-events:none;transition:transform .24s cubic-bezier(.22,1,.36,1);
    box-shadow:10px 0 40px rgba(20,20,18,.08) !important;
  }
  .sidebar.drawer-open,html:not([data-theme="dark"]) .sidebar.drawer-open,html[data-theme="dark"] .sidebar.drawer-open{
    transform:translateX(0);pointer-events:auto;
  }
  .sb-backdrop.show{display:block;z-index:210;background:rgba(20,20,18,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .sb-toggle{justify-content:flex-end}
  .sb-toggle button{width:40px;height:40px;display:grid;place-items:center;padding:0}
  .main{flex-basis:100%}
}
.page-header{min-height:64px;margin-bottom:26px;gap:20px}
.page-title{font-size:clamp(34px,3.2vw,46px);color:var(--v4-ink);text-wrap:balance}
.page-header>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Clear interaction hierarchy. */
.btn,.btn-sm,.btn-icon{
  min-height:38px;padding:8px 13px;border-radius:4px !important;font-weight:600;line-height:1.2;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease;
}
.btn-primary,html:not([data-theme="dark"]) .btn-primary,html[data-theme="dark"] .btn-primary{
  background:var(--v4-ink) !important;border-color:var(--v4-ink) !important;color:var(--v4-canvas) !important;
}
.btn-primary:hover{opacity:.82}
.btn-ghost,.btn-icon,html:not([data-theme="dark"]) .btn-ghost,html:not([data-theme="dark"]) .btn-icon,
html[data-theme="dark"] .btn-ghost,html[data-theme="dark"] .btn-icon{
  background:transparent !important;border-color:var(--v4-line-strong) !important;color:var(--v4-ink) !important;
}
.btn-ghost:hover,.btn-icon:hover{background:color-mix(in srgb,var(--v4-ink) 6%,transparent) !important}

/* Metric strip: large enough to scan, restrained enough for dense data. */
.stats-grid{margin-bottom:42px;border-color:var(--v4-line)}
.stats-grid .card,html:not([data-theme="dark"]) .stats-grid .card,html[data-theme="dark"] .stats-grid .card{
  min-height:104px;padding:22px 22px 22px 0;
}
.stats-grid .card+.card{padding-left:22px;border-left-color:var(--v4-line) !important}
.card-title,.health-label,.calc-stat-label{
  color:var(--v4-tertiary);font-size:10px;line-height:1.4;letter-spacing:.075em;
}
.card-value{font-size:clamp(22px,2vw,29px);line-height:1.15;color:var(--v4-ink)}
.card-sub,.health-desc{margin-top:7px;color:var(--v4-secondary);font-size:10px;line-height:1.5}
.profit,.net-pos,.hgood{color:var(--v4-positive) !important}
.loss,.net-neg,.hbad{color:var(--v4-negative) !important}
.hwarn{color:var(--v4-warning) !important}

/* Dashboard: stronger reading order and less dead space. */
.dashboard-hero{min-height:160px;padding:12px 0 34px;grid-template-columns:minmax(0,5fr) minmax(300px,7fr)}
.dashboard-networth-label{color:var(--v4-tertiary);letter-spacing:.1em}
.dashboard-networth-value{font-size:clamp(42px,5vw,68px);font-weight:450}
.dashboard-networth-note{font-size:11px;color:var(--v4-secondary)}
.dashboard-section-heading{margin-bottom:15px}
.dashboard-section-heading>span:last-child{color:var(--v4-tertiary)}
.dashboard-trend-card{padding:28px 30px 22px}
.dashboard-trend-meta{padding-bottom:18px;border-bottom:1px solid var(--v4-line)}
.chart-wrap-lg{height:330px;margin-top:18px}
.health-grid{margin-bottom:48px;border-color:var(--v4-line)}
.health-card,html:not([data-theme="dark"]) .health-card,html[data-theme="dark"] .health-card{
  min-height:128px;padding-top:22px;padding-bottom:25px;
  display:grid;grid-template-rows:32px 32px 16px minmax(24px,auto);align-content:start;
}
.health-card+.health-card{border-left-color:var(--v4-line) !important}
.health-label{
  min-height:32px;margin:0;display:flex;align-items:center;justify-content:space-between;
}
.health-value{height:32px;display:flex;align-items:baseline;font-size:25px;line-height:1}
.health-bar-wrap{align-self:center;margin-top:0}
.health-desc{align-self:start;margin-top:4px}

/* Surfaces and charts. */
.chart-card,.chart-full,.table-card,.calc-form,.calc-chart-card,.item-card,.invest-trend-card,.acct-panel,.modal{
  border-color:var(--v4-line) !important;box-shadow:var(--v4-shadow) !important;
}
.charts-grid{gap:24px}
.chart-card{padding:26px 28px}
.chart-title,.table-title,.invest-trend-title{font-size:15px;font-weight:650;color:var(--v4-ink)}
.chart-summary{color:var(--v4-secondary);font-size:11px}
.donut-layout{gap:24px}
.donut-legend{padding-left:2px}
.donut-legend-item{border-bottom:1px solid color-mix(in srgb,var(--v4-line) 60%,transparent)}
.donut-legend-item:last-child{border-bottom:0}
.donut-lbl,.donut-amt{color:var(--v4-ink)}
.donut-pct{color:var(--v4-tertiary)}

/* Tables: fixed headers, calm rows, numeric alignment and local overflow only. */
.table-card{border-radius:5px !important;overflow:hidden}
.table-header{min-height:62px;padding:14px 18px;gap:14px;border-bottom-color:var(--v4-line)}
.table-card>table,.table-card>div>table{min-width:680px}
.table-card>div[style*="overflow-x"]{overflow-x:auto !important;overscroll-behavior-inline:contain}
table{font-variant-numeric:tabular-nums}
thead{position:sticky;top:0;z-index:2}
th,html:not([data-theme="dark"]) .table-card th,html[data-theme="dark"] .table-card th{
  padding:12px 14px;background:color-mix(in srgb,var(--v4-surface) 88%,var(--v4-canvas)) !important;
  color:var(--v4-secondary);font-size:10px;letter-spacing:.065em;white-space:nowrap;
}
td{padding:15px 14px;color:var(--v4-ink);font-size:12px;line-height:1.55;border-bottom-color:var(--v4-line)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in srgb,var(--v4-ink) 4%,transparent) !important}
td:nth-last-child(1){white-space:nowrap}
.empty{padding:52px 22px;color:var(--v4-secondary);line-height:1.7}

/* Filters and forms. */
.filter-row,.invest-holdings-tools{gap:7px}
select.filter{min-height:38px;max-width:210px}
input,select,textarea,.ui-select-button,.ui-date-button{min-height:42px}
label{margin-bottom:6px;color:var(--v4-secondary);font-size:10px;letter-spacing:.065em}
.form-group{margin-bottom:17px}
.modal{width:min(560px,calc(100vw - 32px));padding:26px;border-radius:7px !important}
.modal-title{font-family:inherit;font-size:24px;font-weight:600}
.modal-footer{margin-top:22px;padding-top:16px}

/* Page-specific tools. */
.invest-trend-head{padding:20px 22px}
.invest-trend-stat-grid{gap:0;padding:0;border-bottom:1px solid var(--v4-line)}
.invest-trend-stat,html:not([data-theme="dark"]) .invest-trend-stat,html[data-theme="dark"] .invest-trend-stat{
  min-height:86px;padding:16px 18px;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
}
.invest-trend-stat:hover,.invest-trend-stat:focus-visible{background:color-mix(in srgb,var(--v4-canvas) 72%,var(--v4-ink) 28%) !important}
.invest-trend-stat+.invest-trend-stat{border-left:1px solid var(--v4-line) !important}
.invest-trend-legend{padding:12px 20px 0}
.invest-trend-chart-wrap{height:300px;padding-top:2px}
.invest-market-tabs{gap:4px}
.invest-market-tab{min-height:34px}
.items-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.item-card{border-radius:5px !important}
.item-card:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(48,44,37,.09) !important}
.item-photo{padding-top:72%}
.item-info{padding:14px}
.item-name{font-size:13px;line-height:1.45}
.goal-card,html:not([data-theme="dark"]) .goal-card,html[data-theme="dark"] .goal-card{padding:25px 2px}
.goal-name{font-size:16px}
.calc-layout{grid-template-columns:minmax(290px,4fr) minmax(0,8fr);gap:28px}
.calc-form{position:sticky;top:76px;padding:24px}
.calc-stat{padding:19px 18px}
.calc-stat-value{font-size:24px}

/* Accounting is dense by design; keep both columns legible before stacking. */
.split-view{grid-template-columns:minmax(0,1fr) minmax(330px,370px);gap:20px}
.acct-panel{border-radius:5px !important}
.acct-panel-head{min-height:58px}
.acct-donut-grid{gap:18px}

@media(max-width:1180px){
  .main{padding-inline:30px}
  .dashboard-hero{grid-template-columns:minmax(0,1fr) auto}
  .health-grid{grid-template-columns:repeat(2,1fr)}
  .health-card:nth-child(3){border-left:0 !important}
  .health-card:nth-child(n+3){border-top:1px solid var(--v4-line) !important}
  .items-grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
}

@media(max-width:768px){
  .desktop-sidebar-launcher{display:none}
  .mobile-topbar{
    background:color-mix(in srgb,var(--v4-canvas) 94%,transparent) !important;
    color:var(--v4-ink) !important;border-bottom-color:var(--v4-line) !important;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  }
  .mobile-hamburger{color:var(--v4-ink) !important}
  .mobile-hamburger svg{width:21px;height:21px}
  .main{padding:calc(72px + env(safe-area-inset-top)) 16px calc(56px + env(safe-area-inset-bottom))}
  .page{width:100%}
  .mode-bar{top:calc(56px + env(safe-area-inset-top));margin-bottom:28px;padding-block:6px 10px}
  .mode-bar-title{display:none}
  .page-header{min-height:0;margin-bottom:22px;align-items:flex-start}
  .page-title{font-size:34px}
  .page-header>div{width:100%}
  .page-header>div>.btn{flex:1;justify-content:center}
  .page-header>.btn{width:100%;justify-content:center}
  .btn,.btn-sm,.btn-icon,.mode-btn,.mode-theme-btn,.invest-market-tab{min-height:44px}
  .dashboard-hero{display:block;min-height:0;padding:4px 0 28px}
  .dashboard-networth{margin-top:22px;text-align:left}
  .dashboard-networth-value{font-size:clamp(39px,12vw,54px)}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;margin-bottom:34px}
  .stats-grid .card,html:not([data-theme="dark"]) .stats-grid .card,html[data-theme="dark"] .stats-grid .card{min-height:112px;padding:18px 14px 18px 0}
  .stats-grid .card+.card{padding-left:14px}
  .stats-grid .card:nth-child(odd){padding-left:0;border-left:0 !important}
  .stats-grid .card:nth-child(n+3){border-top:1px solid var(--v4-line) !important}
  .card-value{font-size:22px;overflow-wrap:anywhere}
  .chart-full,.chart-card{padding:21px 18px;margin-bottom:24px}
  .dashboard-trend-card{padding:22px 18px 18px}
  .chart-wrap-lg{height:250px}
  .charts-grid{gap:18px;margin-bottom:28px}
  .donut-layout{gap:16px}
  .health-grid{grid-template-columns:1fr 1fr;margin-bottom:32px}
  .health-card,html:not([data-theme="dark"]) .health-card,html[data-theme="dark"] .health-card{
    min-height:150px;padding:18px 14px 20px 0;grid-template-rows:44px 32px 16px minmax(28px,auto);
  }
  .health-label{min-height:44px}
  .health-settings-btn{margin:0}
  .health-card+.health-card{padding-left:14px}
  .health-card:nth-child(odd){padding-left:0;border-left:0 !important}
  .invest-trend-head{padding:18px 16px}
  .invest-trend-controls{width:100%}
  .invest-trend-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .invest-trend-stat:nth-child(odd){border-left:0 !important}
  .invest-trend-stat:nth-child(n+3){border-top:1px solid var(--v4-line) !important}
  .invest-trend-legend{justify-content:flex-start;padding:8px 12px 0}
  .invest-trend-chart-wrap{height:285px;padding-inline:8px}
  .table-card{margin-inline:-2px}
  .table-header{align-items:stretch;padding:14px}
  .filter-row,.invest-holdings-tools{width:100%;display:grid;grid-template-columns:1fr}
  select.filter,.filter-row>*{width:100% !important;max-width:none}
  .items-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .item-info{padding:12px}
  .calc-layout{grid-template-columns:1fr}
  .calc-form{position:static;padding:20px}
  .calc-result-grid{grid-template-columns:1fr 1fr}
  .modal{align-self:flex-end;width:100%;max-width:none;max-height:90dvh;margin:0;border-radius:10px 10px 0 0 !important;padding:24px 18px calc(20px + env(safe-area-inset-bottom))}
  .overlay{align-items:flex-end}
}

@media(max-width:480px){
  .main{padding-inline:14px}
  .page-title{font-size:32px}
  #page-dashboard .page-title{font-size:32px}
  .dashboard-networth-value{font-size:39px}
  .dashboard-trend-meta{align-items:flex-start;gap:16px}
  .dashboard-trend-actions{width:100%}
  .dashboard-trend-actions>.btn-icon{width:100%;justify-content:center}
  .donut-layout{grid-template-columns:1fr}
  .donut-canvas{height:180px}
  .items-grid{grid-template-columns:1fr 1fr}
  .item-photo{padding-top:78%}
  .item-rows{font-size:10px}
  .calc-result-grid{grid-template-columns:1fr}
  .calc-stat+.calc-stat{border-left:0 !important;border-top:1px solid var(--v4-line) !important}
  .form-row{grid-template-columns:1fr}
}

@media(max-width:360px){
  .stats-grid{grid-template-columns:1fr !important}
  .stats-grid .card,html:not([data-theme="dark"]) .stats-grid .card,html[data-theme="dark"] .stats-grid .card{min-height:0;padding:17px 0}
  .stats-grid .card+.card{padding-left:0;border-left:0 !important;border-top:1px solid var(--v4-line) !important}
  .health-grid{grid-template-columns:1fr}
  .health-card,html:not([data-theme="dark"]) .health-card,html[data-theme="dark"] .health-card{min-height:0;padding:18px 0}
  .health-card+.health-card{padding-left:0;border-left:0 !important;border-top:1px solid var(--v4-line) !important}
  .items-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .item-card:hover{transform:none}
}