/* ============================================================
   FİNAPSİS — Base + Components
   ============================================================ */

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg-0); color:var(--text);
  font-family:var(--font-sans); font-size:var(--fs-body);
  line-height:1.45; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none}
input,select,textarea{font:inherit}
::selection{background:var(--accent-soft); color:var(--text-hi)}

/* numerals */
.num,.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.up{color:var(--up)} .down{color:var(--down)} .warn{color:var(--warn)}
.muted{color:var(--text-mid)} .dim{color:var(--text-lo)}
.hi{color:var(--text-hi)} .accent{color:var(--accent)}

/* micro eyebrow label — used sparingly */
.eyebrow{font-size:var(--fs-micro); letter-spacing:.09em; text-transform:uppercase; color:var(--text-lo); font-weight:500}

/* ---------- Scrollbars ---------- */
*{scrollbar-width:thin; scrollbar-color:#2a322f transparent}
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-thumb{background:#222a27; border-radius:99px; border:2px solid transparent; background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#33403b; background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- App shell ---------- */
.app{display:flex; min-height:100vh}
.mainCol{flex:1; min-width:0; display:flex; flex-direction:column}
.content{flex:1; min-width:0; padding:var(--s-7) var(--s-8) var(--s-11); max-width:var(--maxw); width:100%; margin:0 auto}

/* sidebar */
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:var(--bg-sidebar);
  border-right:1px solid var(--border-subtle); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; z-index:30;
}
.sb-head{display:flex; align-items:center; gap:10px; height:var(--topbar-h); padding:0 14px 0 18px; border-bottom:1px solid var(--border-subtle)}
.logo{display:flex; align-items:center; gap:10px; min-width:0}
.monogram{width:28px; height:28px; flex:0 0 28px; border-radius:7px; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-family:var(--font-mono); font-weight:700; font-size:16px; letter-spacing:-.04em}
.wordmark{font-size:18px; font-weight:600; letter-spacing:-.025em; color:var(--text-hi)}
.wordmark b{color:var(--accent); font-weight:600}
.sb-collapse{margin-left:auto; width:28px; height:28px; border-radius:var(--r-sm); color:var(--text-lo); display:grid; place-items:center}
.sb-collapse:hover{background:var(--bg-2); color:var(--text)}

.sb-nav{flex:1; overflow-y:auto; padding:10px 10px}
.sb-group-label{padding:14px 10px 6px; font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); font-weight:500}
.nav-item{display:flex; align-items:center; gap:11px; height:38px; padding:0 11px; border-radius:var(--r-md);
  color:var(--text-mid); font-size:var(--fs-sm); font-weight:450; position:relative; cursor:pointer; white-space:nowrap}
.nav-item .ic{color:var(--text-lo); flex:0 0 auto}
.nav-item:hover{background:var(--bg-2); color:var(--text-hi)}
.nav-item:hover .ic{color:var(--text)}
.nav-item .chev{margin-left:auto; color:var(--text-dim)}
.nav-item.active{background:var(--bg-2); color:var(--text-hi); font-weight:500}
.nav-item.active .ic{color:var(--accent)}
.nav-item.active::before{content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--accent)}

.nav-sub{display:flex; flex-direction:column; margin:2px 0 4px; padding-left:30px; position:relative}
.nav-sub::before{content:""; position:absolute; left:18px; top:4px; bottom:8px; width:1px; background:var(--border-subtle)}
.nav-subitem{display:flex; align-items:center; height:32px; padding:0 11px; border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--text-mid); font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.01em}
.nav-subitem:hover{background:var(--bg-2); color:var(--text-hi)}
.nav-subitem.active{color:var(--accent)}
.app.collapsed .nav-sub{display:none}

/* desktop-only badge (visible only on mobile) */
.desk-badge{display:none; margin-left:auto; color:var(--text-dim)}
.nav-item.deskonly .desk-badge{align-items:center}

/* mobile 'desktop is better' nudge */
.desk-nudge{display:none}

.sb-foot{padding:10px; border-top:1px solid var(--border-subtle)}
.user-card{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-md); border:1px solid var(--border-subtle); cursor:pointer}
.user-card:hover{background:var(--bg-2); border-color:var(--border)}
.avatar{width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-weight:600; font-size:12px}
.user-meta{min-width:0; line-height:1.25}
.user-meta b{display:block; font-size:var(--fs-sm); color:var(--text-hi); font-weight:500; overflow:hidden; text-overflow:ellipsis}
.user-meta span{font-size:var(--fs-micro); color:var(--text-lo)}

/* collapsed sidebar */
.app.collapsed .sidebar{width:var(--sidebar-w-collapsed); flex-basis:var(--sidebar-w-collapsed)}
.app.collapsed .wordmark,.app.collapsed .nav-item span,.app.collapsed .nav-item .chev,
.app.collapsed .sb-group-label,.app.collapsed .user-meta{display:none}
.app.collapsed .sb-head{padding:0; justify-content:center}
.app.collapsed .sb-collapse{display:none}
.app.collapsed .nav-item{justify-content:center; padding:0}
.app.collapsed .user-card{justify-content:center; padding:9px 0}

/* topbar */
.topbar{height:var(--topbar-h); flex:0 0 var(--topbar-h); display:flex; align-items:center; gap:14px;
  padding:0 var(--s-8); border-bottom:1px solid var(--border-subtle); background:var(--bg-0);
  position:sticky; top:0; z-index:20}
.global-search{flex:1; max-width:560px; display:flex; align-items:center; gap:10px; height:38px; padding:0 14px;
  background:var(--bg-3); border:1px solid var(--border-subtle); border-radius:var(--r-md); color:var(--text-lo)}
.global-search:focus-within{border-color:var(--border-strong)}
.global-search input{flex:1; background:none; border:none; outline:none; color:var(--text-hi); font-size:var(--fs-sm)}
.global-search input::placeholder{color:var(--text-lo)}
.global-search kbd{font-family:var(--font-mono); font-size:11px; color:var(--text-lo); border:1px solid var(--border); border-radius:4px; padding:1px 5px}
.topbar-actions{margin-left:auto; display:flex; align-items:center; gap:6px}
.icon-btn{width:36px; height:36px; border-radius:var(--r-md); display:grid; place-items:center; color:var(--text-mid); position:relative}
.icon-btn:hover{background:var(--bg-2); color:var(--text-hi)}
.icon-btn .dot{position:absolute; top:8px; right:9px; width:6px; height:6px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-0)}

/* ---------- Page header ---------- */
.page-head{display:flex; align-items:flex-start; gap:16px; margin-bottom:var(--s-7)}
.page-head h1{font-size:var(--fs-h1); font-weight:600; color:var(--text-hi); letter-spacing:-.02em}
.page-head .sub{font-size:var(--fs-sm); color:var(--text-mid); margin-top:3px}
.page-head .spacer{flex:1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 14px;
  border-radius:var(--r-md); font-size:var(--fs-sm); font-weight:500; border:1px solid var(--border);
  color:var(--text-hi); background:var(--bg-1); white-space:nowrap; transition:background .12s,border-color .12s}
.btn:hover{background:var(--bg-2); border-color:var(--border-strong)}
.btn .ic{color:var(--text-mid)}
.btn-primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600}
.btn-primary:hover{background:var(--accent-hi); border-color:var(--accent-hi)}
.btn-primary .ic{color:var(--on-accent)}
.btn-ghost{background:transparent; border-color:transparent; color:var(--text-mid)}
.btn-ghost:hover{background:var(--bg-2); color:var(--text-hi)}
.btn-sm{height:30px; padding:0 10px; font-size:var(--fs-xs); border-radius:var(--r-sm)}
.btn-icon{width:36px; padding:0}
.btn:focus-visible,.nav-item:focus-visible,.chip:focus-visible{outline:none; box-shadow:var(--ring-focus)}

/* ---------- Segmented control / tabs ---------- */
.segmented{display:inline-flex; gap:3px; padding:3px; background:var(--bg-3); border:1px solid var(--border-subtle); border-radius:var(--r-md)}
.segmented button{height:30px; padding:0 13px; border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--text-mid); font-weight:500; white-space:nowrap; display:inline-flex; align-items:center}
.segmented button:hover{color:var(--text-hi)}
.segmented button.on{background:var(--accent-soft); color:var(--accent)}

.tabs{display:flex; gap:2px; border-bottom:1px solid var(--border-subtle)}
.tabs button{height:40px; padding:0 14px; font-size:var(--fs-sm); color:var(--text-mid); font-weight:500; position:relative}
.tabs button:hover{color:var(--text-hi)}
.tabs button.on{color:var(--text-hi)}
.tabs button.on::after{content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--accent); border-radius:2px}

/* ---------- Chips / filters ---------- */
.chip-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.chip{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--bg-1); color:var(--text); font-size:var(--fs-sm); font-weight:450; white-space:nowrap}
.chip:hover{border-color:var(--border-strong); color:var(--text-hi)}
.chip .ic{color:var(--text-lo)}
.chip.on{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent)}
.chip.on .ic{color:var(--accent)}
.chip .x{color:var(--text-lo); margin-left:1px; display:grid; place-items:center}
.chip .x:hover{color:var(--text-hi)}
.chip .cnt{font-family:var(--font-mono); font-size:11px; color:var(--text-lo)}
.chip-select{padding-right:8px}
.chip-select .ic-chev{color:var(--text-lo)}

/* ---------- Badge / popup primitives ---------- */
.sc-badge-area,.cl-badge-area{display:flex; gap:10px; flex-wrap:wrap; align-items:center; position:relative; z-index:50; min-height:40px}
.sc-badge,.cl-badge{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); color:#ddd; padding:10px 14px; border-radius:10px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; transition:all .2s ease; position:relative; white-space:nowrap}
.sc-badge:hover,.cl-badge:hover{background:var(--bg-2); border-color:var(--border-strong); color:var(--text-hi)}
.sc-badge.market-badge,.cl-badge.market-badge,.sc-badge.active,.cl-badge.active{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent)}
.sc-badge.disabled,.cl-badge.disabled{opacity:1; pointer-events:none; cursor:not-allowed; color:var(--text-dim); border-color:var(--border-subtle); background:var(--bg-1)}
.sc-badge.reset-btn,.cl-badge.reset-btn{background:rgba(255,77,77,.1); border-color:rgba(255,77,77,.3); color:#ff4d4d; margin-left:auto}
.sc-badge.reset-btn:hover,.cl-badge.reset-btn:hover{background:rgba(255,77,77,.2)}
.sc-badge-close{padding:4px; margin-right:-6px; border-radius:4px; color:rgba(255,255,255,.5); transition:.2s}
.sc-badge-close:hover{background:rgba(255,77,77,.2); color:#ff4d4d}
/* Floating popovers — design-system styling (was legacy: hardcoded #141414,
   font-weight:900, 16px radius). Now: bg-elev + strong hairline + soft shadow. */
.sc-sector-popup,.cl-popup-menu,.sc-market-popup{position:absolute; top:calc(100% + 6px); left:0; width:260px; background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:var(--r-md); box-shadow:var(--shadow-overlay); z-index:1000; display:none; overflow:hidden}
.sc-sector-head{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border-subtle)}
.sc-sector-title{font-weight:500; font-size:var(--fs-xs); letter-spacing:.04em; text-transform:uppercase; color:var(--text-lo)}
.sc-sector-actions{display:flex; align-items:center; gap:10px}
.sc-sector-clear{font-size:var(--fs-xs); font-weight:500; color:var(--accent); background:transparent; border:0; cursor:pointer}
.cl-popup-search{padding:8px; border-bottom:1px solid var(--border-subtle)}
.cl-popup-input,.cl-popup-search-input{width:100%; height:34px; background:var(--bg-2); border:1px solid var(--border); color:var(--text-hi); padding:0 10px; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:400; outline:none}
.cl-popup-input:focus,.cl-popup-search-input:focus{border-color:var(--border-strong); box-shadow:var(--ring-focus)}
.sc-sector-list,.cl-popup-list{max-height:280px; overflow-y:auto; padding:6px}
.sc-sector-item,.cl-popup-item{padding:8px 10px; border-radius:var(--r-sm); cursor:pointer; color:var(--text); font-size:var(--fs-sm); font-weight:450; border:1px solid transparent; transition:background .12s, color .12s}
.sc-sector-item:hover,.cl-popup-item:hover{background:var(--bg-2); color:var(--text-hi)}
.sc-sector-item.active,.cl-popup-item.selected{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent)}
.cl-control-bar{display:flex; gap:15px; align-items:center; position:relative; z-index:2001}
.cl-badge-area{flex:0 0 auto}

/* shared ticker search / dropdown primitives */
.cl-search-wrap,.search-wrap{position:relative; z-index:2002}
.cl-search-input,.search-input{width:100%; background:#111; border:1px solid #333; color:#fff; padding:12px 36px 10px 36px; border-radius:10px; font-size:13px; outline:none; transition:.2s}
.cl-search-input:focus,.search-input:focus{border-color:#c2f50e; background:#161616}
.cl-search-icon,.search-icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#666; font-size:12px}
.search-wrap .search-clear-btn{position:absolute; right:8px; top:50%; transform:translateY(-50%)}
.search-dd{position:absolute; top:44px; left:0; right:0; z-index:50; background:rgba(15,15,15,.98); border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow:0 20px 40px rgba(0,0,0,.55); overflow:hidden; display:none; max-width:100%}
.dd-item{padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer; display:flex; justify-content:space-between; gap:10px; align-items:center}
.dd-item:hover{background:rgba(255,255,255,.04)}
.dd-item.is-disabled{opacity:.55; pointer-events:none}
.dd-item.is-disabled:hover{background:transparent}
.dd-item:last-child{border-bottom:none}
.dd-left{display:flex; flex-direction:column; min-width:0}
.dd-title{font-weight:900; color:#fff; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dd-sub{font-size:11px; color:rgba(255,255,255,.55); font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.dd-right{display:flex; gap:8px; align-items:center; flex-shrink:0}
.dd-ticker{font-family:var(--font-mono); font-weight:900; color:var(--accent); font-size:12px}

/* shared table, snapshot, and range primitives for Detail / Valuation */
.fin-table{width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-sm)}
.fin-table thead th{position:sticky; top:0; z-index:3; background:var(--bg-1); height:42px; padding:0 12px; text-align:right; color:var(--text-lo); font-size:var(--fs-micro); letter-spacing:.05em; text-transform:uppercase; font-weight:500; border-bottom:1px solid var(--border); white-space:nowrap}
.fin-table thead th:first-child,.fin-table tbody td:first-child{text-align:left}
.fin-table tbody td{padding:10px 12px; text-align:right; border-bottom:1px solid var(--border-subtle); color:var(--text); font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.fin-table tbody tr:last-child td{border-bottom:none}
.fin-table tbody tr:hover td{background:var(--bg-2)}
.fin-table tbody tr.muted-row td{color:var(--text-lo)}
.fin-table tbody td:first-child{font-family:var(--font-sans); color:var(--text-hi); font-weight:500}
.fin-table.sticky-first th:first-child,.fin-table.sticky-first td:first-child{position:sticky; left:0; z-index:2; background:var(--bg-1)}
.fin-table.sticky-first thead th:first-child{z-index:4}
.fin-table.sticky-first tbody tr:hover td:first-child{background:var(--bg-2)}
.fin-table.sticky-first th:first-child::after,.fin-table.sticky-first td:first-child::after{content:""; position:absolute; top:0; right:0; bottom:0; width:1px; background:var(--border-subtle)}

.snapshot-grid{display:flex; flex-direction:column; gap:8px}
.snapshot-row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--border-subtle)}
.snapshot-row:last-child{border-bottom:none}
.snapshot-row .k{color:var(--text-lo); font-size:var(--fs-micro); letter-spacing:.07em; text-transform:uppercase; font-weight:500}
.snapshot-row .v{color:var(--text-hi); font-family:var(--font-mono); font-size:var(--fs-sm); text-align:right}

.range-container{position:relative; height:38px; display:flex; align-items:center; width:100%}
.range-track{width:100%; height:6px; background:var(--bg-3); border-radius:var(--r-pill); position:relative; overflow:visible; border:0}
.range-track.range-track-bias{background:linear-gradient(90deg,var(--down-soft),var(--bg-3) 50%,var(--up-soft))}
.range-track.range-track-confidence{background:linear-gradient(90deg,var(--down-soft),var(--warn-soft) 50%,var(--up-soft))}
.range-track .range-center-marker{position:absolute; top:50%; left:50%; width:1px; height:14px; transform:translate(-50%,-50%); background:var(--border-strong)}
.range-fill{height:100%; background:var(--accent); border-radius:var(--r-pill); position:absolute; left:0; top:0}
.range-fill.range-fill-hidden{display:none}
.range-thumb{width:12px; height:12px; background:var(--accent); border:2px solid var(--bg-1); border-radius:50%; position:absolute; top:50%; transform:translate(-50%,-50%); z-index:2; box-shadow:none}
.range-label-float{position:absolute; top:-28px; left:50%; transform:translateX(-50%); background:var(--bg-elev); padding:3px 8px; border-radius:var(--r-sm); border:1px solid var(--border); color:var(--text-hi); font-size:var(--fs-micro); font-weight:600; white-space:nowrap}
.range-minmax{display:flex; justify-content:space-between; margin-top:6px; font-size:var(--fs-xs); color:var(--text-lo)}
.range-minmax-caption{color:var(--text-dim); margin-right:4px}
.metric-range-block{padding:9px 0; border-bottom:1px solid var(--border-subtle)}
.metric-range-block:last-child{border-bottom:none}
.metric-subline{font-size:var(--fs-xs); color:var(--text-mid); margin-top:4px}
.metric-inline-warn{display:inline-block; margin-left:6px; padding:2px 6px; border-radius:999px; border:1px solid #7f2b46; background:#2c1020; color:#ff8fa3; font-size:10px; font-weight:900; vertical-align:middle}

.is-hidden-soft{display:none}
/* Listeler / Karşılaştırma shared modal primitives */
.fl-modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:10000}
.fl-modal-card{width:min(920px, calc(100vw - 30px)); max-height:84vh; background:#0f0f0f; border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px; overflow:hidden; display:flex; flex-direction:column; gap:10px}
.fl-modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.fl-modal-head h3{margin:0; font-size:18px}
.fl-modal-head p{margin:3px 0 0; font-size:12px; color:rgba(255,255,255,.66)}
.fl-modal-label{display:block; font-size:11px; color:rgba(255,255,255,.72); margin-bottom:6px; font-weight:700}
.fl-modal-input{width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); color:#fff; border-radius:10px; min-height:38px; padding:8px 10px; font-size:12px}
.fl-modal-textarea{resize:vertical; min-height:88px}
.fl-modal-input:focus{outline:none; border-color:rgba(194,245,14,.55); box-shadow:0 0 0 2px rgba(194,245,14,.12)}
.fl-modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:12px}
.fl-btn{height:36px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:#fff; border-radius:10px; padding:0 12px; cursor:pointer; font-size:12px; font-weight:700}
.fl-btn:hover{background:rgba(255,255,255,.09); border-color:rgba(194,245,14,.35)}
.fl-btn-primary{border-color:rgba(194,245,14,.55); background:rgba(194,245,14,.16); color:#e7ff9b}
.fl-btn-primary:hover{background:rgba(194,245,14,.2)}

/* ---------- Badges / pills ---------- */
.pill{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:var(--r-pill);
  font-size:var(--fs-micro); font-weight:600; letter-spacing:.02em; border:1px solid transparent}
.pill-ticker{font-family:var(--font-mono); border-radius:var(--r-xs); background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); height:24px; padding:0 8px; font-weight:600}
.pill-up{background:var(--up-soft); color:var(--up)}
.pill-down{background:var(--down-soft); color:var(--down)}
.pill-warn{background:var(--warn-soft); color:var(--warn)}
.pill-neutral{background:var(--bg-2); color:var(--text-mid); border-color:var(--border)}
.tag{display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--r-xs);
  font-size:var(--fs-micro); color:var(--text-mid); background:var(--bg-2); border:1px solid var(--border-subtle)}

/* generic mode / filter badge */
.ind-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 12px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:var(--bg-1);
  color:var(--text);
  font-size:var(--fs-sm);
  font-weight:450;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  transition:border-color .12s,color .12s,background .12s;
}
.ind-badge:hover{border-color:var(--border-strong); color:var(--text-hi)}
.ind-badge.active{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent)}

/* delta value with caret */
.delta{display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.delta .ic{width:13px;height:13px}

/* ---------- Panels / cards ---------- */
.panel{background:var(--bg-1); border:1px solid var(--border-subtle); border-radius:var(--r-lg)}
.panel-pad{padding:var(--s-6)}
.panel-head{display:flex; align-items:center; gap:10px; padding:14px var(--s-6); border-bottom:1px solid var(--border-subtle)}
.panel-head h3{font-size:var(--fs-h3); font-weight:600; color:var(--text-hi)}
.panel-head .spacer{flex:1}
.panel-body{padding:var(--s-6)}

/* KPI card */
.kpi-grid{display:grid; gap:12px}
.kpi{background:var(--bg-1); border:1px solid var(--border-subtle); border-radius:var(--r-md); padding:13px 15px 14px}
.kpi .label{font-size:var(--fs-micro); letter-spacing:.07em; text-transform:uppercase; color:var(--text-lo); font-weight:500}
.kpi .val{font-family:var(--font-mono); font-size:var(--fs-kpi); font-weight:500; color:var(--text-hi); margin-top:7px; letter-spacing:-.02em; line-height:1}
.kpi .foot{display:flex; align-items:center; gap:6px; margin-top:8px; font-size:var(--fs-xs)}
.kpi.accent-edge{position:relative; overflow:hidden}
.kpi.accent-edge::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent)}

/* ---------- Data table ---------- */
.tableWrap{overflow:auto; border:1px solid var(--border-subtle); border-radius:var(--r-lg); background:var(--bg-1)}
table.data{width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-sm)}
.data thead th{position:sticky; top:0; z-index:3; background:var(--bg-1); height:42px; padding:0 14px;
  text-align:right; font-size:var(--fs-micro); letter-spacing:.05em; text-transform:uppercase; font-weight:500;
  color:var(--text-lo); white-space:nowrap; border-bottom:1px solid var(--border); user-select:none}
.data thead th .th-in{display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; cursor:pointer}
.data thead th.sortable:hover{color:var(--text)}
.data thead th .sort{color:var(--text-dim)}
.data thead th.sorted{color:var(--accent)}
.data thead th.sorted .sort{color:var(--accent)}
.data th:first-child,.data td:first-child{text-align:left}
.data td{height:var(--row-h); padding:0 14px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--border-subtle); color:var(--text)}
.data tbody tr:last-child td{border-bottom:none}
.data tbody tr:hover td{background:var(--bg-2)}
.data .num{color:var(--text-hi)}

/* sticky first column */
.data.sticky-first th:first-child,.data.sticky-first td:first-child{position:sticky; left:0; z-index:2; background:var(--bg-1)}
.data.sticky-first thead th:first-child{z-index:4}
.data.sticky-first tbody tr:hover td:first-child{background:var(--bg-2)}
.data.sticky-first th:first-child::after,.data.sticky-first td:first-child::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:1px; background:var(--border-subtle)}

/* compact density variant */
.data.compact td{height:var(--row-h-compact)}
.data.compact thead th{height:36px}

/* company cell */
.co{display:flex; align-items:center; gap:11px; text-align:left}
.co-logo{width:30px; height:30px; flex:0 0 30px; border-radius:var(--r-sm); background:var(--bg-2); border:1px solid var(--border-subtle);
  display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--text-mid); overflow:hidden}
.co-meta{min-width:0; line-height:1.3}
.co-meta b{display:block; font-size:var(--fs-sm); color:var(--text-hi); font-weight:500; overflow:hidden; text-overflow:ellipsis; max-width:240px}
.co-meta span{font-size:var(--fs-xs); color:var(--text-lo); font-family:var(--font-mono)}
.rank{font-family:var(--font-mono); color:var(--text-lo); font-size:var(--fs-xs)}
.row-menu{color:var(--text-dim)}
tr:hover .row-menu{color:var(--text-mid)}

/* score badge */
.score{display:inline-grid; place-items:center; min-width:26px; height:24px; padding:0 7px; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-weight:600; font-size:var(--fs-xs)}
.score-good{background:var(--accent-soft); color:var(--accent)}
.score-mid{background:var(--warn-soft); color:var(--warn)}
.score-bad{background:var(--down-soft); color:var(--down)}

/* mini metric box (used in screener detail cols) */
.mbox{display:inline-flex; flex-direction:column; align-items:flex-end; min-width:64px; padding:5px 9px; border-radius:var(--r-sm); border:1px solid var(--border-subtle); background:var(--bg-3)}
.mbox .k{font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-lo)}
.mbox .v{font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-hi); font-weight:500}
.mbox .m{font-size:9px; color:var(--text-dim); font-family:var(--font-mono)}

/* ---------- Bars / meters ---------- */
.pillar{margin:12px 0}
.pillar .top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; font-size:var(--fs-sm); line-height:1.3}
.pillar .top b{font-family:var(--font-mono); color:var(--text-hi); flex:0 0 auto}
.meter{height:6px; border-radius:3px; background:var(--bg-3); overflow:hidden}
.meter>i{display:block; height:100%; border-radius:3px; background:var(--accent)}
.bar-row{display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:12px; padding:7px 0}
.bar-row .bk{font-size:var(--fs-sm); color:var(--text-mid)}
.bar-row .bv{font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-hi)}

/* ---------- Health score ring ---------- */
.ring{position:relative; width:128px; height:128px}
.ring svg{transform:rotate(-90deg)}
.ring .ring-bg{stroke:var(--bg-3)}
.ring .ring-fg{stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset .6s ease}
.ring.mid .ring-fg{stroke:var(--warn)} .ring.bad .ring-fg{stroke:var(--down)}
.ring-center{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.ring-center b{font-family:var(--font-mono); font-size:34px; font-weight:600; color:var(--text-hi); line-height:1}
.ring-center span{font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--text-lo); margin-top:4px}

/* ---------- 52-week range labels ---------- */
.range{margin-top:8px}
.range-ends{display:flex; justify-content:space-between; margin-top:8px; font-size:var(--fs-xs)}
.range-ends .mid{text-align:center}

/* ---------- Inputs ---------- */
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:var(--fs-xs); color:var(--text-mid); font-weight:500}
.input{height:38px; padding:0 12px; background:var(--bg-3); border:1px solid var(--border); border-radius:var(--r-md);
  color:var(--text-hi); font-size:var(--fs-sm); outline:none; width:100%}
.input::placeholder{color:var(--text-lo)}
.input:focus{border-color:var(--border-strong)}
.input.with-ic{padding-left:36px}
.input-wrap{position:relative}
.input-wrap .lead-ic{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-lo)}
.select{appearance:none; background-image:none}

/* ---------- Dropdown / popover ---------- */
.menu{min-width:200px; background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:var(--r-md);
  box-shadow:var(--shadow-overlay); padding:6px; overflow:hidden}
.menu-label{padding:8px 10px 4px; font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--text-lo)}
.menu-item{display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--text); cursor:pointer}
.menu-item:hover{background:var(--bg-2); color:var(--text-hi)}
.menu-item .ic{color:var(--text-lo)}
.menu-item.on{color:var(--accent)} .menu-item.on .ic{color:var(--accent)}
.menu-item .check{margin-left:auto; color:var(--accent)}
.menu-sep{height:1px; background:var(--border-subtle); margin:6px 4px}


/* ---------- Cookie consent ---------- */
.cookie-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:18px;
  z-index:5000;
  padding:0 18px;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.cookie-bar.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.cookie-card{
  width:min(920px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid var(--border-strong);
  border-radius:var(--r-xl);
  background:var(--bg-elev);
  box-shadow:var(--shadow-overlay);
}
.cookie-ic{
  width:40px;
  height:40px;
  border-radius:var(--r-md);
  background:var(--bg-2);
  border:1px solid var(--border-subtle);
  color:var(--accent);
  display:grid;
  place-items:center;
}
.cookie-text b{
  display:block;
  color:var(--text-hi);
  font-size:var(--fs-sm);
  font-weight:600;
  margin-bottom:3px;
}
.cookie-text p{
  color:var(--text-mid);
  font-size:var(--fs-xs);
  line-height:1.55;
  margin:0;
}
.cookie-text a{
  color:var(--accent);
  text-decoration:none;
}
.cookie-text a:hover{
  color:var(--accent-hi);
}
.cookie-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
@media (max-width:760px){
  .cookie-bar{bottom:12px; padding:0 12px}
  .cookie-card{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
  }
  .cookie-actions{
    grid-column:1 / -1;
    justify-content:stretch;
  }
  .cookie-actions .btn{
    flex:1;
  }
}


/* ---------- Modal / drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(5,7,6,.62); backdrop-filter:blur(2px); z-index:80; display:grid; place-items:center; padding:24px}
.modal{width:100%; max-width:520px; background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:var(--r-xl); box-shadow:var(--shadow-overlay); overflow:hidden}
.modal-head{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border-subtle)}
.modal-head h3{font-size:var(--fs-h2); color:var(--text-hi); font-weight:600}
.modal-body{padding:20px}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; border-top:1px solid var(--border-subtle)}
.drawer{position:fixed; top:0; right:0; bottom:0; width:420px; max-width:92vw; background:var(--bg-elev); border-left:1px solid var(--border-strong);
  box-shadow:var(--shadow-overlay); z-index:85; display:flex; flex-direction:column}
.drawer-head{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border-subtle)}
.drawer-body{flex:1; overflow-y:auto; padding:20px}

/* shared correlation modal primitives */
.trend-modal{position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center}
.trend-modal.hidden{display:none}
.trend-modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6)}
.trend-modal-card{position:relative; width:min(720px,94vw); max-height:90vh; overflow:auto;
  border:1px solid var(--border-subtle); border-radius:var(--r-xl); background:var(--bg-elev);
  padding:14px; box-shadow:var(--shadow-overlay)}
.trend-modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px}
.trend-modal-title{font-size:var(--fs-h2); font-weight:600; color:var(--text-hi)}
.trend-modal-close{border:1px solid var(--border); background:var(--bg-2); color:var(--text-mid);
  font-size:var(--fs-xs); font-weight:600; border-radius:var(--r-sm); padding:7px 12px; cursor:pointer}
.trend-modal-close:hover{border-color:var(--border-strong); color:var(--text-hi); background:var(--bg-3)}
.corr-modal-card{width:min(860px,96vw)}
.corr-modal-tabs{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.corr-tab-btn{padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--bg-2); color:var(--text-mid); font-size:var(--fs-xs); font-weight:600}
.corr-tab-btn:hover{border-color:var(--border-strong); color:var(--text-hi)}
.corr-tab-btn.active{color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft)}
.corr-modal-stats{color:var(--text-mid); font-size:var(--fs-xs); font-weight:600; margin-top:2px}
.corr-modal-r2{margin-left:auto; color:var(--text-mid); font-size:var(--fs-xs); font-weight:600}
.corr-rolling-wrap{border-top:1px solid var(--border-subtle); padding-top:8px}
.corr-rolling-toggle{display:inline-flex; align-items:center; gap:6px; color:var(--text-mid); font-size:var(--fs-xs); font-weight:600}
.corr-rolling-chart{height:120px; margin-top:8px}

/* shared correlation empty state */
.detail-corr-empty{padding:16px; color:var(--text-mid); font-size:var(--fs-xs); font-weight:600}

/* ---------- Tooltip ---------- */
.tip{position:relative; display:inline-flex}
.tip .tip-c{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--bg-elev);
  border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:7px 10px; font-size:var(--fs-xs); color:var(--text);
  white-space:nowrap; box-shadow:var(--shadow-overlay); opacity:0; pointer-events:none; transition:opacity .12s; z-index:90}
.tip:hover .tip-c{opacity:1}

/* ---------- States: empty / loading / error ---------- */
.state{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:48px 24px; gap:12px}
.state .state-ic{width:46px; height:46px; border-radius:var(--r-lg); display:grid; place-items:center; background:var(--bg-2); border:1px solid var(--border-subtle); color:var(--text-mid)}
.state h4{font-size:var(--fs-h3); color:var(--text-hi); font-weight:600}
.state p{font-size:var(--fs-sm); color:var(--text-mid); max-width:340px}
.skeleton{background:linear-gradient(90deg,var(--bg-2) 0%,#1a211e 50%,var(--bg-2) 100%); background-size:200% 100%; animation:sk 1.3s ease-in-out infinite; border-radius:var(--r-xs)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.spinner{width:20px; height:20px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--accent); animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* shared loading primitives */
.fp-loading-state{
  min-height:150px;
  padding:34px 20px;
}
.fp-loading-state .spinner{
  margin:0 auto;
}
.fp-loading-state .fp-loading-skeletons{
  width:min(360px, 100%);
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
}
.fp-loading-state .fp-loading-skeletons .skeleton{
  height:10px;
}
.fp-loading-state .fp-loading-skeletons .skeleton:nth-child(1){width:88%; margin:0 auto}
.fp-loading-state .fp-loading-skeletons .skeleton:nth-child(2){width:100%}
.fp-loading-state .fp-loading-skeletons .skeleton:nth-child(3){width:72%; margin:0 auto}
.fp-page-loader{
  position:absolute;
  inset:0;
  z-index:70;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(8,10,10,.76);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.fp-page-loader:not(.is-hidden):not(.hidden){
  display:grid !important;
}
.fp-page-loader.is-hidden,
.fp-page-loader.hidden{
  display:none !important;
}
.fp-page-loader-card{
  width:min(360px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:28px 24px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-xl);
  background:var(--bg-1);
}
.fp-page-loader-card::before{
  content:"";
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:block;
  border-radius:var(--r-md);
  background:var(--accent) url("images/finapsis-favicon.png") center/cover no-repeat;
}
.fp-page-loader-card .fp-loading-state{
  width:100%;
  min-height:0;
  padding:0;
  gap:10px;
}
.fp-page-loader-card .fp-loading-state .spinner{
  width:24px;
  height:24px;
}
.fp-page-loader-card .fp-loading-skeletons{
  width:100%;
}
.fp-loading-row{
  height:auto !important;
  padding:24px !important;
  text-align:center !important;
  white-space:normal !important;
}
.fp-loading-row .fp-loading-state{
  min-height:0;
  padding:32px 18px;
}
.fp-loading-row .fp-loading-skeletons{
  margin-left:auto;
  margin-right:auto;
}


/* alert / callout */
.callout{display:flex; gap:11px; padding:13px 15px; border-radius:var(--r-md); border:1px solid var(--border-subtle); background:var(--bg-1); font-size:var(--fs-sm); color:var(--text-mid)}
.callout .ic{flex:0 0 auto; color:var(--info); margin-top:1px}

/* chart container */
.chart-frame{position:relative}
.chart-legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:var(--fs-xs); color:var(--text-mid)}
.chart-legend i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:middle}
.axis-lbl{font-family:var(--font-mono); font-size:10px; fill:var(--text-lo)}
.grid-line{stroke:var(--border-subtle); stroke-width:1}

/* utility */
.row{display:flex; align-items:center; gap:10px}
.col{display:flex; flex-direction:column}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.wrap{flex-wrap:wrap}
.spacer{flex:1}
.right{margin-left:auto}
.divider{height:1px; background:var(--border-subtle); margin:var(--s-6) 0}
.center{display:grid; place-items:center}
.hide{display:none !important}
.is-hidden{display:none !important}
.is-open{display:block !important}
.mobile-only{display:none !important}

/* ---------- Mobile drawer nav + table→card ---------- */
.nav-scrim{display:none}
@media (max-width:760px){
  .mobile-only{display:grid !important}
  :root{--sidebar-w:0px; --topbar-h:56px}
  .sidebar{position:fixed; top:0; left:0; height:100vh; width:272px; flex-basis:272px;
    transform:translateX(-100%); transition:transform .22s ease; z-index:120; border-right:1px solid var(--border)}
  .sidebar .wordmark,.sidebar .nav-item span,.sidebar .nav-item .chev,.sidebar .sb-group-label,
  .sidebar .user-meta,.sidebar .nav-sub{display:flex}
  .sidebar .wordmark{display:block}
  .sidebar .sb-head{padding:0 14px 0 18px; justify-content:flex-start}
  .sidebar .nav-item{justify-content:flex-start; padding:0 11px}
  .sidebar .user-card{justify-content:flex-start; padding:9px 11px}
  .sidebar .sb-collapse{display:none}
  .app.nav-open .sidebar{transform:translateX(0)}
  .nav-scrim{display:block; position:fixed; inset:0; background:rgba(5,7,6,.6); backdrop-filter:blur(2px);
    z-index:110; opacity:0; pointer-events:none; transition:opacity .2s}
  .app.nav-open .nav-scrim{opacity:1; pointer-events:auto}

  /* table → card list */
  table.data.responsive{display:block}
  .data.responsive thead{display:none}
  .data.responsive tbody,.data.responsive tr{display:block}
  .data.responsive tr{border:1px solid var(--border-subtle); border-radius:var(--r-md); background:var(--bg-1); margin-bottom:10px; padding:6px 0}
  .data.responsive tbody tr:hover td{background:transparent}
  .data.responsive td{display:flex; align-items:center; justify-content:space-between; height:auto !important;
    padding:9px 14px !important; border-bottom:1px solid var(--border-subtle); text-align:right; white-space:normal}
  .data.responsive tr td:last-child{border-bottom:none}
  .data.responsive td::before{content:attr(data-label); color:var(--text-lo); font-size:var(--fs-xs);
    font-family:var(--font-sans); letter-spacing:.02em; text-align:left; padding-right:12px}
  .data.responsive td:first-child{background:var(--bg-2); border-radius:var(--r-md) var(--r-md) 0 0}
  .data.responsive td:first-child::before{display:none}
  .data.responsive.sticky-first td:first-child{position:static}
  .data.responsive.sticky-first td:first-child::after{display:none}
  .data.responsive .co{width:100%}

  .page-head{flex-wrap:wrap}
  .page-head h1{font-size:var(--fs-h2)}
  .filterbar{overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; -webkit-overflow-scrolling:touch}
  .filterbar .chip{flex:0 0 auto}
  .kpi-grid.four,.kpi-grid.six{grid-template-columns:1fr 1fr !important}
  .two,.quad{grid-template-columns:1fr !important}

  /* desktop-only badge in drawer nav */
  .nav-item.deskonly{opacity:.66}
  .nav-item.deskonly .desk-badge{display:inline-flex}

  /* dismissible desktop nudge — bottom sheet style */
  .desk-nudge{display:flex; align-items:center; gap:12px; position:fixed; left:12px; right:12px; bottom:12px; z-index:130;
    padding:13px 14px; background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:var(--r-lg);
    box-shadow:var(--shadow-overlay); animation:nudge-in .3s ease}
  .desk-nudge.dn-hide{opacity:0; transform:translateY(12px); transition:opacity .24s, transform .24s}
  .desk-nudge .dn-ic{width:34px; height:34px; flex:0 0 34px; border-radius:var(--r-md); display:grid; place-items:center;
    background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line)}
  .desk-nudge .dn-text{min-width:0; line-height:1.35}
  .desk-nudge .dn-text b{display:block; font-size:var(--fs-sm); color:var(--text-hi); font-weight:600}
  .desk-nudge .dn-text span{font-size:var(--fs-xs); color:var(--text-mid)}
  .desk-nudge .dn-close{width:30px; height:30px; flex:0 0 30px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--text-lo)}
  .desk-nudge .dn-close:active{background:var(--bg-2)}
  @keyframes nudge-in{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:translateY(0)}}
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  :root{--sidebar-w:64px}
  .sidebar .wordmark,.sidebar .nav-item span,.sidebar .nav-item .chev,.sidebar .sb-group-label,.sidebar .user-meta,.sidebar .sb-collapse{display:none}
  .sb-head{padding:0; justify-content:center}
  .nav-item{justify-content:center; padding:0}
  .user-card{justify-content:center; padding:9px 0}
}
@media (max-width:760px){
  .content{padding:var(--s-6) var(--s-5) var(--s-10)}
  .topbar{padding:0 var(--s-5)}
  .global-search kbd,.topbar-actions .label{display:none}
}