/* Palette pulled directly from enterpriseintelligence.co.za's own stylesheet
   (css/ei_main.css): brand blue #00AAEB/#00A7EA, deep blue #0B5694/#014D7D,
   body grey #666666, page background #E5E5E5, Verdana/Arial/Helvetica. */

:root {
  --brand-blue: #00AAEB;
  --brand-blue-dark: #0B5694;
  --brand-blue-darker: #014D7D;
  --text-grey: #666666;
  --heading-grey: #717b7e;
  --page-bg: #E5E5E5;
  --panel-bg: #ffffff;
  --border-grey: #CCCCCC;
  --nav-grey: #666666;

  --status-occupied: #2e9e3f;
  --status-occupied-bg: #e5f5e8;
  --status-available: #ffffff;
  --status-available-border: #CCCCCC;
  --status-defective: #d98b00;
  --status-defective-bg: #fdf0dc;

  /* Utilization chart -- driver visits reuse --status-defective (amber)
     since it's a different legend/context, not a door status; maintenance
     needed its own color, not used anywhere else yet. */
  --maintenance-purple: #7d3c98;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: var(--text-grey);
  background-color: var(--page-bg);
}

/* ---- top bar ------------------------------------------------------- */

#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--nav-grey);
  color: #ffffff;
  padding: 12px 24px;
}

#brand {
  display: flex;
  flex-direction: column;
}

#brandName {
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
}

#brandSlogan {
  font-size: 11px;
  font-style: italic;
  color: #cfd8dc;
}

#topnav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  margin-left: 22px;
  padding-bottom: 3px;
}

#topnav a:hover {
  text-decoration: underline;
}

#topnav a.active {
  border-bottom: 2px solid var(--brand-blue);
  font-weight: bold;
}

/* ---- layout ---------------------------------------------------------- */

#appBody {
  display: flex;
  gap: 16px;
  padding: 16px;
  align-items: flex-start;
}

h2 {
  font-variant: small-caps;
  color: var(--heading-grey);
  font-size: 15px;
  margin: 0 0 10px 0;
}

/* ---- left pane: locker tree ------------------------------------------ */

#lockerTree {
  background-color: var(--panel-bg);
  border: 1px solid var(--border-grey);
  border-radius: 3px;
  padding: 14px;
  width: 280px;
  flex-shrink: 0;
}

#treeRoot, #treeRoot ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

#treeRoot ul {
  padding-left: 16px;
}

#treeRoot .siteNode > .nodeLabel {
  font-weight: bold;
  color: var(--brand-blue-darker);
  cursor: default;
  padding: 4px 0;
  display: block;
}

#treeRoot .lockerNode > .nodeLabel {
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#treeRoot .lockerNode > .nodeLabel:hover {
  background-color: #f0f8fc;
}

#treeRoot .lockerNode.selected > .nodeLabel {
  background-color: var(--brand-blue);
  color: #ffffff;
}

.lockerBadge {
  font-size: 10px;
  background-color: var(--border-grey);
  color: #ffffff;
  border-radius: 10px;
  padding: 1px 7px;
}

#treeRoot .lockerNode.selected .lockerBadge {
  background-color: rgba(255,255,255,0.35);
}

.lockerBadge.hasIssue {
  background-color: var(--status-defective);
}

/* ---- right pane: door table ------------------------------------------- */

#doorPanel {
  background-color: var(--panel-bg);
  border: 1px solid var(--border-grey);
  border-radius: 3px;
  padding: 14px;
  flex: 1;
  min-width: 0;
}

#doorPanelHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-grey);
}

#vendorFilterWrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-grey);
}

#vendorFilterWrap select {
  font-size: 12px;
  padding: 3px 6px;
}

/* ---- locker overview map (default view before a locker is selected) ----
   #lockerMapContainer/#doorDetailContent deliberately carry no explicit
   `display` override of their own -- admin.css's #rowModalOverlay bug
   (an ID selector's `display:flex` beating the browser's default
   [hidden]{display:none} rule) only bites when something DOES set an
   explicit display; leaving these alone means the plain `hidden`
   attribute just works, no override needed. */

#lockerMap {
  height: 480px;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
}

#mapLegend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-grey);
  margin-top: 8px;
}

.dot.mapGreen { background-color: var(--status-occupied); }
.dot.mapOrange { background-color: var(--status-defective); }
.dot.mapRed { background-color: #c0392b; }
.dot.mapGrey { background-color: #8a8a8a; }

#mapNote { font-size: 12px; color: var(--text-grey); margin-top: 6px; }

.legendItem { display: flex; align-items: center; gap: 5px; }

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot.occupied { background-color: var(--status-occupied); }
.dot.available { background-color: #ffffff; border: 1px solid var(--status-available-border); }
.dot.defective { background-color: var(--status-defective); }
.dot.util { background-color: var(--brand-blue); }
.dot.driverVisit { background-color: var(--status-defective); }
.dot.maintVisit { background-color: var(--maintenance-purple); }

/* ---- utilization chart --------------------------------------------------
   Hand-rolled SVG (app.js's renderUtilizationChart()) -- MOCK DATA ONLY,
   no real utilization-history source exists yet. */

#footageSection {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-grey);
}

#footageHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

#footageHeader h2 {
  font-size: 13px;
  font-variant: small-caps;
  color: var(--heading-grey);
  margin: 0;
}

/* margin-left:auto absorbs the free space, so the title and storage summary
   stay together on the left and the button sits at the right edge. */
#footageDisconnectBtn {
  margin-left: auto;
}

#footagePlayer {
  margin-top: 12px;
}

#footagePlayerBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-grey);
}

#footagePlayerImg {
  display: block;
  max-width: 100%;
  background: #000;
  border: 1px solid var(--border-grey);
}

#footageStorage,
#footageMessage {
  font-size: 12px;
  color: var(--text-grey);
}

#footageMessage.footageError {
  color: var(--status-defective);
}

#footageControls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 12px;
}

#footagePanes {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

#footagePanes table {
  border-collapse: collapse;
  font-size: 12px;
  flex: 1 1 260px;
}

#footagePanes th {
  text-align: left;
  font-variant: small-caps;
  color: var(--heading-grey);
  border-bottom: 2px solid var(--border-grey);
  padding: 6px 10px;
}

#footagePanes td {
  padding: 6px 10px;
  border-bottom: 1px solid #eeeeee;
}

#folderTable tbody tr {
  cursor: pointer;
}

#folderTable tbody tr:hover,
#fileTable tbody tr:hover {
  background-color: #fafafa;
}

#folderTable tbody tr.selected {
  background-color: #eef3fb;
  font-weight: bold;
}

.footageEmpty {
  text-align: center;
  color: #999999;
  font-style: italic;
}

#utilizationSection {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-grey);
}

#utilizationHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

#utilizationHeader h2 {
  font-size: 13px;
  font-variant: small-caps;
  color: var(--heading-grey);
  margin: 0;
}

#utilizationLegend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-grey);
}

.utilizationSvg {
  width: 100%;
  height: auto;
  max-height: 260px;
}

.chartGrid {
  stroke: var(--border-grey);
  stroke-width: 1;
}

.chartAxisLabel {
  font-size: 9px;
  fill: var(--text-grey);
}

.chartArea {
  fill: var(--brand-blue);
  fill-opacity: 0.12;
  stroke: none;
}

.chartLine {
  fill: none;
  stroke: var(--brand-blue-dark);
  stroke-width: 2;
}

.chartMarkerLine {
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.chartMarkerLine.chartMarkerDriver { stroke: var(--status-defective); }
.chartMarkerLine.chartMarkerMaint { stroke: var(--maintenance-purple); }

.chartMarkerDot {
  cursor: default;
}

.chartMarkerDot.chartMarkerDriver { fill: var(--status-defective); }
.chartMarkerDot.chartMarkerMaint { fill: var(--maintenance-purple); }

table#doorTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

#doorTable th {
  text-align: left;
  font-variant: small-caps;
  color: var(--heading-grey);
  border-bottom: 2px solid var(--border-grey);
  padding: 8px 10px;
}

#doorTable td {
  padding: 7px 10px;
  border-bottom: 1px solid #eeeeee;
}

#doorTable tbody tr:hover {
  background-color: #fafafa;
}

#doorTableEmpty {
  text-align: center;
  color: #999999;
  padding: 30px;
  font-style: italic;
}

.statusPill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
}

.statusPill.occupied {
  background-color: var(--status-occupied-bg);
  color: var(--status-occupied);
}

.statusPill.available {
  background-color: #ffffff;
  color: var(--text-grey);
  border: 1px solid var(--status-available-border);
}

.statusPill.defective {
  background-color: var(--status-defective-bg);
  color: var(--status-defective);
}

.videoStatus {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
  background-color: #ffffff;
  color: var(--text-grey);
  border: 1px solid var(--status-available-border);
}

.videoStatus.videoConnected {
  background-color: var(--status-occupied-bg);
  color: var(--status-occupied);
  border: none;
}

/* ---- buttons (mirrors admin.css's .btn -- index.html doesn't load that
   stylesheet, so it's duplicated rather than pulling in the whole admin UI
   for one class) ----------------------------------------------------- */

.btn {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 3px;
  border: 1px solid var(--border-grey);
  background-color: #ffffff;
  color: var(--text-grey);
  cursor: pointer;
  /* No-op on <button> (already inline-block, no underline by default) --
     needed so .btn also works on the <a class="btn"> links in 401.html,
     the first place this class is used on an anchor rather than a
     button. */
  display: inline-block;
  text-decoration: none;
}

.btn:hover {
  background-color: #f5f5f5;
}

.btn-primary {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #0090c9;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- door-action modal (open door) --------------------------------------
   Same shape as admin.css's #rowModalOverlay, including the [hidden] fix:
   the ID selector's `display: flex` below beats the browser's default
   [hidden] { display: none } rule (higher specificity), so an explicit
   [hidden] override is required or the JS-toggled hidden attribute has no
   visible effect -- confirmed the hard way on admin.html's own modal
   before this one was written, not repeating that here. */

#doorActionOverlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

#doorActionOverlay[hidden] {
  display: none;
}

#doorActionModal {
  background-color: var(--panel-bg);
  border-radius: 4px;
  padding: 20px 24px;
  width: 360px;
  max-width: calc(100vw - 40px);
}

#doorActionModal h3 {
  margin: 0 0 14px 0;
  font-variant: small-caps;
  color: var(--heading-grey);
}

#doorActionModal .formField {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#doorActionModal .formField label {
  font-size: 11px;
  color: var(--text-grey);
  font-weight: bold;
}

#doorActionModal select {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--border-grey);
  border-radius: 3px;
}

#doorActionModal select:disabled {
  background-color: #f0f0f0;
  color: #999999;
}

#doorActionConfirmText {
  font-size: 12px;
  margin: 0 0 14px 0;
}

#doorActionModal .modalActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#doorActionError {
  margin-top: 12px;
  padding: 8px 10px;
  background-color: var(--status-defective-bg);
  color: var(--status-defective);
  border-radius: 3px;
  font-size: 11px;
}

/* ---- create-parcel-notice modal -----------------------------------------
   Same shape/[hidden] fix as #doorActionOverlay -- see that block's own
   comment for why the [hidden] override is required. */

#noticeOverlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

#noticeOverlay[hidden] {
  display: none;
}

#noticeModal {
  background-color: var(--panel-bg);
  border-radius: 4px;
  padding: 20px 24px;
  width: 360px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

#noticeModal h3 {
  margin: 0 0 14px 0;
  font-variant: small-caps;
  color: var(--heading-grey);
}

#noticeModal .formField {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#noticeModal .formField label {
  font-size: 11px;
  color: var(--text-grey);
  font-weight: bold;
}

#noticeModal input, #noticeModal select {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--border-grey);
  border-radius: 3px;
}

#noticePinRow {
  display: flex;
  gap: 6px;
}

#noticePinRow input {
  flex: 1;
  min-width: 0;
  background-color: #f0f0f0;
  color: var(--text-grey);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

#noticeModal .modalActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

#noticeError {
  margin: 0 0 12px 0;
  padding: 8px 10px;
  background-color: var(--status-defective-bg);
  color: var(--status-defective);
  border-radius: 3px;
  font-size: 11px;
}

/* ---- locker tree right-click menu -------------------------------------- */

#lockerContextMenu {
  position: fixed;
  z-index: 20;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background-color: var(--panel-bg);
  border: 1px solid var(--border-grey);
  border-radius: 3px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  min-width: 180px;
  font-size: 12px;
}

#lockerContextMenu li {
  padding: 8px 14px;
  cursor: pointer;
}

#lockerContextMenu li:hover {
  background-color: var(--page-bg);
}

/* ---- action toast -------------------------------------------------------
   Auto-dismisses (app.js's showToast()) -- no close button needed for a
   one-line confirmation. */

#actionToast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 3px;
  font-size: 12px;
  color: #ffffff;
  background-color: var(--status-occupied);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

#actionToast.toastError {
  background-color: #b02a02;
}

/* ---- footer ------------------------------------------------------------ */

#footer {
  text-align: center;
  font-size: 10px;
  color: #999999;
  padding: 14px;
}

@media (max-width: 720px) {
  #appBody { flex-direction: column; }
  #lockerTree { width: 100%; }
}

/* ---- phone-width space optimization -------------------------------------
   Everything above was written desktop-first with one tablet breakpoint
   (stack the two columns) and nothing narrower -- fine on a laptop, but
   14-16px of padding stacked three levels deep (body -> #appBody ->
   #doorPanel) alone eats ~90px of a 375px-wide screen before any real
   content starts, and #doorTable's 5 columns / #lockerMap's 480px desktop
   height were never reconsidered for a phone. Tightened here rather than
   restructuring the markup -- same elements, less wasted space. */

/* ---- 401.html (nginx error_page 401 for /admin.html) --------------------
   Canceling the browser's native Basic Auth prompt on a plain <a
   href="admin.html"> navigation used to leave nginx's bare, unstyled "401
   Authorization Required" page with no way back except the browser's own
   Back button -- not obvious, no site chrome. This is what error_page 401
   serves instead (thecouriertoolbox.conf). */

#authErrorBody {
  display: flex;
  justify-content: center;
  padding: 60px 16px;
}

#authErrorCard {
  background-color: var(--panel-bg);
  border: 1px solid var(--border-grey);
  border-radius: 3px;
  padding: 28px 32px;
  max-width: 420px;
  text-align: center;
}

#authErrorCard h2 {
  font-variant: small-caps;
  color: var(--heading-grey);
  margin: 0 0 10px 0;
}

#authErrorCard p {
  font-size: 12px;
  margin: 0 0 20px 0;
}

#authErrorActions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 600px) {
  #topbar { padding: 10px 12px; }
  #brandSlogan { display: none; } /* the nav + active-page state already says where you are */
  #topnav a { margin-left: 14px; font-size: 11px; }

  #appBody { padding: 8px; gap: 8px; }
  #lockerTree, #doorPanel { padding: 10px; }

  /* Header row (name + Request Video button + legend) stacks instead of
     wrapping into an awkward two-line flex mess; the button goes full-width
     since it's the primary action here and needs an easy tap target. */
  #doorPanelHeader { flex-direction: column; align-items: stretch; }
  #requestVideoBtn { width: 100%; }
  #legend, #utilizationLegend, #mapLegend { gap: 10px; flex-wrap: wrap; }

  /* Desktop's 480px map height is most of a phone's viewport; a phone
     doesn't need the extra vertical room a mouse-driven pan/zoom benefits
     from anyway. */
  #lockerMap { height: 260px; }

  /* "Last Updated" is the least actionable column and the one most likely
     to force horizontal scrolling on a phone -- dropped rather than
     shrinking every column to illegibility. Door/Status/Unit/Action still
     show the state that actually matters for a quick check or an action. */
  #doorTable th:nth-child(4), #doorTable td:nth-child(4) { display: none; }
  #doorTable th, #doorTable td { padding: 6px 6px; }
  table#doorTable { font-size: 11px; }

  .chartAxisLabel { font-size: 11px; } /* SVG text scales with viewBox+width:100%, not CSS px -- bumped so it stays legible once the chart itself is this narrow */

  #doorActionModal { padding: 16px 18px; }

  /* Prevents a long "Could not open door: ..." message from running off
     the left edge -- desktop's right:16px with no left/max-width is fine
     at 1200px, not at 340px. */
  #actionToast { left: 12px; right: 12px; bottom: 12px; }
}