/* ============================================================
   Nova Clean ERP — Enterprise Stylesheet v1.1
   IBM Plex Sans · Dark & Light industrial theme
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── CSS Variables (Dark Mode — default) ──────────────────── */
:root{
  --bg:#03080F;
  --surf:#060E1F;
  --card:rgba(7,16,36,0.82);
  --card-solid:#0A1525;
  --bdr:rgba(60,100,140,0.14);
  --bdrH:rgba(60,100,140,0.26);
  --blue:#3B82F6;
  --blueD:#1D56D8;
  --cyan:#22D3EE;
  --green:#34D399;
  --amber:#FBBF24;
  --red:#F87171;
  --purple:#A78BFA;
  --orange:#FB923C;
  --pink:#F472B6;
  --teal:#2DD4BF;
  --text:#C8D8E8;
  --textSec:#5A7A94;
  --textMut:#334D63;
  --white:#E8F3FC;
  --mono:'IBM Plex Mono',monospace;
  --sidebar-w:242px;
  --topbar-h:50px;
  --radius:8px;
  --shadow:0 8px 32px rgba(0,0,0,0.45);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.6);
  --transition:all 0.18s ease;
}

/* ── CSS Variables (Light Mode) ───────────────────────────── */
body.light-mode{
  --bg:#F0F4FA;
  --surf:#FFFFFF;
  --card:rgba(255,255,255,0.95);
  --card-solid:#FFFFFF;
  --bdr:rgba(0,0,0,0.08);
  --bdrH:rgba(0,0,0,0.15);
  --blue:#1D4ED8;
  --blueD:#1E40AF;
  --cyan:#0891B2;
  --green:#059669;
  --amber:#D97706;
  --red:#DC2626;
  --purple:#7C3AED;
  --orange:#EA580C;
  --pink:#DB2777;
  --teal:#0D9488;
  --text:#1A2533;
  --textSec:#4A5568;
  --textMut:#718096;
  --white:#1A2533;
  --shadow:0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg:0 16px 40px rgba(0,0,0,0.15);
}

body{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background 0.25s ease,color 0.25s ease;
}

a{text-decoration:none;color:var(--blue)}
a:hover{text-decoration:underline}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(100,130,160,0.25);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(100,130,160,0.4)}

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}

.anim-up{animation:fadeUp 0.32s ease forwards}
.anim-up1{animation:fadeUp 0.32s 0.06s ease both}
.anim-up2{animation:fadeUp 0.32s 0.12s ease both}
.anim-up3{animation:fadeUp 0.32s 0.18s ease both}
.anim-up4{animation:fadeUp 0.32s 0.24s ease both}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2.2s infinite;box-shadow:0 0 5px var(--green)}

/* ── Layout ─────────────────────────────────────────────────── */
.erp-wrap{display:flex;height:100vh;overflow:hidden}
.main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden}
.page-main{flex:1;overflow-y:auto;padding:22px 24px}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--surf);
  border-right:1px solid var(--bdr);
  display:flex;flex-direction:column;
  height:100vh;overflow:hidden;
  transition:var(--transition);
  box-shadow:2px 0 12px rgba(0,0,0,0.08);
}
body.light-mode .sidebar{box-shadow:2px 0 12px rgba(0,0,0,0.06)}

.sidebar-header{padding:16px 14px;border-bottom:1px solid var(--bdr);flex-shrink:0}
.sidebar-logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:32px;height:32px;border-radius:7px;
  background:linear-gradient(135deg,var(--blueD),#0A3080);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
body.light-mode .logo-icon{background:linear-gradient(135deg,#1D4ED8,#1E3A8A)}
.logo-name{font-size:13px;font-weight:700;color:var(--white);letter-spacing:-0.3px}
.logo-sub{font-size:10px;color:var(--textMut);margin-top:1px}

.sidebar-alert{padding:7px 14px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:6px;font-size:11px;color:var(--textSec);flex-shrink:0;transition:background 0.3s}
.sidebar-alert .va-text{font-family:var(--mono);font-weight:600}

.sidebar-nav{flex:1;overflow-y:auto;padding:6px 9px}
.nav-group{margin-bottom:14px}
.nav-grp-label{display:flex;align-items:center;gap:8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px;color:var(--textMut);padding:4px 9px 5px}
.grp-line{flex:1;height:1px;background:var(--bdr)}

.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 10px;border-radius:6px;
  font-size:12.5px;font-weight:500;color:var(--textMut);
  cursor:pointer;transition:var(--transition);
  border:1px solid transparent;user-select:none;text-decoration:none;
}
.nav-item:hover{background:rgba(59,130,246,0.08);color:var(--textSec);text-decoration:none}
.nav-item.active{background:rgba(59,130,246,0.12);color:var(--blue);border-color:rgba(59,130,246,0.2)}
body.light-mode .nav-item:hover{background:rgba(29,78,216,0.06)}
body.light-mode .nav-item.active{background:rgba(29,78,216,0.1);border-color:rgba(29,78,216,0.2)}
.nav-icon{font-size:14px;line-height:1;flex-shrink:0}
.nav-dot-active{margin-left:auto;width:4px;height:4px;border-radius:50%;background:var(--blue);flex-shrink:0}

.sidebar-footer{padding:11px 13px;border-top:1px solid var(--bdr);flex-shrink:0}
.sf-user{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.sf-avatar{width:27px;height:27px;border-radius:50%;
  background:linear-gradient(135deg,rgba(59,130,246,0.5),rgba(167,139,250,0.5));
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.sf-name{font-size:12px;font-weight:600;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-role{font-size:10px;color:var(--textMut)}
.sf-logout{
  display:block;width:100%;text-align:center;
  background:rgba(60,100,140,0.06);border:1px solid var(--bdr);
  border-radius:5px;color:var(--textMut);font-size:11px;
  padding:6px;cursor:pointer;transition:var(--transition);
  font-family:inherit;text-decoration:none;
}
.sf-logout:hover{background:rgba(248,113,113,0.08);color:var(--red);border-color:rgba(248,113,113,0.2);text-decoration:none}

/* ── Top Bar ─────────────────────────────────────────────────── */
.topbar{
  height:var(--topbar-h);background:var(--surf);
  border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;padding:0 18px;gap:14px;flex-shrink:0;
  transition:var(--transition);
}
.sidebar-toggle{background:none;border:none;color:var(--textMut);cursor:pointer;font-size:16px;padding:4px;transition:var(--transition)}
.sidebar-toggle:hover{color:var(--text)}
.topbar-breadcrumb{flex:1;font-size:12px;display:flex;align-items:center;gap:5px;overflow:hidden}
.bc-home{color:var(--textMut);text-decoration:none}
.bc-sep{color:var(--bdr)}
.bc-link{color:var(--textSec);text-decoration:none}
.bc-current{color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;align-items:center;gap:8px}
.topbar-status{display:flex;align-items:center;gap:5px;font-size:11px;
  background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.18);
  border-radius:5px;padding:4px 10px;color:var(--blue);white-space:nowrap}
.topbar-icon{
  position:relative;background:transparent;
  border:1px solid var(--bdr);border-radius:6px;
  padding:5px 9px;font-size:13px;cursor:pointer;
  transition:var(--transition);color:var(--textSec);
}
.topbar-icon:hover{background:rgba(59,130,246,0.08);color:var(--blue);border-color:rgba(59,130,246,0.2)}
.topbar-user{font-size:12px;font-weight:600;color:var(--textSec);white-space:nowrap}
.notif-badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--red);color:#fff;border-radius:50%;
  width:15px;height:15px;font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* Theme toggle button */
.theme-toggle{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:6px;
  background:transparent;border:1px solid var(--bdr);
  cursor:pointer;transition:var(--transition);
  font-size:15px;color:var(--textSec);
}
.theme-toggle:hover{background:rgba(59,130,246,0.08);border-color:rgba(59,130,246,0.2);color:var(--blue)}

/* ── Notification Panel ──────────────────────────────────────── */
.notif-panel{
  position:fixed;top:var(--topbar-h);right:16px;
  width:340px;max-height:420px;overflow-y:auto;
  z-index:999;box-shadow:var(--shadow-lg);
  background:var(--card-solid);border:1px solid var(--bdrH);border-radius:var(--radius);
}
.notif-hdr{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:1px solid var(--bdr);font-size:13px;font-weight:600;color:var(--white)}
.notif-item{padding:11px 15px;border-bottom:1px solid var(--bdr);transition:background 0.1s}
.notif-item:hover{background:rgba(59,130,246,0.04)}
.notif-item.unread{border-left:3px solid var(--blue)}
.ni-title{font-size:12.5px;font-weight:600;color:var(--text)}
.ni-msg{font-size:12px;color:var(--textSec);margin-top:2px}
.ni-time{font-size:10px;color:var(--textMut);margin-top:4px}
.notif-empty{padding:24px;text-align:center;color:var(--textMut);font-size:12px}

/* ── Flash Messages ──────────────────────────────────────────── */
.flash-wrap{padding:0 24px}
.flash-msg{
  display:flex;align-items:center;gap:10px;
  padding:11px 15px;border-radius:7px;margin-bottom:10px;
  font-size:13px;font-weight:500;animation:slideInRight 0.3s ease;
}
.flash-success{background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3);color:var(--green)}
.flash-error{background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.3);color:var(--red)}
.flash-warning{background:rgba(251,191,36,0.1);border:1px solid rgba(251,191,36,0.3);color:var(--amber)}
.flash-info{background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.3);color:var(--blue)}
body.light-mode .flash-success{background:rgba(5,150,105,0.08);border-color:rgba(5,150,105,0.25)}
body.light-mode .flash-error{background:rgba(220,38,38,0.08);border-color:rgba(220,38,38,0.25)}

/* ── Cards ───────────────────────────────────────────────────── */
.glass{
  background:var(--card);
  backdrop-filter:blur(14px);
  border:1px solid var(--bdr);
  border-radius:var(--radius);
  transition:var(--transition);
}
body.light-mode .glass{backdrop-filter:none;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.card{
  background:var(--card);
  border:1px solid var(--bdr);
  border-radius:var(--radius);
  padding:20px;
  transition:var(--transition);
}
body.light-mode .card{background:var(--surf);box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.card-title{font-size:13px;font-weight:600;color:var(--white)}
body.light-mode .card-title{color:var(--text)}
.card-sub{font-size:11px;color:var(--textMut);margin-top:2px}
.card-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}

/* KPI Card */
.kpi-card{
  background:var(--card);border:1px solid var(--bdr);
  border-radius:var(--radius);padding:18px 20px;
  transition:transform 0.2s,box-shadow 0.2s,background 0.18s;
  cursor:default;
}
body.light-mode .kpi-card{background:var(--surf);box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kpi-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.9px;color:var(--textMut)}
.kpi-val{font-size:24px;font-weight:700;letter-spacing:-0.8px;line-height:1;font-family:var(--mono);margin-top:9px}
.kpi-sub{font-size:11px;color:var(--textMut);margin-top:5px}
.kpi-trend{margin-top:7px;font-size:11px;font-weight:600}

/* ── Grid ────────────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:1400px){.g6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1200px){.g5{grid-template-columns:repeat(3,1fr)};.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.g3,.g4,.g5,.g6{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr}}

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
.erp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.erp-table thead th{
  padding:8px 13px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.85px;color:var(--textMut);
  border-bottom:1px solid var(--bdr);
  background:var(--surf);
  white-space:nowrap;position:sticky;top:0;text-align:left;
  transition:var(--transition);
}
body.light-mode .erp-table thead th{background:#F8FAFC;color:#718096}
.erp-table thead th:first-child{border-radius:7px 0 0 0}
.erp-table thead th:last-child{border-radius:0 7px 0 0}
.erp-table tbody td{
  padding:8px 13px;
  border-bottom:1px solid var(--bdr);
  color:var(--textSec);white-space:nowrap;
  transition:color 0.1s;
}
body.light-mode .erp-table tbody td{color:var(--textSec);border-bottom-color:rgba(0,0,0,0.06)}
.erp-table tbody tr{transition:background 0.1s}
.erp-table tbody tr:hover{background:rgba(59,130,246,0.04)}
.erp-table tbody tr:hover td{color:var(--text)}
body.light-mode .erp-table tbody tr:hover{background:rgba(29,78,216,0.04)}
.erp-table tfoot td{
  padding:10px 13px;border-top:1px solid var(--bdrH);
  font-weight:700;color:var(--text);
  background:var(--surf);
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:3px;
  font-size:10.5px;font-weight:700;letter-spacing:0.3px;
  white-space:nowrap;font-family:var(--mono);
}
.badge-blue{background:rgba(59,130,246,0.12);color:var(--blue);border:1px solid rgba(59,130,246,0.25)}
.badge-success{background:rgba(52,211,153,0.12);color:var(--green);border:1px solid rgba(52,211,153,0.25)}
.badge-danger{background:rgba(248,113,113,0.12);color:var(--red);border:1px solid rgba(248,113,113,0.25)}
.badge-warning{background:rgba(251,191,36,0.12);color:var(--amber);border:1px solid rgba(251,191,36,0.25)}
.badge-info{background:rgba(34,211,238,0.12);color:var(--cyan);border:1px solid rgba(34,211,238,0.25)}
.badge-purple{background:rgba(167,139,250,0.12);color:var(--purple);border:1px solid rgba(167,139,250,0.25)}
.badge-muted{background:rgba(60,100,140,0.08);color:var(--textSec);border:1px solid var(--bdr)}
body.light-mode .badge-blue{background:rgba(29,78,216,0.08);color:#1D4ED8;border-color:rgba(29,78,216,0.2)}
body.light-mode .badge-success{background:rgba(5,150,105,0.08);color:#059669;border-color:rgba(5,150,105,0.2)}
body.light-mode .badge-danger{background:rgba(220,38,38,0.08);color:#DC2626;border-color:rgba(220,38,38,0.2)}
body.light-mode .badge-warning{background:rgba(217,119,6,0.08);color:#D97706;border-color:rgba(217,119,6,0.2)}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary{
  background:linear-gradient(135deg,var(--blueD),#1447B8);
  color:#fff;border:none;border-radius:6px;
  padding:8px 16px;font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all 0.15s;
  white-space:nowrap;letter-spacing:0.2px;
  display:inline-flex;align-items:center;gap:6px;
}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 20px rgba(29,86,216,0.35)}
body.light-mode .btn-primary{background:linear-gradient(135deg,#1D4ED8,#1E40AF)}
.btn-ghost{
  background:transparent;color:var(--textSec);
  border:1px solid var(--bdr);border-radius:6px;
  padding:7px 13px;font-size:12px;font-weight:500;
  cursor:pointer;font-family:inherit;transition:var(--transition);
  white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
}
.btn-ghost:hover{background:rgba(59,130,246,0.08);color:var(--blue);border-color:rgba(59,130,246,0.25)}
body.light-mode .btn-ghost{border-color:rgba(0,0,0,0.12);color:var(--textSec)}
body.light-mode .btn-ghost:hover{background:rgba(29,78,216,0.06);color:var(--blue)}
.btn-danger{
  background:rgba(248,113,113,0.1);color:var(--red);
  border:1px solid rgba(248,113,113,0.25);border-radius:6px;
  padding:6px 12px;font-size:11.5px;cursor:pointer;
  font-family:inherit;transition:var(--transition);
}
.btn-danger:hover{background:rgba(248,113,113,0.2)}
body.light-mode .btn-danger{background:rgba(220,38,38,0.06);color:#DC2626;border-color:rgba(220,38,38,0.2)}
.btn-xs{padding:4px 9px!important;font-size:11px!important}
.btn-sm{padding:6px 12px!important;font-size:12px!important}
.btn-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── Forms ───────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--textMut)}
.form-control{
  width:100%;background:var(--bg);
  border:1px solid var(--bdr);
  border-radius:6px;color:var(--text);
  font-family:'IBM Plex Sans',sans-serif;font-size:13px;
  padding:8px 11px;outline:none;
  transition:border-color 0.15s,box-shadow 0.15s;
  appearance:none;
}
.form-control:focus{border-color:rgba(59,130,246,0.5);box-shadow:0 0 0 3px rgba(59,130,246,0.08)}
.form-control::placeholder{color:var(--textMut)}
textarea.form-control{resize:vertical;min-height:80px}
body.light-mode .form-control{
  background:#FFFFFF;border-color:rgba(0,0,0,0.12);color:var(--text);
}
body.light-mode .form-control:focus{border-color:rgba(29,78,216,0.5);box-shadow:0 0 0 3px rgba(29,78,216,0.08)}
.form-hint{font-size:11px;color:var(--textMut);margin-top:3px}
.form-error{font-size:11px;color:var(--red);margin-top:3px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:14px}

/* ── Filter Bar ──────────────────────────────────────────────── */
.filter-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 15px;
  background:var(--surf);
  border:1px solid var(--bdr);border-radius:8px;margin-bottom:18px;
  transition:var(--transition);
}
body.light-mode .filter-bar{background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.filter-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--textMut)}
.filter-bar .form-control{width:auto;min-width:140px}
.filter-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.filter-count{font-size:12px;color:var(--textSec)}

/* ── Progress Bars ───────────────────────────────────────────── */
.progress{height:4px;border-radius:2px;background:rgba(100,130,160,0.15);overflow:hidden}
.progress-bar{height:100%;border-radius:2px;transition:width 0.5s ease}
body.light-mode .progress{background:rgba(0,0,0,0.08)}

/* ── Page Header ─────────────────────────────────────────────── */
.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
.page-title{font-size:21px;font-weight:700;color:var(--white);letter-spacing:-0.4px}
body.light-mode .page-title{color:var(--text)}
.page-subtitle{font-size:12px;color:var(--textMut);margin-top:3px}

.section-label{
  display:flex;align-items:center;gap:10px;
  font-size:10px;font-weight:700;color:var(--blue);
  text-transform:uppercase;letter-spacing:1.1px;margin-bottom:14px;
}
.section-label::after{content:'';flex:1;height:1px;background:rgba(59,130,246,0.2)}
body.light-mode .section-label::after{background:rgba(29,78,216,0.15)}

/* ── Modals ──────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(6px);z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
body.light-mode .modal-overlay{background:rgba(0,0,0,0.5)}
.modal-box{
  background:var(--card-solid);
  border:1px solid var(--bdrH);
  border-radius:12px;padding:28px;
  max-width:640px;width:100%;max-height:88vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);
  animation:fadeUp 0.25s ease;
}
body.light-mode .modal-box{background:#FFFFFF;border-color:rgba(0,0,0,0.1)}
.modal-box-lg{max-width:880px}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.modal-title{font-size:15px;font-weight:700;color:var(--white)}
body.light-mode .modal-title{color:var(--text)}
.modal-close{background:none;border:none;color:var(--textMut);cursor:pointer;font-size:18px;line-height:1;padding:2px;transition:color 0.1s}
.modal-close:hover{color:var(--red)}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--bdr)}

/* ── Pagination ──────────────────────────────────────────────── */
.pagination{display:flex;align-items:center;gap:6px;padding:14px 0;flex-wrap:wrap}
.pg-btn{
  padding:5px 11px;border-radius:5px;font-size:12px;font-weight:500;
  background:transparent;border:1px solid var(--bdr);
  color:var(--textSec);cursor:pointer;text-decoration:none;transition:var(--transition);
}
.pg-btn:hover,.pg-btn.active{background:rgba(59,130,246,0.1);color:var(--blue);border-color:rgba(59,130,246,0.3);text-decoration:none}
body.light-mode .pg-btn{border-color:rgba(0,0,0,0.1)}
body.light-mode .pg-btn:hover,.body.light-mode .pg-btn.active{background:rgba(29,78,216,0.08)}
.pg-info{font-size:11px;color:var(--textMut);margin-left:8px}

/* ── Variance / Status Colors ────────────────────────────────── */
.var-good{color:var(--green)!important}
.var-warn{color:var(--amber)!important}
.var-bad{color:var(--red)!important}
.mono{font-family:var(--mono)!important}

/* ── Misc ────────────────────────────────────────────────────── */
.divider{height:1px;background:var(--bdr);margin:16px 0}
.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:8px;margin-bottom:18px}
.alert-danger{background:rgba(248,113,113,0.08);border:1px solid rgba(248,113,113,0.25)}
.alert-success{background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.25)}
.alert-warning{background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.25)}
.alert-info{background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.25)}
body.light-mode .alert-danger{background:rgba(220,38,38,0.05);border-color:rgba(220,38,38,0.2)}
body.light-mode .alert-success{background:rgba(5,150,105,0.05);border-color:rgba(5,150,105,0.2)}
body.light-mode .alert-info{background:rgba(29,78,216,0.05);border-color:rgba(29,78,216,0.2)}
.alert-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.alert-title{font-size:13px;font-weight:700}
.alert-msg{font-size:12px;margin-top:3px;color:var(--textSec)}
.alert-danger .alert-title{color:var(--red)}
.alert-success .alert-title{color:var(--green)}
.alert-warning .alert-title{color:var(--amber)}
.alert-info .alert-title{color:var(--blue)}
.empty-state{text-align:center;padding:48px 20px}
.empty-icon{font-size:40px;margin-bottom:14px;opacity:0.45}
.empty-title{font-size:15px;font-weight:600;color:var(--textSec)}
.empty-sub{font-size:12px;color:var(--textMut);margin-top:5px}
.summary-row{display:flex;justify-content:flex-end;gap:28px;padding:10px 13px;border-top:1px solid var(--bdr);font-size:12.5px}
.summary-item{color:var(--textMut)}
.summary-item strong{color:var(--blue);font-family:var(--mono);font-weight:700}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--bdr);border-top-color:var(--blue);border-radius:50%;animation:spin 0.7s linear infinite}

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:768px){
  :root{--sidebar-w:0px}
  .sidebar{position:fixed;left:-242px;z-index:100;transition:left 0.22s ease;width:242px}
  .sidebar.open{left:0;box-shadow:4px 0 24px rgba(0,0,0,0.4)}
  body.light-mode .sidebar.open{box-shadow:4px 0 20px rgba(0,0,0,0.15)}
  .page-main{padding:16px}
  .page-header{flex-direction:column;gap:12px}
  .filter-bar{flex-direction:column;align-items:flex-start}
  .filter-right{margin-left:0}
}

/* ── Print ───────────────────────────────────────────────────── */
@media print{
  .sidebar,.topbar,.filter-bar,.btn-group,.modal-overlay,
  .flash-wrap,.page-header .btn-group{display:none!important}
  body,body.light-mode{background:#fff!important;color:#000!important}
  .page-main{padding:0!important}
  .card,.glass,.kpi-card,.filter-bar{
    border:1px solid #ccc!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  .erp-table tbody td,.erp-table thead th{
    color:#000!important;border-color:#ddd!important;
    background:#fff!important;
  }
  .erp-table thead th{background:#f5f5f5!important}
  .badge{border:1px solid #999!important;background:#f5f5f5!important;color:#000!important}
  .page-title{color:#000!important;font-size:18px!important}
  .kpi-val{font-size:18px!important}
}