/**
 * "Classic dispatch software" theme -- deliberately mimics the dense,
 * toolbar/menu/tab/status-bar chrome of traditional Windows-desktop cab
 * office software (own colors/icons/markup throughout; no copied assets),
 * so operators already used to that kind of tool feel at home immediately.
 */
:root{
  --menubar-bg:#2f3a56;
  --menubar-fg:#e8eaf3;
  --toolbar-bg:#eef0f4;
  --toolbar-border:#c7cbd6;
  --banner-bg:#f3e8fb;
  --banner-fg:#7a2e8c;
  --tab-bg:#dde1ea;
  --tab-active-bg:#ffffff;
  --tab-border:#b9bfcd;
  --grid-header-bg:#e6e9f0;
  --grid-border:#c9cedb;
  --grid-hover:#eaf2fd;
  --grid-selected:#cfe4fb;
  --statusbar-bg:#1c2333;
  --statusbar-fg:#d7dbe6;
  --ok-color:#1e8e3e;
  --bg:#f2f3f7;
  --brand:#2f3a56;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  font-family:Tahoma,'Segoe UI',Verdana,Arial,sans-serif;
  font-size:12.5px;
  font-weight:500;
  color:#1f2430;
  margin:0;
}
.cms-shell{display:flex;flex-direction:column;min-height:100vh}

/* ---- Menu bar (File / Reports / Management / ...) ---- */
.menubar{
  display:flex;align-items:center;gap:2px;
  background:var(--menubar-bg);color:var(--menubar-fg);
  padding:0 8px;height:26px;flex-shrink:0;
}
.menubar-brand{font-weight:800;font-size:12px;margin-right:12px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.menubar-brand i{color:#ffd166}
.menubar-nav{display:flex;align-items:center;gap:2px;flex:1}
.menu-item{position:relative}
.menu-item>.menu-label,.menu-item>.dropdown-toggle{
  display:inline-block;padding:5px 9px;font-size:12px;font-weight:600;color:var(--menubar-fg);line-height:16px;
  cursor:pointer;background:none;border:none;text-decoration:none;
}
.menu-item>.dropdown-toggle::after{display:none}
.menu-item>.menu-label.disabled{opacity:.5;cursor:default}
.menu-item:hover>.menu-label:not(.disabled),.menu-item:hover>.dropdown-toggle{background:#44507a;color:#fff}
.menubar .dropdown-menu{font-size:12px;font-weight:500;border-radius:2px;border-color:#b9bfcd;padding:4px 0}
.menubar .dropdown-item{padding:4px 14px}
.menubar-user{font-size:11.5px;font-weight:700;white-space:nowrap;padding-left:10px}

/* ---- Toolbar ---- */
.toolbar{
  display:flex;align-items:center;gap:4px;
  background:linear-gradient(#fbfcfe,var(--toolbar-bg));
  border-bottom:1px solid var(--toolbar-border);
  padding:2px 8px;flex-shrink:0;
}
.tool-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:50px;height:34px;border:1px solid transparent;border-radius:3px;
  background:none;color:#2f3a56;text-decoration:none;font-size:9.5px;font-weight:700;gap:1px;line-height:1.1;
}
.tool-btn i{font-size:13px}
.tool-btn:hover{background:#dfe6f5;border-color:#b6c6e6}
.tool-btn.disabled{opacity:.4;pointer-events:none}
.toolbar-sep{width:1px;align-self:stretch;background:var(--toolbar-border);margin:2px 6px}
.toolbar-clock{margin-left:auto;font-weight:800;font-size:13px;color:#2f3a56;padding-right:6px;white-space:nowrap}

/* ---- Live info banner ---- */
.info-banner{
  background:var(--banner-bg);color:var(--banner-fg);
  font-weight:700;font-size:11.5px;padding:2px 10px;
  border-bottom:1px solid #e4cdf2;white-space:nowrap;overflow-x:auto;flex-shrink:0;
}
.info-banner .sep{margin:0 10px;color:#c9a6da}

/* ---- Tab navigation ---- */
.tab-nav{display:flex;align-items:flex-end;gap:2px;background:var(--tab-bg);
  border-bottom:1px solid var(--tab-border);padding:3px 8px 0;flex-shrink:0;flex-wrap:wrap}
.tab-nav .tab{
  display:inline-block;padding:3px 12px;font-size:12px;font-weight:700;color:#2a3150;
  background:#cfd4e0;border:1px solid var(--tab-border);border-bottom:none;
  border-radius:3px 3px 0 0;text-decoration:none;
}
.tab-nav .tab .fkey{font-weight:600;color:#566070;font-size:10.5px}
.tab-nav .tab:hover:not(.disabled){background:#e7ebf3}
.tab-nav .tab.active{background:var(--tab-active-bg);color:#111827;border-bottom:1px solid var(--tab-active-bg);position:relative;top:1px}
.tab-nav .tab.disabled{opacity:.5;cursor:default;pointer-events:none}

.content{padding:10px 14px;flex:1;background:var(--tab-active-bg)}

/* ---- Auto-hide chrome toggle (Cab Booking / Edit Job Details screens) ----
   .cms-chrome wraps the menubar/toolbar/info-banner/tab-nav together so they
   collapse/expand as one unit; .cms-chrome-toggle is a small always-visible
   tab that flips it back open, so hiding the chrome is never a dead end. */
.cms-chrome-collapsed{display:none}
.cms-chrome-toggle{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:14px;padding:0;
  background:var(--toolbar-bg);border:none;border-bottom:1px solid var(--toolbar-border);
  color:#6b7280;font-size:10px;cursor:pointer;line-height:1;
}
.cms-chrome-toggle:hover{background:#e2e6ee;color:#2f3a56}
.cms-chrome-toggle-collapsed{background:#eef0f4}

/* ---- Panels (replace old rounded card look with square Windows-forms panel) ---- */
.card-panel{background:#fff;border:1px solid var(--grid-border);border-radius:2px}
.panel-title{background:var(--grid-header-bg);border-bottom:1px solid var(--grid-border);
  padding:6px 10px;font-weight:700;font-size:12px}

/* ---- Dense data grid look for every .table ---- */
.table{font-size:12px;margin-bottom:0}
.table thead th{
  background:var(--grid-header-bg);color:#2b3350;border:1px solid var(--grid-border) !important;
  font-size:11.5px;text-transform:none;font-weight:700;padding:5px 8px;white-space:nowrap;
}
.table tbody td{border:1px solid var(--grid-border) !important;padding:4px 8px;vertical-align:middle}
.table tbody tr:nth-child(even){background:#f7f8fb}
.table-hover tbody tr:hover{background:var(--grid-hover) !important}
.table tbody tr.row-selected{background:var(--grid-selected) !important}

/* ---- Compact stat tiles used on the dashboard ---- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;
  background:var(--grid-border);border:1px solid var(--grid-border)}
.stat-tile{background:#fff;padding:10px 12px;display:block;text-decoration:none}
.stat-tile .stat-value{font-size:22px;font-weight:700;color:#2f3a56;line-height:1.1}
.stat-tile .stat-label{font-size:10.5px;color:#6b7280;text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
a.stat-tile:hover{background:var(--grid-hover,#eaf2fd);text-decoration:none}
a.stat-tile:hover .stat-value{color:var(--brand,#2f3a56)}

/* ---- Status bar (bottom) ---- */
.status-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--statusbar-bg);color:var(--statusbar-fg);
  font-size:11px;padding:4px 12px;flex-shrink:0;
}
.status-bar .sep{color:#4a5570}
.status-pill{display:inline-flex;align-items:center;gap:5px}
.status-pill i{font-size:10px}
.status-pill.ok{color:#7CE38B}
.status-bar .status-right{margin-left:auto;color:#9aa4c0}

/* ---- Login screen (kept separate, not part of the classic shell) ---- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2f3a56,#0d6efd)}
.auth-card{background:#fff;border-radius:12px;padding:36px;max-width:400px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.25)}

.perm-matrix td, .perm-matrix th{text-align:center;vertical-align:middle}
.perm-matrix th.module-label{text-align:left}

@media (max-width:900px){
  .menubar-nav{overflow-x:auto}
  .toolbar{overflow-x:auto}
  .tab-nav{overflow-x:auto;flex-wrap:nowrap}
}

/* ---- Grid density (View menu > Display Settings) ---- */
body.grid-compact .table > :not(caption) > * > *{padding-top:2px !important;padding-bottom:2px !important;font-size:11px}
body.grid-compact .card-panel{padding:8px !important}
body.grid-compact .panel-title{margin-bottom:4px !important}

/* ---- Reports: printer-friendly output (View menu > Reports) ---- */
@media print{
  .menubar,.toolbar,.info-banner,.tab-nav,.no-print{display:none !important}
  main.content{padding:0 !important}
  body{background:#fff !important}
  .card-panel{border:none !important;box-shadow:none !important}
}
.report-print-header{display:none}
@media print{
  .report-print-header{display:block;margin-bottom:12px}
}

/* ---- Dispatch Screen right-click context menus (OnBoard / Waiting / On-Plot / Jobs Grid) ---- */
.cms-context-menu{
  display:none;position:fixed;z-index:2000;min-width:210px;
  background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:4px;
  box-shadow:0 4px 18px rgba(0,0,0,.22);padding:4px 0;margin:0;list-style:none;
  font-size:12.5px;color:#212529;
}
.cms-context-menu li{
  padding:6px 14px;white-space:nowrap;cursor:pointer;position:relative;
  display:flex;align-items:center;gap:8px;
}
.cms-context-menu li:hover{background:#e9f1ff;color:#0d47a1}
.cms-context-menu li i.fa-fw{width:14px;color:#6c757d;flex-shrink:0}
.cms-context-menu li:hover i.fa-fw{color:#0d47a1}
.cms-context-menu-sep{height:1px !important;margin:4px 0 !important;padding:0 !important;background:rgba(0,0,0,.1);cursor:default !important}
.cms-context-menu-sep:hover{background:rgba(0,0,0,.1) !important}
.cms-context-submenu-parent{justify-content:space-between}
.cms-context-caret{margin-left:auto;font-size:10px;color:#adb5bd}
.cms-context-submenu{
  display:none;position:absolute;top:-5px;left:100%;
  min-width:220px;
}
.cms-context-menu li label{cursor:pointer;width:100%}
.cms-context-menu li label input{margin:0}

/* ---- Jobs Grid lifecycle colour-coding (Dispatch Screen) ----
   These are CSS fallbacks only -- dispatch.js sets an inline background from
   Configuration > Desktop Color Setting > Job Status Color (job_status_colors(),
   helpers/functions.php) when the office has configured that state, falling
   back to these defaults otherwise. See jobStatusKey()/jobRowBackground() in
   public/assets/js/dispatch.js for exactly how a job resolves to one state:
   waiting: plenty of time before pickup and not yet dispatched
   due: pickup within JOBS_GRID_DUE_MINUTES and not yet dispatched
   soon: pickup within JOBS_GRID_SOON_MINUTES (beyond "due") and not yet dispatched
   late: pickup time has passed and it's still not dispatched
   dispatched: offered/accepted (assigned to a driver, not yet under way)
   en-route: driver_en_route/arrived/passenger_on_board/in_progress
   completed: completed
   cancelled: cancelled/no_show/rejected/expired/archived/deleted

   BUG FIX (round 1): .jobrow-waiting used to be plain white (#ffffff) with no
   !important, so (a) it was visually indistinguishable from an unstyled row
   and (b) Bootstrap's .table-hover "tbody tr:hover{background:...!important}"
   rule silently beat it the instant the mouse moved over it -- this is what
   the client meant by "it comes on the job panel with a green color...I need
   to see these colors...but I don't see it working". A freshly booked job
   (plenty of time before pickup) is meant to read as green by default, like
   the legacy app, so the fallback is now a pale green and carries the same
   !important every other state already had. .jobrow-due now shares that same
   green background (see job_status_colors()'s doc comment in
   helpers/functions.php for why -- "Due Job Fore Color" is a TEXT colour,
   not a background) and only its default TEXT colour differs, matching Due
   Job Fore Color's own screenshot default of FF0000.

   BUG FIX (round 2): Bootstrap 5.3's own ".table" base rule is ".table >
   :not(caption) > * > *{background-color:var(--bs-table-bg);box-shadow:inset
   0 0 0 9999px var(--bs-table-bg-state, ..., var(--bs-table-accent-bg))}" --
   i.e. it paints an OPAQUE background (var(--bs-table-bg), which defaults to
   var(--bs-body-bg), plain white) directly on every <td>/<th> cell, not on
   the <tr>. A <td>'s own box always paints on top of its parent <tr>'s box,
   so any background that used to be set on the whole <tr> was invisible
   underneath each cell's own white background -- this is why the row classes/
   colours looked entirely correct in code review yet the grid still rendered
   plain white end to end, until the colour was moved onto the cell itself
   (see round 3 below).

   ROUND 3 (client ask: don't tint the whole row -- colour just the "#"
   serial-number cell, and blink it instead of a solid fill): dispatch.js no
   longer puts a background on the <tr> at all, only a small "jobsgrid-serial"
   class + "--serial-bg" custom property on that one <td> (see
   renderJobsGrid()). This is what actually paints and blinks it -- an on/off
   (not fade) blink, like a classic dispatch-board indicator light, using
   "steps()" so it snaps between the state colour and transparent rather than
   easing between them. No !important is needed: CSS animations already take
   priority over Bootstrap's own un-important "background-color:var(--bs-
   table-bg)" cell rule. */
#jobsGridBody td.jobsgrid-serial{
  animation:jobsgrid-serial-blink 1s steps(1,end) infinite;
  font-weight:700;text-align:center;
}
@keyframes jobsgrid-serial-blink{
  0%,49%{background-color:var(--serial-bg,transparent)}
  50%,100%{background-color:transparent}
}

.cms-jobs-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;color:#495057;align-items:center}
.cms-jobs-legend .swatch{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;border:1px solid rgba(0,0,0,.15);vertical-align:middle}

/* ---- Driver Messages panel (Dispatch Screen, bottom-right) ----
   Client ask: this panel used to sit as a full 320px-wide box, uncollapsed
   by default, fixed bottom-right at z-index:1060 -- ABOVE the New Booking
   screen's own full-viewport overlay when it's opened as a Dispatch Screen
   booking tab (.cms-booking-tabs below, z-index:1055, covers the whole
   viewport including this same bottom-right corner), so it visually sat on
   top of that form's own bottom-right content (Payment & Pricing Details /
   Driver Instructions / Actions row all live there). Two changes fix that
   without touching the z-index layering itself (this panel is deliberately
   still drawn above an open booking tab, so a new driver message is never
   silently hidden behind one):
     1) .collapsed is now the panel's DEFAULT state (driverMsgsPanel in
        dispatch/index.php starts with the class already on it), and
     2) .collapsed shrinks the whole panel down to a small round icon-only
        button instead of just hiding the message list under a still-320px-
        wide header -- so the corner footprint it actually occupies is small
        enough that it can't land on top of an active form field. It still
        expands to the full panel on click (driver-messages.js's existing
        toggle), same as before. */
.cms-driver-msgs{
  position:fixed;right:16px;bottom:16px;width:320px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:6px;
  box-shadow:0 4px 18px rgba(0,0,0,.22);z-index:1060;font-size:12.5px;
  transition:width .12s ease,height .12s ease,border-radius .12s ease;
}
.cms-driver-msgs.collapsed{
  width:46px;height:46px;border-radius:50%;overflow:hidden;
}
.cms-driver-msgs-header{
  display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;
  font-weight:600;border-bottom:1px solid rgba(0,0,0,.08);user-select:none;
  white-space:nowrap;
}
.cms-driver-msgs.collapsed .cms-driver-msgs-header{
  width:46px;height:46px;padding:0;justify-content:center;border-bottom:0;
  font-size:17px;color:var(--brand,#2f3a56);position:relative;
}
/* Icon-only when collapsed: the "Driver Messages" text label and the
   expand/collapse caret would both overflow a 46px circle, so they're
   hidden entirely rather than truncated -- the icon + unread badge alone are
   enough to identify this as the Driver Messages toggle. */
.cms-driver-msgs.collapsed .cms-driver-msgs-label,
.cms-driver-msgs.collapsed .cms-driver-msgs-caret{display:none}
.cms-driver-msgs.collapsed .cms-driver-msgs-header #driverMsgsUnreadBadge{
  position:absolute;top:0;right:0;font-size:9px;padding:2px 4px;
}
.cms-driver-msgs-caret{margin-left:auto;transition:transform .15s}
.cms-driver-msgs.collapsed .cms-driver-msgs-body{display:none}
.cms-driver-msgs-body{max-height:60vh;display:flex;flex-direction:column}
.cms-driver-msgs-list{overflow-y:auto;max-height:38vh}
.cms-driver-msgs-item{
  padding:8px 12px;border-bottom:1px solid rgba(0,0,0,.06);cursor:pointer;
}
.cms-driver-msgs-item:hover{background:#f3f6fb}
.cms-driver-msgs-item.unread{background:#eef6ff}
.cms-driver-msgs-item .who{font-weight:600}
.cms-driver-msgs-item .when{float:right;font-weight:400;color:#6c757d;font-size:10.5px}
.cms-driver-msgs-item .txt{color:#495057;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cms-driver-msgs-reply{padding:8px 12px;border-top:1px solid rgba(0,0,0,.08)}

/* ---- Booking Tabs overlay (Dispatch Screen): multiple "New Job (Cab)" /
   "Regular B." / Call History "Create Booking" forms open as tabs, not
   stacked floating popups ---- */
.cms-booking-tabs{
  position:fixed;inset:0;z-index:1055;background:#fff;
  display:flex;flex-direction:column;
}
.cms-booking-tabs.d-none{display:none}
.cms-booking-tabs-bar{
  display:flex;align-items:flex-end;gap:4px;flex-wrap:nowrap;overflow-x:auto;
  background:var(--grid-header-bg);border-bottom:1px solid var(--grid-border);
  padding:6px 8px 0;flex-shrink:0;position:relative;z-index:5;
}
.cms-booking-tab{
  display:flex;align-items:center;gap:8px;max-width:220px;min-width:120px;
  padding:7px 8px 7px 12px;background:#e6e9f1;color:#495057;
  border:1px solid var(--grid-border);border-bottom:none;
  border-radius:4px 4px 0 0;cursor:pointer;font-size:12.5px;font-weight:600;white-space:nowrap;user-select:none;
}
.cms-booking-tab:hover{background:#eef1f7}
.cms-booking-tab.active{background:#fff;color:var(--brand,#2f3a56);font-weight:600}
.cms-booking-tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cms-booking-tab-num{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:8px;background:#2f3a56;color:#fff;font-size:10px;margin-right:4px}
.cms-booking-tab-close{
  border:0;background:transparent;line-height:1;font-size:15px;color:#8a93a6;
  padding:0 2px;margin-left:auto;flex-shrink:0;
}
.cms-booking-tab-close:hover{color:#dc3545}
.cms-booking-tabs-panes{flex:1;position:relative;overflow:hidden}
.cms-booking-pane{position:absolute;inset:0}
.cms-booking-pane iframe{width:100%;height:100%;border:0;display:block}

/* ---- Dispatch > All Jobs grid: scrolls inside its own box (header stays put) ---- */
.cms-jobs-scroll{max-height:calc(100vh - 330px);min-height:220px;overflow:auto;border:1px solid var(--grid-border)}
.cms-jobs-scroll thead th{position:sticky;top:0;z-index:3}
.table tbody td{font-weight:500}

/* Booking tabs: active tab = black with white text */
.cms-booking-tab.active{background:#000;color:#fff;border-color:#000;font-weight:700}
.cms-booking-tab.active .cms-booking-tab-num{background:#fff;color:#000}
.cms-booking-tab.active .cms-booking-tab-close{color:#fff}
.cms-booking-tab.active .cms-booking-tab-close:hover{color:#ff6b6b}

.cms-embedded .cms-chrome,.cms-embedded .cms-chrome-toggle,.cms-embedded .status-bar{display:none !important}
.cms-booking-tabs-top{display:flex;align-items:flex-end;background:var(--grid-header-bg);border-bottom:1px solid var(--grid-border);flex-shrink:0}
.cms-booking-tabs-top .cms-booking-tabs-bar{flex:1;border-bottom:0;min-width:0}
.cms-booking-tabs-actions{display:flex;gap:6px;padding:4px 8px;flex-shrink:0}
.cms-booking-restore{position:fixed;bottom:40px;left:14px;z-index:1050;font-weight:700}

.menubar-logout{margin:0 0 0 10px}
.menubar-logout button{background:#c0392b;color:#fff;border:0;border-radius:3px;padding:2px 10px;font-size:11.5px;font-weight:700;line-height:18px;cursor:pointer}
.menubar-logout button:hover{background:#e74c3c}