/* EMS Design System — main.css */
:root{
  --ems-navy:#0f2027;
  --ems-blue:#0066ff;
  --ems-cyan:#00d4ff;
  --ems-bg:#f6f8fb;
  --ems-card:#ffffff;
  --ems-text:#0f2027;
  --ems-muted:#6b7280;
  --ems-radius:20px;
  --ems-shadow:0 8px 24px rgba(15,32,39,.08);
  --ems-sidebar-w:260px;
}
[data-bs-theme="dark"]{
  --ems-bg:#0b1220;
  --ems-card:#111d33;
  --ems-text:#e5e7eb;
  --ems-muted:#9aa3b2;
  --ems-shadow:0 8px 24px rgba(0,0,0,.35);
}
*{font-family: Mulish, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;}
h1,h2,h3,h4,h5,.brand{font-family: Inter, sans-serif;}
body{background:var(--ems-bg); color:var(--ems-text);}
a{color:var(--ems-blue);}
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:var(--ems-sidebar-w); background:var(--ems-card); border-right:1px solid rgba(0,0,0,.06);
  position:sticky; top:0; height:100vh; overflow:auto; flex-shrink:0; z-index:1040;
}
[data-bs-theme="dark"] .sidebar{border-color:rgba(255,255,255,.06);}
.sidebar-brand{border-bottom:1px solid rgba(0,0,0,.06);}
.brand-mark{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--ems-navy),var(--ems-blue));color:#fff;}
.sidebar-nav{display:flex; flex-direction:column; gap:4px;}
.nav-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; color:var(--ems-text); text-decoration:none; font-weight:600; border:0; font-size:.95rem;}
.nav-item:hover{background:rgba(0,102,255,.08); color:var(--ems-blue);}
.nav-item.active{background:var(--ems-navy); color:#fff;}
[data-bs-theme="dark"] .nav-item.active{background:var(--ems-blue);}
.nav-item:focus-visible{outline:2px solid var(--ems-blue); outline-offset:2px;}
/* Collapsible nav groups */
.nav-group{display:flex; flex-direction:column; gap:2px;}
.nav-group-toggle{cursor:pointer; background:transparent; width:100%; font:inherit; font-weight:600;}
.nav-group-toggle:hover{background:rgba(0,102,255,.08); color:var(--ems-blue);}
.nav-group-toggle.active{background:var(--ems-navy); color:#fff;}
[data-bs-theme="dark"] .nav-group-toggle.active{background:var(--ems-blue); color:#fff;}
.nav-group-chevron{font-size:.8rem; transition:transform .2s ease; opacity:.7;}
.nav-group-toggle[aria-expanded="true"] .nav-group-chevron{transform:rotate(180deg); opacity:1;}
.nav-submenu{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .26s ease, opacity .18s ease;
  margin-left:8px; padding-left:8px; border-left:1px solid rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .nav-submenu{border-left-color:rgba(255,255,255,.08);}
.nav-submenu.show{grid-template-rows:1fr; opacity:1;}
.nav-submenu > div{display:block; overflow:hidden;}
/* inner wrapper for grid animation */
.nav-submenu-inner{display:flex; flex-direction:column; gap:2px; min-height:0; overflow:hidden; padding:2px 0 2px 2px;}
.nav-subitem{font-weight:500; font-size:.9rem; padding:8px 12px 8px 22px; border-radius:10px;}
.nav-subitem.active{background:rgba(0,102,255,.12); color:var(--ems-blue); font-weight:700;}
[data-bs-theme="dark"] .nav-subitem.active{background:rgba(0,102,255,.22);}
.nav-subitem:hover{background:rgba(0,102,255,.08);}
.sidebar-sep{height:1px; background:rgba(0,0,0,.08);}
.main-wrap{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{background:var(--ems-card); border-bottom:1px solid rgba(0,0,0,.06); position:sticky; top:0; z-index:1020;}
[data-bs-theme="dark"] .topbar{border-color:rgba(255,255,255,.06);}
.content{flex:1;}
.card-ems{background:var(--ems-card); border:0; border-radius:var(--ems-radius); box-shadow:var(--ems-shadow);}
.card-ems .card-header{background:transparent; border-bottom:1px solid rgba(0,0,0,.06); font-weight:700;}
.kpi-card{border-radius:var(--ems-radius); box-shadow:var(--ems-shadow); border:0; overflow:hidden;}
.kpi-card .kpi-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:18px;}
.table thead th{font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ems-muted);}
.badge{font-weight:700; letter-spacing:.02em;}
.btn-primary{background:var(--ems-blue); border-color:var(--ems-blue);}
.btn-primary:hover{background:#0052cc; border-color:#0052cc;}
/* Mobile bottom nav + FAB (mobile-first) */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1045;
  display:flex; justify-content:space-around; align-items:flex-end;
  background:var(--ems-card); border-top:1px solid rgba(0,0,0,.08);
  padding:6px 4px max(6px, env(safe-area-inset-bottom));
  box-shadow:0 -4px 16px rgba(15,32,39,.08);
}
[data-bs-theme="dark"] .bottom-nav{border-top-color:rgba(255,255,255,.08);}
.bnav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 4px; text-decoration:none; color:var(--ems-muted); font-size:.72rem; font-weight:600;
  border:0; background:transparent; min-height:44px; justify-content:center;
}
.bnav-item i{font-size:1.25rem; line-height:1;}
.bnav-item.active{color:var(--ems-blue);}
.bnav-item.active i{color:var(--ems-blue);}
.bnav-scan{position:relative; top:-8px;}
.bnav-scan-btn{
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--ems-navy),var(--ems-blue)); color:#fff;
  box-shadow:0 6px 16px rgba(0,102,255,.35); font-size:1.6rem;
}
.bnav-scan span:last-child{margin-top:2px; color:var(--ems-muted);}
.fab{
  position:fixed; right:16px; bottom:72px; z-index:1046;
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  background:var(--ems-blue); color:#fff; text-decoration:none;
  box-shadow:0 8px 20px rgba(0,102,255,.35); font-size:1.5rem;
}
.fab:hover{color:#fff; background:#0052cc;}
.more-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.more-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 6px; border-radius:16px; text-decoration:none; color:var(--ems-text);
  background:var(--ems-bg); border:1px solid rgba(0,0,0,.06); font-size:.78rem; font-weight:600; min-height:72px; justify-content:center;
}
.more-item i{font-size:1.4rem; color:var(--ems-blue);}
.more-item.active{background:var(--ems-navy); color:#fff; border-color:var(--ems-navy);}
.more-item.active i{color:#fff;}
[data-bs-theme="dark"] .more-item{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.06);}

/* Mobile quick tiles (dashboard) */
.quick-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.quick-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:16px; border-radius:20px; text-decoration:none; color:var(--ems-text);
  background:var(--ems-card); box-shadow:var(--ems-shadow); border:1px solid rgba(0,0,0,.04);
  min-height:110px; position:relative; overflow:hidden;
}
.quick-tile i{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:1.2rem; color:#fff;}
.quick-tile .qt-title{font-weight:700; font-size:.95rem; line-height:1.2;}
.quick-tile .qt-desc{font-size:.78rem; color:var(--ems-muted); line-height:1.3;}
.quick-tile:active{transform:scale(.98);}

/* Mobile form sticky actions */
@media (max-width: 991.98px){
  .sidebar{position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .25s ease;}
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:1035;}
  .sidebar-backdrop.show{display:block;}
  .content{padding-bottom:88px !important;} /* space for bottom-nav */
  .stat-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .kpi-card .card-body{padding:14px;}
  .card-ems{border-radius:16px;}
  /* Large touch targets on mobile */
  .btn, .form-control, .form-select{min-height:44px;}
  .form-control, .form-select{font-size:16px;} /* prevent iOS zoom */
  .table{font-size:.9rem;}
  .filter-bar .form-control, .filter-bar .form-select{max-width:none !important; flex:1 1 100%;}
  .filter-bar{ gap:8px;}
}
/* Print-friendly reports — used instead of a server-side PDF library (none vendored in this project) */
@media print{
  .sidebar, .topbar, footer, .no-print{display:none !important;}
  .app-shell, .main-wrap, .content{display:block !important; width:100% !important; margin:0 !important; padding:0 !important;}
  .card-ems{box-shadow:none !important; border:1px solid #ddd !important;}
  body{background:#fff !important;}
}