/* ═══════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════ */
:root{
  --bg0:#070d1a;--bg1:#0f1929;--bg2:#172235;--bg3:#1f2e47;
  --t1:#eef2ff;--t2:#8fa3c8;--t3:#4d6080;
  --blue:#4f7cff;--blue2:#3a68e6;--blueg:rgba(79,124,255,.3);--blues:rgba(79,124,255,.08);
  --green:#10b981;--greens:rgba(16,185,129,.1);--greenb:rgba(16,185,129,.2);
  --amber:#f59e0b;--ambers:rgba(245,158,11,.1);--amberb:rgba(245,158,11,.2);
  --red:#ef4444;  --reds:rgba(239,68,68,.1);  --redb:rgba(239,68,68,.2);
  --purple:#a855f7;--purples:rgba(168,85,247,.1);--purpleb:rgba(168,85,247,.2);
  --bdr:rgba(255,255,255,.07);--bdr2:rgba(255,255,255,.13);
  --r1:6px;--r2:10px;--r3:16px;--r4:22px;
  --sh1:0 2px 8px rgba(0,0,0,.4);--sh2:0 6px 24px rgba(0,0,0,.45);--sh3:0 16px 48px rgba(0,0,0,.6);
  --ease:cubic-bezier(.4,0,.2,1);
}

html[data-theme="light"] {
  --bg0:#f1f5f9;--bg1:#ffffff;--bg2:#f8fafc;--bg3:#e2e8f0;
  --t1:#0f172a;--t2:#475569;--t3:#94a3b8;
  --bdr:rgba(0,0,0,.08);--bdr2:rgba(0,0,0,.15);
  --sh1:0 2px 8px rgba(0,0,0,.06);--sh2:0 6px 24px rgba(0,0,0,.08);--sh3:0 16px 48px rgba(0,0,0,.12);
  /* Adjusting transparent color alphas for better visibility on light bg */
  --blueg:rgba(79,124,255,.25);--blues:rgba(79,124,255,.12);
  --greens:rgba(16,185,129,.15);--greenb:rgba(16,185,129,.25);
  --ambers:rgba(245,158,11,.15);--amberb:rgba(245,158,11,.25);
  --reds:rgba(239,68,68,.12);--redb:rgba(239,68,68,.22);
  --purples:rgba(168,85,247,.12);--purpleb:rgba(168,85,247,.22);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg0);color:var(--t1);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color 300ms, color 300ms;}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}

/* ═══════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════ */
#app{display:flex;height:100vh}

/* SIDEBAR */
#sidebar{
  width:232px;flex-shrink:0;background:var(--bg1);border-right:1px solid var(--bdr);
  display:flex;flex-direction:column;padding:1.25rem .875rem;overflow-y:auto;
  background:linear-gradient(180deg,var(--bg1) 0%,var(--bg0) 100%);
  transition:background-color 300ms, border-color 300ms;
}
.brand{display:flex;align-items:center;gap:.75rem;padding:.25rem .5rem 1.75rem}
.brand-ico{
  width:34px;height:34px;border-radius:var(--r2);flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),#7c3aed);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px var(--blueg);
}
.brand-name{font-size:1rem;font-weight:700;letter-spacing:-.02em}
.brand-sub{font-size:.6rem;color:var(--t3);letter-spacing:.1em;text-transform:uppercase}
.nav-sec{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);padding:.875rem .625rem .3rem}
.nav-item{
  display:flex;align-items:center;gap:.625rem;padding:.6rem .75rem;
  border-radius:var(--r2);color:var(--t2);font-weight:500;font-size:.825rem;
  cursor:pointer;transition:all 140ms var(--ease);border:1px solid transparent;user-select:none;
  margin-bottom:.1rem;
}
.nav-item:hover{background:var(--bg2);color:var(--t1);border-color:var(--bdr)}
.nav-item.active{background:var(--blues);color:var(--blue);border-color:rgba(79,124,255,.2);font-weight:600}
.nav-item svg{flex-shrink:0;opacity:.8}
.nav-item.active svg{opacity:1}

/* MAIN */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;
  background:radial-gradient(ellipse 55% 35% at 85% 0%,rgba(79,124,255,.07),transparent 65%),
             radial-gradient(ellipse 35% 25% at 5% 90%,rgba(168,85,247,.05),transparent 65%),
             var(--bg0);
  transition:background-color 300ms;
}

/* HEADER */
#header{
  padding:.875rem 1.75rem;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--bdr);background:var(--bg1);
  opacity:0.95;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-shrink:0;z-index:20;
  transition:background-color 300ms, border-color 300ms;
}
#header-left .page-title{font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
#header-left .page-sub{font-size:.72rem;color:var(--t3);margin-top:.1rem;transition:color 300ms;}
#header-right{display:flex;align-items:center;gap:.75rem}

.theme-toggle {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--bdr); color: var(--t2);
  display: flex; align-items: center; justify-content: center;
  transition: all 140ms; flex-shrink: 0;
}
.theme-toggle:hover { background: var(--bg3); color: var(--t1); border-color: var(--bdr2); }
.theme-toggle svg { width: 16px; height: 16px; stroke-width: 2; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.search-bar{
  display:flex;align-items:center;gap:.4rem;background:var(--bg2);border:1px solid var(--bdr);
  border-radius:var(--r2);padding:.45rem .75rem;transition:border-color 140ms;
}
.search-bar:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blueg)}
.search-bar input{background:transparent;border:none;outline:none;color:var(--t1);font-size:.8rem;width:160px}
.search-bar input::placeholder{color:var(--t3)}
.avatar{
  width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#7c3aed);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.68rem;
  cursor:pointer;box-shadow:0 0 12px var(--blueg);flex-shrink:0;color:#fff;
}

/* CONTENT */
#content{flex:1;overflow-y:auto;padding:1.75rem;scrollbar-width:thin;scrollbar-color:var(--bg3) transparent}

/* ═══════════════════════════════════════════════
   COMPONENTS
═══════════════════════════════════════════════ */

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.125rem;margin-bottom:1.5rem}
.stat-card{
  background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r3);padding:1.125rem 1.25rem;
  display:flex;flex-direction:column;gap:.75rem;
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease),border-color 220ms;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--bdr2)}
.stat-hdr{display:flex;align-items:center;justify-content:space-between}
.stat-lbl{font-size:.68rem;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em}
.stat-ico{width:32px;height:32px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center}
.stat-val{font-size:1.65rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat-chg{font-size:.7rem;font-weight:500}

/* Cards */
.card{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r3);padding:1.375rem}
.card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.125rem;padding-bottom:.875rem;border-bottom:1px solid var(--bdr)}
.card-title{font-size:.95rem;font-weight:600}
.card-sub{font-size:.75rem;color:var(--t3);margin-top:.15rem}

/* Row layouts */
.row{display:flex;gap:1.25rem}
.row>.card{flex:1}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
  padding:.55rem .95rem;border-radius:var(--r2);font-weight:600;font-size:.78rem;
  cursor:pointer;transition:all 140ms var(--ease);border:1px solid transparent;white-space:nowrap;line-height:1;
}
.btn svg{flex-shrink:0}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 2px 12px var(--blueg)}
.btn-primary:hover{background:var(--blue2);transform:translateY(-1px);box-shadow:0 4px 20px var(--blueg)}
.btn-secondary{background:var(--bg2);color:var(--t2);border-color:var(--bdr)}
.btn-secondary:hover{background:var(--bg3);color:var(--t1);border-color:var(--bdr2)}
.btn-danger{background:var(--reds);color:var(--red);border-color:var(--redb)}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-success{background:var(--greens);color:var(--green);border-color:var(--greenb)}
.btn-success:hover{background:var(--green);color:#fff}
.btn-sm{padding:.3rem .55rem;font-size:.72rem}
.btn-ico{padding:.38rem;border-radius:var(--r1)}
.btn-full{width:100%;justify-content:flex-start;margin-bottom:.4rem}

/* Forms */
.fg{margin-bottom:.875rem}
.lbl{display:block;font-size:.75rem;font-weight:500;color:var(--t2);margin-bottom:.35rem}
.fc{
  width:100%;padding:.6rem .8rem;background:var(--bg0);border:1px solid var(--bdr);
  border-radius:var(--r2);color:var(--t1);font-size:.85rem;
  transition:border-color 140ms,box-shadow 140ms;
}
.fc:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blueg)}
.fc::placeholder{color:var(--t3)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:.875rem}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem}

/* Tables */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.84rem}
thead th{
  padding:.65rem .875rem;text-align:left;font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--t3);
  border-bottom:1px solid var(--bdr);background:var(--bg2);white-space:nowrap;
}
tbody tr{border-bottom:1px solid var(--bdr);transition:background 140ms}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--bg2)}
tbody td{padding:.8rem .875rem;color:var(--t2);vertical-align:middle}
.td-name{color:var(--t1);font-weight:500}
.td-r{text-align:right}
.td-act{display:flex;gap:.3rem;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.td-sub{font-size:.7rem;color:var(--t3);margin-top:.1rem}
.empty-td{text-align:center!important;padding:2.5rem!important;color:var(--t3)!important;font-size:.84rem!important}

/* Badges */
.badge{
  display:inline-flex;align-items:center;gap:.25rem;padding:.18rem .55rem;
  border-radius:999px;font-size:.65rem;font-weight:700;border:1px solid;white-space:nowrap;letter-spacing:.02em;
}
.bdot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.b-green {background:var(--greens);color:var(--green);border-color:var(--greenb)}
.b-amber {background:var(--ambers);color:var(--amber);border-color:var(--amberb)}
.b-red   {background:var(--reds);color:var(--red);border-color:var(--redb)}
.b-blue  {background:var(--blues);color:var(--blue);border-color:rgba(79,124,255,.2)}
.b-purple{background:var(--purples);color:var(--purple);border-color:var(--purpleb)}
.b-gray  {background:var(--bg3);color:var(--t2);border-color:var(--bdr)}

/* Modal */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem;
  animation:ovIn 140ms var(--ease);
}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r4);
  width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;
  box-shadow:var(--sh3);animation:modIn .22s var(--ease);
}
.modal-lg{max-width:740px}
@keyframes modIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.mod-hdr{padding:1.25rem 1.375rem .875rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr);flex-shrink:0}
.mod-title{font-size:1rem;font-weight:700}
.mod-close{width:28px;height:28px;border-radius:var(--r1);border:1px solid var(--bdr);background:transparent;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:all 140ms}
.mod-close:hover{background:var(--bg3);color:var(--t1)}
.mod-body{padding:1.375rem;overflow-y:auto;flex:1}
.mod-foot{padding:.875rem 1.375rem;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:flex-end;gap:.625rem;flex-shrink:0}

/* Line items */
.li-sec-title{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);margin-bottom:.625rem}
.li-row{display:grid;grid-template-columns:1fr 72px 110px 30px;gap:.4rem;align-items:start;margin-bottom:.4rem;padding:.55rem .625rem;background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r2)}
.li-row .fc{background:var(--bg0);padding:.4rem .55rem;font-size:.78rem}
.li-total{display:flex;justify-content:flex-end;align-items:center;gap:1rem;margin-top:.75rem;padding:.75rem .875rem;background:var(--bg2);border-radius:var(--r2);border:1px solid var(--bdr)}
.li-total .tot-lbl{font-size:.78rem;color:var(--t2)}
.li-total .tot-val{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--t1)}

/* Pipeline */
.pipeline{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;align-items:start}
.pipe-col{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r3);padding:.875rem}
.pipe-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:.875rem;padding-bottom:.625rem;border-bottom:1px solid var(--bdr)}
.pipe-lbl{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t3)}
.pipe-cnt{width:20px;height:20px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:var(--t2)}
.deal-card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r2);padding:.75rem;margin-bottom:.5rem;cursor:pointer;transition:all 140ms var(--ease)}
.deal-card:hover{border-color:var(--blue);transform:translateY(-1px);box-shadow:var(--sh1)}
.deal-title{font-size:.78rem;font-weight:600;color:var(--t1);margin-bottom:.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deal-client{font-size:.68rem;color:var(--t3);margin-bottom:.375rem}
.deal-footer{display:flex;align-items:center;justify-content:space-between}
.deal-value{font-size:.78rem;font-weight:700;color:var(--green)}
.pipe-empty{text-align:center;padding:.75rem;color:var(--t3);font-size:.7rem}

/* Activity */
.act-item{display:flex;gap:.875rem;align-items:flex-start;padding:.75rem 0;border-bottom:1px solid var(--bdr)}
.act-item:last-child{border-bottom:none}
.act-dot{width:7px;height:7px;border-radius:50%;margin-top:.45rem;flex-shrink:0}
.act-txt{font-size:.82rem;color:var(--t2);line-height:1.5}
.act-txt b{color:var(--t1)}
.act-time{font-size:.7rem;color:var(--t3);margin-top:.15rem}

/* Toast */
#toast-wrap{position:fixed;bottom:1.25rem;right:1.25rem;z-index:200;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r2);padding:.7rem 1rem;min-width:260px;display:flex;align-items:center;gap:.625rem;box-shadow:var(--sh2);animation:toastIn .25s var(--ease);pointer-events:auto}
.toast-msg{font-size:.82rem;color:var(--t1);font-weight:500}
@keyframes toastIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateX(18px)}}

/* Payslip calc */
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:.625rem;margin-top:.875rem}
.ps-field{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r2);padding:.75rem}
.ps-lbl{font-size:.65rem;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.15rem}
.ps-val{font-size:.95rem;font-weight:700;color:var(--t1)}

/* View header */
.vh{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.125rem}
.vh h2{font-size:1.05rem;font-weight:700;color:var(--t1)}

/* Divider */
.divider{height:1px;background:var(--bdr);margin:.875rem 0}

/* Utilities */
.mb4{margin-bottom:1.5rem}.mb3{margin-bottom:1rem}.mt2{margin-top:.625rem}.mt3{margin-top:1rem}
.gap3{gap:1rem}.gap2{gap:.625rem}
.text-green{color:var(--green)}.text-red{color:var(--red)}.text-amber{color:var(--amber)}.text-blue{color:var(--blue)}
.fw7{font-weight:700}.fw8{font-weight:800}.text-xs{font-size:.72rem}.text-sm{font-size:.82rem}
.text-muted{color:var(--t3)}.text-sec{color:var(--t2)}
.ani{animation:fadeIn .3s var(--ease) forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════
   MOBILE SIDEBAR SYSTEM
═══════════════════════════════════════════════ */

/* Hamburger button (hidden on desktop) */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r2);
  border: 1px solid var(--bdr);
  background: var(--bg2);
  color: var(--t1);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 140ms var(--ease);
  padding: 0;
}
.hamburger-btn:hover { background: var(--bg3); border-color: var(--bdr2); }
.hamburger-btn svg { width: 18px; height: 18px; }

/* Sidebar backdrop overlay */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 49;
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.sidebar-backdrop.active { display: block; opacity: 1; }

/* ═══════════════════════════════════════════════
   RESPONSIVE — LARGE TABLETS (≤ 1200px)
═══════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pipeline { grid-template-columns: repeat(3, 1fr); }
  .row { flex-wrap: wrap; }
  .row > .card { min-width: 280px; }
  .search-bar input { width: 130px; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLETS (≤ 1024px)
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Collapse sidebar to icon-only */
  #sidebar {
    width: 60px;
    padding: 1rem 0.35rem;
    align-items: center;
  }
  #sidebar .brand { flex-direction: column; gap: 0.25rem; padding: 0.25rem 0 1rem; }
  #sidebar .brand > div:last-child { display: none; }
  #sidebar .brand > div:first-child { margin-right: 0; }
  #sidebar .nav-sec { font-size: 0; padding: 0.5rem 0 0.15rem; width: 100%; text-align: center; }
  #sidebar .nav-sec::after { content: ''; display: block; width: 24px; height: 1px; background: var(--bdr); margin: 0 auto; }
  #sidebar .nav-item { justify-content: center; padding: 0.55rem; }
  #sidebar .nav-item span { display: none; }
  #sidebar .nav-item svg { margin: 0; }

  .pipeline { grid-template-columns: repeat(2, 1fr); }
  #content { padding: 1.25rem; }
  #header { padding: 0.75rem 1.25rem; }
  .search-bar input { width: 100px; }

  .fr { grid-template-columns: 1fr; }
  .fr3 { grid-template-columns: 1fr 1fr; }
  .ps-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — PHABLETS / SMALL TABLETS (≤ 768px)
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sidebar becomes a full-width overlay */
  .hamburger-btn { display: flex; }

  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 280ms var(--ease);
    padding: 1.25rem 0.875rem;
    align-items: stretch;
    box-shadow: none;
  }
  #sidebar.open {
    transform: translateX(0);
    box-shadow: 8px 0 30px rgba(0,0,0,0.5);
  }
  /* Restore full labels when sidebar is open as overlay */
  #sidebar.open .brand { flex-direction: row; gap: 0.75rem; padding: 0.25rem 0.5rem 1.75rem; }
  #sidebar.open .brand > div:last-child { display: block; }
  #sidebar.open .nav-sec { font-size: 0.6rem; padding: 0.875rem 0.625rem 0.3rem; }
  #sidebar.open .nav-sec::after { display: none; }
  #sidebar.open .nav-item { justify-content: flex-start; padding: 0.6rem 0.75rem; }
  #sidebar.open .nav-item span { display: inline; }

  #main { width: 100%; }

  /* Header */
  #header { padding: 0.65rem 1rem; gap: 0.5rem; }
  #header-left .page-title { font-size: 1rem; }
  #header-left .page-sub { font-size: 0.65rem; }

  /* Content */
  #content { padding: 1rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .stat-card { padding: 0.875rem 1rem; }
  .stat-val { font-size: 1.35rem; }

  /* Pipeline */
  .pipeline { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  /* Dashboard row */
  .row { flex-direction: column; }
  .row > .card { min-width: 0; }

  /* Modal */
  .modal { max-width: 95vw; margin: 0.5rem; border-radius: var(--r3); }
  .modal-lg { max-width: 95vw; }
  .mod-body { padding: 1rem; }
  .mod-hdr { padding: 1rem 1.125rem 0.75rem; }

  /* Line items */
  .li-row { grid-template-columns: 1fr 60px 90px 28px; gap: 0.3rem; padding: 0.4rem 0.5rem; }

  /* Tables - enable horizontal scroll */
  .tbl-wrap { margin: 0 -1rem; padding: 0 1rem; }
  table { min-width: 600px; }

  /* Forms */
  .fr { grid-template-columns: 1fr; gap: 0.625rem; }
  .fr3 { grid-template-columns: 1fr; }
  .ps-grid { grid-template-columns: 1fr; }

  /* Auth portal */
  #auth-portal > div { max-width: 90vw !important; padding: 1.75rem !important; }

  /* View headers */
  .vh { flex-wrap: wrap; gap: 0.75rem; }
  .vh h2 { font-size: 0.95rem; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — PHONES (≤ 480px)
═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Stats to single column */
  .stats-grid { grid-template-columns: 1fr; gap: 0.625rem; }
  .stat-card { flex-direction: row; align-items: center; gap: 1rem; padding: 0.875rem; }
  .stat-hdr { flex-direction: row-reverse; gap: 0.5rem; flex: 1; }
  .stat-val { font-size: 1.2rem; }
  .stat-chg { font-size: 0.62rem; }

  /* Pipeline to single column */
  .pipeline { grid-template-columns: 1fr; }

  /* Header compact */
  #header { flex-wrap: wrap; padding: 0.5rem 0.75rem; }
  #header-right { width: 100%; justify-content: flex-end; margin-top: 0.35rem; }
  .search-bar { flex: 1; }
  .search-bar input { width: 100%; min-width: 0; }

  /* Content */
  #content { padding: 0.75rem; }

  /* Buttons & touch targets */
  .btn { padding: 0.6rem 0.875rem; font-size: 0.8rem; min-height: 40px; }
  .btn-sm { min-height: 32px; padding: 0.4rem 0.6rem; }
  .btn-ico { min-width: 36px; min-height: 36px; }

  /* Form inputs touch-friendly */
  .fc { padding: 0.7rem 0.8rem; font-size: 0.88rem; min-height: 42px; }

  /* Line items stack on very small screens */
  .li-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .li-row .fc { min-height: 38px; }

  /* Modal full-width on phones */
  .overlay { padding: 0.5rem; align-items: flex-end; }
  .modal {
    max-width: 100%;
    max-height: 95vh;
    border-radius: var(--r3) var(--r3) 0 0;
    margin: 0;
  }
  .modal-lg { max-width: 100%; }
  .mod-body { padding: 0.875rem; }
  .mod-foot { padding: 0.75rem 0.875rem; flex-wrap: wrap; }
  .mod-foot .btn { flex: 1; min-width: 0; }

  /* Toast on phone */
  #toast-wrap { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }
  .toast { min-width: 0; width: 100%; }

  /* Auth portal */
  #auth-portal > div {
    max-width: 100vw !important;
    margin: 0 0.5rem !important;
    padding: 1.25rem !important;
    border-radius: var(--r3) !important;
  }

  /* Table font sizes */
  table { font-size: 0.78rem; min-width: 520px; }
  thead th { padding: 0.5rem 0.6rem; font-size: 0.6rem; }
  tbody td { padding: 0.6rem; }

  /* Payslip grid single column */
  .ps-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   iOS PWA / STANDALONE SAFE AREA SUPPORT
═══════════════════════════════════════════════ */

/* When added to iOS home screen, avoid notch/home-bar overlap */
@supports (padding: env(safe-area-inset-top)) {
  #header {
    padding-top: calc(0.875rem + env(safe-area-inset-top));
    padding-left: calc(1.75rem + env(safe-area-inset-left));
    padding-right: calc(1.75rem + env(safe-area-inset-right));
  }
  #sidebar {
    padding-top: calc(1.25rem + env(safe-area-inset-top));
    padding-bottom: calc(0.875rem + env(safe-area-inset-bottom));
    padding-left: calc(0.875rem + env(safe-area-inset-left));
  }
  #content {
    padding-bottom: calc(1.75rem + env(safe-area-inset-bottom));
  }
  #toast-wrap {
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }
  /* On iOS standalone, prevent content from sliding under status bar */
  #auth-portal {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Prevent iOS elastic "bounce" scroll effect on the body */
body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* Make tap targets feel responsive on touch */
.nav-item, .btn, .avatar, .theme-toggle {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}