/* =================================================================== */
/* ShieldOps Enterprise UI V3 — Dark Navy + Neon Green                  */
/* Loaded AFTER ui-kit.css. Adds profile cards, advanced reports,       */
/* GPS map cards, calendar + guard-mobile polish. Frontend-only.        */
/* =================================================================== */
:root{
  --v3-neon:#39ff14;
  --v3-neon-2:#16d672;
  --v3-navy-0:#040a14;
  --v3-navy-1:#081226;
}

/* Stronger navy base + neon accent tuning */
body{
  background:
    radial-gradient(1200px 760px at 8% -10%, rgba(57,255,20,.10), transparent 58%),
    radial-gradient(1100px 820px at 102% 0%, rgba(56,189,248,.10), transparent 55%),
    linear-gradient(180deg,#040a14 0%, #07111f 55%, #040a14 100%) !important;
}
/* Neon active sidebar pill + primary buttons lean neon-green */
aside button.active, #sidebar button.active{
  background:linear-gradient(135deg,#39ff14,#16d672) !important;
  color:#04130a !important; box-shadow:0 8px 26px rgba(57,255,20,.35) !important;
}
main button, .panel button, #content button, .gm-btn-primary, .quick-btn{
  background:linear-gradient(135deg,#39ff14,#16d672) !important; color:#042009 !important;
}
.sui-bar{ background:linear-gradient(180deg,#39ff14,#16d672) !important; box-shadow:0 6px 18px rgba(57,255,20,.28) !important; }
.sui-kpi::after{ background:var(--v3-neon); }

/* ---------- Page header band (enterprise) ---------- */
.v3-pagehead{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:18px 20px; margin:0 0 18px;
  background:linear-gradient(120deg,rgba(57,255,20,.10),rgba(56,189,248,.06));
  border:1px solid rgba(57,255,20,.18); border-radius:18px;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.v3-pagehead h2{ margin:0; color:#fff; }
.v3-pagehead p{ margin:4px 0 0; color:#9fb6c9; font-size:13px; }

/* ---------- Employee profile cards ---------- */
.v3-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.v3-view-toggle{ display:inline-flex; gap:4px; background:rgba(6,14,26,.7); border:1px solid rgba(120,160,210,.16); border-radius:12px; padding:4px; margin-left:auto; }
.v3-view-toggle button{ background:transparent !important; color:#93a4bd !important; border:none !important; padding:7px 14px !important; border-radius:9px !important; font-size:13px !important; }
.v3-view-toggle button.active{ background:linear-gradient(135deg,#39ff14,#16d672) !important; color:#04130a !important; }

.v3-emp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.v3-emp-card{
  background:rgba(14,26,46,.6); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(120,160,210,.16); border-radius:18px; padding:20px;
  box-shadow:0 12px 36px rgba(0,0,0,.5); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.v3-emp-card:hover{ transform:translateY(-4px); border-color:rgba(57,255,20,.45); box-shadow:0 18px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(57,255,20,.25); }
.v3-emp-head{ display:flex; align-items:center; gap:14px; }
.v3-avatar{
  width:54px; height:54px; flex:0 0 54px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:19px; color:#04130a;
  background:linear-gradient(135deg,#39ff14,#16d672); box-shadow:0 8px 22px rgba(57,255,20,.3);
}
.v3-emp-name{ font-size:16px; font-weight:700; color:#fff; line-height:1.2; }
.v3-emp-role{ margin-top:4px; }
.v3-emp-meta{ margin:16px 0 14px; display:flex; flex-direction:column; gap:9px; }
.v3-emp-meta div{ display:flex; align-items:center; gap:9px; color:#aebfd3; font-size:13px; }
.v3-emp-meta div .mi{ width:18px; text-align:center; opacity:.85; }
.v3-emp-actions{ display:flex; gap:8px; border-top:1px solid rgba(120,160,210,.12); padding-top:14px; }
.v3-emp-actions button{ flex:1; font-size:13px !important; padding:9px 10px !important; }
.v3-status-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; }
.v3-status-dot.on{ background:#39ff14; box-shadow:0 0 8px #39ff14; } .v3-status-dot.off{ background:#f59e0b; } .v3-status-dot.sus{ background:#ff5a5f; }

/* ---------- GPS map cards ---------- */
.v3-map{
  position:relative; height:320px; border-radius:18px; overflow:hidden;
  border:1px solid rgba(57,255,20,.2);
  background:
    linear-gradient(rgba(57,255,20,.05) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(57,255,20,.05) 1px, transparent 1px) 0 0/40px 40px,
    radial-gradient(circle at 50% 50%, rgba(56,189,248,.12), transparent 60%),
    #060f1d;
}
.v3-map .v3-pin{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%; background:#39ff14; box-shadow:0 0 0 6px rgba(57,255,20,.2);
}
.v3-map .v3-pulse{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%; border:2px solid #39ff14; animation:v3pulse 2s ease-out infinite;
}
@keyframes v3pulse{ 0%{ width:18px;height:18px;opacity:.9;} 100%{ width:200px;height:200px;opacity:0;} }
.v3-map .v3-map-tag{ position:absolute; left:14px; bottom:14px; background:rgba(4,10,20,.8); border:1px solid rgba(57,255,20,.25); border-radius:10px; padding:8px 12px; font-size:12px; color:#cfe9d6; }

/* ---------- Guard Mobile polish ---------- */
.gm-glass-card{ border-radius:20px !important; }
.gm-action-btn{ border-radius:16px !important; }

/* ---------- Schedule calendar polish ---------- */
.schedule-tab-btn.active{ background:linear-gradient(135deg,#39ff14,#16d672) !important; color:#04130a !important; }
.calendar-header, .cal-head{ color:#cfe0f3 !important; }

/* ---------- Responsive ---------- */
@media (max-width:680px){
  .v3-emp-grid{ grid-template-columns:1fr; }
  .v3-pagehead{ flex-direction:column; align-items:flex-start; }
  .v3-view-toggle{ margin-left:0; }
}

/* ===================================================================== */
/* PROFESSIONAL SAAS UPGRADE — 2026-06-20                                 */
/* Dark navy glass + neon green. Loaded LAST so it wins the cascade.      */
/* Frontend-only; no markup-id or handler changes required.              */
/* ===================================================================== */
:root{
  --sx-bg-0:#04070f;
  --sx-bg-1:#070d1a;
  --sx-panel:rgba(15,26,46,.62);
  --sx-panel-solid:#0c1626;
  --sx-border:rgba(120,160,210,.16);
  --sx-border-strong:rgba(57,255,20,.40);
  --sx-text:#e7eef7;
  --sx-text-dim:#93a7c0;
  --sx-neon:#39ff14;
  --sx-neon-2:#16d672;
  --sx-rad:16px;
  --sx-side:256px;
  --sx-top:64px;
}

html,body{ background:#04070f !important; color:var(--sx-text); }
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif !important;
  background:
    radial-gradient(1200px 760px at 6% -12%, rgba(57,255,20,.10), transparent 56%),
    radial-gradient(1100px 820px at 104% -4%, rgba(56,189,248,.10), transparent 52%),
    linear-gradient(180deg,#04070f 0%, #070d1a 55%, #04070f 100%) !important;
  -webkit-font-smoothing:antialiased;
}

/* ---------------- Sidebar ---------------- */
aside#sidebar, aside, #sidebar{
  position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important;
  width:var(--sx-side) !important; min-width:var(--sx-side) !important; max-width:var(--sx-side) !important;
  height:100vh !important; overflow-y:auto !important; z-index:1100 !important;
  padding:14px 12px 22px !important; box-sizing:border-box !important;
  background:linear-gradient(180deg,rgba(8,14,28,.97),rgba(6,11,22,.97)) !important;
  border-right:1px solid var(--sx-border) !important;
  box-shadow:6px 0 34px rgba(0,0,0,.45) !important;
  -webkit-backdrop-filter:blur(16px) !important; backdrop-filter:blur(16px) !important;
}
#sidebar .sidebar-header{
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:8px 10px 16px !important; margin-bottom:8px !important;
  border-bottom:1px solid var(--sx-border) !important;
}
#sidebar .sidebar-header img,.logo-sidebar{ width:40px !important; height:40px !important; border-radius:11px !important; }
#sidebar .sidebar-header h1{ font-size:22px !important; margin:0 !important; font-weight:800 !important; letter-spacing:.3px; color:#fff !important; }

#sidebar .nav-group{ margin:6px 0 12px !important; }
#sidebar .nav-group-label{
  font-size:10.5px !important; font-weight:800 !important; letter-spacing:1.4px !important;
  text-transform:uppercase !important; color:#5f7596 !important; padding:6px 12px 4px !important;
}
#sidebar nav button, aside#sidebar nav button{
  display:flex; align-items:center !important; gap:11px !important;
  width:100% !important; text-align:left !important;
  background:transparent !important; color:#b9c8dc !important;
  border:1px solid transparent !important; border-radius:11px !important;
  padding:9px 12px !important; margin:2px 0 !important;
  font-size:13.5px !important; font-weight:600 !important; cursor:pointer !important;
  transition:background .15s, color .15s, border-color .15s, transform .12s !important;
  box-shadow:none !important;
}
#sidebar nav button .nav-ico{ width:20px; text-align:center; font-size:15px; flex:0 0 20px; }
#sidebar nav button .nav-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sidebar nav button:hover{
  background:rgba(57,255,20,.08) !important; color:#eafff0 !important;
  border-color:rgba(57,255,20,.18) !important; transform:translateX(2px);
}
#sidebar nav button.active, aside#sidebar nav button.active{
  background:linear-gradient(135deg,var(--sx-neon),var(--sx-neon-2)) !important;
  color:#04130a !important; border-color:transparent !important;
  box-shadow:0 8px 24px rgba(57,255,20,.30) !important;
}
#sidebar nav button#btn-logout{ color:#ff9ca0 !important; margin-top:6px; }
#sidebar nav button#btn-logout:hover{ background:rgba(255,90,95,.12) !important; border-color:rgba(255,90,95,.30) !important; color:#ffd0d2 !important; }
aside::-webkit-scrollbar{ width:8px; }
aside::-webkit-scrollbar-thumb{ background:rgba(120,160,210,.22); border-radius:8px; }

/* ---------------- Main + Topbar ---------------- */
main{
  margin-left:var(--sx-side) !important; width:auto !important; max-width:none !important;
  min-height:100vh !important; padding:0 !important; box-sizing:border-box !important;
}
.topbar{
  position:sticky !important; top:0 !important; z-index:900 !important;
  display:flex !important; align-items:center !important; gap:16px !important;
  height:var(--sx-top) !important; padding:0 26px !important;
  background:rgba(7,13,26,.78) !important;
  border-bottom:1px solid var(--sx-border) !important;
  -webkit-backdrop-filter:blur(16px) !important; backdrop-filter:blur(16px) !important;
}
.topbar-search{ position:relative; flex:1; max-width:440px; }
.topbar-search-ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%); opacity:.6; font-size:14px; pointer-events:none; }
.topbar-search input{
  width:100%; box-sizing:border-box; padding:10px 14px 10px 38px;
  background:rgba(6,12,24,.85); border:1px solid var(--sx-border); border-radius:12px;
  color:var(--sx-text); font-size:13.5px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.topbar-search input:focus{ border-color:var(--sx-border-strong); box-shadow:0 0 0 3px rgba(57,255,20,.12); }
.topbar-actions{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.topbar-iconbtn{
  position:relative; width:42px; height:42px; border-radius:12px; cursor:pointer;
  background:rgba(6,12,24,.85) !important; border:1px solid var(--sx-border) !important;
  color:var(--sx-text) !important; font-size:17px; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, background .15s;
}
.topbar-iconbtn:hover{ border-color:var(--sx-border-strong) !important; background:rgba(57,255,20,.08) !important; }
.topbar-dot{ position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:#ff5a5f; box-shadow:0 0 0 2px #070d1a; display:none; }
.topbar-dot.on{ display:block; }
.topbar-user{ display:flex; align-items:center; gap:10px; padding:5px 10px 5px 6px; border-radius:14px; border:1px solid var(--sx-border); background:rgba(6,12,24,.7); }
.topbar-avatar{
  width:34px; height:34px; border-radius:10px; flex:0 0 34px; display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#04130a; background:linear-gradient(135deg,var(--sx-neon),var(--sx-neon-2)); box-shadow:0 6px 16px rgba(57,255,20,.3);
}
.topbar-user-meta{ display:flex; flex-direction:column; line-height:1.15; }
.topbar-user-name{ font-size:13px; font-weight:700; color:#fff; }
.topbar-user-role{ font-size:11px; color:var(--sx-text-dim); text-transform:capitalize; }

.page-head{ padding:22px 26px 4px !important; }
main h2#title, .page-head h2#title{ margin:0 !important; font-size:26px !important; font-weight:800 !important; color:#fff !important; letter-spacing:.2px; }
#welcome, .page-head #welcome{ margin:5px 0 0 !important; color:var(--sx-text-dim) !important; font-size:13.5px !important; }
#content{ display:block !important; padding:18px 26px 40px !important; max-width:1400px; margin:0 !important; }

/* ---------------- Panels / cards ---------------- */
.panel, .sui-chart-card, .dashboard-card, .v3-emp-card{
  background:var(--sx-panel) !important; border:1px solid var(--sx-border) !important;
  border-radius:var(--sx-rad) !important; box-shadow:0 14px 40px rgba(0,0,0,.42) !important;
  -webkit-backdrop-filter:blur(14px) !important; backdrop-filter:blur(14px) !important;
}
.panel{ padding:22px !important; margin-top:18px !important; }

/* ---------------- KPI cards ---------------- */
.sui-kpi-grid{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; gap:16px !important; }
.sui-kpi{
  position:relative; overflow:hidden;
  background:var(--sx-panel) !important; border:1px solid var(--sx-border) !important;
  border-radius:var(--sx-rad) !important; padding:18px 18px 16px !important;
  box-shadow:0 14px 40px rgba(0,0,0,.40) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.sui-kpi:hover{ transform:translateY(-4px); border-color:var(--sx-border-strong) !important; box-shadow:0 22px 54px rgba(0,0,0,.55) !important; }
.sui-kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--sui-accent,var(--sx-neon)); opacity:.9; }
.sui-kpi-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sui-kpi-label{ color:var(--sx-text-dim) !important; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; }
.sui-kpi-icon{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.sui-kpi-value{ font-size:32px !important; font-weight:800 !important; color:#fff !important; margin:10px 0 2px !important; }
.sui-kpi-sub{ font-size:12px; color:var(--sx-text-dim); }
.sui-kpi-sub .up{ color:var(--sx-neon); }

/* ---------------- Tables ---------------- */
.sui-table-wrap{ background:var(--sx-panel) !important; border:1px solid var(--sx-border) !important; border-radius:var(--sx-rad) !important; padding:14px !important; overflow:hidden; }
.sui-table-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.sui-search-input, .sui-filter{
  padding:9px 12px; background:rgba(6,12,24,.85); border:1px solid var(--sx-border); border-radius:10px; color:var(--sx-text); font-size:13px; outline:none;
}
.sui-search-input:focus, .sui-filter:focus{ border-color:var(--sx-border-strong); }
.sui-table-count{ margin-left:auto; color:var(--sx-text-dim); font-size:12px; }
#content table, .panel table, .table-responsive table{ width:100% !important; border-collapse:collapse !important; }
#content table thead th, .panel table thead th{
  background:rgba(6,14,26,.9) !important; color:#cfe0f3 !important; text-align:left;
  font-size:11.5px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.5px;
  padding:12px 14px !important; border-bottom:1px solid var(--sx-border) !important; position:sticky; top:0;
}
#content table tbody td, .panel table tbody td{ padding:12px 14px !important; border-bottom:1px solid rgba(120,160,210,.10) !important; color:#dbe6f2; font-size:13.5px; }
#content table tbody tr:hover{ background:rgba(57,255,20,.05) !important; }
.table-responsive, .sui-table-wrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }

/* ---------------- Buttons ---------------- */
#content button, .panel button, main .topbar ~ * button:not(.nav-ico){
  font-family:inherit; font-weight:700; border-radius:11px !important; cursor:pointer;
  transition:transform .12s, box-shadow .15s, filter .15s;
}
#content button:hover, .panel button:hover{ transform:translateY(-1px); filter:brightness(1.05); }
#content button:active, .panel button:active{ transform:translateY(0); }
.btn, .btn-add, .btn-edit, .btn-view, .btn-delete{
  display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border:1px solid transparent;
  border-radius:11px; font-size:13px; font-weight:700; cursor:pointer; color:#04130a;
}
.btn-add{ background:linear-gradient(135deg,var(--sx-neon),var(--sx-neon-2)); }
.btn-view{ background:rgba(56,189,248,.16); color:#9bd9ff; border-color:rgba(56,189,248,.35); }
.btn-edit{ background:rgba(255,176,32,.16); color:#ffce7a; border-color:rgba(255,176,32,.35); }
.btn-delete{ background:rgba(255,90,95,.15); color:#ff9da1; border-color:rgba(255,90,95,.38); }
.btn-add:hover,.btn-view:hover,.btn-edit:hover,.btn-delete:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* ---------------- Forms ---------------- */
#content input:not([type=checkbox]):not([type=radio]), #content select, #content textarea,
.panel input:not([type=checkbox]):not([type=radio]), .panel select, .panel textarea{
  background:rgba(6,12,24,.85) !important; border:1px solid var(--sx-border) !important;
  border-radius:11px !important; color:var(--sx-text) !important; padding:11px 13px !important;
  font-size:13.5px !important; outline:none !important; box-sizing:border-box; transition:border-color .15s, box-shadow .15s;
}
#content input:focus, #content select:focus, #content textarea:focus,
.panel input:focus, .panel select:focus, .panel textarea:focus{
  border-color:var(--sx-border-strong) !important; box-shadow:0 0 0 3px rgba(57,255,20,.12) !important;
}
#content label, .panel label{ color:var(--sx-text-dim) !important; font-weight:600; font-size:12.5px; }

/* ---------------- Modals ---------------- */
[id$="Modal"]{ -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
[id$="Modal"] > div{
  background:var(--sx-panel-solid) !important; border:1px solid var(--sx-border) !important;
  border-radius:18px !important; box-shadow:0 30px 80px rgba(0,0,0,.6) !important;
}

/* ---------------- Skeletons ---------------- */
.ui-skeleton{ height:14px; border-radius:9px; margin:10px 0;
  background:linear-gradient(90deg,rgba(120,160,210,.10),rgba(120,160,210,.24),rgba(120,160,210,.10));
  background-size:200% 100%; animation:sx-shimmer 1.25s ease-in-out infinite; }
.sk-card{ background:var(--sx-panel) !important; border:1px solid var(--sx-border); border-radius:var(--sx-rad); padding:18px; }
.sk-line{ height:14px; border-radius:8px; margin:9px 0; background:linear-gradient(90deg,rgba(120,160,210,.10),rgba(120,160,210,.24),rgba(120,160,210,.10)); background-size:200% 100%; animation:sx-shimmer 1.25s ease-in-out infinite; }
.sk-line.w40{ width:40%; } .sk-line.w60{ width:60%; } .sk-line.w80{ width:80%; }
.sk-kpi-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.sk-kpi{ height:118px; border-radius:var(--sx-rad); background:linear-gradient(90deg,rgba(120,160,210,.08),rgba(120,160,210,.18),rgba(120,160,210,.08)); background-size:200% 100%; animation:sx-shimmer 1.25s ease-in-out infinite; border:1px solid var(--sx-border); }
@keyframes sx-shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
.ui-loading{ display:flex; align-items:center; gap:12px; color:var(--sx-text-dim); padding:26px; justify-content:center; }
.ui-spinner{ width:22px; height:22px; border-radius:50%; border:3px solid rgba(57,255,20,.25); border-top-color:var(--sx-neon); animation:sx-spin .8s linear infinite; }
@keyframes sx-spin{ to{ transform:rotate(360deg);} }

/* ---------------- Mobile bottom nav ---------------- */
.bottom-nav{ display:none; }
#mobileMenuBtn{ display:none !important; }

@media (max-width:900px){
  :root{ --sx-side:230px; }
}
@media (max-width:768px){
  aside#sidebar, aside, #sidebar{ transform:translateX(-105%) !important; transition:transform .25s ease !important; box-shadow:none !important; }
  #sidebar.mobile-open{ transform:translateX(0) !important; box-shadow:10px 0 50px rgba(0,0,0,.6) !important; }
  main{ margin-left:0 !important; }
  .topbar{ height:58px !important; padding:0 14px !important; }
  .topbar-search{ max-width:none; }
  .topbar-user-meta{ display:none; }
  .page-head{ padding:16px 16px 2px !important; }
  main h2#title, .page-head h2#title{ font-size:21px !important; }
  #content{ padding:14px 14px 96px !important; }
  .sidebar-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1050; display:none; }
  .sidebar-overlay.active{ display:block; }
  .bottom-nav{
    display:flex !important; position:fixed; left:0; right:0; bottom:0; z-index:1200; height:62px;
    background:rgba(7,13,26,.94); border-top:1px solid var(--sx-border);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); padding:6px 6px env(safe-area-inset-bottom,6px);
  }
  .bottom-nav button{
    flex:1; background:transparent; border:none; color:var(--sx-text-dim); cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; border-radius:12px;
  }
  .bottom-nav button span{ font-size:19px; line-height:1; }
  .bottom-nav button small{ font-size:10px; font-weight:600; }
  .bottom-nav button.active{ color:var(--sx-neon); background:rgba(57,255,20,.08); }
  .sui-kpi-grid, .sk-kpi-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; }
  .sui-kpi-value{ font-size:26px !important; }
}
@media (max-width:480px){
  .sui-kpi-grid, .sk-kpi-grid{ grid-template-columns:1fr 1fr !important; }
  .topbar-search input{ font-size:12.5px; padding-left:34px; }
}

/* charts row + quick actions responsive */
.sui-charts{ display:grid; gap:16px; }
@media (max-width:860px){
  .sui-charts{ grid-template-columns:1fr !important; }
}
.sui-bars{ display:flex; align-items:flex-end; gap:12px; height:200px; padding-top:10px; }
.sui-bar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; }
.sui-bar{ width:100%; max-width:46px; border-radius:9px 9px 0 0; }
.sui-bar-label{ font-size:11px; color:var(--sx-text-dim); }
.sui-bar-val{ font-size:12px; color:#cfe0f3; font-weight:700; }
.sui-donut{ width:180px; height:180px; border-radius:50%; margin:8px auto; }
.sui-legend{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:#cfe0f3; }
.sui-legend i{ width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:8px; }
.sui-chart-card h3{ margin:0 0 12px; color:#fff; font-size:15px; }
.ui-empty{ text-align:center; padding:40px 20px; color:var(--sx-text-dim); }
.ui-empty-icon{ font-size:40px; margin-bottom:10px; }
.ui-empty h3{ color:#cfe0f3; margin:0 0 6px; }

/* ===================================================================== */
/* PROFESSIONAL POLISH PASS — 2026-06-20 (enterprise security SaaS)       */
/* Appended last → overrides earlier rules. Frontend-only.               */
/* TrackTik / Silvertrac-grade: wider sidebar, glass, gradient KPIs.     */
/* ===================================================================== */
:root{ --sx-side:280px; --sx-top:68px; }

/* ---- 1+2. Wider sidebar, larger brand + subtitle ---- */
#sidebar .sidebar-header{
  display:flex !important; align-items:center !important; gap:12px !important;
  padding:12px 12px 18px !important; margin-bottom:6px !important;
}
#sidebar .sidebar-header img, .logo-sidebar{
  width:46px !important; height:46px !important; border-radius:13px !important;
  box-shadow:0 8px 22px rgba(57,255,20,.28) !important; flex:0 0 46px !important;
}
#sidebar .sidebar-brand{ display:flex; flex-direction:column; line-height:1.1; }
#sidebar .sidebar-header h1{ font-size:23px !important; margin:0 !important; font-weight:900 !important; letter-spacing:.3px; }
.sidebar-subtitle{ font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:#5f7596; margin-top:2px; }

/* ---- 3. Sticky top header: quick actions ---- */
.topbar{ box-shadow:0 1px 0 rgba(120,160,210,.08), 0 10px 30px rgba(0,0,0,.25) !important; }
.quick-actions-wrap{ position:relative; }
.topbar-quickbtn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:10px 14px; border-radius:12px; font-size:13px; font-weight:800; color:#04130a;
  background:linear-gradient(135deg,var(--sx-neon),var(--sx-neon-2));
  border:none; box-shadow:0 8px 22px rgba(57,255,20,.30); white-space:nowrap;
  transition:transform .12s, box-shadow .15s, filter .15s;
}
.topbar-quickbtn:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 12px 28px rgba(57,255,20,.40); }
.topbar-quickbtn .qa-caret{ font-size:10px; opacity:.8; }
.quick-actions-menu{
  position:absolute; right:0; top:calc(100% + 10px); min-width:210px; z-index:1000;
  background:rgba(10,18,34,.92); border:1px solid var(--sx-border); border-radius:14px; padding:8px;
  box-shadow:0 24px 60px rgba(0,0,0,.55); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .15s, transform .15s;
}
.quick-actions-menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.quick-actions-menu button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  background:transparent !important; color:#cdd9e8 !important; border:1px solid transparent !important;
  padding:10px 11px !important; border-radius:10px !important; font-size:13px !important; font-weight:600 !important;
}
.quick-actions-menu button:hover{ background:rgba(57,255,20,.10) !important; color:#eafff0 !important; border-color:rgba(57,255,20,.18) !important; }

/* ---- 9. Page head icon + section headers ---- */
.page-head{ display:flex !important; align-items:center !important; gap:14px !important; padding:24px 28px 6px !important; }
.page-head-icon{
  width:50px; height:50px; flex:0 0 50px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  font-size:23px; background:linear-gradient(145deg,rgba(57,255,20,.16),rgba(56,189,248,.10));
  border:1px solid rgba(57,255,20,.22); box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.page-head-text{ display:flex; flex-direction:column; }
#content h2:not(.sui-kpi-value), #content h3{ color:#fff; letter-spacing:.2px; }
.section-header{
  display:flex; align-items:center; gap:9px; margin:6px 0 14px; padding-bottom:10px;
  border-bottom:1px solid var(--sx-border); font-size:16px; font-weight:800; color:#fff;
}
.section-header::before{ content:""; width:4px; height:18px; border-radius:3px; background:linear-gradient(180deg,var(--sx-neon),var(--sx-neon-2)); }

/* ---- 4. KPI cards: bigger, gradient, hover, status indicator ---- */
.sui-kpi-grid{ grid-template-columns:repeat(auto-fill,minmax(248px,1fr)) !important; gap:18px !important; }
.sui-kpi{
  position:relative; overflow:hidden; padding:22px 22px 20px !important; border-radius:20px !important;
  background:
    radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--sui-accent,#39ff14) 16%, transparent), transparent 58%),
    linear-gradient(160deg, rgba(20,33,56,.72), rgba(10,18,34,.72)) !important;
  border:1px solid var(--sx-border) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter:blur(16px) !important; backdrop-filter:blur(16px) !important;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.sui-kpi:hover{ transform:translateY(-6px) !important; border-color:color-mix(in srgb, var(--sui-accent,#39ff14) 55%, transparent) !important;
  box-shadow:0 28px 64px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--sui-accent,#39ff14) 30%, transparent) !important; }
.sui-kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg, var(--sui-accent,#39ff14), transparent 130%); opacity:.95; }
/* status indicator dot (pulsing, accent-colored) */
.sui-kpi::after{ content:""; position:absolute; top:18px; right:18px; width:9px; height:9px; border-radius:50%;
  background:var(--sui-accent,#39ff14); box-shadow:0 0 0 0 color-mix(in srgb, var(--sui-accent,#39ff14) 60%, transparent);
  animation:sx-status 2.4s ease-out infinite; }
@keyframes sx-status{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--sui-accent,#39ff14) 55%, transparent);} 70%{ box-shadow:0 0 0 9px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
.sui-kpi-label{ font-size:12.5px !important; }
.sui-kpi-icon{ width:42px !important; height:42px !important; border-radius:13px !important; font-size:20px !important;
  border:1px solid color-mix(in srgb, var(--sui-accent,#39ff14) 30%, transparent); }
.sui-kpi-value{ font-size:38px !important; margin:14px 0 4px !important; letter-spacing:-.5px; }
.sui-kpi-sub{ font-size:12.5px !important; }

/* ---- 5. Tables: striped + sticky + spacing ---- */
.sui-table-wrap{ padding:16px !important; border-radius:18px !important; }
#content table thead th, .panel table thead th{
  padding:14px 16px !important; font-size:11px !important; letter-spacing:.7px !important;
  background:rgba(8,16,30,.96) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); z-index:2;
}
#content table tbody td, .panel table tbody td{ padding:14px 16px !important; }
#content table tbody tr:nth-child(even){ background:rgba(255,255,255,.022) !important; }
#content table tbody tr{ transition:background .12s; }
#content table tbody tr:hover{ background:rgba(57,255,20,.07) !important; }

/* ---- 6. Glassmorphism boost ---- */
.panel, .sui-chart-card, .sui-table-wrap{
  background:linear-gradient(160deg, rgba(18,30,52,.62), rgba(9,16,30,.62)) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter:blur(18px) !important; backdrop-filter:blur(18px) !important;
}
aside#sidebar, #sidebar{ -webkit-backdrop-filter:blur(20px) !important; backdrop-filter:blur(20px) !important; }
.topbar{ -webkit-backdrop-filter:blur(20px) !important; backdrop-filter:blur(20px) !important; }

/* ---- 7. Charts sizing ---- */
.sui-charts{ grid-template-columns:1.5fr 1fr; gap:18px; }
.sui-chart-card{ padding:22px !important; border-radius:18px !important; }
.sui-chart-card h3{ font-size:15px; margin:0 0 16px; }
.sui-bars{ height:248px !important; gap:14px; padding-top:14px; }
.sui-bar{ max-width:52px; border-radius:10px 10px 0 0; }
.sui-donut{ width:210px !important; height:210px !important; margin:14px auto !important; }
.sui-legend{ font-size:13.5px; }

/* ---- 8. Mobile responsiveness ---- */
@media (max-width:1100px){ .sui-charts{ grid-template-columns:1fr; } }
@media (max-width:768px){
  .topbar-quickbtn .qa-label{ display:none; }
  .topbar-quickbtn{ padding:10px 12px; }
  .quick-actions-menu{ right:0; }
  .page-head{ padding:16px 16px 4px !important; gap:11px !important; }
  .page-head-icon{ width:42px; height:42px; flex:0 0 42px; font-size:20px; border-radius:13px; }
  .sui-kpi-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; gap:12px !important; }
  .sui-kpi{ padding:18px !important; }
  .sui-kpi-value{ font-size:30px !important; }
  .sui-bars{ height:200px !important; }
  .sui-donut{ width:180px !important; height:180px !important; }
}
@media (max-width:480px){
  .sui-kpi-grid{ grid-template-columns:1fr 1fr !important; }
  .sui-kpi-value{ font-size:26px !important; }
  .topbar-search input{ font-size:12.5px; }
}
/* graceful fallback where color-mix is unsupported */
@supports not (background:color-mix(in srgb,#000 50%, transparent)){
  .sui-kpi{ background:linear-gradient(160deg, rgba(20,33,56,.74), rgba(10,18,34,.74)) !important; }
  .sui-kpi:hover{ border-color:var(--sx-border-strong) !important; }
}

/* ===================================================================== */
/* PREMIUM SAAS PASS — 2026-06-20  (header menus, reports cards,          */
/* employees export, schedule polish, lightbox). Frontend-only.          */
/* ===================================================================== */

/* ---- Top header dropdowns (notifications + user profile) ---- */
.topbar-user-wrap{ position:relative; }
.topbar-user{ cursor:pointer; gap:9px; }
.topbar-user-caret{ font-size:10px; color:var(--sx-text-dim); margin-left:2px; }
.topbar-dropdown{
  position:absolute; right:0; top:calc(100% + 12px); min-width:248px; z-index:1200;
  background:rgba(10,18,34,.94); border:1px solid var(--sx-border); border-radius:16px; padding:8px;
  box-shadow:0 26px 64px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .15s, transform .15s;
}
.topbar-dropdown.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.dropdown-head, .user-menu-head{ padding:8px 10px; color:#fff; font-weight:800; font-size:13px; }
.user-menu-head{ display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--sx-border); margin-bottom:6px; padding-bottom:12px; }
.user-menu-head small{ display:block; color:var(--sx-text-dim); font-size:11.5px; font-weight:600; text-transform:capitalize; }
.user-menu button, .notif-menu .dropdown-foot{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:transparent !important; color:#cdd9e8 !important; border:1px solid transparent !important;
  padding:11px 11px !important; border-radius:10px !important; font-size:13.5px !important; font-weight:600 !important;
}
.user-menu button:hover, .notif-menu .dropdown-foot:hover{ background:rgba(57,255,20,.10) !important; color:#eafff0 !important; border-color:rgba(57,255,20,.18) !important; }
.user-menu .user-menu-logout{ color:#ff9ca0 !important; margin-top:4px; border-top:1px solid var(--sx-border) !important; border-radius:0 0 10px 10px !important; }
.user-menu .user-menu-logout:hover{ background:rgba(255,90,95,.12) !important; color:#ffd0d2 !important; }
.notif-item{ display:flex; gap:11px; align-items:center; padding:10px; border-radius:11px; }
.notif-item:hover{ background:rgba(255,255,255,.03); }
.notif-item b{ color:#e7eef7; font-size:13px; display:block; }
.notif-item small{ color:var(--sx-text-dim); font-size:11.5px; }
.ni-ico{ width:34px; height:34px; flex:0 0 34px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.ni-ico.crit{ background:rgba(255,90,95,.16); } .ni-ico.ok{ background:rgba(57,255,20,.14); } .ni-ico.info{ background:rgba(56,189,248,.16); }
.notif-menu .dropdown-foot{ justify-content:center; color:#39ff14 !important; font-weight:800 !important; margin-top:4px; border-top:1px solid var(--sx-border) !important; border-radius:0 0 10px 10px !important; }

/* ---- Export / data toolbar (employees, reports) ---- */
.sx-data-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.sx-data-toolbar .sx-tb-title{ font-weight:800; color:#fff; font-size:15px; display:flex; align-items:center; gap:8px; }
.sx-data-toolbar .sx-spacer{ margin-left:auto; }
.sx-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap;
  padding:9px 13px; border-radius:11px; font-size:12.5px; font-weight:700;
  background:rgba(6,12,24,.85); color:#cdd9e8; border:1px solid var(--sx-border); transition:border-color .15s, background .15s, transform .12s;
}
.sx-btn:hover{ border-color:var(--sx-border-strong); background:rgba(57,255,20,.08); color:#eafff0; transform:translateY(-1px); }
.sx-btn.primary{ background:linear-gradient(135deg,var(--sx-neon),var(--sx-neon-2)); color:#04130a; border-color:transparent; }
.sx-seg{ display:inline-flex; gap:3px; background:rgba(6,12,24,.8); border:1px solid var(--sx-border); border-radius:12px; padding:3px; }
.sx-seg button{ background:transparent !important; color:#93a7c0 !important; border:none !important; padding:7px 13px !important; border-radius:9px !important; font-size:12.5px !important; font-weight:700 !important; cursor:pointer; }
.sx-seg button.active{ background:linear-gradient(135deg,var(--sx-neon),var(--sx-neon-2)) !important; color:#04130a !important; }

/* ---- Silvertrac-style employee/report table tweaks ---- */
#content table tbody td .sx-cell-strong{ color:#fff; font-weight:700; }

/* ---- Reports: card layout + severity badges ---- */
.rep-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; }
.rep-card{
  background:linear-gradient(160deg, rgba(18,30,52,.66), rgba(9,16,30,.66)); border:1px solid var(--sx-border);
  border-radius:18px; padding:18px; box-shadow:0 16px 42px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); transition:transform .16s, border-color .16s, box-shadow .16s; position:relative; overflow:hidden;
}
.rep-card:hover{ transform:translateY(-4px); border-color:var(--sx-border-strong); box-shadow:0 24px 56px rgba(0,0,0,.56); }
.rep-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.rep-card-title{ font-size:15px; font-weight:800; color:#fff; line-height:1.25; }
.rep-card-meta{ display:flex; flex-direction:column; gap:7px; margin:10px 0 12px; }
.rep-card-meta div{ display:flex; align-items:center; gap:8px; color:#aebfd3; font-size:12.5px; }
.rep-card-actions{ display:flex; gap:10px; border-top:1px solid var(--sx-border); padding-top:12px; flex-wrap:wrap; }
.sev-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; border:1px solid transparent; }
.sev-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.sev-critical{ color:#ff6b6f; background:rgba(255,90,95,.13); border-color:rgba(255,90,95,.4); }
.sev-high{ color:#ffb35a; background:rgba(249,115,22,.13); border-color:rgba(249,115,22,.4); }
.sev-medium{ color:#ffd24a; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.4); }
.sev-low{ color:#5cf08a; background:rgba(57,255,20,.12); border-color:rgba(57,255,20,.38); }
.sev-na{ color:#9fb0c6; background:rgba(120,160,210,.12); border-color:var(--sx-border); }
.st-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; border:1px solid var(--sx-border); color:#cfe0f3; }

/* ---- Photo preview lightbox ---- */
#content img.sx-zoomable, #content .rep-photo img, [id$="Modal"] img{ cursor:zoom-in; transition:transform .15s; }
#content img.sx-zoomable:hover{ transform:scale(1.02); }
.sx-lightbox{ position:fixed; inset:0; z-index:100000; background:rgba(2,6,14,.92); display:none; align-items:center; justify-content:center; padding:30px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.sx-lightbox.open{ display:flex; }
.sx-lightbox img{ max-width:92vw; max-height:88vh; border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,.7); border:1px solid rgba(57,255,20,.25); }
.sx-lightbox .sx-lb-close{ position:absolute; top:20px; right:24px; width:46px; height:46px; border-radius:12px; border:1px solid var(--sx-border); background:rgba(10,18,34,.8); color:#fff; font-size:22px; cursor:pointer; }
.rep-photo img{ width:100%; height:150px; object-fit:cover; border-radius:12px; border:1px solid var(--sx-border); margin-top:10px; }

/* ---- Schedule: premium calendar + tabs ---- */
.schedule-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.schedule-tab-btn{
  background:rgba(6,12,24,.8) !important; color:#93a7c0 !important; border:1px solid var(--sx-border) !important;
  border-radius:12px !important; padding:9px 15px !important; font-size:13px !important; font-weight:700 !important; cursor:pointer;
}
.schedule-tab-btn:hover{ border-color:var(--sx-border-strong) !important; color:#eafff0 !important; }
.schedule-tab-btn.active{ background:linear-gradient(135deg,var(--sx-neon),var(--sx-neon-2)) !important; color:#04130a !important; border-color:transparent !important; }
.calendar-grid{ display:grid !important; grid-template-columns:repeat(7,1fr) !important; gap:8px !important; }
.calendar-header{ text-align:center; font-size:11px !important; font-weight:800 !important; letter-spacing:.6px; text-transform:uppercase; color:#5f7596 !important; padding:8px 0 !important; }
.calendar-day{
  min-height:84px !important; border-radius:13px !important; padding:9px !important;
  background:linear-gradient(160deg, rgba(18,30,52,.55), rgba(9,16,30,.55)) !important;
  border:1px solid var(--sx-border) !important; color:#cfe0f3 !important; font-size:13px;
  transition:transform .12s, border-color .12s, box-shadow .12s;
}
.calendar-day:hover{ transform:translateY(-2px); border-color:var(--sx-border-strong) !important; box-shadow:0 12px 28px rgba(0,0,0,.4) !important; }
.calendar-day.empty{ background:transparent !important; border-color:transparent !important; }
.calendar-day.today{ border:1.5px solid var(--sx-neon) !important; box-shadow:0 0 0 3px rgba(57,255,20,.12) !important; }
.sx-cal-views{ display:inline-flex; gap:3px; background:rgba(6,12,24,.8); border:1px solid var(--sx-border); border-radius:12px; padding:3px; margin-bottom:14px; }
.sx-cal-views button{ background:transparent !important; color:#93a7c0 !important; border:none !important; padding:8px 16px !important; border-radius:9px !important; font-weight:700 !important; cursor:pointer; font-size:12.5px !important; }
.sx-cal-views button.active{ background:linear-gradient(135deg,var(--sx-neon),var(--sx-neon-2)) !important; color:#04130a !important; }
.calendar-grid.week-view{ grid-auto-rows:minmax(150px,auto); }
.calendar-grid.week-view .calendar-day{ min-height:150px !important; }

/* ---- Mobile refinements ---- */
@media (max-width:768px){
  .topbar-user-meta{ display:none; }
  .topbar-user-caret{ display:none; }
  .topbar-dropdown{ position:fixed; left:10px; right:10px; top:62px; min-width:auto; }
  .rep-grid{ grid-template-columns:1fr; }
  .sx-data-toolbar{ gap:8px; }
  .sx-data-toolbar .sx-tb-title{ width:100%; }
  .calendar-day{ min-height:60px !important; font-size:11px; padding:6px !important; }
  .calendar-grid{ gap:5px !important; }
}

/* ===================================================================== */
/* EMPLOYEES PAGE REDESIGN — 2026-06-20 (frontend-only)                   */
/* KPIs + 75/25 table+profile split. Glass · dark navy · neon green.     */
/* ===================================================================== */
.emp-redesign{ display:flex; flex-direction:column; gap:18px; }

/* KPI row */
.emp-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.emp-kpi{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:14px;
  padding:18px 18px; border-radius:18px; border:1px solid var(--sx-border);
  background:radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--ek,#39ff14) 16%, transparent), transparent 58%),
             linear-gradient(160deg, rgba(20,33,56,.72), rgba(10,18,34,.72));
  box-shadow:0 16px 42px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.emp-kpi:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--ek,#39ff14) 55%, transparent);
  box-shadow:0 26px 60px rgba(0,0,0,.58); }
.emp-kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--ek,#39ff14); }
.emp-kpi-ico{ width:46px; height:46px; flex:0 0 46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:color-mix(in srgb, var(--ek,#39ff14) 16%, transparent); border:1px solid color-mix(in srgb, var(--ek,#39ff14) 30%, transparent); }
.emp-kpi-meta{ display:flex; flex-direction:column; }
.emp-kpi-value{ font-size:30px; font-weight:800; color:#fff; line-height:1; letter-spacing:-.5px; }
.emp-kpi-label{ font-size:12px; font-weight:600; color:var(--sx-text-dim); text-transform:uppercase; letter-spacing:.6px; margin-top:5px; }

/* main split */
.emp-main{ display:grid; grid-template-columns:3fr 1fr; gap:18px; align-items:start; }
.emp-left{ min-width:0; }
.emp-right{ min-width:0; }

/* toolbar */
.emp-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.emp-toolbar .emp-search{ position:relative; flex:1; min-width:180px; }
.emp-toolbar .emp-search input{ width:100%; box-sizing:border-box; padding:10px 12px 10px 36px; border-radius:11px;
  background:rgba(6,12,24,.85); border:1px solid var(--sx-border); color:var(--sx-text); font-size:13px; outline:none; }
.emp-toolbar .emp-search input:focus{ border-color:var(--sx-border-strong); box-shadow:0 0 0 3px rgba(57,255,20,.12); }
.emp-toolbar .emp-search .ic{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.6; font-size:13px; }
.emp-toolbar select{ padding:10px 12px; border-radius:11px; background:rgba(6,12,24,.85); border:1px solid var(--sx-border);
  color:var(--sx-text); font-size:13px; outline:none; cursor:pointer; }
.emp-toolbar select:focus{ border-color:var(--sx-border-strong); }

/* table */
.emp-table-wrap{ background:linear-gradient(160deg, rgba(18,30,52,.62), rgba(9,16,30,.62)); border:1px solid var(--sx-border);
  border-radius:18px; overflow:auto; box-shadow:0 18px 46px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); max-height:60vh; }
table.emp-table{ width:100%; border-collapse:collapse; }
table.emp-table thead th{ position:sticky; top:0; z-index:2; text-align:left; white-space:nowrap;
  background:rgba(8,16,30,.97); color:#cfe0f3; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  padding:13px 15px; border-bottom:1px solid var(--sx-border); }
table.emp-table tbody td{ padding:13px 15px; border-bottom:1px solid rgba(120,160,210,.10); color:#dbe6f2; font-size:13px; white-space:nowrap; }
table.emp-table tbody tr{ cursor:pointer; transition:background .12s; }
table.emp-table tbody tr:nth-child(even){ background:rgba(255,255,255,.022); }
table.emp-table tbody tr:hover{ background:rgba(57,255,20,.07); }
table.emp-table tbody tr.sel{ background:rgba(57,255,20,.12); box-shadow:inset 3px 0 0 var(--sx-neon); }
.emp-name-cell{ display:flex; align-items:center; gap:10px; }
.emp-mini-av{ width:32px; height:32px; flex:0 0 32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px; color:#04130a; background:linear-gradient(135deg,var(--sx-neon),var(--sx-neon-2)); }
.emp-name-cell b{ color:#fff; font-weight:700; }
.emp-role-pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; text-transform:capitalize; }
.emp-act-btns{ display:flex; gap:7px; }
.emp-act-btns button{ padding:6px 10px; border-radius:9px; font-size:12px; font-weight:700; cursor:pointer; border:1px solid transparent; }
.emp-act-edit{ background:rgba(56,189,248,.16); color:#9bd9ff; border-color:rgba(56,189,248,.35) !important; }
.emp-act-del{ background:rgba(255,90,95,.15); color:#ff9da1; border-color:rgba(255,90,95,.38) !important; }
.emp-st{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12px; }
.emp-st::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.emp-st.active{ color:#5cf08a; } .emp-st.offline{ color:#ffce7a; } .emp-st.suspended{ color:#ff8084; } .emp-st.unknown{ color:#9fb0c6; }
.emp-empty{ padding:34px; text-align:center; color:var(--sx-text-dim); }

/* profile card */
.emp-profile{ position:sticky; top:84px; background:linear-gradient(160deg, rgba(18,30,52,.66), rgba(9,16,30,.66));
  border:1px solid var(--sx-border); border-radius:20px; padding:22px; box-shadow:0 18px 46px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.emp-profile-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding-bottom:16px; border-bottom:1px solid var(--sx-border); }
.emp-profile-av{ width:84px; height:84px; border-radius:24px; display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:800; color:#04130a; background:linear-gradient(135deg,var(--sx-neon),var(--sx-neon-2)); box-shadow:0 12px 30px rgba(57,255,20,.34); }
.emp-profile-name{ font-size:18px; font-weight:800; color:#fff; }
.emp-profile-role{ font-size:12.5px; color:var(--sx-text-dim); text-transform:capitalize; }
.emp-profile-rows{ display:flex; flex-direction:column; gap:13px; margin-top:16px; }
.emp-pr{ display:flex; align-items:flex-start; gap:11px; }
.emp-pr .k{ width:20px; text-align:center; opacity:.8; }
.emp-pr .v{ color:#dbe6f2; font-size:13px; word-break:break-word; }
.emp-pr .vl{ display:block; color:var(--sx-text-dim); font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:1px; }
.emp-profile-badge{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; padding:8px 14px; border-radius:999px; font-weight:800; font-size:12.5px; width:100%; justify-content:center; box-sizing:border-box; }
.emp-profile-badge.active{ background:rgba(57,255,20,.13); color:#5cf08a; border:1px solid rgba(57,255,20,.4); }
.emp-profile-badge.offline{ background:rgba(245,158,11,.13); color:#ffce7a; border:1px solid rgba(245,158,11,.4); }
.emp-profile-badge.suspended{ background:rgba(255,90,95,.13); color:#ff9da1; border:1px solid rgba(255,90,95,.4); }
.emp-profile-badge.unknown{ background:rgba(120,160,210,.12); color:#cfe0f3; border:1px solid var(--sx-border); }
.emp-profile-empty{ text-align:center; color:var(--sx-text-dim); padding:30px 10px; }

/* responsive */
@media (max-width:1100px){ .emp-main{ grid-template-columns:1fr; } .emp-profile{ position:static; } .emp-kpis{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .emp-kpis{ grid-template-columns:1fr 1fr; } .emp-kpi-value{ font-size:24px; } .emp-toolbar .emp-search{ min-width:100%; } }

/* ===================================================================== */
/* EMPLOYEES PAGE — enterprise upgrade (photos, charts, pager, view)      */
/* ===================================================================== */
/* photo avatars (img with initials fallback) */
.emp-mini-av, .emp-profile-av, .emp-view-av{ position:relative; overflow:hidden; }
.emp-mini-av img, .emp-profile-av img, .emp-view-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.emp-mini-av .ini, .emp-profile-av .ini, .emp-view-av .ini{ display:none; }
.emp-mini-av.noimg .ini, .emp-profile-av.noimg .ini, .emp-view-av.noimg .ini{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }

/* charts row */
.emp-charts{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; }
.emp-chart-card{ min-width:0; }
.emp-chart-card .sui-chart-card{ height:100%; margin:0; }
.emp-chart-card .sui-bars{ height:170px !important; }
.emp-chart-card .sui-donut{ width:150px !important; height:150px !important; }
@media (max-width:1100px){ .emp-charts{ grid-template-columns:1fr; } }

/* pagination */
.emp-pager{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap; }
.emp-pg-info{ color:var(--sx-text-dim); font-size:12.5px; font-weight:600; }
.emp-pg-btns{ display:flex; gap:5px; flex-wrap:wrap; }
.emp-pg-btns button{ min-width:34px; height:34px; padding:0 9px; border-radius:9px; background:rgba(6,12,24,.85);
  border:1px solid var(--sx-border); color:#cdd9e8; font-weight:700; font-size:12.5px; cursor:pointer; transition:border-color .12s, background .12s; }
.emp-pg-btns button:hover:not(:disabled){ border-color:var(--sx-border-strong); background:rgba(57,255,20,.08); color:#eafff0; }
.emp-pg-btns button.active{ background:linear-gradient(135deg,var(--sx-neon),var(--sx-neon-2)); color:#04130a; border-color:transparent; }
.emp-pg-btns button:disabled{ opacity:.4; cursor:default; }
.emp-pg-dots{ color:var(--sx-text-dim); padding:0 4px; align-self:center; }

/* action buttons: add View */
.emp-act-view{ background:rgba(57,255,20,.14); color:#7bf3a3; border-color:rgba(57,255,20,.34) !important; }

/* View full-profile modal */
.emp-view-modal{ position:fixed; inset:0; z-index:100001; background:rgba(2,6,14,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:24px; }
.emp-view-modal.open{ display:flex; }
.emp-view-card{ width:560px; max-width:96%; position:relative; padding:26px;
  background:linear-gradient(160deg,rgba(18,30,52,.96),rgba(9,16,30,.96)); border:1px solid var(--sx-border);
  border-radius:22px; box-shadow:0 40px 100px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05); }
.emp-view-close{ position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:11px; cursor:pointer;
  background:rgba(6,12,24,.85); border:1px solid var(--sx-border); color:#fff; font-size:18px; }
.emp-view-close:hover{ border-color:var(--sx-border-strong); background:rgba(57,255,20,.08); }
.emp-view-head{ display:flex; gap:16px; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--sx-border); }
.emp-view-av{ width:74px; height:74px; flex:0 0 74px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:800; color:#04130a; background:linear-gradient(135deg,var(--sx-neon),var(--sx-neon-2)); box-shadow:0 12px 30px rgba(57,255,20,.34); }
.emp-view-name{ font-size:20px; font-weight:800; color:#fff; margin-bottom:6px; }
.emp-view-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0; }
.emp-view-field{ background:rgba(6,12,24,.5); border:1px solid var(--sx-border); border-radius:12px; padding:11px 13px; color:#dbe6f2; font-size:13.5px; word-break:break-word; }
.emp-view-field .vl{ display:block; color:var(--sx-text-dim); font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.emp-view-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
@media (max-width:560px){ .emp-view-grid{ grid-template-columns:1fr; } .emp-view-actions{ flex-direction:column; } .emp-view-actions .sx-btn{ width:100%; justify-content:center; } }

/* spacing / typography polish */
.emp-redesign{ gap:20px; }
table.emp-table tbody td{ line-height:1.4; }
table.emp-table thead th{ padding-top:14px; padding-bottom:14px; }
.emp-act-btns{ flex-wrap:wrap; }

/* ===================================================================== */
/* GUARD MOBILE — real phone-app redesign (overrides legacy gm- styles)   */
/* Centered phone mockup · glass navy · neon green · bottom nav.          */
/* ===================================================================== */
/* host: remove the empty space around the phone, center it */
#content.gm-mode{ padding:14px 0 30px !important; display:flex !important; justify-content:center !important; align-items:flex-start !important; max-width:none !important; background:transparent !important; }

/* the phone */
#content.gm-mode .guard-mobile-container{
  width:100% !important; max-width:430px !important; margin:0 auto !important;
  height:min(86vh,860px) !important; max-height:860px !important;
  display:flex !important; flex-direction:column !important; overflow:hidden !important;
  border:13px solid #0a0e16 !important; border-radius:46px !important;
  background:linear-gradient(180deg,#070d1a 0%, #0a1424 55%, #070d1a 100%) !important;
  box-shadow:0 0 0 2px rgba(57,255,20,.10), 0 40px 90px rgba(0,0,0,.7), inset 0 0 50px rgba(57,255,20,.04) !important;
  -webkit-backdrop-filter:blur(20px) !important; backdrop-filter:blur(20px) !important;
}
#content.gm-mode .guard-mobile-container::after{ display:none !important; }

/* header */
#content.gm-mode .gm-header{
  padding:46px 16px 14px 16px !important; flex-shrink:0 !important;
  background:linear-gradient(180deg, rgba(7,13,26,.96), rgba(7,13,26,.82)) !important;
  border-bottom:1px solid rgba(57,255,20,.12) !important;
}
#content.gm-mode .gm-header h1{ font-size:16px !important; }
#content.gm-mode .gm-header-logo{ width:30px !important; height:30px !important; border-radius:9px !important; }
.gm-hcluster{ display:flex; align-items:center; gap:9px; }
.gm-time{ font-weight:800; color:#cfe0f3; font-size:13px; font-variant-numeric:tabular-nums; }
#content.gm-mode .gm-status-badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px;
  background:rgba(57,255,20,.12); border:1px solid rgba(57,255,20,.35); color:#7bf3a3; font-size:11px; font-weight:800; }
.gm-status-dot{ width:7px; height:7px; border-radius:50%; background:#39ff14; box-shadow:0 0 8px #39ff14; }
.gm-avatar{ width:34px; height:34px; flex:0 0 34px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#04130a; background:linear-gradient(135deg,#39ff14,#16d672); box-shadow:0 6px 16px rgba(57,255,20,.34); }

/* scroll area */
#content.gm-mode .gm-content{ flex:1 1 auto !important; min-height:0 !important; overflow:hidden !important; display:flex !important; background:transparent !important; }
#content.gm-mode .gm-view-wrapper{ flex:1 !important; overflow-y:auto !important; padding:16px 14px 18px !important; -webkit-overflow-scrolling:touch; }
#content.gm-mode .gm-view-wrapper::-webkit-scrollbar{ width:0; }

/* welcome */
#content.gm-mode .gm-welcome-section{ padding:16px !important; border-radius:16px !important; }
#content.gm-mode .gm-glass-card{ background:linear-gradient(160deg, rgba(18,30,52,.66), rgba(9,16,30,.66)) !important;
  border:1px solid rgba(120,160,210,.16) !important; border-radius:16px !important; -webkit-backdrop-filter:blur(14px) !important; backdrop-filter:blur(14px) !important; }

/* PANIC button — big, red, touch-friendly */
#content.gm-mode .gm-panic-section{ margin:16px 0 !important; }
#content.gm-mode .gm-panic-btn{
  width:100% !important; min-height:84px !important; font-size:20px !important; font-weight:900 !important; letter-spacing:.5px !important;
  color:#fff !important; border:none !important; border-radius:20px !important; cursor:pointer;
  background:linear-gradient(135deg,#ff3b3b,#c81e1e) !important;
  box-shadow:0 16px 38px rgba(255,59,59,.38), inset 0 1px 0 rgba(255,255,255,.18) !important;
  animation:gmPanic 2.4s ease-in-out infinite;
}
#content.gm-mode .gm-panic-btn:active{ transform:scale(.98); }
@keyframes gmPanic{ 0%,100%{ box-shadow:0 16px 38px rgba(255,59,59,.34); } 50%{ box-shadow:0 16px 52px rgba(255,59,59,.6); } }

/* quick action grid — large touch targets */
#content.gm-mode .gm-action-grid{ display:grid !important; grid-template-columns:1fr 1fr 1fr !important; gap:11px !important; margin:4px 0 18px !important; }
#content.gm-mode .gm-action-btn{
  display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:7px !important;
  min-height:92px !important; padding:12px 6px !important; border-radius:16px !important; cursor:pointer; text-align:center;
  color:#dbe6f2 !important; font-size:12px !important; font-weight:700 !important;
  border:1px solid rgba(120,160,210,.16) !important; transition:transform .12s, border-color .12s, box-shadow .12s;
}
#content.gm-mode .gm-action-btn:hover{ transform:translateY(-3px); border-color:rgba(57,255,20,.4) !important; box-shadow:0 12px 26px rgba(0,0,0,.4) !important; }
#content.gm-mode .gm-action-btn:active{ transform:scale(.97); }
#content.gm-mode .gm-action-btn-icon{ font-size:24px !important; }

/* Today's shift card */
.gm-shift-card{ padding:16px !important; margin:0 0 18px !important; }
.gm-shift-head{ display:flex; align-items:center; justify-content:space-between; font-weight:800; color:#fff; font-size:14px; margin-bottom:12px; }
.gm-shift-status{ font-size:11px; font-weight:800; color:#7bf3a3; background:rgba(57,255,20,.12); border:1px solid rgba(57,255,20,.35); padding:4px 10px; border-radius:999px; }
.gm-shift-rows{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gm-shift-rows > div{ display:flex; flex-direction:column; gap:3px; }
.gm-shift-rows .k{ color:#93a7c0; font-size:11px; font-weight:600; }
.gm-shift-rows b{ color:#e7eef7; font-size:13.5px; }

/* feed */
#content.gm-mode .gm-feed-item{ padding:12px 14px !important; border-radius:13px !important; margin-bottom:9px !important; }

/* primary buttons inside views */
#content.gm-mode .gm-btn-primary{ width:100% !important; min-height:54px !important; border:none !important; border-radius:15px !important;
  font-size:16px !important; font-weight:800 !important; cursor:pointer; color:#04130a !important;
  background:linear-gradient(135deg,#39ff14,#16d672) !important; box-shadow:0 12px 28px rgba(57,255,20,.32) !important; }
#content.gm-mode .gm-back-btn{ background:rgba(6,12,24,.85) !important; color:#cdd9e8 !important; border:1px solid var(--sx-border) !important; border-radius:11px !important; padding:8px 13px !important; font-weight:700 !important; cursor:pointer; }

/* bottom navigation */
.gm-bottomnav{ flex-shrink:0; display:flex; gap:2px; padding:8px 6px 10px; z-index:40;
  background:rgba(6,11,22,.97); border-top:1px solid rgba(57,255,20,.14); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.gm-bottomnav button{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:transparent; border:none; cursor:pointer; color:#7e93ad; border-radius:13px; padding:7px 2px; transition:color .12s, background .12s; }
.gm-bottomnav button span{ font-size:20px; line-height:1; }
.gm-bottomnav button small{ font-size:10px; font-weight:700; }
.gm-bottomnav button:active{ transform:scale(.94); }
.gm-bottomnav button.active{ color:#39ff14; background:rgba(57,255,20,.10); }

/* "More" action sheet */
.gm-more-sheet{ position:absolute; left:10px; right:10px; bottom:74px; z-index:45;
  background:rgba(10,18,34,.97); border:1px solid rgba(57,255,20,.18); border-radius:18px; padding:10px;
  box-shadow:0 -10px 50px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .18s, transform .18s; }
.gm-more-sheet.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.gm-more-grip{ width:42px; height:4px; border-radius:3px; background:rgba(120,160,210,.35); margin:2px auto 10px; }
.gm-more-sheet button{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:transparent; color:#cdd9e8; border:1px solid transparent; padding:13px 12px; border-radius:12px; font-size:14px; font-weight:700; }
.gm-more-sheet button span{ font-size:19px; }
.gm-more-sheet button:hover{ background:rgba(57,255,20,.10); color:#eafff0; border-color:rgba(57,255,20,.18); }

/* responsive: fill the screen on real phones */
@media (max-width:600px){
  #content.gm-mode{ padding:0 !important; }
  #content.gm-mode .guard-mobile-container{ max-width:none !important; width:100% !important; height:calc(100vh - 58px) !important; max-height:none !important;
    border-width:0 !important; border-radius:0 !important; box-shadow:none !important; }
  #content.gm-mode .gm-header{ padding:16px 14px 12px !important; }
  #content.gm-mode .gm-action-grid{ gap:10px !important; }
}

/* hide the app's own mobile bottom-nav while inside the Guard Mobile phone */
body.gm-active #bottomNav{ display:none !important; }

/* ===================================================================== */
/* GUARD MOBILE — PREMIUM ENTERPRISE EDITION                              */
/* status bar · dynamic island · clock machine · swipe cards · SOS        */
/* ===================================================================== */
#content.gm-mode .guard-mobile-container::before{ display:none !important; }
#content.gm-mode .gm-header{ padding:10px 14px 12px !important; }

/* iOS status bar */
.gm-statusbar{ position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  height:34px; padding:6px 20px 2px; background:rgba(5,9,17,.96); color:#e7eef7; font-size:12.5px; font-weight:800; z-index:50; }
.gm-bar-time{ font-variant-numeric:tabular-nums; letter-spacing:.3px; }
.gm-bar-icons{ display:flex; align-items:center; gap:8px; }
.gm-signal{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.gm-signal i{ width:3px; background:#e7eef7; border-radius:1px; }
.gm-signal i:nth-child(1){ height:4px; } .gm-signal i:nth-child(2){ height:7px; } .gm-signal i:nth-child(3){ height:10px; } .gm-signal i:nth-child(4){ height:12px; }
.gm-wifi{ font-size:12px; }
.gm-battery{ display:inline-flex; align-items:center; gap:4px; }
.gm-bat-shell{ position:relative; width:24px; height:12px; border:1px solid rgba(231,238,247,.7); border-radius:3px; padding:1px; display:block; }
.gm-bat-shell::after{ content:""; position:absolute; right:-3px; top:3px; width:2px; height:6px; background:rgba(231,238,247,.7); border-radius:0 2px 2px 0; }
.gm-bat-fill{ display:block; height:100%; width:100%; background:#39ff14; border-radius:1px; transition:width .4s, background .4s; }
.gm-bat-txt{ font-size:11px; }
/* dynamic island */
.gm-island{ position:absolute; left:50%; transform:translateX(-50%); top:4px; display:flex; align-items:center; gap:7px;
  background:#000; color:#cfe0f3; font-size:11px; font-weight:700; padding:6px 14px; border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,.6); }
.gm-island-dot{ width:7px; height:7px; border-radius:50%; background:#39ff14; box-shadow:0 0 8px #39ff14; animation:gmBlink 2s ease-in-out infinite; }
@keyframes gmBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* header identity with profile photo */
.gm-id{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.gm-id .gm-avatar{ width:38px; height:38px; flex:0 0 38px; border-radius:12px; position:relative; overflow:hidden; }
.gm-id .gm-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gm-id .gm-avatar .ini{ display:none; } .gm-id .gm-avatar.noimg .ini{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.gm-id-meta{ display:flex; flex-direction:column; min-width:0; }
.gm-id-meta b{ color:#fff; font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-id-meta small{ color:#93a7c0; font-size:11px; text-transform:capitalize; }

/* clock hero */
.gm-clock-hero{ padding:18px !important; margin-bottom:14px; }
.gm-clock-top{ display:flex; align-items:center; justify-content:space-between; }
.gm-clock-label{ color:#93a7c0; font-size:11px; font-weight:800; letter-spacing:1px; }
.gm-clock-status{ font-size:12px; font-weight:900; letter-spacing:.5px; padding:5px 12px; border-radius:999px; border:1px solid transparent; }
.gm-clock-status.out{ color:#ff8084; background:rgba(255,90,95,.13); border-color:rgba(255,90,95,.4); }
.gm-clock-status.in{ color:#5cf08a; background:rgba(57,255,20,.13); border-color:rgba(57,255,20,.4); }
.gm-clock-status.break{ color:#ffce7a; background:rgba(245,158,11,.13); border-color:rgba(245,158,11,.4); }
.gm-clock-hours{ text-align:center; margin:14px 0 16px; }
.gm-clock-hours span{ font-size:40px; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-1px; display:block; }
.gm-clock-hours small{ color:#93a7c0; font-size:12px; }
.gm-clock-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.gm-clock-btn{ min-height:58px; border:none; border-radius:15px; font-size:15px; font-weight:800; cursor:pointer; color:#04130a;
  transition:transform .12s, filter .15s, opacity .15s; box-shadow:0 10px 24px rgba(0,0,0,.35); }
.gm-clock-btn:active{ transform:scale(.97); }
.gm-clock-btn.start{ background:linear-gradient(135deg,#39ff14,#16d672); }
.gm-clock-btn.end{ background:linear-gradient(135deg,#ff5a5f,#c81e1e); color:#fff; }
.gm-clock-btn.brk{ background:linear-gradient(135deg,#ffd24a,#f59e0b); }
.gm-clock-btn.back{ background:linear-gradient(135deg,#56c8ff,#2f8fe0); color:#04130a; }
.gm-clock-btn.dim, .gm-clock-btn:disabled{ opacity:.32; filter:grayscale(.4); cursor:not-allowed; box-shadow:none; }

/* swipeable stat cards */
.gm-swipe{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 8px; margin-bottom:14px; -webkit-overflow-scrolling:touch; }
.gm-swipe::-webkit-scrollbar{ height:0; }
.gm-stat-card{ scroll-snap-align:start; flex:0 0 150px; display:flex; align-items:center; gap:12px; padding:15px !important; }
.gm-stat-ico{ position:relative; font-size:24px; width:42px; height:42px; flex:0 0 42px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:rgba(255,255,255,.05); }
.gm-stat-meta{ display:flex; flex-direction:column; min-width:0; }
.gm-stat-meta b{ color:#fff; font-size:15px; font-weight:800; white-space:nowrap; }
.gm-stat-meta small{ color:#93a7c0; font-size:11px; }
.gm-stat-sub{ color:#7e93ad; font-size:10px; white-space:nowrap; }
.gm-unread{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#ff5a5f; color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #0a1424; }

/* recent reports + sections */
.gm-card-section{ margin-bottom:16px; }
.gm-sec-title{ color:#39ff14 !important; font-size:14px !important; margin:0 0 10px !important; font-weight:800; }
#gmRecentReports{ padding:6px !important; }
.gm-rep-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border-radius:12px; }
.gm-rep-row+.gm-rep-row{ border-top:1px solid rgba(120,160,210,.10); }
.gm-rep-main{ display:flex; flex-direction:column; min-width:0; }
.gm-rep-main b{ color:#e7eef7; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.gm-rep-main span{ color:#93a7c0; font-size:11px; }
.gm-empty-mini{ color:#93a7c0; text-align:center; padding:16px; font-size:13px; }

/* emergency contacts */
.gm-contacts{ padding:6px !important; }
.gm-contact{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:13px; text-decoration:none; color:#e7eef7; }
.gm-contact+.gm-contact{ border-top:1px solid rgba(120,160,210,.10); }
.gm-contact:active{ background:rgba(57,255,20,.06); }
.gm-contact-ico{ width:40px; height:40px; flex:0 0 40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; background:rgba(56,189,248,.14); }
.gm-contact-ico.crit{ background:rgba(255,90,95,.16); }
.gm-contact div{ flex:1; min-width:0; }
.gm-contact b{ display:block; font-size:13.5px; color:#fff; }
.gm-contact small{ color:#93a7c0; font-size:11.5px; }
.gm-call{ background:linear-gradient(135deg,#39ff14,#16d672); color:#04130a; font-weight:800; font-size:12px; padding:7px 14px; border-radius:11px; }

/* floating SOS */
.gm-sos{ position:absolute; right:16px; bottom:84px; z-index:60; width:62px; height:62px; border-radius:50%; border:none; cursor:pointer;
  background:radial-gradient(circle at 50% 35%, #ff6b6f, #c81e1e); color:#fff; font-weight:900; font-size:15px; letter-spacing:.5px;
  box-shadow:0 12px 30px rgba(255,59,59,.5), 0 0 0 6px rgba(255,59,59,.16); animation:gmSos 2.2s ease-in-out infinite; }
.gm-sos:active{ transform:scale(.93); }
@keyframes gmSos{ 0%,100%{ box-shadow:0 12px 30px rgba(255,59,59,.45), 0 0 0 6px rgba(255,59,59,.14); } 50%{ box-shadow:0 12px 40px rgba(255,59,59,.65), 0 0 0 12px rgba(255,59,59,0); } }

/* entrance animation — NEVER leaves cards hidden (visible by default, slide only) */
.gm-premium > *, .gm-premium-after > *{ opacity:1 !important; animation:gmRise .4s ease; }
@keyframes gmRise{ from{ transform:translateY(8px); } to{ transform:translateY(0); } }

@media (max-width:600px){
  .gm-clock-hours span{ font-size:34px; }
  .gm-sos{ bottom:78px; }
}

/* ===================================================================== */
/* GUARD MOBILE — ENTERPRISE v2 (profile, tasks, island, iPhone 16 Pro)   */
/* ===================================================================== */
/* iPhone 16 Pro titanium frame */
#content.gm-mode .guard-mobile-container{
  border:10px solid #2a2d33 !important; border-radius:54px !important;
  box-shadow:0 0 0 2px #15171b, 0 0 0 5px #34383f, 0 46px 100px rgba(0,0,0,.72), inset 0 0 60px rgba(57,255,20,.04) !important;
}

/* Dynamic Island redesign */
.gm-island{ display:flex; align-items:center; gap:8px; min-width:118px; justify-content:center;
  transition:transform .26s cubic-bezier(.2,1.4,.4,1), background .3s; }
.gm-island.gm-island-pop{ transform:translateX(-50%) scale(1.08); }
.gm-island-ico{ display:inline-flex; align-items:center; font-size:12px; }
.gm-island-txt{ font-weight:800; font-size:11px; letter-spacing:.2px; }
.gm-island.in .gm-island-txt{ color:#7bf3a3; } .gm-island.break .gm-island-txt{ color:#ffce7a; } .gm-island.out .gm-island-txt{ color:#9fb0c6; }
.gm-island.gps .gm-island-txt{ color:#7bd6ff; } .gm-island.notif .gm-island-txt{ color:#ffd24a; }
.gm-island-dot.brk{ background:#f59e0b; box-shadow:0 0 8px #f59e0b; } .gm-island-dot.off{ background:#7e93ad; box-shadow:none; }

/* Guard profile card */
.gm-profile-card{ display:flex; align-items:center; gap:14px; padding:16px !important; margin-bottom:14px; }
.gm-profile-photo{ width:58px; height:58px; flex:0 0 58px; border-radius:18px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; color:#04130a;
  background:linear-gradient(135deg,#39ff14,#16d672); box-shadow:0 10px 26px rgba(57,255,20,.32); }
.gm-profile-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gm-profile-photo .ini{ display:none; } .gm-profile-photo.noimg .ini{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.gm-profile-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.gm-profile-info b{ color:#fff; font-size:16px; font-weight:800; }
.gm-profile-info small{ color:#93a7c0; font-size:11px; font-weight:600; letter-spacing:.3px; }
.gm-profile-online{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:#7bf3a3;
  background:rgba(57,255,20,.12); border:1px solid rgba(57,255,20,.32); padding:5px 10px; border-radius:999px; align-self:flex-start; }

/* Active tasks card */
.gm-tasks{ padding:6px !important; }
.gm-task{ display:flex; align-items:center; gap:11px; padding:12px; border-radius:13px; cursor:pointer; }
.gm-task+.gm-task{ border-top:1px solid rgba(120,160,210,.10); }
.gm-task input{ position:absolute; opacity:0; width:0; height:0; }
.gm-task-box{ width:22px; height:22px; flex:0 0 22px; border-radius:7px; border:2px solid rgba(120,160,210,.4); position:relative; transition:background .15s, border-color .15s; }
.gm-task input:checked + .gm-task-box{ background:linear-gradient(135deg,#39ff14,#16d672); border-color:transparent; }
.gm-task input:checked + .gm-task-box::after{ content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#04130a; font-weight:900; font-size:14px; }
.gm-task-meta{ flex:1; min-width:0; }
.gm-task-meta b{ display:block; color:#e7eef7; font-size:13.5px; font-weight:700; }
.gm-task-meta small{ color:#93a7c0; font-size:11px; }
.gm-task.done .gm-task-meta b{ text-decoration:line-through; color:#7e93ad; }
.gm-task-pri{ font-size:10px; font-weight:800; padding:3px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; }
.gm-task-pri.high{ color:#ff8084; background:rgba(255,90,95,.14); } .gm-task-pri.med{ color:#ffce7a; background:rgba(245,158,11,.14); } .gm-task-pri.low{ color:#7bd6ff; background:rgba(56,189,248,.14); }
.gm-task-count{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; margin-left:6px; border-radius:10px; background:rgba(57,255,20,.16); color:#39ff14; font-size:11px; font-weight:800; vertical-align:middle; }

/* tighter, premium typography/spacing */
#content.gm-mode .gm-view-wrapper{ padding:16px 15px 22px !important; }
.gm-shift-rows{ gap:13px 14px; }

/* ===================================================================== */
/* GUARD MOBILE — ENTERPRISE v3 (profile grid, progress, ring, ripple)    */
/* ===================================================================== */
/* profile card with detail grid */
.gm-profile-card{ flex-direction:column; align-items:stretch; gap:0; padding:0 !important; overflow:hidden; }
.gm-profile-top{ display:flex; align-items:center; gap:14px; padding:16px; }
.gm-profile-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(120,160,210,.12); border-top:1px solid rgba(120,160,210,.12); }
.gm-profile-grid > div{ background:rgba(9,16,30,.55); padding:11px 13px; display:flex; flex-direction:column; gap:3px; }
.gm-profile-grid .vl{ color:#7e93ad; font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; }
.gm-profile-grid b{ color:#e7eef7; font-size:12.5px; font-weight:800; }

/* live shift progress */
.gm-progress-card{ padding:16px !important; margin-bottom:14px; }
.gm-progress-top{ display:flex; align-items:center; justify-content:space-between; color:#cfe0f3; font-weight:800; font-size:13px; margin-bottom:11px; }
.gm-progress-top b{ color:#39ff14; font-size:13px; }
.gm-progress-track{ height:12px; border-radius:999px; background:rgba(6,12,24,.85); overflow:hidden; border:1px solid var(--sx-border); }
.gm-progress-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,#16d672,#39ff14); box-shadow:0 0 14px rgba(57,255,20,.5); transition:width .6s ease; }
.gm-progress-foot{ display:flex; justify-content:space-between; margin-top:8px; color:#7e93ad; font-size:11px; font-weight:700; }
.gm-progress-foot span:nth-child(2){ color:#39ff14; }

/* checkpoints progress ring */
.gm-cp-card{ display:flex; align-items:center; gap:16px; padding:16px !important; margin-bottom:14px; }
.gm-cp-ring{ width:84px; height:84px; flex:0 0 84px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:conic-gradient(#39ff14 240deg, rgba(120,160,210,.16) 0); }
.gm-cp-ring-in{ width:64px; height:64px; border-radius:50%; background:#0a1424; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gm-cp-ring-in b{ color:#fff; font-size:18px; font-weight:900; } .gm-cp-ring-in small{ color:#93a7c0; font-size:10px; }
.gm-cp-meta{ flex:1; min-width:0; }
.gm-cp-title{ color:#fff; font-weight:800; font-size:14px; margin-bottom:10px; }
.gm-cp-stats{ display:flex; gap:18px; }
.gm-cp-stats span{ color:#93a7c0; font-size:12px; } .gm-cp-stats b{ display:block; color:#fff; font-size:20px; font-weight:900; }
.gm-cp-stats .cp-done b{ color:#5cf08a; } .gm-cp-stats .cp-left b{ color:#ffce7a; }

/* island notification states */
.gm-island.msg .gm-island-txt{ color:#9bd9ff; } .gm-island.task .gm-island-txt{ color:#7bf3a3; } .gm-island.warn .gm-island-txt{ color:#ffb35a; }

/* task header pills + report type chips */
.gm-task-pill{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; margin-left:6px; }
.gm-task-pill.open{ background:rgba(57,255,20,.14); color:#39ff14; } .gm-task-pill.done{ background:rgba(120,160,210,.14); color:#9fb0c6; }
.gm-task-pill b{ font-weight:900; }
.gm-rep-type{ display:inline-block; font-size:10px; font-weight:800; padding:1px 7px; border-radius:6px; text-transform:uppercase; letter-spacing:.3px; }
.gm-rep-type.inc{ color:#ff9da1; background:rgba(255,90,95,.14); } .gm-rep-type.dar{ color:#9bd9ff; background:rgba(56,189,248,.14); } .gm-rep-type.maint{ color:#ffce7a; background:rgba(245,158,11,.14); }

/* ripple */
.gm-ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.35); transform:scale(0); animation:gmRipple .65s ease-out; pointer-events:none; z-index:5; }
@keyframes gmRipple{ to{ transform:scale(2.2); opacity:0; } }
.gm-clock-btn,.gm-action-btn,.gm-call,.gm-sos,.gm-bottomnav button,.gm-stat-card,.gm-task{ position:relative; overflow:hidden; }

/* larger touch targets + spacing (PWA feel) */
#content.gm-mode .gm-action-btn{ min-height:96px !important; }
.gm-premium > *{ margin-bottom:14px; }
.gm-card-section{ margin-bottom:18px; }

/* ===================================================================== */
/* GUARD MOBILE V3 FIX — guarantee inner scroll so ALL cards are visible  */
/* (the many v3 cards exceed the fixed phone height; the wrapper needs    */
/*  min-height:0 to become a bounded, scrollable region instead of being  */
/*  clipped by the phone's overflow:hidden).                             */
/* ===================================================================== */
#content.gm-mode .guard-mobile-container{ display:flex !important; flex-direction:column !important; overflow:hidden !important; }
#content.gm-mode .gm-content{ flex:1 1 auto !important; min-height:0 !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; }
#content.gm-mode .gm-view-wrapper{ flex:1 1 auto !important; min-height:0 !important; height:auto !important; max-height:none !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; }
/* the active home view must lay out its cards in a normal column */
#content.gm-mode .gm-view:not(.gm-hidden){ display:block !important; }
/* belt-and-suspenders: never let injected cards collapse/hide */
.gm-premium, .gm-premium-after{ display:block !important; }
.gm-premium > *, .gm-premium-after > *{ visibility:visible !important; }

/* ===================================================================== */
/* GUARD MOBILE — ENTERPRISE v4 (banner, status ring, mini map, notif)    */
/* ===================================================================== */
/* full-screen phone frame on desktop too (taller, more immersive) */
#content.gm-mode{ padding:10px 0 24px !important; }
#content.gm-mode .guard-mobile-container{ height:min(92vh,920px) !important; max-height:920px !important; }

/* Dynamic Island — morph/expand feel */
.gm-island{ transition:transform .3s cubic-bezier(.2,1.5,.4,1), min-width .3s, background .3s, padding .3s; }
.gm-island.gm-island-pop{ transform:translateX(-50%) scale(1.12); padding:6px 18px; }

/* Clock Status banner */
.gm-status-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 17px; border-radius:18px; margin-bottom:14px;
  border:1px solid transparent; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); transition:background .3s, border-color .3s; }
.gm-status-banner.out{ background:linear-gradient(135deg,rgba(255,90,95,.18),rgba(255,90,95,.06)); border-color:rgba(255,90,95,.4); }
.gm-status-banner.in{ background:linear-gradient(135deg,rgba(57,255,20,.18),rgba(57,255,20,.05)); border-color:rgba(57,255,20,.4); }
.gm-status-banner.break{ background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(245,158,11,.06)); border-color:rgba(245,158,11,.4); }
.gm-sb-left{ display:flex; align-items:center; gap:12px; }
.gm-sb-dot{ width:12px; height:12px; border-radius:50%; background:#5cf08a; box-shadow:0 0 12px currentColor; animation:gmBlink 1.8s ease-in-out infinite; }
.gm-status-banner.out .gm-sb-dot{ background:#ff8084; } .gm-status-banner.break .gm-sb-dot{ background:#ffce7a; } .gm-status-banner.in .gm-sb-dot{ background:#5cf08a; }
.gm-sb-meta b{ display:block; color:#fff; font-size:16px; font-weight:900; letter-spacing:.4px; }
.gm-sb-meta small{ color:#aebfd3; font-size:11px; }
.gm-sb-hours{ text-align:right; } .gm-sb-hours span{ display:block; color:#fff; font-size:18px; font-weight:900; font-variant-numeric:tabular-nums; } .gm-sb-hours small{ color:#93a7c0; font-size:10px; }

/* Large Today's Shift card */
.gm-shift-lg{ padding:18px !important; }
.gm-shift-hero{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:12px 0 14px; padding-bottom:13px; border-bottom:1px solid var(--sx-border); }
.gm-shift-site{ font-size:20px; font-weight:900; color:#fff; }
.gm-shift-time{ font-size:13px; font-weight:800; color:#39ff14; }

/* GPS mini map preview */
.gm-stat-gps{ flex:0 0 210px !important; }
.gm-mini-map{ position:relative; width:60px; height:60px; flex:0 0 60px; border-radius:14px; overflow:hidden;
  background:linear-gradient(rgba(57,255,20,.06) 1px,transparent 1px) 0 0/14px 14px, linear-gradient(90deg,rgba(57,255,20,.06) 1px,transparent 1px) 0 0/14px 14px, radial-gradient(circle at 50% 50%,rgba(56,189,248,.16),transparent 65%), #060f1d;
  border:1px solid rgba(57,255,20,.2); }
.gm-mm-pin{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:#39ff14; box-shadow:0 0 0 4px rgba(57,255,20,.25); }
.gm-mm-pulse{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; border:2px solid #39ff14; animation:gmMm 2s ease-out infinite; }
@keyframes gmMm{ 0%{ width:9px;height:9px;opacity:.9; } 100%{ width:70px;height:70px;opacity:0; } }

/* profile photo status ring */
.gm-status-ring{ width:64px; height:64px; flex:0 0 64px; border-radius:20px; padding:3px; display:flex; align-items:center; justify-content:center; }
.gm-status-ring.in{ background:conic-gradient(#39ff14,#16d672,#39ff14); }
.gm-status-ring.break{ background:conic-gradient(#ffd24a,#f59e0b,#ffd24a); }
.gm-status-ring.out{ background:conic-gradient(#ff5a5f,#c81e1e,#ff5a5f); }
.gm-status-ring .gm-profile-photo{ width:100%; height:100%; border-radius:17px; box-shadow:none; border:3px solid #0a1424; }

/* notification bell + badge */
.gm-bell{ position:relative; background:rgba(6,12,24,.7); border:1px solid var(--sx-border); color:#cfe0f3; width:34px; height:34px; border-radius:11px; cursor:pointer; font-size:15px; }
.gm-bell:active{ transform:scale(.92); }
.gm-bell-badge{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#ff5a5f; color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #070d1a; }

/* notification center (slide-down sheet inside the phone) */
.gm-notif-center{ position:absolute; left:10px; right:10px; top:88px; z-index:70; max-height:62%; overflow-y:auto;
  background:rgba(10,18,34,.97); border:1px solid rgba(57,255,20,.18); border-radius:20px; padding:8px;
  box-shadow:0 28px 70px rgba(0,0,0,.65); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  opacity:0; transform:translateY(-12px) scale(.98); pointer-events:none; transition:opacity .2s, transform .2s; }
.gm-notif-center.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.gm-nc-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; }
.gm-nc-head b{ color:#fff; font-size:15px; }
.gm-nc-close{ background:transparent; border:none; color:#93a7c0; font-size:16px; cursor:pointer; }
.gm-nc-item{ display:flex; gap:11px; align-items:center; padding:12px 10px; border-radius:13px; }
.gm-nc-item:hover{ background:rgba(255,255,255,.03); }
.gm-nc-item b{ display:block; color:#e7eef7; font-size:13px; } .gm-nc-item small{ color:#93a7c0; font-size:11px; }
.gm-nc-ico{ width:36px; height:36px; flex:0 0 36px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.gm-nc-ico.msg{ background:rgba(56,189,248,.16); } .gm-nc-ico.task{ background:rgba(57,255,20,.14); } .gm-nc-ico.warn{ background:rgba(245,158,11,.16); }

/* SOS clearly bottom-right above nav */
.gm-sos{ right:18px !important; bottom:86px !important; }

/* ===================================================================== */
/* GUARD MOBILE — ENTERPRISE v5 (quick stats, dynamic gradients, polish)  */
/* ===================================================================== */
/* Quick stats row (Reports Today · Checkpoints · Messages · Hours) */
.gm-qstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:14px; }
.gm-qstat{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:13px 4px !important; text-align:center; border-radius:15px !important; position:relative; overflow:hidden; }
.gm-qstat::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--qc,#39ff14) 18%, transparent), transparent 70%); pointer-events:none; }
.gm-qs-ico{ font-size:19px; width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--qc,#39ff14) 16%, transparent); border:1px solid color-mix(in srgb, var(--qc,#39ff14) 30%, transparent); }
.gm-qstat b{ color:#fff; font-size:17px; font-weight:900; font-variant-numeric:tabular-nums; }
.gm-qstat small{ color:#93a7c0; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; line-height:1.1; }
@media (max-width:380px){ .gm-qstat b{ font-size:15px; } .gm-qs-ico{ width:30px; height:30px; font-size:16px; } }

/* Dynamic animated gradients (premium dark mode) */
#content.gm-mode .guard-mobile-container{
  background:linear-gradient(180deg,#070d1a,#0a1424 55%,#070d1a) !important;
}
#content.gm-mode .guard-mobile-container::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; opacity:.7;
  background:
    radial-gradient(60% 40% at 15% 0%, rgba(57,255,20,.10), transparent 60%),
    radial-gradient(60% 45% at 100% 8%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(70% 40% at 50% 100%, rgba(167,139,250,.08), transparent 65%);
  background-size:200% 200%; animation:gmGrad 14s ease-in-out infinite; display:block !important;
}
@keyframes gmGrad{ 0%,100%{ background-position:0% 0%; } 50%{ background-position:100% 100%; } }
#content.gm-mode .gm-statusbar, #content.gm-mode .gm-header, #content.gm-mode .gm-view-wrapper, .gm-bottomnav{ position:relative; z-index:1; }

/* clock-status banner gets a subtle living sheen */
.gm-status-banner{ background-size:200% 200% !important; animation:gmGrad 10s ease-in-out infinite; }

/* Dynamic Island — clearly centered, premium */
.gm-island{ box-shadow:0 4px 16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05); }

/* Better SOS placement (clear of bottom nav, glowing) */
.gm-sos{ right:16px !important; bottom:88px !important; width:60px !important; height:60px !important; z-index:65 !important; }

/* dark-mode contrast polish */
#content.gm-mode .gm-glass-card{ box-shadow:0 16px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important; }
#content.gm-mode .gm-sec-title{ letter-spacing:.2px; }

/* ===================================================================== */
/* IDLE ALERT CONTROL — admin settings + guard idle monitor + modal       */
/* ===================================================================== */
/* admin settings card (Settings page) */
.idle-admin-tag{ font-size:11px; font-weight:800; color:#39ff14; background:rgba(57,255,20,.14); border:1px solid rgba(57,255,20,.34); padding:3px 10px; border-radius:999px; }
.idle-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.idle-field{ display:flex; flex-direction:column; gap:6px; }
.idle-field label{ color:#93a7c0; font-size:12px; font-weight:700; }
.idle-field select, .idle-field input{ padding:11px 12px; border-radius:11px; background:rgba(6,12,24,.85) !important; border:1px solid var(--sx-border) !important; color:var(--sx-text) !important; font-size:13.5px; outline:none; }
.idle-field select:focus, .idle-field input:focus{ border-color:var(--sx-border-strong) !important; }
@media (max-width:620px){ .idle-grid{ grid-template-columns:1fr; } }

/* guard mobile idle monitor card */
.gm-idle-card-box{ padding:16px !important; margin-bottom:14px; }
.gm-idle-head{ display:flex; align-items:center; justify-content:space-between; color:#fff; font-weight:800; font-size:14px; margin-bottom:12px; }
.gm-idle-state{ font-size:11px; font-weight:800; padding:4px 11px; border-radius:999px; }
.gm-idle-state.on{ color:#5cf08a; background:rgba(57,255,20,.13); border:1px solid rgba(57,255,20,.4); }
.gm-idle-state.off{ color:#9fb0c6; background:rgba(120,160,210,.12); border:1px solid var(--sx-border); }
.gm-idle-rows{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.gm-idle-rows > div{ display:flex; flex-direction:column; gap:3px; }
.gm-idle-rows .k{ color:#93a7c0; font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; }
.gm-idle-rows b{ color:#e7eef7; font-size:13.5px; font-variant-numeric:tabular-nums; }
.gm-idle-ping{ width:100%; min-height:46px; border:none; border-radius:13px; cursor:pointer; font-weight:800; font-size:14px;
  color:#04130a; background:linear-gradient(135deg,#39ff14,#16d672); box-shadow:0 10px 24px rgba(57,255,20,.28); }
.gm-idle-ping:active{ transform:scale(.97); }

/* "Are you OK?" modal (inside the phone) */
.gm-idle-modal{ position:absolute; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:22px;
  background:rgba(2,6,14,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .2s; }
.gm-idle-modal.open{ opacity:1; pointer-events:auto; }
.gm-idle-card{ width:100%; max-width:330px; text-align:center; padding:26px 22px; border-radius:24px;
  background:linear-gradient(160deg,rgba(20,33,56,.97),rgba(9,16,30,.97)); border:1px solid rgba(57,255,20,.3);
  box-shadow:0 30px 80px rgba(0,0,0,.7); animation:gmIdlePop .25s cubic-bezier(.2,1.4,.4,1); }
.gm-idle-modal.escalate .gm-idle-card{ border-color:rgba(255,90,95,.55); box-shadow:0 30px 80px rgba(255,59,59,.4); }
@keyframes gmIdlePop{ from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } }
.gm-idle-emoji{ font-size:46px; line-height:1; margin-bottom:8px; animation:gmIdlePulse 1.1s ease-in-out infinite; }
@keyframes gmIdlePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
.gm-idle-card h2{ color:#fff; margin:6px 0 8px; font-size:22px; }
.gm-idle-card p{ color:#aebfd3; font-size:13.5px; margin:0 0 14px; }
.gm-idle-count{ font-size:44px; font-weight:900; color:#39ff14; font-variant-numeric:tabular-nums; margin-bottom:16px; }
.gm-idle-modal.escalate .gm-idle-count{ color:#ff6b6f; font-size:30px; }
.gm-idle-actions{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.gm-idle-ok, .gm-idle-sos{ min-height:54px; border:none; border-radius:15px; cursor:pointer; font-weight:800; font-size:15px; }
.gm-idle-ok{ background:linear-gradient(135deg,#39ff14,#16d672); color:#04130a; }
.gm-idle-sos{ background:linear-gradient(135deg,#ff5a5f,#c81e1e); color:#fff; }
.gm-idle-ok:active, .gm-idle-sos:active{ transform:scale(.96); }

/* ===================================================================== */
/* IDLE ALERT — red fullscreen alarm + dispatch list (enterprise)         */
/* ===================================================================== */
/* alarm/red fullscreen state */
.gm-idle-modal.alarm{ background:rgba(40,4,8,.92) !important; animation:gmAlarmBg 1s steps(1) infinite; }
@keyframes gmAlarmBg{ 0%{ background:rgba(40,4,8,.92); } 50%{ background:rgba(90,8,12,.95); } }
.gm-idle-modal.alarm .gm-idle-card{ border-color:rgba(255,90,95,.7) !important; box-shadow:0 0 0 2px rgba(255,90,95,.4), 0 30px 90px rgba(255,30,40,.5) !important;
  background:linear-gradient(160deg,rgba(60,10,16,.98),rgba(30,6,10,.98)) !important; animation:gmAlarmShake .5s ease-in-out infinite; }
@keyframes gmAlarmShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
.gm-idle-modal.escalate.alarm .gm-idle-card h2{ color:#ff6b6f; letter-spacing:1px; }
.gm-idle-modal.alarm .gm-idle-count{ color:#ff6b6f; }

/* admin dispatch list */
.idle-dispatch{ margin-top:18px; border-top:1px solid var(--sx-border); padding-top:12px; }
.idle-dispatch-list{ display:flex; flex-direction:column; gap:8px; }
.idle-disp-empty{ color:#93a7c0; font-size:13px; padding:10px 2px; }
.idle-disp-row{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px;
  background:rgba(255,90,95,.07); border:1px solid rgba(255,90,95,.22); }
.idle-disp-ico{ width:34px; height:34px; flex:0 0 34px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(255,90,95,.16); font-size:16px; }
.idle-disp-row b{ display:block; color:#fff; font-size:13.5px; } .idle-disp-row small{ color:#aebfd3; font-size:11.5px; }
.idle-disp-row > div{ flex:1; min-width:0; }
.idle-disp-time{ color:#7e93ad; font-size:11px; white-space:nowrap; }

/* idle monitor: 4-field grid (Current Setting / Alert Status / Last Activity / Next Check) */
.gm-idle-rows4{ grid-template-columns:repeat(2,1fr) !important; }
.gm-idle-rows4 > div{ background:rgba(6,12,24,.4); border:1px solid var(--sx-border); border-radius:11px; padding:9px 11px; }

/* Idle Alert Control — live status panel (Admin Dashboard) */
.idle-live{ margin-top:18px; border-top:1px solid var(--sx-border); padding-top:12px; }
.idle-live-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.idle-live-grid > div{ background:rgba(6,12,24,.5); border:1px solid var(--sx-border); border-radius:12px; padding:11px 13px; display:flex; flex-direction:column; gap:4px; }
.idle-live-grid .vl{ color:#7e93ad; font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
.idle-live-grid b{ color:#e7eef7; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
@media (max-width:720px){ .idle-live-grid{ grid-template-columns:1fr 1fr; } }

/* Live Guard Location map sizing now lives ONLY at the end of style.css.
   Ancestor backdrop-filter/transform are neutralised in JS (app.js initGuardMap).
   Cosmetic-only Leaflet control theming kept here (not sizing, no conflict). */
.leaflet-control-attribution{ font-size:9px !important; background:rgba(10,20,36,.8) !important; color:#9fb0c6 !important; }
.leaflet-control-attribution a{ color:#7bd6ff !important; }
.leaflet-bar a{ background:#0c1626 !important; color:#e7eef7 !important; border-bottom-color:#2d5b89 !important; }
.leaflet-bar a:hover{ background:#13233a !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip{ background:#0c1626 !important; color:#e7eef7 !important; }