/* DSVT Analytics 1.3 — exact-layout implementation of the approved dashboard.
   This is a visual layer over existing Supabase / journal functionality. */
:root{--bg:#020807;--panel:#071310;--panel2:#0b1914;--mint:#1eee87;--text:#f1f6f2;--muted:#a0aca5;--line:#1c2d27;--red:#f35e5c;color-scheme:dark}
html,body{background:#020706;color:#f5f6f5;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
.app-shell{background:radial-gradient(ellipse 43% 35% at 58% 10%,rgba(2,68,40,.13),transparent 90%),#020706}
.sidebar{width:308px!important;flex:0 0 308px!important;padding:20px 18px 20px!important;min-height:100vh;border-right:1px solid #13251c;background:linear-gradient(160deg,#010504 10%,#040a08 80%,#020605);box-shadow:inset -12px 0 22px rgba(0,0,0,.27)}
.sidebar-inner{display:flex;flex-direction:column}
.sidebar .logo{display:flex;align-items:baseline;gap:8px;letter-spacing:0;padding:0 13px 0 13px}
.sidebar .logo span{font-size:46px!important;font-weight:900;letter-spacing:-2.8px!important;line-height:1;background:linear-gradient(125deg,#d9efdc 5%,#5bdb9a 38%,#03974d 80%);background-clip:text;color:transparent;-webkit-background-clip:text;filter:drop-shadow(0 0 11px rgba(21,227,104,.15))}
.sidebar .logo small{font-size:15px!important;font-weight:800!important;line-height:1.3;letter-spacing:1px!important;color:#f3f5f3!important;margin-top:0!important}
.sidebar .logo-tagline{margin:4px 0 31px 13px!important;font-size:8px!important;letter-spacing:1.1px!important;color:#aeb4af!important}
.sidebar .logo-tagline em{font-style:normal;color:#27dd7b}
.sidebar nav,.main-nav{gap:4px!important}
.sidebar .nav-link{font-size:16px!important;font-weight:570;gap:18px!important;height:50px;min-height:50px!important;padding:11px 17px!important;border-radius:11px!important;letter-spacing:-.25px;color:#d4dad6!important}
.sidebar .nav-link:hover{background:#071d13!important;color:white!important}
.sidebar .nav-link.active{background:linear-gradient(95deg,#064e2d 0%,#07391f 60%,#052015 100%)!important;color:#f6faf6!important;border:0!important;box-shadow:inset 3px 0 #1ced81,0 0 18px rgba(0,166,68,.06)}
.sidebar .nav-link .nav-svg{width:23px;height:23px;flex:none;stroke:#99aba1;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.sidebar .nav-link.active .nav-svg,.sidebar .nav-link:hover .nav-svg{stroke:#29ec89}
.sidebar .nav-next{font-size:9px;opacity:.55;margin-left:auto}
.sidebar-account-list{margin:27px 11px 0!important;border-top:1px solid #17251e;padding-top:27px}
.side-accounts-title{font-size:13px!important;color:#abb8af!important;letter-spacing:0!important;margin-bottom:14px!important}
.side-accounts-title .dot{background:#1cec7e;box-shadow:0 0 0 4px #11462b,0 0 14px #10ec7680}
.side-account{font-size:13px!important;padding:12px 0!important;border-color:#10221a!important}
.side-account small{color:#31e88a!important}
.sidebar-bottom{background:#040b08!important;border:1px solid #17271e!important;border-radius:13px!important;padding:10px 11px!important;min-height:62px}
.user-avatar{width:43px!important;height:43px!important;border-radius:50%!important;background:linear-gradient(150deg,#176039,#06321d)!important;flex:none}
.user-svg{width:29px;height:29px;fill:none;stroke:#3df68e;stroke-width:1.5}
.user-meta strong{font-size:13px!important;color:#e8edea}
.user-meta span{font-size:11px!important;color:#88998d}
.user-gear{width:21px;height:21px;fill:none;stroke:#c1cbc3;stroke-width:1.4}
#logout-btn{display:flex;align-items:center;justify-content:center}
.main-area{min-width:0}
.topbar{display:none!important}
.content{max-width:none!important;margin:0!important;padding:19px 18px 32px 29px!important}
.page-heading{margin-bottom:20px!important;min-height:52px;align-items:center!important}
.page-heading h1{font-size:22px!important;line-height:1.2!important;letter-spacing:-.3px!important;margin:0 0 5px!important;font-weight:770!important}
.page-heading p{font-size:13px!important;color:#a4ada6!important}
.dashboard-actions{display:flex;align-items:center;gap:17px;flex-wrap:wrap}
.month-select-wrap{min-width:224px;height:47px;border:1px solid #1b2b26;border-radius:13px;padding:0 11px;display:flex;gap:9px;align-items:center;background:#040a08;color:#dce6df;margin:0;position:relative}
.month-select-wrap:focus-within{border-color:#2bcb78}
.month-select-wrap select{background:transparent!important;border:0!important;box-shadow:none!important;appearance:none!important;padding:0!important;color:#e9efea!important;min-width:0;width:100%;font-size:13px!important;font-weight:620!important;cursor:pointer}
.month-select-wrap select option{background:#0c1812;color:#fff}
.inline-svg{width:18px;height:18px;fill:none;stroke:#b4bbb5;stroke-width:1.8;flex:none}
.chevron-svg{width:15px;height:15px;stroke:#d0d9d2;fill:none;stroke-width:1.9;pointer-events:none;flex:none}
#add-trade-top{height:47px;min-width:157px;background:linear-gradient(95deg,#1ae681,#35ef8c);border:0!important;box-shadow:0 0 18px rgba(16,205,100,.12);font-size:15px!important;color:#021c0c;justify-content:center}
#view-overview .notice{font-size:10px;position:fixed;bottom:10px;left:calc(308px + 25px);z-index:4;background:#08180f;border:1px solid #2b583a;border-radius:8px;margin:0;max-width:380px;opacity:.96;box-shadow:0 7px 20px #0009;padding:7px 10px}
.kpi-grid.kpi-six{display:grid!important;grid-template-columns:1.19fr .84fr 1.09fr .9fr .95fr .98fr!important;gap:17px!important;margin-bottom:19px!important}
.kpi{min-width:0;height:127px!important;min-height:127px!important;border-radius:16px!important;padding:17px 18px 12px!important;border:1px solid #1b3026!important;background:linear-gradient(137deg,#0b1814 0%,#091411 55%,#050e0c 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.022)}
.kpi-label{display:flex;gap:12px;align-items:center;color:#e1e8e2!important;font-size:13px!important;line-height:1.2;letter-spacing:-.12px!important;font-weight:650!important;white-space:nowrap}
.kpi-svg{width:26px;height:26px;fill:none;stroke:#26e986;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kpi-value{margin:6px 0 4px!important;text-align:center;font-size:30px!important;font-weight:800!important;line-height:1.28;white-space:nowrap;color:#f3f6f3}
.kpi small{display:block;text-align:center;font-size:12px!important;color:#b1bbb3!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .positive{color:#26ed85!important}.kpi .negative{color:#f66d66!important}
.panel{background:linear-gradient(160deg,#0b1612,#07110e 75%,#050c0a 100%)!important;border:1px solid #1c3127!important;border-radius:16px!important;box-shadow:0 4px 19px rgba(0,0,0,.13)!important;padding:17px 18px!important}
.panel-head{margin-bottom:14px!important;align-items:center}
.panel-head h2{font-size:15px!important;letter-spacing:-.15px;display:flex;align-items:center;gap:10px;color:#f3f7f4;margin:0!important}
.panel-svg{width:20px;height:20px;stroke:#21e887;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
#view-overview .panel-head small{display:none}
#view-overview .panel-head .tag{display:none}
.overview-main-grid{display:grid!important;grid-template-columns:minmax(0,1.58fr) minmax(0,1.04fr) minmax(0,.90fr)!important;gap:18px!important;align-items:start!important;height:344px!important;margin-bottom:18px!important}
.overview-main-grid>.performance-panel,.overview-main-grid>.calendar-panel{height:344px!important;min-height:344px!important}
.overview-right{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:194px 171px!important;gap:17px!important;min-height:0;grid-column:auto!important}
.overview-right>.panel{padding:16px 18px!important;margin:0!important}
.performance-panel .panel-head{margin-bottom:6px!important}
.chart-container{height:287px!important;width:100%;overflow:hidden!important}
.chart-container svg{height:100%;width:100%}
.empty-chart{height:100%;display:grid;place-items:center;position:relative;color:#a1b9a9;font-size:13px;text-align:center;padding:10px}
.empty-trend{position:absolute;inset:0;width:100%;height:100%}
.empty-message{max-width:290px;position:relative;z-index:1;padding:12px 16px;background:#07130df2;border:1px solid #234734;border-radius:8px}
.calendar-head-tools{display:flex!important;justify-content:center;gap:10px;align-items:center;position:absolute;left:0;right:0;top:37px;font-size:13px!important;color:#f1f4f1!important;font-weight:700;line-height:1.4;pointer-events:auto}
.calendar-panel{position:relative!important}
.calendar-panel .panel-head{margin-bottom:57px!important}
.cal-arrow{color:#c4d4c6;background:transparent;border:0;font-size:21px;line-height:1;cursor:pointer;padding:0 5px}
.cal-arrow:hover{color:#2bf18d}
.cal-grid{gap:5px!important;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-label{font-size:11px!important;color:#e0e6e0!important;margin-bottom:4px!important}
.calendar-panel .cal-cell{aspect-ratio:auto!important;height:37px!important;min-height:37px!important;gap:0!important;padding:3px 2px!important;border-radius:7px!important;font-size:11px!important;background:#0b1713;border:0!important;color:#d7e0d8}
.calendar-panel .cal-cell.good{background:linear-gradient(145deg,#08592f,#043b23)!important;color:#65f4a1!important}
.calendar-panel .cal-cell.bad{background:linear-gradient(145deg,#5a241f,#3c1e1b)!important;color:#ffb1a4!important}
.calendar-panel .cal-cell.empty{background:transparent!important}
.cal-pnl{font-size:10px!important;color:inherit!important;line-height:1.1}
.detail-row{padding:5px 0!important;font-size:12px!important;line-height:1.3!important;letter-spacing:-.15px}
.detail-row strong{font-size:12px!important}
.detail-rows{gap:0!important}
.best-row{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid #15251c;font-size:12px;color:#d2dbd4}
.best-row:last-child{border:0}
.best-row span{color:#aab7af}.best-row b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.best-row strong{font-size:11px;padding:3px 6px;background:#123a20;border-radius:5px;white-space:nowrap}
.best-row strong.negative{background:#3c201f}
.overview-bottom-grid{display:grid!important;grid-template-columns:minmax(0,1.59fr) minmax(0,1.04fr) minmax(0,.90fr)!important;gap:18px!important;align-items:start!important}
.overview-bottom-grid>.panel{min-height:292px!important;height:292px!important}
.overview-bottom-grid>.focus-card{margin-top:36px!important;height:256px!important;min-height:256px!important;grid-column:auto!important}
.trades-card .table-scroll{overflow:auto!important;scrollbar-width:thin}
.trades-card table{width:100%;min-width:510px;font-size:11px}
.trades-card th{font-size:10px!important;letter-spacing:0!important;text-transform:none!important;color:#c0c9c0!important;white-space:nowrap;padding:11px 7px!important}
.trades-card td{font-size:11px!important;color:#e7ebe6!important;padding:10px 7px!important;line-height:1.2}
.trades-card .link-button{font-size:11px!important;color:#e9f7ed!important}
.trades-card td small{font-size:10px;opacity:.75}
.trade-direction{padding:3px 8px;display:inline-flex;min-width:43px;justify-content:center;border-radius:5px;font-size:10px;font-weight:780}
.trade-direction.buy{color:#6ff9ae;background:#063b21}
.trade-direction.sell{color:#fb807b;background:#421f20}
.quick-card .action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important}
.quick-card .action-grid button{height:101px!important;min-height:101px!important;border-radius:12px!important;background:linear-gradient(135deg,#101b17,#070f0d)!important;border:1px solid #1e332a!important;padding:12px 14px!important;gap:4px!important}
.quick-card .action-grid button:hover{background:#102518!important;border-color:#197c47!important}
.quick-card .action-grid b{font-size:26px!important;font-weight:400;line-height:1;color:#2deb83!important}
.quick-card .action-grid strong{font-size:12px!important;font-weight:690}
.quick-card .action-grid small{font-size:11px!important;color:#a1a99f!important}
.focus-card .focus-item{padding:13px 0!important;font-size:12px!important;color:#d8e1d9}
.focus-card .focus-status{border-radius:4px!important;width:16px!important;height:16px!important;flex-basis:16px!important;color:#42ea93}
/* Preserve dense editorial style in secondary pages. */
#view-overview .link-button{font-weight:500}
#view-overview .section-symbol{color:#23ed83}
@media(max-width:1570px) and (min-width:1151px){
.sidebar{width:270px!important;flex-basis:270px!important}
.content{padding:16px 18px 30px 23px!important}
.kpi-grid.kpi-six{gap:10px!important}
.kpi{padding:15px 10px 12px!important}
.kpi-label{font-size:11px!important;gap:7px}.kpi-svg{width:20px;height:20px}
.kpi-value{font-size:25px!important}
.overview-main-grid,.overview-bottom-grid{gap:11px!important}
#view-overview .notice{left:290px}
}
@media(max-width:1150px) and (min-width:721px){
.sidebar{width:225px!important;flex-basis:225px!important;padding:15px 10px!important}
.sidebar .nav-link{font-size:12px!important;height:43px;min-height:43px!important;padding:7px 10px!important;gap:8px!important}
.sidebar .nav-svg{width:18px!important;height:18px!important}
.sidebar .logo span{font-size:32px!important}.sidebar .logo small{font-size:12px!important}
.content{padding:18px 16px 40px!important}
.kpi-grid.kpi-six{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.overview-main-grid{height:auto!important;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important}
.overview-right{grid-column:1/-1!important;grid-template-columns:1fr 1fr!important;grid-template-rows:auto!important}
.overview-bottom-grid{grid-template-columns:1fr 1fr!important}
.overview-bottom-grid .focus-card{grid-column:1/-1!important;margin-top:0!important;height:auto!important}
}
@media(max-width:720px){
.sidebar{width:100%!important;height:auto!important;min-height:0!important;padding:13px!important;position:relative!important}
.sidebar .logo{padding:0!important}.sidebar .logo span{font-size:28px!important}.sidebar .logo small{font-size:12px!important}
.sidebar .logo-tagline{margin:2px 0 7px!important}
.sidebar .main-nav .nav-link{font-size:12px!important;min-height:40px!important;height:40px!important;gap:8px!important;padding:8px 12px!important}
.nav-svg{width:16px!important;height:16px!important}
.sidebar-account-list,.sidebar-bottom{display:none!important}
.content{padding:17px 13px 40px!important}
.page-heading{align-items:flex-start!important;gap:10px!important}
.page-heading h1{font-size:25px!important}
.dashboard-actions{gap:8px;justify-content:flex-end}
.month-select-wrap{min-width:180px;max-width:210px;height:40px}
#add-trade-top{height:40px;min-width:132px!important;font-size:12px!important}
.kpi-grid.kpi-six{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
.kpi{height:107px!important;min-height:107px!important;padding:13px 10px!important}
.kpi-label{font-size:11px!important;gap:8px!important}.kpi-svg{width:19px;height:19px}.kpi-value{font-size:25px!important}.kpi small{font-size:10px!important}
.overview-main-grid,.overview-bottom-grid{display:grid!important;grid-template-columns:1fr!important;height:auto!important;gap:12px!important}
.overview-main-grid>.performance-panel,.overview-main-grid>.calendar-panel{height:auto!important;min-height:270px!important}
.overview-right{grid-column:auto!important;grid-template-rows:auto!important;grid-template-columns:1fr!important}
.overview-bottom-grid>.panel,.overview-bottom-grid>.focus-card{height:auto!important;min-height:0!important;margin-top:0!important}
.chart-container{height:247px!important}
.calendar-panel .cal-grid{gap:6px!important}
.calendar-panel .cal-cell{height:41px!important;min-height:41px!important}
#view-overview .notice{position:relative;bottom:auto;left:auto;max-width:none;margin-bottom:10px}
}
/* Final alignment corrections discovered in 1648px comparison. */
.month-select-wrap{flex-direction:row!important;justify-content:space-between!important}
.month-select-wrap select{flex:1 1 auto!important;min-height:0!important;height:38px!important;max-width:none!important;line-height:38px!important;text-transform:capitalize}
.month-select-wrap .inline-svg,.month-select-wrap .chevron-svg{display:block;position:static;flex:0 0 auto}
.overview-right .panel-head{margin-bottom:6px!important}
.overview-right .detail-row{padding:3px 0!important;font-size:11.5px!important;line-height:1.25!important}
.overview-right .detail-row strong{font-size:11.5px!important}
.overview-right .best-row{padding:4px 0!important;line-height:1.2!important}
.overview-right .best-row strong{font-size:10.5px!important;padding:2px 5px!important}