/* public/css/admin.css
 * Shared styles for admin pages and post-login screens. Mirrors the design
 * tokens from cowtown_hauler.html so the office-side UI feels like part of
 * the same product.
 *
 * Mounted at /assets/css/admin.css via server.js's static('public') handler.
 */

:root {
  --navy:    #0d0d6b;
  --navy2:   #1a1aaa;
  --steel:   #3535cc;
  --accent:  #cc1111;
  --accent2: #e63333;
  --bg:      #f2f2f8;
  --surface: #ffffff;
  --border:  #d0d0e8;
  --text:    #0d0d2b;
  --muted:   #6060a0;
  --green:        #1a7a4a;
  --green-bg:     #d4f0e0;
  --green-bright: #22c55e; /* live-status indicators only — BACKLOG #41 */
  --amber:   #8a6000;
  --amber-bg:#fff0c0;
  --red:     #aa1010;
  --red-bg:  #fde0e0;
  --mono:    'IBM Plex Mono', monospace;
  --sans:    'IBM Plex Sans', sans-serif;
  --display: 'Oswald', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* BACKLOG E (2026-05-18): honor EXIF Orientation for any <img> in office
   pages — covers verify modal photos, plant docket, dispatcher views,
   admin previews. Default in modern browsers but stated explicitly. */
img { image-orientation: from-image; }
html, body {
  min-height: 100%;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--navy); }
a:hover { color: var(--navy2); }

/* ── App bar ──────────────────────────────────────────────────────────── */
.app-bar {
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--accent);
  position: sticky;
  top: 0;
  z-index: 10;
}
.app-bar-left { display: flex; align-items: center; gap: 24px; }
.app-bar-title {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.app-bar-nav {
  display: flex;
  gap: 14px;
}
.app-bar-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.85;
}
.app-bar-nav a:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.app-bar-nav a.is-active { opacity: 1; background: rgba(255,255,255,0.15); }

/* BACKLOG H (2026-05-18): dispatcher nav collapses sub-pages (Live ops,
   Discrepancies, PO board, Reports) into a dropdown under the Dispatch
   tab. Keeps the top bar to the four main destinations (Dashboard,
   Dispatch, Admin, Profile) instead of eight items. */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.nav-dropdown > .nav-main {
  padding-right: 4px;
}
.nav-chevron {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 4px;
  opacity: 0.85;
  font-family: inherit;
  line-height: 1;
}
.nav-chevron:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.nav-chevron[aria-expanded="true"] { background: rgba(255,255,255,0.15); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--navy);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  min-width: 180px;
  z-index: 50;
  padding: 6px 0;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}
.nav-dropdown-menu.is-open { display: block; }
.nav-dropdown-menu a {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  border-radius: 0;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { opacity: 1; background: rgba(255,255,255,0.12); }
.nav-dropdown-menu a.is-active { opacity: 1; background: rgba(255,255,255,0.18); }
.app-bar-user {
  font-family: var(--mono);
  font-size: 12px;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Intermediate widths (2026-07-02): between the phone drawer (≤540px) and a
   maximized desktop, the bar can't always fit brand + full nav + user controls
   on one line — it used to squeeze/overflow ("header stacks oddly" smoke
   finding). Let both levels wrap cleanly with consistent row gaps instead. */
@media (max-width: 1100px) and (min-width: 541px) {
  .app-bar { flex-wrap: wrap; row-gap: 8px; }
  .app-bar-left { flex-wrap: wrap; row-gap: 6px; gap: 16px; }
  .app-bar-nav { flex-wrap: wrap; row-gap: 4px; }
  .app-bar-user { margin-left: auto; }
}

.btn-link {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 5px 12px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.btn-link:hover { background: rgba(255,255,255,0.1); }

/* ── Main + container ─────────────────────────────────────────────────── */
/* 2026-06-03 (Saif): use the full page width with only a little side padding,
   instead of a centered 1100px column with big dead margins on wide screens.
   Capped high (1800px) so line lengths don't get absurd on ultrawide monitors;
   on a typical laptop/desktop it fills the width. Side padding scales with the
   viewport (clamp) so it stays tight on small screens and comfortable on large. */
main { max-width: 1800px; margin: 0 auto; padding: 24px clamp(16px, 2.5vw, 40px) 48px; }

h1 {
  font-family: var(--display);
  font-size: 26px;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
h2 {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 12px;
}
.subtle {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 20px;
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 16px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 9px 16px;
  border: none;
  border-radius: 7px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, opacity 0.12s ease;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary  { background: var(--navy);   color: #fff; }
.btn-primary:hover:not(:disabled)  { background: var(--navy2); }
.btn-danger   { background: var(--accent); color: #fff; }
.btn-danger:hover:not(:disabled)   { background: var(--accent2); }
.btn-ghost    { background: transparent; color: var(--navy); border: 1px solid var(--border); }
.btn-ghost:hover:not(:disabled)    { background: var(--bg); }
.btn-sm       { padding: 6px 10px; font-size: 12px; }
.btn-row      { display: flex; gap: 8px; flex-wrap: wrap; }

/* Day-bar — the shared selectable-date control (PO date stepper + picker +
   relative label + "Show all dates"). Originated on the dispatcher Overview;
   shared here so /acceptance and the outside portal match it (D107 follow-up). */
.day-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 16px; font-size: 14px; }
.day-bar label { color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.day-bar input[type="date"] { font-size: 14px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; }
.day-bar .day-label { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.day-bar .day-spacer { flex: 1; }
.day-bar .stepper { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.day-bar .stepper button { background: #fff; border: 0; padding: 4px 10px; cursor: pointer; font-size: 14px; color: var(--navy); }
.day-bar .stepper button + button { border-left: 1px solid var(--border); }
.day-bar .stepper button:hover { background: var(--bg); }
.day-bar .clear-day { background: transparent; border: 0; cursor: pointer; color: var(--muted); font-size: 13px; text-decoration: underline; }

/* ── Form fields ──────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.field label .req { color: var(--accent); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
/* BACKLOG #42 (2026-05-15): the rule above was stretching checkboxes and
   radios to full width with text-input padding, which made them stack
   visually above their label text instead of sitting inline. Reset for
   the boolean input types so they render at native size next to the
   label they belong to. */
.field input[type="checkbox"],
.field input[type="radio"] {
  width: auto;
  padding: 0;
  margin: 0 6px 0 0;
  vertical-align: middle;
  display: inline-block;
}
.field label > input[type="checkbox"],
.field label > input[type="radio"] {
  margin: 0 6px 0 0;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 13, 107, 0.12);
}
.field-help { font-size: 12px; color: var(--muted); margin-top: 4px; }
.field-error { font-size: 12px; color: var(--red); margin-top: 4px; display: none; }
.field.has-error input,
.field.has-error select { border-color: var(--red); }
.field.has-error .field-error { display: block; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 540px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* Global visibility utility. Used by JS on .field, .card, plain divs, etc.
 * Must NOT be scoped to a specific element type — JS toggles this on
 * arbitrary blocks (office-block, driver-block, danger-card, etc.). */
.is-hidden { display: none !important; }

/* ── Alerts ───────────────────────────────────────────────────────────── */
.alert {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 13px;
  border: 1px solid transparent;
  display: none;
}
.alert.is-visible { display: block; }
.alert-error   { background: var(--red-bg);   color: var(--red);   border-color: var(--red); }
.alert-success { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.alert-info    { background: #e0e8ff;          color: var(--navy);  border-color: var(--steel); }

/* ── Pills ────────────────────────────────────────────────────────────── */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}
.pill-green { background: var(--green-bg); color: var(--green); }
.pill-amber { background: var(--amber-bg); color: var(--amber); }
.pill-red   { background: var(--red-bg);   color: var(--red); }
.pill-navy  { background: #e0e0f5;         color: var(--navy); }
.pill-muted { background: var(--bg);       color: var(--muted); border: 1px solid var(--border); }

/* ── Tables ───────────────────────────────────────────────────────────── */
table.users {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.users th,
table.users td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
table.users th {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  border-top: 1px solid var(--border);
  position: sticky;
  top: 0;
}
table.users tr:hover td { background: var(--bg); }
table.users td.mono { font-family: var(--mono); font-size: 13px; }
table.users td.actions { text-align: right; white-space: nowrap; }
.users-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* ── Filter bar ───────────────────────────────────────────────────────── */
.filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 12px;
}
.filters .field { margin-bottom: 0; min-width: 140px; }
.filters .field input,
.filters .field select { padding: 8px 10px; font-size: 14px; }

/* ── Page header (title + actions) ────────────────────────────────────── */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.page-head .actions { display: flex; gap: 10px; }

/* ── Dialog (set password / PIN) ──────────────────────────────────────── */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 43, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.dialog-backdrop.is-visible { display: flex; }
.dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%;
  max-width: 380px;
  padding: 22px 24px;
  box-shadow: 0 12px 40px rgba(13, 13, 107, 0.2);
}
.dialog h3 {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: 14px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* ── Hamburger button — installed by public/js/app-nav.js ─────────────
 * Hidden at desktop widths. Visible at ≤540px alongside the drawer
 * rules below. ROADMAP 1.25.
 */
.app-bar-burger {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.app-bar-burger:hover { background: rgba(255, 255, 255, 0.1); }
.app-bar-burger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* ── Mobile (≤540px) ────────────────────────────────────────────────────
 * Office pages aren't mobile-first — Saif (admin) is the primary phone
 * user, and only for "check status from the road" trips. Goal here is
 * usable, not pretty. ROADMAP 1.25.
 */
@media (max-width: 540px) {
  /* App bar stays single-row: burger + title + user. Nav becomes a
   * dropdown drawer toggled by the burger. */
  .app-bar {
    position: relative;
    flex-wrap: nowrap;
    padding: 10px 14px;
    gap: 10px;
  }
  .app-bar-left {
    flex: 0 1 auto;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .app-bar-title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app-bar-burger {
    display: inline-block;
  }
  /* Drawer: hidden by default, shown when JS toggles .is-open */
  .app-bar-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--navy);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 0;
    z-index: 30;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
  }
  .app-bar-nav.is-open {
    display: flex;
  }
  .app-bar-nav a {
    display: block;
    padding: 12px 18px;
    font-size: 14px;
    border-radius: 0;
  }
  .app-bar-nav a:hover { background: rgba(255, 255, 255, 0.08); }
  .app-bar-nav a.is-active { background: rgba(255, 255, 255, 0.12); }
  /* BACKLOG H mobile: flatten the dispatcher dropdown into a vertical
     list inside the drawer. Chevron is irrelevant in this layout. */
  .app-bar-nav .nav-dropdown {
    display: block;
    width: 100%;
  }
  .app-bar-nav .nav-chevron { display: none; }
  .app-bar-nav .nav-dropdown-menu {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.04);
    min-width: 0;
  }
  .app-bar-nav .nav-dropdown-menu a {
    padding-left: 32px;
    font-size: 13px;
  }
  .app-bar-user {
    gap: 6px;
    font-size: 12px;
    flex-wrap: nowrap;
  }

  main {
    padding: 14px 12px 24px;
  }

  /* Page header (title + actions) stacks; actions span full width */
  .page-head {
    flex-direction: column;
    align-items: stretch;
  }
  .page-head .actions {
    flex-direction: column;
  }
  .page-head .actions .btn {
    width: 100%;
    text-align: center;
  }

  /* Filter row collapses to one column, full-width controls */
  .filters {
    gap: 8px;
  }
  .filters .field {
    min-width: 0;
    flex: 1 1 100%;
  }
  .filters .field input,
  .filters .field select {
    width: 100%;
  }

  /* List tables → card stack. Each row becomes a bordered block; the
   * thead is hidden (off-screen) since the cell contents carry their
   * own context (PO#, username, etc.). */
  table.users,
  table.audit {
    display: block;
  }
  table.users thead,
  table.audit thead {
    display: none;
  }
  table.users tbody,
  table.audit tbody {
    display: block;
  }
  table.users tr,
  table.audit tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 6px 0;
    background: var(--surface);
  }
  table.users td,
  table.audit td {
    display: block;
    border: none;
    padding: 6px 14px;
    text-align: left;
    white-space: normal;
  }
  table.users td.actions,
  table.audit td.actions {
    text-align: left;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 10px;
  }

  /* Dialog full-bleed instead of 380px-pinned */
  .dialog {
    max-width: 100%;
    padding: 18px;
  }

  /* Buttons taller for tap targets; rows stretch to fill */
  .btn {
    min-height: 40px;
  }
  .btn-row {
    gap: 6px;
  }
  .btn-row .btn {
    flex: 1 1 auto;
  }
}

/* Plant-group presets inside the .ms plant multi-select panel (plant-groups.js).
   Shared by the Operations Dashboard + dispatcher Overview. */
.ms-groups { border-bottom: 1px solid var(--border); padding: 2px 0; }
.ms-groups-empty { padding: 6px 10px; font-size: 12px; color: var(--muted); }
.ms-group-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ms-group-row:hover { background: var(--bg); }
.ms-group-name { flex: 1; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-group-del { border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 6px; }
.ms-group-del:hover { color: var(--accent, #cc1111); }
.ms-group-save { font-weight: 600; color: var(--navy); cursor: pointer; }