/* ============================================================
   AssetTrack v4 - style.css
   Poppins font · Lucide SVG icons · Collapsible sidebar
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

/* ── Variables ───────────────────────────────────────────────── */
:root {
  --white:#FFFFFF; --off-white:#F3F7F5; --surface:#EAF2ED;
  --surface-2:#DDE8E2; --surface-3:#C9DCCE;
  --green:#00A86B; --green-dark:#1A4D3A; --green-deep:#0D2A1E;
  --green-mid:#2C7A58; --green-light:#B5D9C5; --green-pale:#E3F2E9;
  --text:#111C16; --text-2:#3B5948; --text-3:#6E9480; --text-ph:#A6C5B2;
  --border:#CDDDD5; --border-2:#AECBBB; --border-3:#8DB4A0;
  --shadow-xs:0 1px 3px rgba(0,25,12,.07);
  --shadow-sm:0 2px 8px rgba(0,25,12,.09);
  --shadow-md:0 4px 18px rgba(0,25,12,.12);
  --shadow-lg:0 8px 32px rgba(0,25,12,.16);
  --shadow-xl:0 16px 52px rgba(0,25,12,.2);
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sb-w:252px; --sb-cw:62px; --tb-h:58px;
  --ease:.2s cubic-bezier(.4,0,.2,1); --ease-lg:.35s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;scroll-behavior:smooth}
body{font-family:"Poppins",sans-serif;background:var(--off-white);color:var(--text);line-height:1.6;min-height:100vh;display:flex;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit}

/* ════════════════════════════════════════
   LAYOUT
════════════════════════════════════════ */
.app-layout{display:flex;width:100%;min-height:100vh}

/* ════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════ */
.sidebar{
  width:var(--sb-w);background:var(--green-deep);color:#fff;
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;z-index:200;
  transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden;
  box-shadow:3px 0 20px rgba(0,0,0,.2);
}

/* collapsed */
.sidebar.is-collapsed{width:var(--sb-cw)}
.sidebar.is-collapsed .brand-text,
.sidebar.is-collapsed .nav-label,
.sidebar.is-collapsed .nav-badge,
.sidebar.is-collapsed .nav-section-label,
.sidebar.is-collapsed .sb-info{
  opacity:0;width:0;min-width:0;max-width:0;overflow:hidden;
  flex:0;pointer-events:none;white-space:nowrap;
  transition:opacity .25s cubic-bezier(.4,0,.2,1);
}
.sidebar.is-collapsed .sb-brand{gap:0;justify-content:center;padding:0}
.sidebar.is-collapsed .nav-link{padding:10px 8px;background:transparent;border-color:transparent}
.sidebar.is-collapsed .nav-link.active{background:transparent;border-color:transparent}
.sidebar.is-collapsed .nav-link:hover{background:transparent}
.sidebar.is-collapsed .nav-icon-box{margin:0}
.sidebar.is-collapsed .nav-link:hover .nav-icon-box{background:transparent}
.sidebar.is-collapsed .nav-link.active .nav-icon-box,
.sidebar.is-collapsed .nav-link.active:hover .nav-icon-box{background:rgba(0,168,107,.3);color:var(--green)}
.sidebar.is-collapsed .nav-badge{margin-left:0}
.sidebar.is-collapsed .nav-section-label{height:0;padding:0;margin:0;overflow:hidden}
.sidebar.is-collapsed .sb-foot-inner{justify-content:center;padding:14px 0;gap:0}

/* brand row */
.sb-brand{
  display:flex;align-items:center;gap:10px;
  padding:0 14px;height:var(--tb-h);
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;position:relative;cursor:pointer;
}
.sb-logo{
  width:30px;height:30px;flex-shrink:0;
  background:var(--green);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,168,107,.65);
  transition:box-shadow .3s;
}
.sb-brand:hover .sb-logo{box-shadow:0 2px 16px rgba(0,168,107,.8)}
.sb-logo svg{width:16px;height:16px;stroke:#fff;fill:none}
.brand-text{
  line-height:1.25;white-space:nowrap;min-width:0;
  overflow:hidden;text-overflow:ellipsis;
  transition:opacity .25s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.brand-text strong{display:block;font-size:14px;font-weight:700;color:#fff}
.brand-text span{font-size:10.5px;font-weight:400;color:rgba(255,255,255,.38)}

/* collapse button */
.sb-collapse{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;flex-shrink:0;z-index:1;
  transition:right .3s cubic-bezier(.4,0,.2,1),background .2s;
}
.sb-collapse:hover{background:rgba(255,255,255,.22)}
.sb-collapse svg{width:14px;height:14px;stroke:rgba(255,255,255,.7)}
.sidebar.is-collapsed .sb-collapse{right:calc((var(--sb-cw) - 26px) / 2)}

/* nav */
.sb-nav{
  flex:1;padding:8px 0;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent;
}
.sb-nav::-webkit-scrollbar{width:3px}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}

.nav-section-label{
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.25);padding:14px 16px 5px;white-space:nowrap;
  transition:opacity .25s cubic-bezier(.4,0,.2,1);
}

.nav-link{
  display:flex;align-items:center;
  padding:9px 12px;margin:1px 8px;border-radius:var(--r-md);
  font-size:13px;font-weight:500;color:rgba(255,255,255,.54);
  transition:background .2s,color .2s,border-color .2s;
  position:relative;white-space:nowrap;
  border:1px solid transparent;
}
.nav-link:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.07)}
.nav-link.active{
  color:#fff;background:rgba(0,168,107,.22);
  border-color:rgba(0,168,107,.35);
}
.nav-link.active .nav-icon-box,
.nav-link.active:hover .nav-icon-box{background:rgba(0,168,107,.3);color:var(--green)}

.nav-icon-box{
  width:30px;height:30px;flex-shrink:0;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  margin-right:10px;transition:background .2s;
  color:rgba(255,255,255,.54);
}
.nav-link:hover .nav-icon-box{background:rgba(255,255,255,.09);color:rgba(255,255,255,.9)}
.nav-icon-box svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}

.nav-label{flex:1;transition:opacity .25s cubic-bezier(.4,0,.2,1)}
.nav-badge{
  margin-left:auto;flex-shrink:0;
  background:rgba(0,168,107,.8);color:#fff;
  font-size:9px;font-weight:800;
  padding:2px 6px;border-radius:var(--r-pill);min-width:17px;text-align:center;
  transition:opacity .25s cubic-bezier(.4,0,.2,1);
}

/* tooltip when collapsed */
.nav-tooltip{
  display:none;position:absolute;
  left:calc(var(--sb-cw) + 6px);top:50%;transform:translateY(-50%);
  background:rgba(13,42,30,.95);color:#fff;backdrop-filter:blur(4px);
  font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--r-sm);
  white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-md);z-index:300;
  border:1px solid rgba(255,255,255,.1);
}
.sidebar.is-collapsed .nav-link:hover .nav-tooltip{display:block}

/* footer */
.sb-footer{border-top:1px solid rgba(255,255,255,.07);flex-shrink:0}
.sb-foot-inner{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  text-decoration:none;transition:background .2s,padding .2s;
}
.sb-foot-inner:hover{background:rgba(255,255,255,.05)}
.sb-avatar{
  width:30px;height:30px;flex-shrink:0;border-radius:50%;
  background:var(--green);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;overflow:hidden;
  border:2px solid rgba(255,255,255,.12);background-size:cover;background-position:center;
}
.sb-info{transition:opacity .25s cubic-bezier(.4,0,.2,1)}
.sb-user-name{display:block;font-size:12px;font-weight:600;color:#fff;line-height:1.3}
.sb-user-role{display:block;font-size:10px;color:rgba(255,255,255,.38)}

/* mobile backdrop */
.sb-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:199;
  backdrop-filter:blur(2px);
}
.sb-backdrop.show{display:block}
@media(max-width:960px){
  .sidebar{transform:translateX(calc(-1 * var(--sb-w)));width:var(--sb-w) !important;transition:transform .3s cubic-bezier(.4,0,.2,1)}
  .sidebar.mob-open{transform:translateX(0)}
  .main-wrap{margin-left:0 !important}
  .sb-toggle-btn{display:flex !important}
  .sb-collapse{display:none !important}
}

/* ════════════════════════════════════════
   MAIN / TOPBAR
════════════════════════════════════════ */
.main-wrap{
  margin-left:var(--sb-w);flex:1;display:flex;flex-direction:column;min-width:0;
  transition:margin-left .3s cubic-bezier(.4,0,.2,1);
}
.main-wrap.sb-collapsed-main{margin-left:var(--sb-cw)}

.topbar{
  height:var(--tb-h);background:var(--white);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 22px;gap:10px;
  position:sticky;top:0;z-index:90;box-shadow:var(--shadow-xs);
}
.sb-toggle-btn{
  display:none;width:34px;height:34px;
  align-items:center;justify-content:center;
  background:var(--surface);border-radius:var(--r-sm);color:var(--green-dark);flex-shrink:0;
}
.sb-toggle-btn svg{width:18px;height:18px;stroke:currentColor;fill:none}
.tb-bread{flex:1}
.tb-bread h1{font-size:15px;font-weight:700;color:var(--text);line-height:1.2}
.tb-bread p{font-size:11px;color:var(--text-3);margin-top:1px}
.tb-actions{display:flex;align-items:center;gap:7px}

/* buttons */
.btn-tb{
  display:inline-flex;align-items:center;gap:5px;padding:6px 13px;
  border-radius:var(--r-sm);font-size:12.5px;font-weight:600;
  transition:all var(--ease);white-space:nowrap;border:1.5px solid;
}
.btn-tb svg{width:13px;height:13px;stroke:currentColor;fill:none;flex-shrink:0}
.btn-tb.ghost{border-color:var(--border-2);color:var(--text-2);background:var(--white)}
.btn-tb.ghost:hover{background:var(--surface);border-color:var(--border-3)}
.btn-tb.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn-tb.primary:hover{background:var(--green-mid);border-color:var(--green-mid)}
.btn-tb.danger{border-color:#f5c0c0;color:#8b0000;background:var(--white)}
.btn-tb.danger:hover{background:#8b0000;color:#fff;border-color:#8b0000}

.icon-btn{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:var(--surface);color:var(--text-2);
  transition:all var(--ease);position:relative;flex-shrink:0;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none}

.notif-count{
  position:absolute;top:4px;right:4px;min-width:14px;height:14px;
  background:var(--green);color:#fff;border-radius:var(--r-pill);
  font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--white);padding:0 3px;
}

/* page body */
.page-body{padding:22px;flex:1}

/* section title */
.section-title{
  font-size:12.5px;font-weight:700;color:var(--text);
  margin-bottom:13px;display:flex;align-items:center;gap:7px;
}
.section-title::before{content:"";width:3px;height:13px;background:var(--green);border-radius:2px;display:inline-block}

/* ════════════════════════════════════════
   NOTIFICATION PANEL
════════════════════════════════════════ */
.notif-wrap{position:relative}
.notif-panel{
  position:absolute;top:calc(100% + 8px);right:0;width:336px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);z-index:500;display:none;flex-direction:column;overflow:hidden;
}
.notif-panel.open{display:flex}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border)}
.notif-head h3{font-size:13px;font-weight:700}
.notif-mark{font-size:11.5px;font-weight:600;color:var(--green);cursor:pointer;background:none;border:none;transition:color var(--ease)}
.notif-mark:hover{color:var(--green-dark)}
.notif-sub-label{font-size:10.5px;color:var(--text-3);padding:5px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.notif-list{max-height:340px;overflow-y:auto}
.notif-item{
  display:flex;align-items:flex-start;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--ease);position:relative;
}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--off-white)}
.notif-item.unread{background:var(--green-pale)}
.notif-item.unread:hover{background:#d4eddc}
.ni-icon{width:30px;height:30px;flex-shrink:0;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center}
.ni-icon.success{background:var(--green-pale);color:var(--green-dark)}
.ni-icon.info   {background:var(--surface-2);color:var(--text-2)}
.ni-icon.warning{background:#fff3cd;color:#7a5000}
.ni-icon svg{width:14px;height:14px;stroke:currentColor;fill:none}
.ni-body{flex:1}
.ni-title{font-size:12px;font-weight:700}
.ni-msg  {font-size:11.5px;color:var(--text-2);margin-top:2px;line-height:1.4}
.ni-time {font-size:10.5px;color:var(--text-3);margin-top:3px}
.ni-dot  {width:6px;height:6px;background:var(--green);border-radius:50%;flex-shrink:0;margin-top:5px}
.notif-empty{text-align:center;padding:32px 20px;color:var(--text-3);font-size:13px}
.notif-empty svg{width:28px;height:28px;stroke:currentColor;fill:none;margin-bottom:8px;opacity:.35}

/* ════════════════════════════════════════
   METRIC CARDS
════════════════════════════════════════ */
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.metric-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px;display:flex;align-items:flex-start;gap:13px;
  transition:box-shadow var(--ease),transform var(--ease);position:relative;overflow:hidden;
}
.metric-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.metric-card::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;border-radius:0 2px 2px 0}
.metric-card.total::before    {background:var(--green-dark)}
.metric-card.allocated::before{background:var(--green)}
.metric-card.instock::before  {background:var(--green-mid)}
.metric-card.expired::before  {background:#888}
.metric-icon-box{
  width:42px;height:42px;flex-shrink:0;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
}
.metric-icon-box svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.metric-card.total    .metric-icon-box{background:var(--green-pale);color:var(--green-dark)}
.metric-card.allocated .metric-icon-box{background:var(--green);color:#fff}
.metric-card.instock  .metric-icon-box{background:var(--surface-3);color:var(--green-mid)}
.metric-card.expired  .metric-icon-box{background:#EBEBEB;color:#555}
.metric-data{flex:1;min-width:0}
.metric-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);margin-bottom:3px}
.metric-value{font-size:26px;font-weight:800;line-height:1;margin-bottom:4px}
.metric-sub{font-size:11px;color:var(--text-3);display:flex;align-items:center;gap:4px}
.metric-tag{display:inline-block;padding:1px 7px;border-radius:var(--r-pill);font-size:9.5px;font-weight:700}
.metric-card.total    .metric-tag{background:var(--green-pale);color:var(--green-dark)}
.metric-card.allocated .metric-tag{background:rgba(0,168,107,.14);color:var(--green)}
.metric-card.instock  .metric-tag{background:var(--surface-2);color:var(--green-mid)}
.metric-card.expired  .metric-tag{background:#EBEBEB;color:#555}

/* ════════════════════════════════════════
   CARDS
════════════════════════════════════════ */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.card-header-l{display:flex;align-items:center;gap:9px}
.ch-icon{width:30px;height:30px;background:var(--green-pale);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--green-dark)}
.ch-icon svg{width:15px;height:15px;stroke:currentColor;fill:none}
.card-title{font-size:13px;font-weight:700}
.card-action{font-size:12px;font-weight:600;color:var(--green);display:flex;align-items:center;gap:3px;transition:color var(--ease)}
.card-action:hover{color:var(--green-dark)}
.card-action svg{width:12px;height:12px;stroke:currentColor;fill:none}

/* ════════════════════════════════════════
   STATUS / TAGS
════════════════════════════════════════ */
.status-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:600;white-space:nowrap;
}
.status-pill::before{content:"";width:5px;height:5px;border-radius:50%;flex-shrink:0}
.status-pill.allocated{background:#00A86B;color:#fff}
.status-pill.allocated::before{background:rgba(255,255,255,.6)}
.status-pill.instock{background:var(--green-pale);color:var(--green-dark);border:1px solid var(--green)}
.status-pill.instock::before{background:var(--green)}
.status-pill.expired{background:#2e2e2e;color:#c0c0c0}
.status-pill.expired::before{background:#888}
.category-tag{display:inline-block;padding:3px 8px;border-radius:var(--r-sm);font-size:11px;font-weight:600;background:var(--green-pale);color:var(--green-dark);border:1px solid var(--green-light)}
.role-tag{display:inline-block;padding:3px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.role-admin  {background:var(--green-dark);color:#fff}
.role-manager{background:var(--green-mid);color:#fff}
.role-it     {background:var(--green);color:#fff}
.role-viewer {background:var(--surface-2);color:var(--text-2);border:1px solid var(--border-2)}

/* ════════════════════════════════════════
   TOOLBAR
════════════════════════════════════════ */
.toolbar{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:13px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;
}
.search-wrap{position:relative;flex:1;min-width:180px}
.search-icon-el{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.search-icon-el svg{width:13px;height:13px;stroke:currentColor;fill:none}
.search-input{
  width:100%;padding:7px 11px 7px 32px;border:1.5px solid var(--border);
  border-radius:var(--r-sm);font-size:13px;color:var(--text);background:var(--off-white);
  transition:border-color var(--ease),background var(--ease);outline:none;
}
.search-input:focus{border-color:var(--green);background:var(--white);box-shadow:0 0 0 3px rgba(0,168,107,.08)}
.filter-sel{
  padding:7px 11px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:13px;color:var(--text);background:var(--off-white);cursor:pointer;outline:none;
  transition:border-color var(--ease);
}
.filter-sel:focus{border-color:var(--green)}
.toolbar-count{font-size:11.5px;font-weight:600;color:var(--text-3);white-space:nowrap}

/* ════════════════════════════════════════
   TABLE
════════════════════════════════════════ */
.table-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:1080px}
.data-table thead tr{background:var(--surface)}
.data-table th{
  padding:10px 13px;text-align:left;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);
  border-bottom:2px solid var(--border);white-space:nowrap;
}
.data-table th:first-child{padding-left:18px}
.data-table td{padding:10px 13px;border-bottom:1px solid var(--border);vertical-align:middle}
.data-table td:first-child{padding-left:18px}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover td{background:var(--off-white)}
.si-col{color:var(--text-3);font-weight:500}
.id-col{font-weight:700;color:var(--green-dark);font-size:11.5px;letter-spacing:.02em}
.model-col{font-weight:600}
.bc-col{font-size:11px;color:var(--text-3);font-family:"Courier New",monospace;background:var(--surface);padding:2px 6px;border-radius:var(--r-xs)}
.table-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-3);flex-wrap:wrap;gap:7px}
.table-foot strong{color:var(--text)}
.table-empty{text-align:center;padding:44px 20px;color:var(--text-3)}
.table-empty svg{width:36px;height:36px;stroke:currentColor;fill:none;margin-bottom:10px;opacity:.3;display:block;margin-inline:auto}
.table-empty p{font-size:13px;font-weight:500}
.table-empty a{color:var(--green);font-weight:600}

/* row buttons */
.row-actions{display:flex;gap:4px}
.row-btn{
  padding:4px 9px;border-radius:var(--r-sm);font-size:11px;font-weight:600;
  cursor:pointer;transition:all var(--ease);border:1.5px solid;
  display:inline-flex;align-items:center;gap:3px;
}
.row-btn svg{width:10px;height:10px;stroke:currentColor;fill:none}
.row-btn.edit  {border-color:var(--border-2);color:var(--text-2);background:var(--white)}
.row-btn.edit:hover{background:var(--surface);border-color:var(--green);color:var(--green-dark)}
.row-btn.status{border-color:var(--green);color:var(--green);background:var(--white)}
.row-btn.status:hover{background:var(--green);color:#fff}
.row-btn.delete{border-color:#ddbaba;color:#8b2020;background:var(--white)}
.row-btn.delete:hover{background:#8b2020;border-color:#8b2020;color:#fff}

/* ════════════════════════════════════════
   MODAL
════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(8,24,16,.55);backdrop-filter:blur(3px);
  z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .24s ease;
}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal{
  background:var(--white);border-radius:var(--r-lg);
  width:100%;max-width:760px;max-height:90vh;overflow-y:auto;
  transform:translateY(14px) scale(.98);transition:transform .24s ease;
  box-shadow:var(--shadow-xl);
}
.modal-overlay.active .modal{transform:translateY(0) scale(1)}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--white);z-index:2;
}
.modal-head-l{display:flex;align-items:center;gap:9px}
.modal-head-icon{width:32px;height:32px;background:var(--green-pale);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--green-dark)}
.modal-head-icon svg{width:15px;height:15px;stroke:currentColor;fill:none}
.modal-title{font-size:13.5px;font-weight:700}
.modal-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--text-3);background:var(--surface);cursor:pointer;transition:all var(--ease)}
.modal-close:hover{background:var(--surface-2);color:var(--text)}
.modal-close svg{width:14px;height:14px;stroke:currentColor;fill:none}
.modal-body{padding:20px 22px}
.modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:7px}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group.full{grid-column:1/-1}
.form-label{font-size:11px;font-weight:600;color:var(--text-2)}
.form-input,.form-sel,.form-area{
  padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:13px;color:var(--text);background:var(--off-white);
  outline:none;transition:border-color var(--ease),background var(--ease),box-shadow var(--ease);width:100%;
}
.form-input:focus,.form-sel:focus,.form-area:focus{
  border-color:var(--green);background:var(--white);box-shadow:0 0 0 3px rgba(0,168,107,.08);
}
.form-area{resize:vertical;min-height:64px}
.btn{
  padding:8px 18px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;
  cursor:pointer;transition:all var(--ease);border:1.5px solid;
  display:inline-flex;align-items:center;gap:5px;
}
.btn svg{width:12px;height:12px;stroke:currentColor;fill:none}
.btn.ghost  {border-color:var(--border-2);color:var(--text-2);background:var(--white)}
.btn.ghost:hover{background:var(--surface)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover{background:var(--green-mid);border-color:var(--green-mid)}
.btn.danger {background:#8B0000;border-color:#8B0000;color:#fff}

/* ════════════════════════════════════════
   DASHBOARD LAYOUT
════════════════════════════════════════ */
.dash-grid{display:grid;grid-template-columns:1fr 310px;gap:16px;margin-bottom:22px}
.activity-list{}
.activity-item{display:flex;align-items:flex-start;gap:11px;padding:12px 18px;border-bottom:1px solid var(--border);transition:background var(--ease)}
.activity-item:last-child{border-bottom:none}
.activity-item:hover{background:var(--off-white)}
.act-dot{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0}
.act-dot.green{background:var(--green)}
.act-dot.dark {background:var(--green-dark)}
.act-dot.grey {background:#aaa}
.act-content{flex:1}
.act-text{font-size:12.5px;font-weight:500;line-height:1.5}
.act-text strong{color:var(--green-dark)}
.act-meta{font-size:11px;color:var(--text-3);margin-top:1px}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px}
.qa-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:14px 8px;border-radius:var(--r-md);font-size:11.5px;font-weight:600;
  text-align:center;cursor:pointer;transition:all var(--ease);border:1.5px solid;
}
.qa-btn svg{width:20px;height:20px;stroke:currentColor;fill:none}
.qa-btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.qa-btn.primary:hover{background:var(--green-mid);border-color:var(--green-mid)}
.qa-btn.outline{background:var(--white);border-color:var(--border-2);color:var(--text)}
.qa-btn.outline:hover{background:var(--green-pale);border-color:var(--green)}

/* mini table */
.mini-table-wrap{overflow-x:auto}
.mini-table{width:100%;border-collapse:collapse;font-size:12.5px}
.mini-table thead tr{background:var(--surface)}
.mini-table th{padding:9px 14px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);white-space:nowrap}
.mini-table td{padding:10px 14px;border-bottom:1px solid var(--border)}
.mini-table tr:last-child td{border-bottom:none}
.mini-table tr:hover td{background:var(--off-white)}

/* ════════════════════════════════════════
   USER / AUDIT / ANALYTICS SPECIFICS
════════════════════════════════════════ */
.user-metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.um-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;display:flex;align-items:center;gap:11px}
.um-icon{width:40px;height:40px;background:var(--green-pale);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--green-dark);flex-shrink:0}
.um-icon svg{width:19px;height:19px;stroke:currentColor;fill:none}
.um-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.um-val  {font-size:24px;font-weight:800;color:var(--text);line-height:1;margin-top:2px}
.user-avatar-sm{width:30px;height:30px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}

.audit-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.ast-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;display:flex;align-items:center;gap:11px}
.ast-icon{color:var(--green-dark)}
.ast-icon svg{width:22px;height:22px;stroke:currentColor;fill:none}
.ast-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.ast-val  {font-size:22px;font-weight:800;color:var(--text)}

.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.status-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.sp-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;text-align:center}
.sp-icon-box svg{width:24px;height:24px;stroke:currentColor;fill:none;margin-bottom:6px}
.sp-count{font-size:30px;font-weight:800;margin-bottom:2px}
.sp-label{font-size:10.5px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.sp-bar{height:4px;border-radius:2px;margin-top:12px;background:var(--surface-2);overflow:hidden}
.sp-bar-fill{height:100%;border-radius:2px}
.sp-card.alloc .sp-count{color:var(--green)}
.sp-card.alloc .sp-bar-fill{background:var(--green)}
.sp-card.stock .sp-count{color:var(--green-mid)}
.sp-card.stock .sp-bar-fill{background:var(--green-mid)}
.sp-card.expd  .sp-count{color:#555}
.sp-card.expd  .sp-bar-fill{background:#888}

.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:16px}
.cat-card{border:1.5px solid var(--border);border-radius:var(--r-md);padding:13px;display:flex;flex-direction:column;gap:7px;transition:border-color var(--ease),background var(--ease)}
.cat-card:hover{background:var(--off-white);border-color:var(--green)}
.cat-top{display:flex;align-items:center;justify-content:space-between}
.cat-icon-box{width:34px;height:34px;background:var(--green-pale);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--green-dark)}
.cat-icon-box svg{width:16px;height:16px;stroke:currentColor;fill:none}
.cat-count{font-size:19px;font-weight:800}
.cat-name{font-size:12px;font-weight:700}
.cat-sub{font-size:11px;color:var(--text-3)}
.cat-progress{height:3px;border-radius:2px;background:var(--surface-2);overflow:hidden}
.cat-progress-fill{height:100%;background:var(--green);border-radius:2px}

.bar-chart-wrap{padding:16px}
.bar-chart{display:flex;flex-direction:column;gap:9px}
.bar-row{display:flex;align-items:center;gap:9px}
.bar-label{font-size:11px;font-weight:500;width:100px;flex-shrink:0;color:var(--text-2)}
.bar-track{flex:1;height:18px;background:var(--surface);border-radius:var(--r-sm);overflow:hidden}
.bar-fill{height:100%;background:var(--green);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:flex-end;padding-right:6px;transition:width .5s ease}
.bar-fill span{font-size:10px;font-weight:700;color:#fff}
.bar-fill.dark{background:var(--green-dark)}
.bar-fill.mid {background:var(--green-mid)}
.bar-fill.muted{background:#999}

.warn-table{width:100%;border-collapse:collapse;font-size:12.5px}
.warn-table th{padding:9px 13px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);background:var(--surface);border-bottom:2px solid var(--border);white-space:nowrap}
.warn-table th:first-child{padding-left:18px}
.warn-table td{padding:9px 13px;border-bottom:1px solid var(--border)}
.warn-table td:first-child{padding-left:18px}
.warn-table tr:last-child td{border-bottom:none}
.warn-table tr:hover td{background:var(--off-white)}
.warn-days.critical{color:#B00;font-weight:700}
.warn-days.warning {color:#A05000;font-weight:700}
.warn-days.ok      {color:var(--green);font-weight:600}

/* ════════════════════════════════════════
   MAINTENANCE / DEPARTMENTS / REPORTS
════════════════════════════════════════ */
.maint-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.ms-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;display:flex;align-items:center;gap:11px}
.ms-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;color:var(--green-dark)}
.ms-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.ms-val  {font-size:22px;font-weight:800;color:var(--text)}
.ms-card.type-open  .ms-icon svg{color:#A05000}
.ms-card.type-prog  .ms-icon svg{color:var(--green)}
.ms-card.type-done  .ms-icon svg{color:var(--green-mid)}

.mst-open    {background:#FFF3CD;color:#7A5000;border:1px solid #FFD97D}
.mst-inprog  {background:var(--green-pale);color:var(--green-dark);border:1px solid var(--green-light)}
.mst-done    {background:var(--green);color:#fff}
.mst-cancelled{background:#EBEBEB;color:#555}
.pri-high  {color:#B00020;font-weight:700}
.pri-medium{color:#A05000;font-weight:700}
.pri-low   {color:var(--green-mid);font-weight:600}

.dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:20px}
.dept-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;transition:box-shadow var(--ease),border-color var(--ease)}
.dept-card:hover{box-shadow:var(--shadow-md);border-color:var(--green)}
.dept-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.dept-icon-box{width:38px;height:38px;background:var(--green-pale);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--green-dark)}
.dept-icon-box svg{width:18px;height:18px;stroke:currentColor;fill:none}
.dept-name{font-size:13.5px;font-weight:700;margin-bottom:3px}
.dept-stats{display:flex;gap:14px;margin-top:9px;padding-top:9px;border-top:1px solid var(--border)}
.ds-val{font-size:17px;font-weight:800;color:var(--green-dark)}
.ds-lbl{font-size:9.5px;font-weight:600;color:var(--text-3);text-transform:uppercase}
.dept-meta{font-size:11.5px;color:var(--text-3);margin-top:4px;display:flex;align-items:center;gap:4px}
.dept-meta svg{width:11px;height:11px;stroke:currentColor;fill:none}
.add-dept-btn{border:2px dashed var(--border-2);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;min-height:150px;transition:all var(--ease)}
.add-dept-btn:hover{border-color:var(--green);background:var(--green-pale)}
.add-dept-btn svg{width:26px;height:26px;stroke:var(--text-3);fill:none}
.add-dept-btn p{font-size:13px;font-weight:600;color:var(--text-3)}

.report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:24px}
.report-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:9px;transition:box-shadow var(--ease),border-color var(--ease)}
.report-card:hover{box-shadow:var(--shadow-md);border-color:var(--green)}
.rc-top{display:flex;align-items:center;gap:11px}
.rc-icon{width:42px;height:42px;background:var(--green-pale);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--green-dark);flex-shrink:0}
.rc-icon svg{width:20px;height:20px;stroke:currentColor;fill:none}
.rc-name{font-size:13px;font-weight:700}
.rc-desc{font-size:12px;color:var(--text-3);line-height:1.6}
.rc-actions{display:flex;gap:6px;margin-top:3px}

/* ════════════════════════════════════════
   SETTINGS
════════════════════════════════════════ */
.settings-section{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;margin-bottom:16px}
.settings-section h3{font-size:13px;font-weight:700;margin-bottom:15px;display:flex;align-items:center;gap:7px}
.settings-section h3 svg{width:15px;height:15px;stroke:var(--green);fill:none}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border)}
.settings-row:last-child{border-bottom:none}
.sr-label{font-size:13px;font-weight:500}
.sr-desc {font-size:11.5px;color:var(--text-3);margin-top:2px}
.toggle{width:38px;height:21px;background:var(--border-2);border-radius:11px;position:relative;cursor:pointer;transition:background var(--ease);flex-shrink:0}
.toggle.on{background:var(--green)}
.toggle::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.toggle.on::after{transform:translateX(17px)}

/* ════════════════════════════════════════
   TOAST
════════════════════════════════════════ */
.toast{
  position:fixed;bottom:22px;right:22px;background:var(--green-deep);color:#fff;
  padding:10px 16px;border-radius:var(--r-md);font-size:13px;font-weight:500;
  box-shadow:var(--shadow-lg);z-index:9999;display:flex;align-items:center;gap:9px;
  opacity:0;pointer-events:none;transform:translateY(8px);transition:all .28s ease;
}
.toast.show{opacity:1;pointer-events:all;transform:translateY(0)}
.toast.warn {background:#4A3200}
.toast.error{background:#5C1010}
.toast svg{width:16px;height:16px;stroke:currentColor;fill:none;flex-shrink:0}

/* ════════════════════════════════════════
   UTILITIES
════════════════════════════════════════ */
.mb-16{margin-bottom:16px} .mb-20{margin-bottom:20px} .mb-24{margin-bottom:24px}
.mt-20{margin-top:20px} .d-none{display:none !important}

/* ════════════════════════════════════════
   PRINT
════════════════════════════════════════ */
/* ════════════════════════════════════════
   INVOICE-STYLE PRINT - single page
════════════════════════════════════════ */
.print-wrap{display:none}

.inv-wrap{max-width:180mm;margin:0 auto;padding:0;font-family:"Poppins",sans-serif;color:#222;font-size:7.5pt;line-height:1.3}

/* Compact header */
.inv-hdr{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:2px solid #1a3c2e;margin-bottom:8px}
.inv-hdr-l{display:flex;align-items:center;gap:8px}
.inv-logo{width:32px;height:32px;flex-shrink:0}
.inv-logo img{width:100%;height:100%;object-fit:contain}
.inv-org{display:flex;flex-direction:column;gap:1px}
.inv-org strong{font-size:11pt;font-weight:700;color:#1a3c2e;line-height:1.1}
.inv-org span{font-size:6pt;color:#888;letter-spacing:.4px;text-transform:uppercase}
.inv-hdr-r{text-align:right}
.inv-hdr-r h2{margin:0;font-size:12pt;font-weight:800;color:#1a3c2e;text-transform:uppercase;letter-spacing:.8px}
.inv-hdr-r span{font-size:5.5pt;color:#aaa;letter-spacing:1.5px;text-transform:uppercase}

/* Meta bar - compact */
.inv-meta{display:flex;flex-wrap:nowrap;gap:4px 14px;padding:5px 10px;background:#f4f6f5;border-radius:3px;margin-bottom:8px;font-size:6.5pt}
.inv-meta-item{display:flex;gap:4px;align-items:center}
.inv-meta-lbl{color:#999;font-weight:600;text-transform:uppercase;font-size:5.5pt;letter-spacing:.2px}
.inv-meta-val{color:#222;font-weight:500}

/* Invoice body - ultra compact */
.inv-body{padding:0}
.inv-body .card-header{display:none !important}
.inv-body .section-title{font-size:8pt;font-weight:700;color:#1a3c2e;margin:0 0 4px;padding:0}
.inv-body .card,
.inv-body .table-card{box-shadow:none;border:0;border-radius:0;margin:0;padding:0;background:transparent}
.inv-body .mini-table-wrap{overflow:visible;margin:0;padding:0;border:0}
.inv-body .data-table,
.inv-body .mini-table,
.inv-body .warn-table{width:100%;border-collapse:collapse;font-size:6.5pt;background:#fff}
.inv-body .data-table thead tr,
.inv-body .mini-table thead tr,
.inv-body .warn-table thead tr{background:#1a3c2e !important}
.inv-body .data-table thead th,
.inv-body .mini-table thead th,
.inv-body .warn-table thead th{color:#fff !important;font-weight:600;padding:4px 5px;text-align:left;font-size:5.5pt;text-transform:uppercase;letter-spacing:.2px;border:0}
.inv-body .data-table tbody td,
.inv-body .mini-table tbody td,
.inv-body .warn-table tbody td{padding:2.5px 5px;border-bottom:1px solid #e8eae9;color:#333;font-size:6.5pt}
.inv-body .data-table tbody tr:nth-child(even) td,
.inv-body .mini-table tbody tr:nth-child(even) td,
.inv-body .warn-table tbody tr:nth-child(even) td{background:#fafbfa}
.inv-body .data-table tbody tr:last-child td,
.inv-body .mini-table tbody tr:last-child td,
.inv-body .warn-table tbody tr:last-child td{border-bottom:1.5px solid #1a3c2e}
.inv-body .row-actions,
.inv-body .table-foot{display:none !important}

/* Footer - barely visible */
.inv-foot{display:flex;justify-content:space-between;padding-top:6px;margin-top:6px;border-top:1px solid #ddd;font-size:6pt;color:#aaa}

/* On-screen preview (hidden sidebar etc.) */
body.is-printing{background:#fff}
body.is-printing .sidebar,
body.is-printing .topbar,
body.is-printing .toolbar,
body.is-printing .modal-overlay,
body.is-printing .row-actions,
body.is-printing .qa-grid,
body.is-printing .tb-actions,
body.is-printing .notif-wrap,
body.is-printing .js-print-btn,
body.is-printing .card-action,
body.is-printing .btn-tb,
body.is-printing .icon-btn,
body.is-printing .table-foot{display:none !important}
body.is-printing .main-wrap{margin-left:0 !important}
body.is-printing .page-body{padding:0;max-width:none}
body.is-printing .print-wrap{display:block}
body.is-printing .report-card,
body.is-printing .rc-actions{display:none}
body.is-printing .analytics-grid{display:block}
body.is-printing .inv-wrap{max-width:100%}

@media print{
  *{box-sizing:border-box}
  html,body{background:#fff;width:100%;height:auto;margin:0;padding:0;font-size:7.5pt}
  .sidebar,.topbar,.toolbar,.modal-overlay,.row-actions,.qa-grid,.tb-actions,.notif-wrap,
  .js-print-btn,.card-action,.btn-tb,.icon-btn,.table-foot,
  .report-card,.rc-actions{display:none !important}
  .main-wrap{margin-left:0 !important;margin-top:0 !important}
  .page-body{padding:0;max-width:none}
  .print-wrap{display:block}
  .analytics-grid{display:block}
  @page{margin:8mm 12mm;size:A4 portrait}
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media(max-width:1280px){.metrics-grid{grid-template-columns:repeat(2,1fr)}.dash-grid{grid-template-columns:1fr}.analytics-grid{grid-template-columns:1fr}}
@media(max-width:960px){
  .sidebar{transform:translateX(calc(-1 * var(--sb-w)));width:var(--sb-w) !important;transition:transform .3s cubic-bezier(.4,0,.2,1)}
  .sidebar.mob-open{transform:translateX(0)}
  .main-wrap{margin-left:0 !important}
  .sb-toggle-btn{display:flex !important}
  .sb-collapse{display:none !important}
  .user-metrics-grid{grid-template-columns:repeat(2,1fr)}
  .audit-stats-row{grid-template-columns:repeat(2,1fr)}
  .maint-summary{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .status-panels{grid-template-columns:1fr}
}
@media(max-width:600px){
  .metrics-grid{grid-template-columns:1fr}
  .page-body{padding:13px}
  .topbar{padding:0 13px}
  .form-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  .modal{max-height:95vh}
  .notif-panel{width:295px;right:-55px}
  .user-metrics-grid{grid-template-columns:1fr 1fr}
  .maint-summary{grid-template-columns:1fr 1fr}
  .audit-stats-row{grid-template-columns:1fr}
}