/* =========================================================
   Lehora Expense Portal — shared admin theme
   Built on the brand tokens from the main Lehora website
   (assets/css/style.css) so the portal reads as one product.
   ========================================================= */
:root{
  --bg:#ffffff;
  --bg-alt:#f6f7fb;
  --panel:#ffffff;
  --panel-2:#f4f5fb;
  --border:#e6e8f2;
  --text:#12131c;
  --muted:#666c80;
  --muted-2:#9298ab;

  /* Logo palette (identity only — never used for chart data) */
  --logo-cyan:#22d3ee;
  --logo-blue:#3b5bfd;
  --logo-violet:#8b2fd6;
  --logo-magenta:#ec2f9c;
  --logo-amber:#ffb020;

  /* Brand tones — validated for categorical data use */
  --brand:#6d28d9;    /* violet   */
  --brand-2:#0891b2;  /* cyan     */
  --brand-3:#c2255c;  /* magenta  */
  --brand-4:#d97706;  /* amber    */

  --grad: linear-gradient(115deg,var(--logo-cyan) 0%,var(--logo-blue) 32%,var(--logo-violet) 58%,var(--logo-magenta) 80%,var(--logo-amber) 100%);
  --grad-2: linear-gradient(135deg,var(--logo-magenta),var(--logo-violet),var(--logo-blue));
  --shadow: 0 10px 40px -12px rgba(139,47,214,.28);
  --shadow-sm: 0 2px 10px -4px rgba(18,19,28,.08);

  /* status */
  --status-good:#0f9d58;
  --status-warning:#d97706;
  --status-critical:#c2255c;

  --sidebar-w:260px;
  --sidebar-w-collapsed:82px;
  --topbar-h:72px;
  --radius:14px;
  --radius-sm:9px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg-alt);
  color:var(--text);
  line-height:1.55;
}
h1,h2,h3,h4,.logo{font-family:'Space Grotesk',sans-serif;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
button{font:inherit;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
::selection{background:var(--brand);color:#fff;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:var(--bg-alt);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh;}

.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:#0c0a14;
  color:#e9e8f5;
  position:fixed;top:0;left:0;bottom:0;
  display:flex;flex-direction:column;
  z-index:200;
  transition:transform .3s ease,width .25s ease;
}
.sidebar-toggle{
  display:none;width:30px;height:30px;border-radius:8px;border:none;background:rgba(255,255,255,.06);
  color:#c5c3dc;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem;
  transition:background .2s ease,color .2s ease,transform .25s ease;
}
.sidebar-toggle:hover{background:rgba(255,255,255,.12);color:#fff;}
.sidebar-toggle i{transition:transform .25s ease;}
.sidebar-brand{
  display:flex;align-items:center;gap:12px;
  padding:22px 22px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand .logo-mark{
  width:38px;height:38px;border-radius:11px;background:#050308;overflow:hidden;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:var(--shadow);
}
.sidebar-brand .logo-mark img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);}
.sidebar-brand .brand-name{font-weight:700;font-size:1.05rem;color:#fff;line-height:1.2;}
.sidebar-brand .brand-sub{font-size:.72rem;color:#9d9bb5;font-weight:500;letter-spacing:.03em;}

.sidebar-nav{flex:1;overflow-y:auto;padding:18px 14px;}
.sidebar-section{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#6e6c88;padding:14px 12px 8px;font-weight:600;}
.sidebar-nav a{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:10px;margin-bottom:2px;
  color:#c5c3dc;font-size:.92rem;font-weight:500;
  transition:background .2s ease,color .2s ease;
}
.sidebar-nav a i{width:18px;text-align:center;color:#8f8caf;font-size:.95rem;transition:color .2s ease;}
.sidebar-nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar-nav a:hover i{color:#fff;}
.sidebar-nav a.active{background:var(--grad-2);color:#fff;box-shadow:var(--shadow);}
.sidebar-nav a.active i{color:#fff;}
.sidebar-nav .nav-badge{
  margin-left:auto;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:20px;
  background:rgba(236,47,156,.18);color:#ff8fce;
}

.sidebar-foot{
  padding:16px 18px 20px;border-top:1px solid rgba(255,255,255,.08);
}
.sidebar-user{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.sidebar-user .avatar{
  width:36px;height:36px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.85rem;flex-shrink:0;
}
.sidebar-user .who{overflow:hidden;}
.sidebar-user .who strong{display:block;font-size:.86rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user .who span{display:block;font-size:.72rem;color:#9d9bb5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.logout-link{
  display:flex;align-items:center;gap:10px;color:#ff9ab0;font-size:.86rem;font-weight:600;padding:9px 4px;
}
.logout-link:hover{color:#fff;}

.sidebar-close{display:none;}

/* ---------- Main column ---------- */
.main{
  margin-left:var(--sidebar-w);
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  transition:margin-left .25s ease;
}
.topbar{
  height:var(--topbar-h);flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 28px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0;}
.burger-btn{
  display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--border);
  background:#fff;align-items:center;justify-content:center;color:var(--text);flex-shrink:0;
}
.page-title h1{font-size:1.25rem;font-weight:700;}
.page-title p{font-size:.82rem;color:var(--muted);margin-top:2px;}
.topbar-right{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--muted);position:relative;flex-shrink:0;
}
.icon-btn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--brand-3);border:2px solid #fff;}
.topbar-user{display:flex;align-items:center;gap:10px;}
.topbar-user .avatar{
  width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.topbar-user .meta{display:none;}
@media(min-width:640px){.topbar-user .meta{display:block;}}
.topbar-user .meta strong{display:block;font-size:.85rem;}
.topbar-user .meta span{display:block;font-size:.72rem;color:var(--muted);}

.content{padding:26px 28px 60px;max-width:1400px;width:100%;margin:0 auto;}

/* ---------- Cards / grids ---------- */
.grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px;}
@media(max-width:1100px){.grid-stats{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.grid-stats{grid-template-columns:1fr;}}

.stat-card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-sm);
}
.stat-card .stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.stat-card .stat-icon{
  width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;
}
.stat-card .stat-icon.violet{background:var(--brand);}
.stat-card .stat-icon.cyan{background:var(--brand-2);}
.stat-card .stat-icon.magenta{background:var(--brand-3);}
.stat-card .stat-icon.amber{background:var(--brand-4);}
.stat-card .stat-trend{font-size:.76rem;font-weight:700;padding:3px 8px;border-radius:20px;}
.stat-trend.up{color:var(--status-good);background:rgba(15,157,88,.1);}
.stat-trend.down{color:var(--status-critical);background:rgba(194,37,92,.1);}
.stat-card .stat-value{font-size:1.6rem;font-weight:700;font-family:'Space Grotesk',sans-serif;margin-bottom:4px;}
.stat-card .stat-label{font-size:.82rem;color:var(--muted);}

.grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-bottom:22px;align-items:stretch;}
@media(max-width:980px){.grid-2{grid-template-columns:1fr;}}

.panel{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow-sm);
}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:10px;flex-wrap:wrap;}
.panel-head h3{font-size:1.02rem;font-weight:700;}
.panel-head p{font-size:.8rem;color:var(--muted);margin-top:2px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 18px;border-radius:10px;font-weight:600;font-size:.88rem;border:1px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 34px -10px rgba(139,47,214,.45);}
.btn-outline{background:#fff;border-color:var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--brand);color:var(--brand);}
.btn-ghost{background:transparent;color:var(--muted);}
.btn-ghost:hover{color:var(--text);}
.btn-sm{padding:7px 13px;font-size:.8rem;border-radius:8px;}
.btn-danger-outline{background:#fff;border-color:#f3c9d8;color:var(--brand-3);}
.btn-danger-outline:hover{background:#fdf1f6;}
.btn-block{width:100%;}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(min-width:1100px){.form-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.field.full{grid-column:1/-1;}
.field label{font-size:.83rem;font-weight:600;color:var(--text);}
.field .hint{font-size:.74rem;color:var(--muted-2);font-weight:400;}
.field input,.field select,.field textarea{
  border:1px solid var(--border);border-radius:10px;padding:11px 13px;font:inherit;color:var(--text);
  background:#fff;transition:border-color .2s ease,box-shadow .2s ease;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(109,40,217,.12);
}
.field textarea{resize:vertical;min-height:90px;}
.input-icon{position:relative;}
.input-icon i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted-2);font-size:.9rem;}
.input-icon input{padding-left:38px;}
.input-icon .toggle-eye{left:auto;right:13px;cursor:pointer;}
.upload-box{
  border:1.5px dashed var(--border);border-radius:12px;padding:26px 16px;text-align:center;color:var(--muted);
  background:var(--bg-alt);cursor:pointer;transition:border-color .2s ease,background .2s ease;
}
.upload-box:hover{border-color:var(--brand);background:#faf7ff;}
.upload-box i{font-size:1.5rem;color:var(--brand);margin-bottom:8px;display:block;}
.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap;}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;}
table.data-table{width:100%;border-collapse:collapse;font-size:.88rem;}
.data-table thead th{
  text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:700;padding:0 14px 12px;border-bottom:1px solid var(--border);white-space:nowrap;
}
.data-table tbody td{padding:14px;border-bottom:1px solid var(--border);vertical-align:middle;}
.data-table tbody tr:last-child td{border-bottom:none;}
.data-table tbody tr:hover{background:var(--bg-alt);}
.cell-main{font-weight:600;}
.cell-sub{font-size:.78rem;color:var(--muted);}
.cat-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;padding:4px 10px;border-radius:20px;
}
.cat-pill .dot{width:7px;height:7px;border-radius:50%;}
.cat-travel{background:rgba(109,40,217,.1);color:var(--brand);}
.cat-travel .dot{background:var(--brand);}
.cat-office{background:rgba(8,145,178,.1);color:var(--brand-2);}
.cat-office .dot{background:var(--brand-2);}
.cat-food{background:rgba(194,37,92,.1);color:var(--brand-3);}
.cat-food .dot{background:var(--brand-3);}
.cat-util{background:rgba(217,119,6,.1);color:var(--brand-4);}
.cat-util .dot{background:var(--brand-4);}

.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;padding:4px 11px;border-radius:20px;}
.status-approved{background:rgba(15,157,88,.1);color:var(--status-good);}
.status-pending{background:rgba(217,119,6,.1);color:var(--status-warning);}
.status-rejected{background:rgba(194,37,92,.1);color:var(--status-critical);}
.status-paidleave{background:rgba(109,40,217,.1);color:var(--brand);}

/* ---------- Form controls embedded directly in a table cell ---------- */
.data-table select,
.data-table input[type="text"]{
  width:100%;border:1px solid var(--border);border-radius:9px;padding:8px 11px;
  font-size:.85rem;color:var(--text);background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.data-table select:focus,
.data-table input[type="text"]:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(109,40,217,.12);
}
/* Attendance status select — tinted to match the chosen status */
.data-table select.st-present{background:rgba(15,157,88,.08);border-color:rgba(15,157,88,.4);color:var(--status-good);font-weight:700;}
.data-table select.st-absent{background:rgba(194,37,92,.08);border-color:rgba(194,37,92,.4);color:var(--status-critical);font-weight:700;}
.data-table select.st-paidleave{background:rgba(109,40,217,.08);border-color:rgba(109,40,217,.4);color:var(--brand);font-weight:700;}
.data-table select.st-halfday{background:rgba(217,119,6,.08);border-color:rgba(217,119,6,.4);color:var(--status-warning);font-weight:700;}

.row-actions{display:flex;gap:6px;}
.row-actions button{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:.82rem;
}
.row-actions button:hover{border-color:var(--brand);color:var(--brand);}

.table-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;justify-content:space-between;}
.table-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.table-filters select,.table-filters input{
  border:1px solid var(--border);border-radius:9px;padding:8px 12px;font-size:.84rem;background:#fff;color:var(--text);
}
.search-box{position:relative;}
.search-box i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted-2);font-size:.85rem;}
.search-box input{padding-left:34px;min-width:220px;}

.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:18px;flex-wrap:wrap;gap:10px;}
.pagination .pg-info{font-size:.8rem;color:var(--muted);}
.pagination .pg-btns{display:flex;gap:6px;}
.pagination .pg-btns button{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:#fff;font-size:.82rem;font-weight:600;color:var(--muted);
}
.pagination .pg-btns button.active{background:var(--grad);border-color:transparent;color:#fff;}
.pagination .pg-btns button:hover:not(.active){border-color:var(--brand);color:var(--brand);}

/* ---------- Chart: bars ---------- */
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;}
.chart-legend .lg-item{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--muted);}
.chart-legend .lg-swatch{width:10px;height:10px;border-radius:3px;}

.bar-chart{display:flex;align-items:flex-end;gap:10px;height:210px;padding-top:10px;}
.bar-chart .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;}
.bar-chart .bar{
  width:100%;max-width:26px;border-radius:5px 5px 3px 3px;background:var(--brand);
  position:relative;transition:filter .2s ease;
}
.bar-chart .bar:hover{filter:brightness(1.12);}
.bar-chart .bar:hover .bar-tooltip{opacity:1;transform:translate(-50%,-6px);}
.bar-tooltip{
  position:absolute;left:50%;top:-8px;transform:translate(-50%,0);
  background:#12131c;color:#fff;font-size:.72rem;font-weight:600;padding:5px 9px;border-radius:7px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:5;
}
.bar-chart .bar-axis-label{margin-top:9px;font-size:.72rem;color:var(--muted);}

/* ---------- Chart: donut ---------- */
.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;}
.donut{
  width:168px;height:168px;border-radius:50%;position:relative;flex-shrink:0;
}
.donut::after{
  content:'';position:absolute;inset:20px;border-radius:50%;background:var(--panel);
  display:flex;align-items:center;justify-content:center;
}
.donut-center{
  position:absolute;inset:20px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.donut-center strong{font-size:1.15rem;font-family:'Space Grotesk',sans-serif;}
.donut-center span{font-size:.7rem;color:var(--muted);}
.donut-legend{display:flex;flex-direction:column;gap:10px;}
.donut-legend .dl-item{display:flex;align-items:center;gap:9px;font-size:.85rem;}
.donut-legend .dl-swatch{width:11px;height:11px;border-radius:3px;flex-shrink:0;}
.donut-legend .dl-label{color:var(--text);font-weight:600;min-width:90px;}
.donut-legend .dl-value{color:var(--muted);font-size:.8rem;margin-left:auto;font-weight:600;}

/* ---------- Line-ish trend (sparkline via svg) ---------- */
.trend-svg{width:100%;height:auto;display:block;}

/* ---------- Income / Expense typing ---------- */
.type-pill{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;padding:4px 11px;border-radius:20px;}
.type-income{background:rgba(15,157,88,.1);color:var(--status-good);}
.type-expense{background:rgba(194,37,92,.1);color:var(--brand-3);}
.amt-income{color:var(--status-good);font-weight:700;}
.amt-expense{color:var(--brand-3);font-weight:700;}

.cat-sales{background:rgba(109,40,217,.1);color:var(--brand);}
.cat-sales .dot{background:var(--brand);}
.cat-service{background:rgba(8,145,178,.1);color:var(--brand-2);}
.cat-service .dot{background:var(--brand-2);}
.cat-interest{background:rgba(217,119,6,.1);color:var(--brand-4);}
.cat-interest .dot{background:var(--brand-4);}
.cat-other{background:rgba(102,108,128,.1);color:var(--muted);}
.cat-other .dot{background:var(--muted-2);}

/* ---------- Grouped bar chart (Income vs Expense) ---------- */
.bar-chart.grouped .bar-col{flex-direction:row;align-items:flex-end;gap:4px;justify-content:center;}
.bar-chart.grouped .bar{max-width:16px;}
.bar-chart.grouped .bar-axis-label{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);}
.bar-chart.grouped .bar-col{position:relative;padding-bottom:22px;}

/* ---------- P&L statement ---------- */
.pnl-table{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:6px;}
.pnl-table td{padding:10px 4px;border-bottom:1px solid var(--border);}
.pnl-table tr:last-child td{border-bottom:none;}
.pnl-table td:last-child{text-align:right;font-weight:600;font-family:'Space Grotesk',sans-serif;}
.pnl-table tr.pnl-total td{border-top:2px solid var(--text);font-weight:700;font-size:1.02rem;padding-top:14px;}
.pnl-table tr.pnl-total.profit td{color:var(--status-good);}
.pnl-table tr.pnl-total.loss td{color:var(--brand-3);}
.pnl-table tr.pnl-sub td{padding-left:18px;color:var(--muted);font-size:.86rem;}

/* ---------- Report page ---------- */
.report-preview{
  border:1px solid var(--border);border-radius:var(--radius);background:#fff;padding:34px;
}
.report-preview .rp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:2px solid var(--text);padding-bottom:18px;margin-bottom:22px;flex-wrap:wrap;}
.report-preview .rp-brand{display:flex;align-items:center;gap:12px;}
.report-preview .rp-brand .logo-mark{width:40px;height:40px;border-radius:11px;background:#050308;overflow:hidden;box-shadow:var(--shadow);}
.report-preview .rp-brand strong{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;display:block;}
.report-preview .rp-brand span{font-size:.78rem;color:var(--muted);}
.report-preview .rp-meta{text-align:right;font-size:.82rem;color:var(--muted);}
.report-preview .rp-meta strong{display:block;color:var(--text);font-size:.95rem;}
.report-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px;}
@media(max-width:760px){.report-summary{grid-template-columns:repeat(2,1fr);}}
.report-summary .rs-item{background:var(--bg-alt);border-radius:10px;padding:14px;text-align:center;}
.report-summary .rs-item strong{display:block;font-size:1.15rem;font-family:'Space Grotesk',sans-serif;}
.report-summary .rs-item span{font-size:.74rem;color:var(--muted);}

/* ---------- Login page ---------- */
.login-shell{min-height:100vh;display:flex;}
.login-side{
  flex:1;position:relative;overflow:hidden;background:#0c0a14;color:#fff;
  display:none;flex-direction:column;justify-content:space-between;padding:48px;
}
@media(min-width:900px){.login-side{display:flex;}}
.login-side .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;}
.login-side .blob1{width:360px;height:360px;background:var(--logo-violet);top:-80px;left:-60px;}
.login-side .blob2{width:320px;height:320px;background:var(--logo-cyan);bottom:-100px;right:-60px;}
.login-side .blob3{width:260px;height:260px;background:var(--logo-amber);bottom:20%;left:20%;}
.login-side-content{position:relative;z-index:2;}
.login-side .logo{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;font-size:1.2rem;}
.login-side .logo-mark{width:40px;height:40px;border-radius:11px;background:#050308;overflow:hidden;box-shadow:var(--shadow);}
.login-side h2{font-size:1.9rem;margin:38px 0 14px;max-width:420px;line-height:1.25;}
.login-side p{color:#c5c3dc;max-width:400px;font-size:.96rem;}
.login-side .side-foot{position:relative;z-index:2;font-size:.78rem;color:#8f8caf;}

.login-form-wrap{
  flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--bg-alt);
}
.login-card{width:100%;max-width:400px;}
.login-card .lc-logo{display:flex;align-items:center;gap:10px;margin-bottom:34px;}
@media(min-width:900px){.login-card .lc-logo{display:none;}}
.login-card .lc-logo .logo-mark{width:36px;height:36px;border-radius:10px;overflow:hidden;background:#050308;}
.login-card .lc-logo strong{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;}
.login-card h1{font-size:1.55rem;margin-bottom:6px;}
.login-card .sub{color:var(--muted);font-size:.92rem;margin-bottom:30px;}
.login-card .form-foot{display:flex;align-items:center;justify-content:space-between;margin:2px 0 22px;font-size:.85rem;}
.remember{display:flex;align-items:center;gap:8px;color:var(--muted);}
.remember input{width:15px;height:15px;accent-color:var(--brand);}
.forgot{color:var(--brand);font-weight:600;}
.divider{display:flex;align-items:center;gap:12px;margin:26px 0;color:var(--muted-2);font-size:.78rem;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}
.login-foot-note{text-align:center;font-size:.84rem;color:var(--muted);margin-top:22px;}
.badge-soft{
  display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:#e9e8f5;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:6px 13px;border-radius:30px;
}
.badge-soft .dot{width:7px;height:7px;border-radius:50%;background:var(--logo-cyan);}

/* ---------- Misc ---------- */
.eyebrow-tag{
  display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;color:var(--brand);
  background:rgba(109,40,217,.08);padding:5px 12px;border-radius:20px;margin-bottom:6px;
}
.empty-state{text-align:center;padding:50px 20px;color:var(--muted);}
.empty-state i{font-size:2.2rem;color:var(--border);margin-bottom:14px;display:block;}

.overlay{
  position:fixed;inset:0;background:rgba(12,10,20,.5);z-index:190;opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.overlay.show{opacity:1;pointer-events:auto;}

@media(max-width:980px){
  .sidebar{transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.25);}
  .sidebar.open{transform:translateX(0);}
  .sidebar-close{display:flex;margin-left:auto;background:none;border:none;color:#c5c3dc;font-size:1.1rem;align-items:center;justify-content:center;width:30px;height:30px;}
  .main{margin-left:0;}
  .burger-btn{display:flex;}
}

/* ---------- Collapsible sidebar (desktop: icons-only + hover tooltip) ---------- */
@media(min-width:981px){
  .sidebar-toggle{display:flex;margin-left:auto;}

  .app.collapsed .sidebar{width:var(--sidebar-w-collapsed);}
  .app.collapsed .main{margin-left:var(--sidebar-w-collapsed);}

  .app.collapsed .sidebar-brand{padding:22px 0;justify-content:center;flex-wrap:wrap;}
  .app.collapsed .sidebar-brand > div{display:none;}
  .app.collapsed .sidebar-toggle{margin-left:0;margin-top:10px;}
  .app.collapsed .sidebar-toggle i{transform:rotate(180deg);}

  .app.collapsed .sidebar-section{display:none;}
  .app.collapsed .sidebar-nav a{justify-content:center;padding:12px;gap:0;}
  .app.collapsed .sidebar-nav .nav-badge{display:none;}

  .app.collapsed .sidebar-user{justify-content:center;}
  .app.collapsed .sidebar-user .who{display:none;}
  .app.collapsed .logout-link{justify-content:center;}

  .app.collapsed .nav-text{display:none;}

}

/* Hover tooltip showing the name when the sidebar is collapsed.
   Rendered as a fixed-position element appended to <body> (via JS) so it
   is never clipped by .sidebar-nav's overflow:auto. */
.sidebar-tooltip{
  position:fixed;top:0;left:0;z-index:400;
  background:#12131c;color:#fff;
  padding:7px 12px;border-radius:8px;font-size:.8rem;font-weight:600;
  white-space:nowrap;box-shadow:0 10px 26px -8px rgba(0,0,0,.4);
  pointer-events:none;opacity:0;
  transform:translate(0,-50%) translateX(-4px);
  transition:opacity .12s ease,transform .12s ease;
}
.sidebar-tooltip.show{opacity:1;transform:translate(0,-50%) translateX(0);}

/* ---------- Tables -> stacked cards on small screens ---------- */
@media(max-width:760px){
  .content{padding:18px 14px 50px;}
  .panel{padding:16px;}
  .table-wrap{overflow-x:visible;}

  .data-table thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  .data-table, .data-table tbody{display:block;width:100%;}
  .data-table tr{
    display:block;background:var(--panel);border:1px solid var(--border);border-radius:12px;
    padding:6px 14px;margin-bottom:14px;box-shadow:var(--shadow-sm);
  }
  .data-table tr:hover{background:var(--panel);}
  .data-table td{
    display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
    padding:10px 0;border-bottom:1px solid var(--border);text-align:right;
  }
  .data-table td:last-child{border-bottom:none;}
  .data-table td::before{
    content:attr(data-label);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);text-align:left;flex-shrink:0;padding-top:2px;
  }
  .data-table td[data-label=""]::before{content:none;}
  .data-table td[data-label=""]{justify-content:flex-end;}
  .data-table .cell-main, .data-table .cell-sub{display:block;text-align:right;}
  .data-table .row-actions{justify-content:flex-end;}
  .data-table .cat-pill, .data-table .status-pill, .data-table .type-pill{margin-left:auto;}

  /* Card-style panels stack their own grids to one column */
  .grid-2, .grid-stats{grid-template-columns:1fr !important;}
  .donut-wrap{justify-content:center;}
  .table-toolbar{flex-direction:column;align-items:stretch;}
  .table-filters{width:100%;}
  .table-filters select, .table-filters input, .search-box{width:100%;}
  .search-box input{min-width:0;}
  .report-preview{padding:20px 16px;}
  .rp-head{flex-direction:column;}
  .rp-meta{text-align:left;}
  .form-actions{justify-content:stretch;}
  .form-actions .btn{flex:1;}
}