:root{
  --violet:#7C3AED; --violet-light:#A78BFA; --orange:#F97316; --dark:#000000;
  --indigo:#1E1B4B; --cyan:#22D3EE; --white:#FFFFFF;
  --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace;

  /* Light theme (default) - page background is barely-there cream, tuned
     to roughly a 95% white / 5% cream mix so the page reads as clean and
     white at a glance, while panels/cards stay pure white so form fields
     (which sit on --bg, inside a --surface panel) still read as a clear,
     visible "well" rather than blending into the page. */
  --bg:#FEFDFB; --surface:#FFFFFF; --surface-alt:#F7F2E7;
  --text:#000000; --text-muted:rgba(0,0,0,.6); --border:rgba(17,24,39,.28);
  --shadow:0 2px 10px -2px rgba(17,24,39,.1);
}
[data-theme="dark"]{
  --bg:#0B0E1A; --surface:#131726; --surface-alt:#1A1F33;
  --text:#F1F5F9; --text-muted:rgba(241,245,249,.6); --border:rgba(255,255,255,.08);
  --shadow:0 2px 14px -2px rgba(0,0,0,.4);
}

*{box-sizing:border-box;margin:0;padding:0;min-width:0;}
html,body{height:100%;overflow-x:hidden;}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; overflow:hidden; /* no page scroll on desktop */
}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.01em;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;}

/* ============ APP SHELL ============ */
.app-shell{display:grid;grid-template-columns:240px 1fr;height:100vh;overflow-x:hidden;}

/* ---- Sidebar ---- */
.sidebar{
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto; /* only the sidebar scrolls if it overflows */
}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:20px 22px;border-bottom:1px solid var(--border);}
.sidebar-logo img{width:30px;height:30px;}
.sidebar-logo span{font-family:var(--font-display);font-weight:700;font-size:15px;}
.sidebar-nav{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:2px;}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  font-size:13.5px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:.15s;
}
.nav-item:hover{background:var(--surface-alt);color:var(--text);}
.nav-item.active{background:linear-gradient(135deg,var(--violet),#9333EA);color:#fff;}
.nav-item .ic{width:18px;text-align:center;font-size:14px;}

/* ---- Sidebar submenu (e.g. Settings > Permissions / SMTP Settings) ---- */
.nav-parent{justify-content:space-between;}
.nav-parent .submenu-chevron{margin-left:auto;transition:transform .2s;flex-shrink:0;}
.nav-parent.open .submenu-chevron{transform:rotate(90deg);}
.nav-submenu{max-height:0;overflow:hidden;transition:max-height .22s ease;display:flex;flex-direction:column;gap:2px;}
.nav-submenu.open{max-height:200px;padding-top:2px;}
.nav-subitem{display:block;padding:8px 12px 8px 40px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--text-muted);text-decoration:none;transition:.15s;}
.nav-subitem:hover{background:var(--surface-alt);color:var(--text);}
.nav-subitem.active{background:rgba(124,58,237,.1);color:var(--violet);font-weight:700;}

/* ---- Topbar ---- */
.topbar{
  height:64px;border-bottom:1px solid var(--border);display:flex;align-items:center;
  justify-content:space-between;padding:0 24px;background:var(--surface);flex-shrink:0;
}
.topbar-search{
  flex:1;max-width:360px;display:flex;align-items:center;gap:8px;background:var(--surface-alt);
  border:1px solid var(--border);border-radius:10px;padding:9px 14px;font-size:13px;color:var(--text-muted);
}
.topbar-right{display:flex;align-items:center;gap:14px;}
.icon-btn{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-alt);border:1px solid var(--border);cursor:pointer;font-size:15px;
}
.user-chip{display:flex;align-items:center;gap:10px;padding-left:10px;border-left:1px solid var(--border);}
.user-avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--violet),var(--orange));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;}
.user-meta b{display:block;font-size:12.5px;}
.user-meta span{font-size:11px;color:var(--text-muted);}

/* ---- Main content ---- */
.main-col{display:flex;flex-direction:column;height:100vh;overflow:hidden;}
.dash-content{
  flex:1;padding:14px 20px;display:grid;gap:10px;overflow-y:auto;overflow-x:hidden;
  grid-template-rows:auto auto auto; /* natural sizing - never collapses charts to zero height */
  min-height:0;
}

/* ---- KPI row ---- */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:11px 14px;box-shadow:var(--shadow);}
.kpi-top{display:flex;justify-content:space-between;align-items:flex-start;}
.kpi-label{font-size:12px;color:var(--text-muted);font-weight:600;}
.kpi-icon{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;}
.kpi-value{font-family:var(--font-mono);font-size:22px;font-weight:700;margin-top:6px;}
.kpi-delta{font-size:11px;color:#059669;margin-top:2px;}

/* ---- Middle grid (mimics reference layout) ---- */
.middle-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;}
.middle-left{display:flex;flex-direction:column;gap:14px;}
.middle-left .panel:first-child{height:260px;}
.middle-left .panel:last-child{height:210px;overflow:hidden;}
.middle-right{display:flex;flex-direction:column;gap:14px;}
.middle-right .panel{height:245px;overflow:hidden;}
.middle-right .panel:first-child{height:340px;}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;min-height:0;box-shadow:var(--shadow);}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-shrink:0;flex-wrap:wrap;gap:8px;}
.panel-head h3{font-size:14px;font-weight:700;}
.panel-body{flex:1;min-height:0;overflow:auto;}

.bottom-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;min-height:0;}

/* Top offers list */
.offer-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px;}
.offer-row:last-child{border-bottom:none;}
.offer-name{font-weight:600;}
.offer-meta{color:var(--text-muted);font-size:11px;}
.offer-rev{font-family:var(--font-mono);font-weight:700;color:var(--violet);}

/* Live activity */
.activity-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px;}
.activity-row:last-child{border-bottom:none;}
.activity-dot{width:7px;height:7px;border-radius:50%;background:var(--violet);display:inline-block;margin-right:8px;}
.activity-dot.conv{background:#059669;}

/* Donut legend */
.legend-row{display:flex;justify-content:space-between;font-size:11.5px;padding:5px 0;}
.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;}

.chart-wrap{flex:1;min-height:140px;width:100%;max-width:100%;position:relative;overflow:hidden;}
.chart-wrap canvas{max-width:100%;}

/* Shared compact table styles (reused across Dashboard + Offers page) */
.mini-table{width:100%;border-collapse:collapse;font-size:12px;}
.mini-table th{text-align:left;padding:6px 8px;color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.02em;border-bottom:2px solid var(--border);background:var(--surface-alt);position:sticky;top:0;}
.mini-table td{padding:8px;border-bottom:1px solid var(--border);vertical-align:middle;}
.mini-table tbody tr:hover{background:var(--surface-alt);}
.mini-thumb{width:26px;height:26px;border-radius:6px;object-fit:cover;background:var(--surface-alt);border:1px solid var(--border);}
.mini-thumb-placeholder{width:26px;height:26px;border-radius:6px;background:linear-gradient(135deg,var(--violet),var(--orange));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:10px;}

/* Footer status bar */
.status-bar{
  display:flex;gap:22px;align-items:center;padding:10px 16px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;font-size:11.5px;color:var(--text-muted);flex-shrink:0;flex-wrap:wrap;
}
.status-badge{padding:2px 8px;border-radius:6px;background:rgba(5,150,105,.12);color:#059669;font-weight:600;}

/* ---- Loading / error ---- */
.loading-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg);z-index:50;font-family:var(--font-display);color:var(--text-muted);}
.loading-logo{width:72px;height:72px;object-fit:contain;animation:zoxiLogoPulse 1.3s ease-in-out infinite;}
@keyframes zoxiLogoPulse{
  0%,100%{transform:scale(.82);opacity:.85;}
  50%{transform:scale(1.15);opacity:1;}
}

/* The mobile drawer backdrop is ALWAYS hidden by default (display:none),
   completely outside any media query. This is critical: without an
   unconditional display:none, this <div> (a direct child of .app-shell,
   inserted right before <aside class="sidebar">) would default to
   display:block/position:static on DESKTOP - meaning it would actually
   participate in .app-shell's CSS Grid auto-placement as a normal grid
   item, occupying the FIRST grid column (240px) that .sidebar is meant
   to sit in, pushing .sidebar itself into the SECOND column (1fr, the
   wide one meant for .main-col) and pushing .main-col into a new row
   below. That is exactly what caused the sidebar to render full-width
   on desktop. Only inside the mobile media query does it become
   display:block+position:fixed (an overlay, fully out of any grid/flex
   flow either way).  */
.sidebar-backdrop{display:none;}

/* ---- Responsive: mobile scrolls ---- */
@media(max-width:980px){
  body{overflow:auto;}
  .app-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;min-height:100vh;overflow-x:hidden;}

  /* Sidebar becomes a slide-in drawer on mobile instead of vanishing -
     opened via the hamburger button in the topbar (see .mobile-menu-btn
     below), closed via the backdrop or the same button again. */
  .sidebar{
    display:flex;position:fixed;top:0;left:0;bottom:0;width:250px;max-width:80vw;
    z-index:600;transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:6px 0 24px rgba(0,0,0,.18);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:590;}
  .sidebar-backdrop.show{display:block;}

  .mobile-menu-btn{display:flex !important;}

  .main-col{height:auto;overflow:visible;}
  .dash-content{overflow:visible;grid-template-rows:none;padding:12px 14px;}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .middle-grid{grid-template-columns:1fr;}
  .middle-left .panel:first-child{height:280px;}
  .middle-left .panel:last-child{height:220px;}
  .middle-right .panel{height:220px;}
  .bottom-row{grid-template-columns:repeat(2,1fr);height:auto !important;}
  .bottom-row .panel{height:150px;}
  .panel-head{flex-direction:column;align-items:flex-start;}

  /* Topbar: on index.html especially, search + date filter + email report
     + notifications + avatar all fight for space and overflow off-screen.
     Let every direct section of the topbar wrap onto its own line instead
     of forcing a single crowded row. */
  .topbar{height:auto;min-height:64px;padding:10px 14px;flex-wrap:wrap;gap:10px;}
  .topbar > div{flex-wrap:wrap;row-gap:8px;}
  .topbar-search{max-width:none;min-width:0;flex:1 1 180px;}
  .topbar-right{gap:8px;margin-left:auto;}
  .user-meta{display:none;} /* name/role text - avatar alone is enough on a narrow topbar */

  /* Search results / notification dropdowns use a fixed pixel width
     that overflows a narrow phone screen - cap them to the viewport. */
  #globalSearchDropdown{width:min(340px,calc(100vw - 28px)) !important;}
  #notifDropdown{width:min(280px,calc(100vw - 28px)) !important;}
}

@media(max-width:520px){
  .kpi-row{grid-template-columns:1fr 1fr;}
  .bottom-row{grid-template-columns:1fr;}
}

/* ---- Mobile hamburger menu button (hidden on desktop by default) ---- */
.mobile-menu-btn{
  display:none;width:36px;height:36px;border-radius:10px;align-items:center;justify-content:center;
  background:var(--surface-alt);border:1px solid var(--border);cursor:pointer;flex-shrink:0;color:var(--text);
}

/* Styled, obviously-interactive horizontal scrollbar for wide tables */
.table-scroll-wrap{overflow-x:auto;max-width:100%;}
.table-scroll-wrap::-webkit-scrollbar{height:10px;}
.table-scroll-wrap::-webkit-scrollbar-track{background:var(--surface-alt);border-radius:8px;}
.table-scroll-wrap::-webkit-scrollbar-thumb{background:var(--violet);border-radius:8px;}
.table-scroll-wrap::-webkit-scrollbar-thumb:hover{background:#6D28D9;}

/* Freeze the first column (#ID) so it stays visible while scrolling right,
   so you never lose track of which row you're looking at. */
.table-scroll-wrap table th:first-child,
.table-scroll-wrap table td:first-child{
  position:sticky;left:0;z-index:3;background:var(--surface);
  box-shadow:2px 0 6px -2px rgba(0,0,0,.12);
}
.table-scroll-wrap table thead th:first-child{background:var(--surface-alt);z-index:4;}