/* =========================================
ROOT
========================================= */

:root{
--header-height:70px;
--primary-color:#2FC1A4;
--accent-color:#c40000;
--light-bg:#f7f7f7fd;
--footer-bg:#e1e1e1;   /* slightly darker than body */
--dark-color:#000;
--chart-label:#4b5563;
--table-bg: #f1efef;
--table-header: #f5f7fb;
--title-text:#97a5bc;
--table-text: #1a1a1a;
--table-border: #e6eaf2;
--card-bg:#e1e1e1;
--txn-bg:#ffffff;
--tabs-height:52px;
--redeem-height: 170px;   /* adjust once */
--filter-height: 44px;
--red-lot-bg:#eecaca;
--red-lot-l1:#0b3f36;
--red-lot-l3:#f1efef;
--bold-font-wt-l1:400;
--bold-font-wt-l2:300;
--checkbox-select:#2FC1A4;
--light-hover:#c2c4c7;
--ui-toggle-hover:#c2c4c7;
}

/* ================================
   CARD HEADER LAYOUT
   Title left | Icons right
================================ */

.card:has(.download-icons){
display:grid;
grid-template-columns: 1fr auto;
align-items:center;
}

/* remove default margins */
.card h3,
.page-title{
margin:0;
}

.card-header{
display:flex;
justify-content:space-between;
align-items:center;
grid-column:1 / -1;
margin-bottom:6px;
}

.tab-panel .card{
position: relative;
}

.tab-panel .card h3,
.tab-panel .card .page-title{
position: sticky;
top: 0;
z-index: 20;
background: var(--card-bg);
padding-top: 8px;
padding-bottom: 8px;
}

.download-icons{
position: sticky;
top: 36px;
z-index: 21;
background: var(--card-bg);
padding-bottom: 6px;
}

.freeze-table thead th{
position: sticky;
top: 72px;
z-index: 10;
background: var(--card-bg);
}

/* ================================
   PROFIT HEADER (special case)
================================ */

.profit-header{
display:flex;
align-items:center;
justify-content:space-between;
margin:0;
}

.profit-header .download-icons{
margin-left:auto;
}

/* ================================
   RIGHT SIDE ICONS
================================ */

.download-icons{
justify-self:end;
display:flex;
gap:14px;
align-items:center;
}

/* ================================
   ICON STYLING
================================ */

.download-icon{
height:24px;
cursor:pointer;
opacity:.85;
transition:.15s ease;
}

.download-icon:hover{
opacity:1;
transform:translateY(-1px);
}

/* ================================
   EXPAND ICON
================================ */

.expand-all{
font-size:24px;
cursor:pointer;
opacity:.75;
transition:.15s ease;
}

.expand-all:hover{
opacity:1;
transform:translateY(-1px);
}

.expand-all.active{
transform:rotate(90deg);
}

/* ================================
   TABLE CONTAINER FULL WIDTH
================================ */

.table-scroll,
#perfContainer,
#transactionContainer,
#txnSummaryTop{
grid-column:1 / -1;
}

/* ================================
   UNIFORM SPACING AFTER HEADER
   (same across all pages)
================================ */

.card > .table-scroll,
.card > #perfContainer,
.card > #txnSummaryTop,
.card > #transactionContainer{
margin-top:14px;
}

/* =========================================
GLOBAL
========================================= */

table th,
table td{
padding:12px 14px;
font-size:13px;
line-height:1.25;
}

.admin-clients-wrap{
  width: 100%;
}

/* ================= ADMIN TABLE ================= */

#admin-overview{
  min-height: calc(100vh - 180px);
}

.admin-loading-state{
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-loading-card{
  min-width: 280px;
  padding: 24px 28px;
  border-radius: 16px;
  background: var(--card-bg);
  color: var(--table-text);
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}

.admin-overview-grid{
  min-height: calc(100vh - 220px);
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.admin-kpi-card{
  min-height: 240px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 18px;
}

.admin-kpi-card .kpi-title{
  font-size: 18px;
  color: var(--title-text);
}

.admin-kpi-card .kpi-value{
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  color: var(--table-text);
}

.admin-client-search{
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin: 0 0 12px 0;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.admin-table-wrap{
  width: 100%;
  box-sizing: border-box;
}

#adminClientsTable{
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* ================= GLOBAL TOGGLE ================= */

.ui-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
width:16px;
min-width:16px;
margin-right:6px;
cursor:pointer;
user-select:none;
transition:transform .15s ease, color .15s ease;
/* default color */
color:#64748b;
}

/* draw arrow */
.ui-toggle::before{
content:"▶";
font-size:14px;
line-height:1;
}

/* rotate when open */
tr.open > td .ui-toggle{
transform:rotate(90deg);
}

/* hover */
.ui-toggle:hover{
color:#1e293b;
}

/* ================= SELECTOR (GMAIL STYLE) ================= */

.txn-table input[type="checkbox"]{
appearance:none;
-webkit-appearance:none;
width:16px;
height:16px;
border-radius:50%;
border:2px solid #b8c2d6;
background:#ffffff;
cursor:pointer;
display:inline-block;
position:relative;
transition:all .15s ease;
}

/* hover */
.txn-table input[type="checkbox"]:hover{
border-color:var(--checkbox-select);
}

/* checked */
.txn-table input[type="checkbox"]:checked{
background:var(--checkbox-select);
border-color:var(--checkbox-select);
}

/* check icon */
.txn-table input[type="checkbox"]:checked::after{
content:"";
position:absolute;
left:4px;
top:1px;
width:4px;
height:8px;
transform:rotate(45deg);
}

/* group selector (header row) slightly bigger */
.txn-select-group{
width:18px !important;
height:18px !important;
}

/* alignment fix with toggle */
.txn-table td:first-child{
display:flex;
align-items:center;
gap:8px;
}

/* ================= MAIN BODY ================= */

body{
margin:0;
font-family:'Segoe UI', sans-serif;
background:var(--light-bg);
}

.logo{
display:block;
height:42px;
width:auto;
}

/* logo switching */

.logo-light{
display:block;
}

.logo-dark{
display:none;
}

#logoutBtn{
display:none;
}

.container{
padding:0 24px 24px;
display:none
}

/* =========================================
DASH HEADER
========================================= */

.dash-header{
position:fixed;
top:0;
left:0;
right:0;
height:var(--header-height);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 20px;
z-index:1000;
will-change: backdrop-filter, background;
background:rgba(255,255,255,0);
backdrop-filter:blur(0px);
transition:all .35s ease;
}

/* =========================================
STICKY & SCROLL GLOBAL EXCEPT TRANSACTION PAGE
========================================= */

.card{
overflow:visible;
}

/* scroll container */
.table-scroll{
overflow:auto;
position:relative;
border-radius:12px;
}

/* table width */
.freeze-table{
min-width:100%;
border-collapse:separate;
}

/* ================= COLUMN WIDTHS ================= */

/* Fund Name */
.freeze-table th:nth-child(1),
.freeze-table td:nth-child(1){
width:280px;
}

/* Weight */
.freeze-table th:nth-child(2),
.freeze-table td:nth-child(2){
width:60px;
}

/* Invested */
.freeze-table th:nth-child(3),
.freeze-table td:nth-child(3){
width:90px;
}

/* Value */
.freeze-table th:nth-child(4),
.freeze-table td:nth-child(4){
width:90px;
text-align:right;
}

/* Gain */
.freeze-table th:nth-child(5),
.freeze-table td:nth-child(5){
width:80px;
text-align:right;
}

/* Return */
.freeze-table th:nth-child(6),
.freeze-table td:nth-child(6){
width:60px;
text-align:right;
}

/* XIRR (Holdings) */
.freeze-table th:nth-child(7),
.freeze-table td:nth-child(7){
width:60px;
text-align:right;
}

/* XIRR (SI) */
.freeze-table th:nth-child(8),
.freeze-table td:nth-child(8){
width:60px;
text-align:right;
}

/* sticky table header */
.freeze-table thead th{
position:sticky;
top:0;
z-index:30;
background:var(--table-header);
}

/* header above column */
.table-scroll thead th:first-child{
z-index:40;
}

/* sticky first column */
.freeze-table th:first-child,
.freeze-table td:first-child{
position:sticky;
left:0;
z-index:35;
background:inherit;
}

/* Initial State */

.txn-loading-state {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* layout */
.txn-layout{
display:flex;
flex-direction:column;
max-height:65vh;
overflow:auto;
border-radius:12px;
}

/* sticky filter bar */
.txn-topbar{
position:relative;
top:0;
z-index:40;
background:var(--card-bg);
padding:12px 12px;
border-radius:12px;
}

/* ===== TABLE HEADER ===== */
.txn-table thead th{
position:sticky;
top:0;
z-index:20;
background:var(--table-header);
}

.dash-header.scrolled{
background:rgba(255,255,255,.92);
backdrop-filter:blur(6px);
box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.dash-left{
display:flex;
align-items:center;
gap:14px;
}

.dash-left img{
height:50px;
width:auto;
}

.dash-title{
font-size:18px;
font-weight:var(--bold-font-wt-l1);
}

.dash-right{
display:flex;
align-items:center;
gap:12px;
}

#clientNameHeader{
font-weight:var(--bold-font-wt-l1);
letter-spacing:.2px;
color:#111827;
}

/* =========================================
BUTTONS
========================================= */

.btn{
padding:8px 14px;
border-radius:6px;
border:none;
cursor:pointer;
font-size:13px;
transition:.25s ease;
}

.btn.primary{
background:#444;
color:white;
}

.btn.primary:hover{
background:var(--accent-color);
}

/* back icon button */
.back-btn{
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;   /* circle */
padding:0;           /* IMPORTANT */
line-height:1;
background:rgba(0,0,0,.04);
border:1px solid rgba(0,0,0,.14);
color:#333;
transition:.18s ease;
}

/* hover */
.back-btn:hover{
background:var(--accent-color);
}

/* icon */
.back-btn i{
font-size:14px;
}

.tab-panel{
margin-top:24px;
}

.tab{
padding:8px 14px;
border-radius:6px;
border:1px solid #ccc;
background:white;
cursor:pointer;
}

.tabs{
display:flex;
gap:8px;
position:fixed;
top:var(--header-height);
left:0;
right:0;
z-index:1000;
background:var(--light-bg);
padding:10px 24px;
}

.tab.active{
background:#444;
color:white;
border-color:#444;
}

.tab-panel{display:none}
.tab-panel.active{display:block}

.tab-panel h3{
margin:0 0 14px 0;
}

#tab-transactions{
overflow:visible !important;
}

#tab-transactions .card{
margin-top:0;
}

/* =========================================
MAIN CONTENT SPACING
========================================= */

.kpi-title{
color:#7d8692;
}

#app{
padding-top:calc(var(--header-height) + var(--tabs-height));
min-height:auto;
display:none;
}

body.loaded #appLoader{
display:none;
}


/* =========================================
LOGIN
========================================= */
#loginPage{
display:none;
}

.login{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}

.login-card{
background:#fff;
padding:22px;
border-radius:12px;
border:1px solid #e6e2dc;
width:280px;
box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.login-card h2{
margin:0 0 14px 0;
font-size:22px;
}

.login-card input{
width:100%;
padding:10px 12px;
margin:8px 0;
border:1px solid #ddd;
border-radius:8px;
font-size:14px;
box-sizing:border-box;
}

.login-card button{
width:100%;
padding:10px;
background:#016a70;
color:#fff;
border:none;
border-radius:8px;
margin-top:12px;
font-size:14px;
cursor:pointer;
}

.error{
color:#c62828;
font-size:12px;
display:none;
}

/* ================= DASHBOARD LAYOUT ================= */

.kpis{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-bottom:20px;
}

.card{
background: var(--card-bg);
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 16px;
height: auto;
min-height: unset;
}

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:10px;
}

.chart-wrap{
height:320px;
}

#assetChart,
#strategyChart{
height:180px !important;
max-height:180px;
}

.card canvas{
width:100% !important;
}

#assetClose,
#strategyClose{
background:transparent;
border:1px solid #2a3446;
color:#9fb0c8;
padding:4px 10px;
border-radius:6px;
cursor:pointer;
}

#assetClose:hover,
#strategyClose:hover{
background:#1a2233;
}

.drilldown{
margin-top:14px;
display:flex;
flex-direction:column;
gap:10px;
}

.drill-row{
display:grid;
grid-template-columns:160px 1fr;
align-items:center;
gap:12px;
font-size:13px;
}

.drill-bar{
height:10px;
border-radius:6px;
overflow:visible;
background:transparent;
position:relative; 
}

.drill-fill{
height:10px;
border-radius:6px;
transition:0.2s;
cursor:pointer;
position:relative; 
}

.drill-fill:hover{
filter:brightness(1.2);
}

.drill-label{
color:#cfd6e4;
}

.drill-value{
text-align:right;
color:#9aa4b2;
}

.drill-tooltip{
position:fixed;
background:#111827;
color:#fff;
padding:6px 10px;
border-radius:6px;
font-size:12px;
pointer-events:none;
z-index:9999;
opacity:0;
transition:opacity .12s ease;
white-space:nowrap;
box-shadow:0 4px 14px rgba(0,0,0,.35);
}

.drill-tooltip.show{
opacity:1;
}

/* ================= LIGHT MODE (default) ================= */

/* fund rows */
tr.level-0{
font-weight:var(--bold-font-wt-l1);
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
color:#111827;
}
/* PAN row */
tr.level-1{
font-weight:var(--bold-font-wt-l2);
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
color:#1f2937;
}
/* strategy row */
tr.level-2{
font-weight:var(--bold-font-wt-l1);
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
color:#4b5563;
}
/* category row */
tr.level-3{
font-weight:var(--bold-font-wt-l1);
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
color:#111827;
}


/* ===== SINGLE FAINT SEPARATOR ===== */

tbody tr:first-child{
border-top:none;
}

/* LIGHT MODE hover */
tbody tr:hover{
background:var(--light-hover);
}

/* sticky table header */
.txn-scroll thead th{
position:sticky;
top:calc(var(--header-height) + var(--tabs-height));
z-index:30;
background:var(--table-header);
}

/* sticky first column */
.txn-scroll th:first-child,
.txn-scroll td:first-child{
position:sticky;
left:0;
z-index:30;
background:var(--table-header);
}

.txn-scroll thead th:first-child{
z-index:50;
}

.panLink{
color:#2a6fd6;
cursor:pointer;
font-weight:var(--bold-font-wt-l1);
}

/* toggle arrow spacing */
.panToggle,
.stratToggle{
cursor:pointer;
margin-right:6px;
display:inline-block;
width:14px;
color:#6b7280;
}

.panLink:hover{
text-decoration:underline;
}

.tab-panel .card{
padding:18px 20px;
}

/* ================= REDEMPTION LOT PANEL ================= */

#txnSummaryTop{
display:none;
position:sticky;
top:calc(var(--header-height) + var(--tabs-height));
z-index:80;
border-radius:12px;
margin-bottom:0px;
}

#txnSummaryTop.active{
display:block;
}

.txn-summary{
display:flex;
flex-direction:column;
max-height:280px;
overflow:hidden;
border-radius:12px;
background:var(--card-bg);
}

/* sticky title */
.txn-summary-title{
position:sticky;
top:0;
z-index:4;
background:var(--table-header);
padding:10px 12px;
font-weight:var(--bold-font-wt-l1);
}

/* scroll body */
.txn-summary-scroll {
  max-height: 140px;
  overflow-y: auto;
}

.txn-summary-table{
width:100%;
border-collapse:collapse;
table-layout: fixed;
}

.txn-summary-table tbody{
background: var(--light-bg);
}

.txn-summary-table thead th{
position:sticky;
top:0;
z-index:3;
color:var(--table-header);
background:var(--red-lot-l1);
}

/* total sticky */
.txn-summary-total{
position:sticky;
bottom:0;
color:var(--table-header);
background:var(--red-lot-l1);
font-weight:var(--bold-font-wt);
}

/* LIGHT MODE hover */
.txn-summary-total:hover{
background:var(--red-lot-l1);
}

/* ================= REDEMPTION TABLE COLUMN WIDTH ================= */

.txn-summary-table{
table-layout:fixed;
width:100%;
}

/* first column wide */
.txn-summary-table th:nth-child(1),
.txn-summary-table td:nth-child(1){
width:42%;
text-align:left;
}

/* numeric columns compact */
.txn-summary-table th:nth-child(n+2),
.txn-summary-table td:nth-child(n+2){
width:11.6%;
text-align:right;
}

/* ================= TRANSACTION TABLE LIGHT MODE ================= */

#tab-transactions{
position:relative;
z-index:1;
}

/* ===== top bar ===== */

.txn-header-bar{
display:flex;
align-items:center;
justify-content:space-between;
margin:0 0 14px 0;
}

.txn-title span{
color:var(--title-text);
font-weight:var(--bold-font-wt-l1);
}


/* ===== filters ===== */

.txn-filters{
display:flex;
gap:18px;
align-items:center;
}

/* ===== switch ===== */

.txn-switch{
display:flex;
align-items:center;
gap:6px;
font-size:12px;
color:#64748b;
cursor:pointer;
}

.txn-switch input{
display:none;
}

.slider{
width:30px;
height:14px;
background:#e5e7eb;
border-radius:20px;
position:relative;
transition:.2s;
}

.slider:before{
content:"";
position:absolute;
width:10px;
height:10px;
left:2px;
top:2px;
background:white;
border-radius:50%;
box-shadow:0 1px 2px rgba(0,0,0,.2);
transition:.2s;
}

.txn-switch input:checked + .slider{
background:var(--checkbox-select);
}

.txn-switch input:checked + .slider:before{
transform:translateX(14px);
}

.switch-label{
font-weight:var(--bold-font-wt-l1);
}

/* ================= TABLE CARD ================= */

#transactionsTable,
.transactions-table{
background:var(--table-bg);
border-radius:12px;
overflow:hidden;
box-shadow:0 1px 2px rgba(0,0,0,0.05);
}

#tab-transactions table{
margin-top:12px;
width:100%;
border-collapse:separate;
border-spacing:0;
}

/* ================= BASE TABLE ================= */

.txn-table{
width:100%;
table-layout:fixed;
border-collapse:separate;
}

.txn-scroll{
position:relative;
border-radius:12px;
background:var(--table-bg);
overflow:hidden;
}

/* ================= STRATEGY LINE ================= */

.txn-strategy-name{
color:#000000;
text-align: left;
}

/* =========================================
TRANSACTION HOVER — include sticky columns
========================================= */

.txn-table tbody tr:hover td{
background: var(--ui-toggle-hover);
}

#transactionContainer{
    background:rgba(255,255,255,0);
}

/* ================= Keep strategy row aligned ================= */

.txn-strategy-divider td{
font-weight:var(--bold-font-wt-l1);
border-top:none;
border-bottom:none;
}

/* ================= FUND HEADER ================= */

.txn-control-cell{
display:flex;
align-items:center;
gap:8px;
border-top:none;
border-bottom:none;
}

.txn-control-cell .ui-toggle{
width:14px;
display:flex;
align-items:center;
justify-content:center;
border-top:none;
border-bottom:none;
}

.txn-control-cell .round-check{
display:flex;
align-items:center;
}

.txn-row td:first-child{
align-items: right;
padding-left:auto;
}

/* ================= TEXT CONTROL ================= */

.txn-table th,
.txn-table td{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* Fund/Date header & TXN*/
.txn-table thead th:nth-child(2),
.txn-table thead th:nth-child(3){
text-align:left;
}

/* Strategy level */
.txn-strategy-divider td:nth-child(2){
text-align:left;
}

/* Fund header row */
.txn-group-header td:nth-child(2){
text-align:left;
}

/* transaction rows */
.txn-row td:nth-child(2),
.txn-row td:nth-child(3){
text-align:left;
}

.txn-table th:nth-child(2),
.txn-table td:nth-child(2){
text-align:left;
overflow:hidden;
text-overflow:ellipsis;
}

/* ================= COLUMN WIDTHS ================= */

.txn-table th:nth-child(1),
.txn-table td:nth-child(1){
width:48px;
min-width:48px;
}

/* Fund / Date */
.txn-table th:nth-child(2),
.txn-table td:nth-child(2){
width:240px;
}

/* Txn */
.txn-table th:nth-child(3),
.txn-table td:nth-child(3){
width:80px;
}

/* Units */
.txn-table th:nth-child(4),
.txn-table td:nth-child(4){
width:70px;
text-align:right;
}

/* Cost */
.txn-table th:nth-child(5),
.txn-table td:nth-child(5){
width:60px;
text-align:right;
}

/* CMV */
.txn-table th:nth-child(6),
.txn-table td:nth-child(6){
width:60px;
text-align:right;
}

/* Investment */
.txn-table th:nth-child(7),
.txn-table td:nth-child(7){
width:90px;
text-align:right;
}

/* Current Value */
.txn-table th:nth-child(8),
.txn-table td:nth-child(8){
width:90px;
text-align:right;
}

/* Gain */
.txn-table th:nth-child(9),
.txn-table td:nth-child(9){
width:70px;
text-align:right;
}

/* Return */
.txn-table th:nth-child(10),
.txn-table td:nth-child(10){
width:65px;
text-align:right;
}

/* ================= ROW STYLING ================= */

/* uniform row separator */
.txn-table tbody tr{
position:relative;
border-top:none;
border-bottom:none;
}

.txn-table tbody tr::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:1px;
background:var(--dark-table-bg);
z-index:1;
}

/* hover */
.txn-table tbody tr:hover{
background:var(--ui-toggle-hover);
}

/* selected */
.txn-row.selected{
background:var(--ui-toggle-hover);
}

/* ================= GROUP HEADERS ================= */

.txn-group-header{
background:transparent;
font-weight:var(--bold-font-wt-l1);
color:#374151;
}

.txn-group-header td{
font-weight:var(--bold-font-wt-l1);
}

/* ================= STRATEGY DIVIDER ================= */

.txn-strategy-divider td{
background:transparent;
font-weight:var(--bold-font-wt-l1);
}

/* ================= TXN ROW WIDTH ================= */

.txn-table th,
.txn-table td{
padding:12px 14px;
}

/* ================= SUMMARY ================= */

.txn-summary-table th,
.txn-summary-table td{
padding:12px 14px;
}

.txn-summary{
margin:0 0 16px 0;
border-radius:12px;
overflow:hidden;
}

.txn-summary.sticky{
position:sticky;
bottom:0;
z-index:5;
}

.txn-summary-title{
font-weight:var(--bold-font-wt-l1);
padding:10px;
border-radius:12px;
background:var(--table-bg);
}

.txn-summary-table{
width:100%;
background: var(--red-lot-l3);
border-collapse:collapse;
}

.txn-summary-table thead tr{
background: var(--red-lot-l3);
}

.txn-summary-table th,
.txn-summary-table td{
font-size:13px;
box-shadow: inset 0 -1px rgba(255,255,255,.05);
}

/* ===== SINGLE FAINT SEPARATOR ===== */

.txn-table tbody tr,
.txn-table tbody tr{
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
}

.txn-summary-table tbody tr{
box-shadow: inset 0 -1px rgba(255,255,255,.12);
}


/* LIGHT MODE hover */
.txn-row:hover{
background:#1b2330;
}

.txn-group-header:hover{
background:#202735;
}

/* =========================================
FOOTER
========================================= */

footer{
background:var(--footer-bg);
border-radius:16px 16px 0 0;
margin-top:60px;
box-shadow:0 -4px 20px rgba(0,0,0,.05);
border-top:1px solid var(--footer-bg);
color:black;
padding:0 8px;
position:relative;
margin-top:60px;
}

/* social icons floating */

.footer-social{
display:flex;
gap:12px;
justify-content:center;
margin-top:-22px;
margin-bottom:10px;
}

.footer-social a{
width:45px;
height:45px;
background:#000;
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
text-decoration:none;
transition:.3s ease;
box-shadow:0 4px 10px rgba(0,0,0,.25);
}

.footer-social a:nth-child(1):hover{background:#DB4437;}
.footer-social a:nth-child(2):hover{background:#25D366;}
.footer-social a:nth-child(3):hover{background:#0077B5;}
.footer-social a:nth-child(4):hover{background:#FBBC05;}

.footer-social a:hover{
transform:translateY(-4px);
}

/* footer layout */

.footer-bottom{
text-align:center;
margin-top:5px;
}

.footer-stack{
display:inline-flex;
flex-direction:column;
align-items:center;
gap:2px;
}

.footer-stack .logo{
width:60px;
height:auto;
margin:15px auto 5px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.brands{
font-size:0.9rem;
font-weight:var(--bold-font-wt-l1);
letter-spacing:.4px;
}

.copyright{
font-size:.6em;
}

.dash-footer-container{
text-align:center;
padding-bottom:20px;
}

/* ================= TABLE LAYOUT ================= */

table{
border-collapse:separate;
border-spacing:0;
width:100%;
background:var(--card);
border-radius:12px;
overflow:hidden;
box-shadow:0 1px 2px rgba(0,0,0,0.04);
}

thead{
background: var(--table-header);
}

/* cells */

th,td{
border:none;
padding:14px 16px;
font-size:13px;
white-space:nowrap;
}

/* header */

th{
font-size:12px;
letter-spacing:.3px;
color:#9aa4b2;
font-weight:var(--bold-font-wt-l1);
}

/* FIRST COLUMN — flexible */

th:first-child,
td:first-child{
text-align:left;
white-space:nowrap;
}

/* NUMERIC COLUMNS — compact */

table:not(.txn-table) th:not(:first-child),
table:not(.txn-table) td:not(:first-child){
text-align:right;
width:110px;
}

/* small numeric columns */

th:nth-child(2),
td:nth-child(2),
th:nth-child(6),
td:nth-child(6),
th:nth-child(7),
td:nth-child(7),
th:nth-child(8),
td:nth-child(8){
width:90px;
}

/* PROFIT TABLE extra small */

#profitContainer th:nth-child(2),
#profitContainer td:nth-child(2),
#profitContainer th:nth-child(3),
#profitContainer td:nth-child(3),
#profitContainer th:nth-child(4),
#profitContainer td:nth-child(4),
#profitContainer th:nth-child(5),
#profitContainer td:nth-child(5),
#profitContainer th:nth-child(9),
#profitContainer td:nth-child(9),
#profitContainer th:nth-child(10),
#profitContainer td:nth-child(10){
width:80px;
}

/* prevent name breaking */

td:first-child{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* ======================================
UNIFORM HIERARCHY INDENTATION
PAN / Performance / Profit
====================================== */

.level-0 td:first-child{
padding-left:10px;
}

.level-1 td:first-child{
padding-left:28px;
}

.level-2 td:first-child{
padding-left:46px;
}

.level-3 td:first-child{
padding-left:64px;
}

/* =========================================
LOADING ANIMATION
========================================= */

.page-loader {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.page-loader.hidden {
  display: none;
}

.loading-text {
  font-size: 16px;
  color: #cbd5e1;
  font-weight: 500;
}

/* =========================================
DARK MODE
========================================= */

@media (prefers-color-scheme: dark){

:root{
--dark-bg:#0f1115;
--dark-card-bg:#1f2934;
--dark-tab-bg:#1f2934;
--dark-surface:#0f172a;
--dark-row:#020617;
--dark-border:rgba(255,255,255,.05);
--dark-text:#cbd5e1;
--dark-muted:#94a3b8;
--dark-accent:#60a5fa;
--dark-footer-bg:#1f2934;
--dark-table-bg:#1c2129;
--dark-table-header:#283244;
--ui-toggle-hover:#2b2d30;
}

/* ================= GLOBAL TOGGLE DARK MODE ================= */

/* dark mode */

.dark .ui-toggle{
color:#9fb3d9;
}

.dark .ui-toggle:hover{
color:var(--ui-toggle-hover);
}

/* base */

body{
background:var(--dark-bg);
color:var(--dark-text);
}

.logo-light{
display:none;
}

.logo-dark{
display:block;
}

#clientNameHeader{
color:#ffffff;
}

/* ================= DARK MODE TOGGLE ================= */

.tabs{
background:#0f1115;
}

.ui-toggle{
color:#94a3b8;
}

.ui-toggle:hover{
color:var(--ui-toggle-hover);
}

tbody tr:hover{
background:var(--ui-toggle-hover);
}

/* header */

.dash-header.scrolled{
background:rgba(15,17,21,.92);
box-shadow:0 3px 12px rgba(0,0,0,.6);
}

/* card titles */
.card,
.card h3,
.page-title,
.tab-panel .card h3,
.tab-panel .card .page-title{
background:var(--dark-card-bg);
color:var(--dark-text);
}

/* sticky card header */
.card-header{
background:var(--dark-card-bg);
}

/* download icons strip */
.download-icons{
background:var(--dark-card-bg);
}

/* KPI text */

.kpi-title{
color:var(--title-text);
}

.kpi-value{
color:var(--dark-text);
font-weight:var(--bold-font-wt-l1);
}

.admin-loading-card{
  background: var(--dark-card-bg);
  color: var(--dark-text);
}

.admin-kpi-card .kpi-title{
  color: var(--title-text);
}

.admin-kpi-card .kpi-value{
  color: var(--dark-text);
}

/* tabs */

.tab{
background:var(--dark-tab-bg);
border:1px solid rgba(255,255,255,.08);
color:var(--dark-text);
}

.tab.active{
background:#2FC1A4;
color:#081014;
border-color:#2FC1A4;
}

/* tables */

/* fix sticky table header color in dark mode */
.freeze-table thead th{
background:var(--dark-table-header);
color:var(--dark-text);
}

.freeze-table th:first-child{
background:var(--dark-table-header);
}

.freeze-table td:first-child{
background:var(--dark-table-bg);
}

/* generic tables (not txn) */
table{
background:var(--dark-table-bg);
}

table th{
background:var(--dark-table-header);
color:var(--dark-text);
}

td{
border-bottom:1px solid var(--dark-border);
}

tr:hover{
background:var(--ui-toggle-hover);
}

tr.level-0{
box-shadow: inset 0 -0.5px rgba(255, 255, 255, 0.02);
color:var(--dark-text);
}

tr.level-1{
box-shadow: inset 0 -0.5px rgba(255, 255, 255, 0.02);
color:var(--dark-text);
}

tr.level-2{
box-shadow: inset 0 -0.5px rgba(255, 255, 255, 0.02);
color:#9aa4b2;
}

tr.level-3{
box-shadow: inset 0 -0.5px rgba(255, 255, 255, 0.02);
color:#e6e6e6;
}

.panToggle,
.stratToggle{
color:#9aa4b2;
}

/* buttons */

.btn.primary{
background:#222;
color:#fff;
}

.btn.primary:hover{
background:#c40000;
color:#081014;
}

.back-btn{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.14);
color:#e6e6e6;
}

.back-btn:hover{
background:#c40000;
}

/* login */

.login-card{
background:#161a21;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 10px 30px rgba(0,0,0,.5);
}

.login-card input{
background:#0f1115;
border:1px solid rgba(255,255,255,.1);
color:var(--dark-text);
}

/* links */

.panLink{
color:#58a6ff;
}

/* scrollbar */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#0f1115;
}

::-webkit-scrollbar-thumb{
background:#2a2f38;
border-radius:6px;
}

::-webkit-scrollbar-thumb:hover{
background:var(--ui-toggle-hover);
}

/* ================= TRANSACTIONS DARK MODE ================= */

.txn-table-wrap{
background:var(--dark-bg);
}

.txn-table{
background:var(--dark-table-bg);
color:var(--dark-text);
}

.txn-table thead th{
background:var(--dark-table-header);
color:var(--dark-text);
}

/* rows */
.txn-table tbody tr{
background:var(--dark-table-bg);
}

.txn-table tbody td{
border-bottom:none;
}


/* hover */
.txn-table tbody tr:hover{
background:var(--ui-toggle-hover);
}

/* strategy divider */
.txn-strategy-divider td{
background:var(--dark-table-bg);
color:var(--dark-text);
border-top:none;
}

/* fund header */
.txn-group-header{
background:var(--dark-table-header);
color:var(--dark-text);
border-top:none;
border-bottom:none;
}

.txn-group-header td{
border-bottom:none;
}

/* selected rows */
.txn-row.selected{
background:var(--dark-table-bg);
}

/* filters */
.txn-switch{
color:#94a3b8;
}

/* summary panel */
#txnSummaryTop{
background:var(--dark-card-bg);
}

.txn-summary{
background:var(--dark-card-bg);
}

.txn-topbar{
background:var(--dark-bg);
}

.txn-summary-title{
background:var(--dark-table-header);
color:var(--dark-text);
border-top:none;
border-bottom:none;
}

.txn-summary-table{
background:var(--dark-table-bg);
border-top:none;
border-bottom:none;
}

.txn-summary-table tbody{
background: var(--dark-table-bg);
}

.txn-summary-table thead th{
background:var(--red-lot-l1);
}

/* total sticky */
.txn-summary-total{
background:var(--red-lot-l1);
color:var(--table-header);
font-weight:var(--bold-font-wt);
}

/* DARK MODE hover */
.txn-summary-total:hover{
background:var(--red-lot-l1);
}

/* ===== SINGLE FAINT SEPARATOR ===== */

.txn-strategy-divider{
box-shadow: inset 0 -0.5px rgba(255, 255, 255, 0.02);
}

.txn-table tbody tr{
box-shadow: inset 0 -0.5px rgba(255, 255, 255, 0.02);
}

.txn-summary-table tbody tr{
box-shadow: inset 0 -0.5px rgba(255, 255, 255, 0.02);
}

/* remove last line */
.txn-table tbody tr:last-child{
box-shadow:none;
}

/* ================= FOOTER DARK MODE ================= */

footer{
background:var(--dark-footer-bg);
border-top:1px solid var(--dark-footer-bg);
color:var(--dark-text);
}

.dash-footer-container,
.footer-bottom,
.footer-stack,
.brands,
.copyright{
color:var(--dark-text);
}

/* logo soften */

.footer-stack .logo{
filter:brightness(0.9) contrast(1.1);
}

/* footer inputs */

.footer-form input,
.footer-form textarea{
background:#11161d;
color:var(--dark-text);
border:1px solid rgba(255,255,255,.08);
}

/* footer button */

.footer-form button{
background:#1f6feb;
color:white;
}

.footer-form button:hover{
background:#c40000;
}

}


/* =========================================
MOBILE
========================================= */

@media (max-width: 768px){

/* layout */
.container{
padding:0 10px 20px;
}

/* header */
.dash-title{display:none;}
#clientNameHeader{display:none;}

.dash-header{
padding:0 12px;
}

/* tabs scroll */
.tabs{
overflow-x:auto;
padding:8px 10px;
gap:6px;
}

.tabs::-webkit-scrollbar{
display:none;
}

.tab{
white-space:nowrap;
font-size:12px;
padding:6px 10px;
}

/* cards */
.card{
padding:12px;
border-radius:12px;
}

/* table scroll container */
.table-scroll,
.txn-scroll{
overflow-x:auto;
overflow-y:visible;
}

/* tables */
table{
min-width:700px;
}

/* smaller cells */
th,td{
padding:10px 10px;
font-size:12px;
}

/* remove sticky first column on mobile */
.freeze-table th:first-child,
.freeze-table td:first-child,
.txn-table th:nth-child(1),
.txn-table td:nth-child(1),
.txn-table th:nth-child(2),
.txn-table td:nth-child(2),
.txn-table th:nth-child(3),
.txn-table td:nth-child(3){
position:relative;
left:auto;
z-index:auto;
}

/* keep header sticky */
.freeze-table thead th,
.txn-table thead th{
position:sticky;
top:0;
z-index:20;
}

/* header */
.thead{
background: var(--dark-table-header);
}

/* KPI stack */
.kpis{
grid-template-columns:1fr;
gap:10px;
}

/* grid charts stack */
.grid-2{
grid-template-columns:1fr;
}

/* chart height */
.chart-wrap{
height:260px;
}

/* footer spacing */
footer{
margin-top:30px;
}

}

@media (max-width: 1024px){
  .admin-overview-grid{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .admin-kpi-card{
    min-height: 180px;
  }
}