/* ==========================================================================
   Nexora EMS — Admin panel design system
   Visual redesign only. Every id/class referenced from index.php's <script>
   (metric, metric-link, metric.alert, metric-c-*, badge-open/assigned/
   progress/done/rejected, sidebar button[data-tab].active, tab-pane.active,
   loginPage/loginForm/email/password/loginError, etc.) is kept intact below
   — only look & feel changes. No selector was renamed or removed.

   Structure of this file:
     1. Design tokens   — color, type, spacing, radius, elevation scales
     2. Base            — reset, body, headings
     3. Navbar / Sidebar
     4. Page headers / Cards (generic elevation)
     5. Stat cards (Dashboard)
     6. Buttons / Forms
     7. Tables
     8. Status badges (dot style)
     9. Modals / definition lists
     10. Login (split-screen)
     11. Misc / Responsive
   ========================================================================== */

/* Respect role controls even when component display rules override UA styles. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------- */
/* 1. DESIGN TOKENS                                                        */
/* ---------------------------------------------------------------------- */
:root{
  /* --- Brand --- */
  --nx-navy:#0a2540;
  --nx-navy-2:#0f3568;
  --nx-navy-deep:#071a2e;      /* darkest ink — login panel, deep gradients */
  --nx-navy-soft:#eef2f8;
  --nx-orange:#ff6a00;
  --nx-orange-2:#ff8f3d;
  --nx-orange-soft:#fff1e6;

  /* --- Neutral ramp (proper scale, not ad hoc grays) --- */
  --nx-gray-50:#f7f8fa;
  --nx-gray-100:#eef1f5;
  --nx-gray-200:#e3e7ee;
  --nx-gray-300:#cdd4df;
  --nx-gray-400:#9aa5b4;
  --nx-gray-500:#6b7686;
  --nx-gray-600:#4a5568;
  --nx-gray-700:#334155;
  --nx-gray-800:#1c2b3a;
  --nx-gray-900:#101828;

  --nx-canvas:var(--nx-gray-50);
  --nx-border:var(--nx-gray-200);
  --nx-text:var(--nx-gray-800);
  --nx-muted:var(--nx-gray-500);

  /* --- Semantic (desaturated — ops-console clarity, not candy) --- */
  --nx-green:#0f9d58;   --nx-green-soft:#e6f7ee;
  --nx-red:#d92d20;     --nx-red-soft:#fdeceb;
  --nx-blue:#2563eb;    --nx-blue-soft:#eaf1fe;
  --nx-purple:#7c3aed;  --nx-purple-soft:#f2ebfe;
  --nx-teal:#0d9488;    --nx-teal-soft:#e6f6f5;
  --nx-amber:#d97706;   --nx-amber-soft:#fef3c7;

  /* --- Typography scale --- */
  --nx-font-display:"Sora","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nx-font-body:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nx-font-mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;

  --nx-text-xs:.75rem;      /* 12px — micro labels, table headers */
  --nx-text-sm:.8125rem;    /* 13px — form labels, small print */
  --nx-text-base:.9375rem;  /* 15px — default UI / table body */
  --nx-text-md:1.0625rem;   /* 17px — card titles */
  --nx-text-lg:1.375rem;    /* 22px — section headers (h3) */
  --nx-text-xl:1.75rem;     /* 28px — stat card numerals */
  --nx-text-2xl:2.25rem;    /* 36px — login headline */

  /* --- Spacing scale (8pt-based) --- */
  --nx-space-1:.25rem;   /* 4px  */
  --nx-space-2:.5rem;    /* 8px  */
  --nx-space-3:.75rem;   /* 12px */
  --nx-space-4:1rem;     /* 16px */
  --nx-space-5:1.25rem;  /* 20px */
  --nx-space-6:1.5rem;   /* 24px */
  --nx-space-8:2rem;     /* 32px */
  --nx-space-10:2.5rem;  /* 40px */
  --nx-space-12:3rem;    /* 48px */

  /* --- Radius scale --- */
  --nx-radius-sm:10px;
  --nx-radius:14px;
  --nx-radius-lg:20px;
  --nx-radius-full:999px;

  /* --- Elevation scale — navy-tinted, not flat black, for a more
         considered depth than a default box-shadow gray --- */
  --nx-shadow-1:0 1px 2px rgba(10,37,64,.06), 0 1px 1px rgba(10,37,64,.04);
  --nx-shadow-2:0 8px 20px rgba(10,37,64,.09), 0 2px 6px rgba(10,37,64,.06);
  --nx-shadow-3:0 20px 48px rgba(10,37,64,.18), 0 8px 20px rgba(10,37,64,.1);
  --nx-shadow-focus:0 0 0 .2rem rgba(255,106,0,.16);

  --nx-ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------------------------------------------------------------------- */
/* 2. BASE                                                                 */
/* ---------------------------------------------------------------------- */
*{box-sizing:border-box}

body{
  background:var(--nx-canvas);
  color:var(--nx-text);
  font-family:var(--nx-font-body);
  font-size:var(--nx-text-base);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--nx-font-display);
  font-weight:700;
  color:var(--nx-navy);
  letter-spacing:-.015em;
}
h3{font-size:var(--nx-text-lg)}

/* ---------------------------------------------------------------------- */
/* 3. NAVBAR / SIDEBAR                                                     */
/* ---------------------------------------------------------------------- */
.navbar{
  background:linear-gradient(115deg,#fff 0%,#f0f6ff 55%,#e2edf9 100%);
  color:var(--nx-navy);
  border-bottom:1px solid #d5e1ef;
  box-shadow:var(--nx-shadow-2);
  padding-top:.65rem;
  padding-bottom:.65rem;
  position:sticky;top:0;z-index:1030;
}
.navbar small{font-family:var(--nx-font-mono);font-size:.58rem;letter-spacing:.16em;opacity:.75;font-weight:600}
.navbar .brand-logo{height:34px;filter:none}
.navbar .navbar-brand{color:var(--nx-navy)}
.navbar>.d-flex{flex-wrap:wrap;row-gap:.5rem !important}
.navbar-brand span{font-family:var(--nx-font-display);font-weight:700;letter-spacing:.01em}
.user-chip{
  background:rgba(255,255,255,.75);
  border:1px solid #cbd9e9;
  border-radius:var(--nx-radius-full);
  padding:.3rem .8rem .3rem .55rem;
}
.user-chip i{font-size:1.15rem;opacity:.9}
#userName{font-size:.88rem;font-weight:600}
#logout{
  border-radius:var(--nx-radius-full);
  font-weight:600;
  padding:.35rem 1rem;
  transition:background .15s var(--nx-ease),transform .15s var(--nx-ease);
}
#logout:hover{transform:translateY(-1px)}

.container-fluid{padding-left:0;padding-right:0}
.sidebar{
  min-height:calc(100vh - 64px);
  background:#fff;
  border-right:1px solid var(--nx-border);
  padding-left:0 !important;
  padding-right:0 !important;
}
.sidebar-heading{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--nx-gray-400);
  text-transform:uppercase;
  padding:var(--nx-space-2) var(--nx-space-6) .6rem;
}
.sidebar-nav{display:flex;flex-direction:column;gap:.2rem;padding:0 var(--nx-space-3)}
.sidebar-group{padding:0 0 .55rem;margin:0 0 .35rem;border-bottom:1px solid #edf1f6}
.sidebar-group:last-child{border-bottom:0;margin-bottom:0}
.sidebar-group-title{font-family:var(--nx-font-body);font-size:.67rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#65758a;margin:.6rem .75rem .35rem}
.sidebar .sidebar-group button{padding:.44rem .75rem;font-size:.87rem;min-height:38px}
.sidebar button:focus-visible{outline:2px solid #235dad;outline-offset:-2px}
.sidebar button{
  display:flex;
  align-items:center;
  gap:.7rem;
  border:0;
  background:transparent;
  text-align:left;
  padding:.62rem var(--nx-space-3);
  border-radius:var(--nx-radius-sm);
  width:100%;
  color:var(--nx-gray-700);
  font-weight:500;
  font-size:.93rem;
  position:relative;
  transition:background .15s var(--nx-ease),color .15s var(--nx-ease);
}
.sidebar button i{font-size:1.05rem;width:1.3rem;text-align:center;color:var(--nx-gray-400);transition:color .15s var(--nx-ease)}
.sidebar button.active,.sidebar button:hover{background:var(--nx-orange-soft);color:var(--nx-orange)}
.sidebar button.active i,.sidebar button:hover i{color:var(--nx-orange)}
.sidebar button.active{font-weight:700}
.sidebar button.active::before{
  content:"";
  position:absolute;left:-.75rem;top:.35rem;bottom:.35rem;width:3px;
  background:var(--nx-orange);border-radius:0 3px 3px 0;
}
.sidebar-footer{padding:var(--nx-space-4) var(--nx-space-6);color:var(--nx-gray-300);font-size:.72rem;border-top:1px solid var(--nx-border);margin-top:var(--nx-space-4)}

/* Small count badge on a sidebar nav item — currently only Follow-ups
   (overdue + due-today count), set/hidden from JS (see loadFollowUps). */
.nav-badge{
  margin-left:auto;
  background:var(--nx-red);
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  line-height:1;
  padding:.22em .5em;
  border-radius:999px;
}

/* Navbar notification bell — same small red count-pill idea as .nav-badge
   above, but absolutely positioned over an icon-only button rather than
   inline after a label, so it's its own class instead of reusing
   .nav-badge's layout assumptions. Deliberately NOT the Bootstrap .badge
   class — this file redefines .badge globally (see the inline <style> in
   index.php) into a dot-style status indicator, which would make an actual
   unread count unreadable. */
#notifBellBtn{position:relative}
.notif-badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--nx-red);color:#fff;
  font-size:.65rem;font-weight:700;line-height:1;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
}
.notif-dropdown{width:360px;max-height:420px;overflow-y:auto}
.notif-item{padding:.6rem .9rem;border-bottom:1px solid var(--nx-border);font-size:.85rem;white-space:normal}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:var(--nx-orange-soft)}
.notif-item .notif-title{font-weight:600;color:var(--nx-navy);display:flex;align-items:center;gap:.4rem}
.notif-item .notif-body{color:var(--nx-gray-600,#5b6472);margin-top:.1rem}
.notif-item .notif-time{color:var(--nx-muted);font-size:.75rem;margin-top:.25rem}
.notif-empty{padding:1.5rem;text-align:center;color:var(--nx-muted);font-size:.85rem}

main.col-lg-10{padding-top:var(--nx-space-6) !important;padding-bottom:var(--nx-space-10) !important}

/* ---------------------------------------------------------------------- */
/* 4. PAGE HEADERS / CARDS                                                 */
/* ---------------------------------------------------------------------- */
.page-header h3{margin-bottom:.15rem}
.page-subtitle{color:var(--nx-muted);font-size:.87rem;margin-bottom:0}

.card{
  border:1px solid var(--nx-border);
  border-radius:var(--nx-radius);
  box-shadow:var(--nx-shadow-1);
  transition:box-shadow .2s var(--nx-ease);
}
.card-header{
  background:#fbfcfe;
  border-bottom:1px solid var(--nx-border);
  font-family:var(--nx-font-display);
  font-weight:700;
  color:var(--nx-navy);
  border-top-left-radius:var(--nx-radius) !important;
  border-top-right-radius:var(--nx-radius) !important;
}
.card-footer{
  background:#fbfcfe;
  border-top:1px solid var(--nx-border);
  border-bottom-left-radius:var(--nx-radius) !important;
  border-bottom-right-radius:var(--nx-radius) !important;
}

/* ---------------------------------------------------------------------- */
/* 5. STAT CARDS (Dashboard) — restyled                                    */
/* ---------------------------------------------------------------------- */
/* Icon moves to a solid brand-tinted rounded chip (was a large pale swatch),
   the numeral goes tabular-mono (this product's whole job is turning GPS
   telemetry into numbers admin can trust — the stat cards are where that
   should feel most literal), and elevation does real work: resting cards
   sit nearly flat, hover lifts them onto shadow-2 with a deliberate
   translate, so "this is clickable" reads through touch, not just color. */
.metric{
  border:1px solid var(--nx-border);
  border-left:0;
  padding:var(--nx-space-5) var(--nx-space-5);
  display:flex;
  align-items:center;
  gap:var(--nx-space-4);
  border-radius:var(--nx-radius);
  position:relative;
  overflow:hidden;
}
.metric::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--nx-orange);
  opacity:.9;
}
.metric-icon{
  flex:0 0 auto;
  width:46px;height:46px;
  border-radius:13px;
  display:grid;place-items:center;
  background:var(--nx-navy);
  color:#fff;
  font-size:1.2rem;
  box-shadow:0 4px 10px rgba(10,37,64,.22);
}
.metric-text{display:flex;flex-direction:column;min-width:0;gap:.15rem}
.metric-label{display:block;color:var(--nx-muted);font-size:.8rem;font-weight:600;letter-spacing:.01em}
.metric strong{
  display:block;
  font-family:var(--nx-font-mono);
  font-size:var(--nx-text-xl);
  line-height:1.15;
  color:var(--nx-navy);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.metric.alert::before{background:var(--nx-red)}
.metric.alert strong{color:var(--nx-red)}
.metric.alert .metric-icon{background:var(--nx-red);box-shadow:0 4px 10px rgba(217,45,32,.28)}

.metric-link{width:100%;text-align:left;background:#fff;cursor:pointer;transition:box-shadow .2s var(--nx-ease),transform .2s var(--nx-ease),border-color .2s var(--nx-ease)}
.metric-link:hover{box-shadow:var(--nx-shadow-2);transform:translateY(-3px);border-color:var(--nx-gray-300)}
.metric-link:focus-visible{outline:2px solid var(--nx-orange);outline-offset:2px}

.metric-c-green .metric-icon{background:var(--nx-green)}
.metric-c-orange .metric-icon{background:var(--nx-orange)}
.metric-c-blue .metric-icon{background:var(--nx-blue)}
.metric-c-purple .metric-icon{background:var(--nx-purple)}
.metric-c-teal .metric-icon{background:var(--nx-teal)}
.metric-c-navy .metric-icon{background:var(--nx-navy)}

.dash-group-label{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--nx-gray-400);margin:var(--nx-space-8) 0 var(--nx-space-3);
}
.dash-group-label:first-of-type{margin-top:0}

/* ---------------------------------------------------------------------- */
/* 6. BUTTONS / FORMS                                                      */
/* ---------------------------------------------------------------------- */
.btn{border-radius:9px;font-weight:600;font-size:.89rem;transition:background .15s var(--nx-ease),border-color .15s var(--nx-ease),box-shadow .15s var(--nx-ease),transform .15s var(--nx-ease)}
.btn-primary{background:var(--nx-orange);border-color:var(--nx-orange);box-shadow:0 2px 8px rgba(255,106,0,.3)}
.btn-primary:hover{background:#ea6000;border-color:#ea6000;box-shadow:0 4px 12px rgba(255,106,0,.36)}
.btn-primary:focus,.btn-primary:active{background:#ea6000 !important;border-color:#ea6000 !important}
.btn-outline-secondary{color:var(--nx-gray-600);border-color:var(--nx-border)}
.btn-outline-secondary:hover{background:var(--nx-navy);border-color:var(--nx-navy)}
.btn-outline-light{border-color:rgba(255,255,255,.55)}
.btn-outline-light:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7)}

#employeeFilterGroup .btn{border-radius:var(--nx-radius-full) !important;margin-right:.35rem}
#employeeFilterGroup .btn:last-child{margin-right:0}
#employeeFilterGroup .btn.active{background:var(--nx-orange);border-color:var(--nx-orange);color:#fff}

.form-control,.form-select{
  border-radius:9px;
  border-color:var(--nx-border);
  font-size:.9rem;
}
.form-control:focus,.form-select:focus{
  border-color:var(--nx-orange);
  box-shadow:var(--nx-shadow-focus);
}
.form-label{font-weight:600;color:var(--nx-gray-700);font-size:.86rem}
.form-text{color:var(--nx-muted);font-size:.79rem}
.form-control-sm,.form-select-sm{border-radius:8px}

/* ---------------------------------------------------------------------- */
/* 7. TABLES                                                               */
/* ---------------------------------------------------------------------- */
.table{margin-bottom:0;color:var(--nx-text)}
.table thead th{
  background:#fbfcfe;
  color:var(--nx-gray-600);
  font-size:var(--nx-text-xs);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-bottom:1px solid var(--nx-border);
  padding:.85rem 1rem;
  white-space:nowrap;
}
.table tbody td{padding:.8rem 1rem;vertical-align:middle;border-color:var(--nx-border);font-size:var(--nx-text-base)}
.table tbody tr{transition:background .12s var(--nx-ease)}
.table tbody tr:hover{background:var(--nx-gray-50)}
.table-sm td,.table-sm th{padding:.5rem .75rem}

/* ---------------------------------------------------------------------- */
/* 7b. REPORTS — segmented sub-navigation                                  */
/* ---------------------------------------------------------------------- */
/* Four report tables plus a chart used to sit stacked in one long scroll.
   This groups them behind a pill sub-nav (same interaction language as the
   sidebar) so only one report is ever on screen at a time, and adds a
   one-glance KPI row on the Overview pane, summed client-side from the
   same rows the tables below already render — no new endpoints. */
.report-nav{
  display:inline-flex;flex-wrap:wrap;gap:.25rem;
  background:#fff;border:1px solid var(--nx-border);border-radius:var(--nx-radius-full);
  padding:.3rem;margin-bottom:var(--nx-space-5);
  box-shadow:var(--nx-shadow-1);
}
.report-nav-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  border:0;background:transparent;
  padding:.5rem 1.05rem;border-radius:var(--nx-radius-full);
  font-weight:600;font-size:.84rem;color:var(--nx-gray-600);
  cursor:pointer;white-space:nowrap;
  transition:background .15s var(--nx-ease),color .15s var(--nx-ease);
}
.report-nav-btn i{font-size:.92rem;color:var(--nx-gray-400);transition:color .15s var(--nx-ease)}
.report-nav-btn:hover{background:var(--nx-gray-50);color:var(--nx-navy)}
.report-nav-btn.active{background:var(--nx-navy);color:#fff;box-shadow:var(--nx-shadow-1)}
.report-nav-btn.active i{color:var(--nx-orange-2)}

.report-pane{display:none}
.report-pane.active{display:block;animation:nx-fade .18s var(--nx-ease)}

.report-kpi .metric{padding:var(--nx-space-4) var(--nx-space-5)}
.report-kpi .metric strong{font-size:1.5rem}

.map-pin-link{color:var(--nx-blue);margin-left:.3rem;text-decoration:none}
.map-pin-link:hover{color:var(--nx-navy)}
.report-cross-link{color:var(--nx-orange);font-weight:600;text-decoration:none}
.report-cross-link:hover{text-decoration:underline}

/* ---------------------------------------------------------------------- */
/* 8. STATUS BADGES — dot style                                            */
/* ---------------------------------------------------------------------- */
/* Was a solid-fill pill; ops dashboards (the console this genuinely is)
   read status faster as a small coloured dot + plain-weight label than as
   a block of background colour repeated down a whole column — a page of
   pills competes with itself for attention, a page of dots doesn't. */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.42em;
  background:transparent;
  color:var(--nx-gray-700);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.01em;
  padding:0;
  border-radius:0;
}
.badge::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  flex:0 0 auto;
  background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}
.badge.badge-open{color:var(--nx-gray-500)}
.badge.badge-assigned{color:var(--nx-blue)}
.badge.badge-progress{color:var(--nx-amber)}
.badge.badge-done{color:var(--nx-green)}
.badge.badge-rejected{color:var(--nx-red)}

/* ---------------------------------------------------------------------- */
/* 9. MODALS / DEFINITION LISTS                                            */
/* ---------------------------------------------------------------------- */
dl.row dt{color:var(--nx-muted);font-weight:600;font-size:.79rem;text-transform:uppercase;letter-spacing:.03em;padding:.5rem 0;border-bottom:1px solid var(--nx-border)}
dl.row dd{font-size:.9rem;padding:.5rem 0;border-bottom:1px solid var(--nx-border);color:var(--nx-text)}

.text-orange{color:var(--nx-orange) !important}

.modal-section-label{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--nx-gray-400);margin:1.1rem 0 .5rem;
}
.modal-section-label:first-child{margin-top:0}

.modal-content{border:0;border-radius:var(--nx-radius-lg);box-shadow:var(--nx-shadow-3)}
.modal-header{border-bottom:1px solid var(--nx-border);padding:1.15rem 1.4rem}
.modal-header .modal-title{font-family:var(--nx-font-display);font-weight:700;color:var(--nx-navy)}
.modal-body{padding:1.4rem}
.modal-footer{border-top:1px solid var(--nx-border);padding:1rem 1.4rem}

/* ---------------------------------------------------------------------- */
/* 10. LOGIN — split-screen SaaS layout                                    */
/* ---------------------------------------------------------------------- */
/* #loginPage/#loginForm/#email/#password/#loginError are the exact ids
   auth JS already reads and writes — untouched. Only the surrounding
   layout changed: a fixed two-column grid (brand story left, form right)
   on desktop, collapsing to a single column (brand panel becomes a short
   header strip) on narrow screens. */
.login-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
}

.login-brand{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,106,0,.22), transparent 44%),
    linear-gradient(155deg,var(--nx-navy-deep) 0%,var(--nx-navy) 55%,var(--nx-navy-2) 100%);
  color:#fff;
  padding:var(--nx-space-10) var(--nx-space-10);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.login-brand::before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.5px);
  background-size:22px 22px;
  opacity:.5;
  pointer-events:none;
}
.login-route{
  position:absolute;right:-8%;bottom:-6%;width:120%;height:65%;
  opacity:.9;
  pointer-events:none;
}
.login-route .path{
  fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round;
}
.login-route .pin{fill:var(--nx-orange)}
.login-route .pin-ring{
  fill:none;stroke:var(--nx-orange);stroke-width:1.4;opacity:.55;
  transform-origin:center;
  animation:nx-pulse 2.6s var(--nx-ease) infinite;
}
@keyframes nx-pulse{
  0%{transform:scale(.65);opacity:.6}
  70%{transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .login-route .pin-ring{animation:none;opacity:.3}
}

.login-brand-top{position:relative;z-index:1;display:flex;align-items:center;gap:.65rem}
.login-brand-top img{height:32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.login-brand-top span{font-family:var(--nx-font-display);font-weight:700;font-size:1.05rem;letter-spacing:.01em}
.login-brand-mark{background:#fff;border-radius:9px;padding:.32rem .42rem;display:inline-flex;box-shadow:var(--nx-shadow-1)}
.login-brand-mark img{height:22px;filter:none}

.login-brand-copy{position:relative;z-index:1;max-width:420px}
.login-brand-copy h1{
  font-family:var(--nx-font-display);
  color:#fff;
  font-size:var(--nx-text-2xl);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.02em;
  margin-bottom:var(--nx-space-4);
}
.login-brand-copy p{color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.6;margin-bottom:var(--nx-space-6)}
.login-brand-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--nx-space-3)}
.login-brand-features li{display:flex;align-items:center;gap:.65rem;font-size:.87rem;color:rgba(255,255,255,.85)}
.login-brand-features i{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.1);
  color:var(--nx-orange-2);
  font-size:.85rem;
}

.login-brand-foot{position:relative;z-index:1;color:rgba(255,255,255,.4);font-size:.72rem;letter-spacing:.02em}

.login-form-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--nx-canvas);
  padding:var(--nx-space-6);
}
.login-card{
  width:min(400px,100%);
  border:1px solid var(--nx-border);
  border-radius:var(--nx-radius-lg);
  box-shadow:var(--nx-shadow-2);
  padding:var(--nx-space-10) var(--nx-space-8) !important;
  background:#fff;
}
.login-card img{max-width:170px;margin:0 auto var(--nx-space-2);display:block}
.login-card h2{
  font-family:var(--nx-font-display);
  font-size:1.3rem;
  text-align:center;
  margin-bottom:.2rem;
}
.login-card .btn-primary{padding:.65rem 0;font-size:.95rem;margin-top:.25rem}
.login-card .form-label{font-size:.83rem}
.login-card .input-group-text{background:#fff}

@media (max-width:900px){
  .login-page{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .login-brand{padding:var(--nx-space-6) var(--nx-space-6) var(--nx-space-8)}
  .login-brand-copy{max-width:none}
  .login-brand-copy h1{font-size:1.5rem}
  .login-brand-features{display:none}
  .login-route{display:none}
  .login-form-panel{padding:var(--nx-space-6) var(--nx-space-4) var(--nx-space-10)}
}

/* ---------------------------------------------------------------------- */
/* 11. MISC / TAB PANES / RESPONSIVE                                       */
/* ---------------------------------------------------------------------- */
.app-shell{display:none}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:nx-fade .18s var(--nx-ease)}
@keyframes nx-fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.remark-cell{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#dayTrackMap{border-radius:0 0 var(--nx-radius) var(--nx-radius);overflow:hidden}
.card > #dayTrackMap:first-child{border-radius:var(--nx-radius) var(--nx-radius) 0 0}

@media (max-width: 991.98px){
  /* Below Bootstrap's lg breakpoint (which is now where the sidebar/main
     two-column split kicks in — see col-lg-2/col-lg-10 in index.php) both
     phones AND portrait tablets get the same compact top nav instead of a
     cramped vertical sidebar squeezed into a fraction of a narrow screen. */
  .sidebar{min-height:auto;border-right:0;border-bottom:1px solid var(--nx-border);padding-top:.6rem !important;padding-bottom:.4rem !important}
  .sidebar-nav{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:.35rem .75rem;gap:.75rem;align-items:flex-start}
  .sidebar-group{flex:0 0 auto;display:flex;flex-wrap:wrap;max-width:260px;gap:.2rem;border-bottom:0;border-right:1px solid var(--nx-border);padding-right:.75rem}
  .sidebar-group-title{flex-basis:100%;margin:.2rem .5rem .3rem}
  .sidebar-group button{width:auto}
  .sidebar-nav::-webkit-scrollbar{height:0}
  .sidebar button{flex:0 0 auto;white-space:nowrap;padding:.5rem .7rem;font-size:.85rem}
  .sidebar button.active::before{display:none}
  .sidebar-heading,.sidebar-footer{display:none}
  main.col-lg-10{padding-top:var(--nx-space-4) !important}

  /* Report sub-nav: wrapping to a second/third line eats vertical space on
     a phone/tablet in portrait — scroll it horizontally instead, same
     pattern as the sidebar above. */
  .report-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .report-nav::-webkit-scrollbar{height:0}
  .report-nav-btn{flex:0 0 auto}

  /* The day-tracking Leaflet map defaults to a desktop-sized 480px — plenty
     tall on a phone/tablet screen where it pushes the stats panel far below
     the fold for no benefit. */
  #dayTrackMap{height:340px}
}

@media (max-width: 575.98px){
  body{font-size:.9rem}
  .navbar-brand span{font-size:.92rem}
  .navbar small{display:none} /* "EMS" subtitle — the wordmark alone is enough at this width */
  .user-chip #userName{display:none} /* keep the person icon for context, drop the name text */
  .metric strong{font-size:1.7rem}
  .card-body{padding:var(--nx-space-4)}
  .modal-body{padding:var(--nx-space-4)}
  .modal-header,.modal-footer{padding:.85rem var(--nx-space-4)}
  .btn{font-size:.85rem}
  .page-header .btn,.page-header form{width:100%}
  .page-header form .form-control,.page-header form .form-select{flex:1 1 auto}

  /* Filter/search controls throughout the tabs (client search, visit
     search, status selects, employee pickers) are given fixed pixel
     widths via inline style="width:...px" so they sit compactly next to
     each other on a full-size screen — on a narrow phone that fixed width
     can be a large fraction of the viewport and looks cramped stacked in
     a flex-wrap row. Loosening it back to 100% here doesn't require
     touching every one of those inline styles individually. */
  [style*="width:260px"],[style*="width:220px"],[style*="width:210px"]{width:100% !important;max-width:100% !important}
}

/* ---------- Large / ultra-wide screens ---------- */
@media (min-width: 1600px){
  /* Past ~1600px a full-bleed admin layout starts looking like it's
     stretching content rather than using space well — cap it and center,
     the way most SaaS dashboards do on large monitors, without touching
     anything below this width. */
  main.col-lg-10{max-width:1500px;margin:0 auto;float:none}
}