:root {
  --brand: #1d4ed8;
  --brand-dark: #1e40af;
  --brand-light: #dbeafe;
  --bg: #f1f5f9;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --info: #0284c7;
  --hover: #f1f5f9;
  --row-hover: #f8fafc;
  --radius: 10px;
  /* The brand ramp behind the LR/POD artwork, reused by the sign-in page so
     the printed documents and the page agree. Tile runs top to bottom, the
     wordmark left to right, matching how the documents paint them. */
  --brand-ramp-tile: linear-gradient(180deg, #1d4ed8 0%, #16a34a 100%);
  --brand-ramp-text: linear-gradient(90deg, #1d4ed8 0%, #16a34a 100%);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05);
  color-scheme: light;
}

html[data-theme='dark'] {
  --brand: #60a5fa;
  --brand-dark: #93c5fd;
  --brand-light: #1e3a5f;
  --bg: #0f172a;
  --card: #1e293b;
  --border: #334155;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --success: #22c55e;
  --danger: #f87171;
  --warning: #fbbf24;
  --info: #38bdf8;
  --hover: #334155;
  --row-hover: #3b4a63;
  /* Lifted to the dark theme's own brand and success tones, so the wordmark
     and tile keep their contrast against the dark card. */
  --brand-ramp-tile: linear-gradient(180deg, #3b82f6 0%, #22c55e 100%);
  --brand-ramp-text: linear-gradient(90deg, #60a5fa 0%, #22c55e 100%);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

html[data-theme='dark'] .navbar,
html[data-theme='dark'] .nav-dropdown-menu,
html[data-theme='dark'] .sidebar {
  background: #0b1220;
  border-color: #1e293b;
}

html[data-theme='dark'] input,
html[data-theme='dark'] select,
html[data-theme='dark'] textarea {
  background: #0f172a;
  color: #e2e8f0;
}

html[data-theme='dark'] .searchable-options {
  background: #0f172a;
}

html[data-theme='dark'] .searchable-option mark {
  background: #fef08a;
  color: #1e293b;
}

html[data-theme='dark'] thead th {
  background: #1e293b;
}

html[data-theme='dark'] .order-detail-row > td {
  background: #1e293b;
}

html[data-theme='dark'] .order-detail-lines th {
  background: #1e293b;
}

html[data-theme='dark'] .order-detail-heading {
  color: #e2e8f0;
}

html[data-theme='dark'] .order-row.row-expanded {
  background-color: #1e3a5f;
}

html[data-theme='dark'] .storage-option.selected {
  background: #1e3a5f;
}

html[data-theme='dark'] .terms-builder-row input {
  background: #0f172a;
  color: #e2e8f0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--user-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

html[data-user-font='inter'] { --user-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
html[data-user-font='poppins'] { --user-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
html[data-user-font='outfit'] { --user-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
html[data-user-font='manrope'] { --user-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
html[data-user-font='space_grotesk'] { --user-font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
html[data-user-font='exo_2'] { --user-font: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
html[data-user-font='plus_jakarta'] { --user-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------- Top navigation ---------- */
.navbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 50;
}

.navbar-inner {
  margin: 0 auto;
  padding: 0 20px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.brand small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.2;
}

.nav-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  list-style: none;
  padding: 0;
}

.nav-links a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
}

.nav-links a:hover {
  background: var(--bg);
  text-decoration: none;
}

.nav-links .active a,
.nav-links a.active {
  background: var(--brand-light);
  color: var(--brand-dark);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 6px;
  display: none;
  list-style: none;
  z-index: 50;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover {
  background: var(--hover);
  text-decoration: none;
}

.nav-dropdown-menu .active a {
  background: var(--brand-light);
  color: var(--brand-dark);
}

.config-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.config-tabs a {
  padding: 8px 16px;
  border-radius: 20px;
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
  border: 1px solid var(--border);
}

.config-tabs a:hover {
  color: var(--brand-dark);
  border-color: var(--brand);
  text-decoration: none;
}

.config-tabs a.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.storage-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.storage-option:hover {
  background: var(--hover);
}

.storage-option.selected {
  border-color: var(--brand);
  background: #eef2ff;
}

.storage-option input[type="radio"] {
  width: auto;
  margin-top: 3px;
}

.meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--text);
}

.meta-table th,
.meta-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.meta-table th {
  font-weight: 600;
  color: var(--muted);
  width: 40%;
}

.card-info {
  border-color: #bfdbfe;
  background: #fbfdff;
}

.card-success {
  border-color: #bbf7d0;
  background: #f7fef8;
}

.tint-note {
  color: var(--muted);
}

html[data-theme='dark'] .card-info {
  border-color: #1e3a5f;
  background: #15233b;
}

html[data-theme='dark'] .card-success {
  border-color: #14532d;
  background: #12261a;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}

.nav-user-dropdown {
  position: relative;
}

.nav-user-dropdown.open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu.user-menu {
  left: auto;
  right: 0;
  top: calc(100% + 10px);
  min-width: 160px;
}

button.nav-avatar {
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.user-menu-form {
  margin: 0;
}

.user-menu-form button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: none;
  text-align: left;
  color: var(--danger);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.user-menu-form button:hover {
  background: #fef2f2;
}

html[data-theme='dark'] .user-menu-form button:hover {
  background: #450a0a;
}

.user-chip {
  background: var(--brand-light);
  color: var(--brand-dark);
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
}

.nav-avatar {
  width: 36px;
  height: 36px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-light);
  border: 2px solid var(--brand);
  text-decoration: none;
  flex-shrink: 0;
}

.nav-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.nav-avatar-placeholder {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---------- Layout ---------- */
.container {
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* Config pages use the full available width while staying tidy on very wide
   screens; the padding media queries below keep them flexible on tablets/phones. */
.config-container {
  max-width: 1320px;
}

/* Somebody who has signed in with an issued password is kept on one card
   until they choose a password of their own, and the navigation is hidden
   around them, so there is no page to read and nothing to scroll to: the card
   sits in the middle of the screen rather than at the top of the content
   column where a working page would start. The footer goes while the gate is
   up, since it would only pull the card off centre. */
.container-gate {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 28px;
}

/* The heading is held to the card's measure so it reads as one block with it
   instead of a line pinned to the left edge. */
.container-gate .page-header {
  display: block;
  width: 100%;
  max-width: 520px;
  text-align: center;
}

.container-gate .card {
  width: 100%;
}

.container-gate ~ .footer {
  display: none;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.page-title {
  font-size: 22px;
  font-weight: 700;
}

.page-subtitle {
  color: var(--muted);
  font-size: 14px;
  margin-top: 2px;
}

/* ---------- App layout (sidebar + content) ---------- */
.app-layout {
  display: flex;
  align-items: stretch;
  margin: 0 auto;
  padding: 0 20px;
}

/* When the left nav is present it runs flush to the left edge of the screen. */
.app-layout-sidebar {
  padding-left: calc(var(--side-width) + 20px);
}

/* Unauthenticated pages (login, signup, password reset): the themed background
   should run edge to edge with no surrounding padding. */
.app-layout-auth {
  padding: 0;
}

.sidebar {
  flex: none;
  width: 220px;
  padding: 24px 12px 40px 0;
  align-self: flex-start;
  position: sticky;
  top: 62px;
  max-height: calc(100vh - 62px);
  overflow-y: auto;
}

.sidebar .nav-links {
  padding: 4px 0;
}

.app-main {
  flex: 1;
  min-width: 0;
}

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 20px;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ---------- Stat cards ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--brand);
}

.stat-label {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.stat-online {
  color: var(--success);
}

.stat-offline {
  color: var(--danger);
}

.stat-slash {
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn.is-loading {
  opacity: 0.65;
  cursor: progress;
  pointer-events: none;
}

.btn-primary.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brand-dark);
  color: #fff;
}

.btn-secondary {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  background: var(--bg);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-danger:hover {
  background: #b91c1c;
  color: #fff;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 13px;
}

.btn-icon {
  padding: 5px 8px;
  line-height: 1;
}

.btn-block {
  width: 100%;
}

.btn-award {
  white-space: nowrap;
}

.award-line-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  cursor: pointer;
}

.award-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

.line-vehicle {
  margin-top: 4px;
  font-size: 12px;
  color: #475569;
}

.line-vehicle-plate {
  display: block;
  font-weight: 600;
  color: #1e293b;
}

.line-vehicle-detail {
  display: block;
}

.order-row {
  cursor: pointer;
}

.order-row:hover {
  background-color: var(--hover);
}

.order-row.row-expanded {
  background-color: #eff6ff;
}

.order-detail-row > td {
  border-top: 2px solid var(--brand, #2563eb);
  background: #f8fafc;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background-color: var(--hover, #f1f5f9);
}

.clickable-row.expanded {
  background-color: #eff6ff;
}

html[data-theme='dark'] .clickable-row.expanded {
  background-color: #1e3a5f;
}

.expand-chevron {
  display: inline-block;
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.expand-chevron.open {
  transform: rotate(90deg);
}

.order-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
}

.detail-label {
  display: block;
  color: #64748b;
  font-size: 12px;
}

.pw-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}

.pw-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  background: rgba(29, 78, 216, 0.10);
  color: var(--brand);
}

.password-fields.has-errors .form-row input {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  z-index: 1000;
}

.modal-panel {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 6vh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card, #fff);
  color: var(--text);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: 22px 24px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.modal-close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}

.modal-close:hover {
  color: var(--text);
}

.modal-grid {
  margin-top: 14px;
}

.modal-grid th {
  background: transparent;
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  border-bottom: none;
}

/* ---------- Delivery contact window ----------
   These two fields live in a .form-grid rather than a .form-row, so they get
   no input styling from the forms block above and fall back to the browser's
   own. The placeholders here are not decoration either: the payer copies the
   shape of "Full name" and the format of "+255 754 000 000", and the number
   is what a driver later reads out to whoever is standing at the other end
   of the load. So the empty field is drawn dashed to read as an example, the
   phone's digits are held on a fixed pitch so a mistyped number is obvious at
   a glance, and both drop to the same solid edge the rest of the app uses
   once there is something real in the box. */
.modal-panel--contact label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.modal-panel--contact input {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modal-panel--contact input::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

.modal-panel--contact input[type='tel'] {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* The example number is opened out wider than the typed one: a payer copying
   "+255 754 000 000" reads the groups, not the individual digits, and 0.02em on
   a real number that gets read back digit by digit is as much as helps. */
.modal-panel--contact input[type='tel']::placeholder {
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.modal-panel--contact input:focus {
  outline: none;
  border-style: solid;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.modal-panel--contact input:not(:placeholder-shown) {
  border-style: solid;
}

#odoo-form-modal .modal-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#odoo-form-modal .modal-header {
  flex: 0 0 auto;
}

#odoo-form-modal .modal-grid {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 14px;
}

#odoo-form-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#odoo-form-modal .modal-body::-webkit-scrollbar {
  display: none;
}

#odoo-form-modal .modal-footer {
  flex: 0 0 auto;
  margin-top: 20px;
}

.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

@media (max-width: 640px) {
  .modal-panel {
    padding: 18px 16px;
  }
  .modal-footer {
    flex-wrap: wrap;
  }
}

.order-detail-lines {
  padding: 14px 18px 18px;
  overflow-x: auto;
}

.order-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
  color: #0f172a;
}

.order-detail-lines table {
  width: 100%;
  border-collapse: collapse;
}

.order-detail-lines th,
.order-detail-lines td {
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  font-size: 14px;
}

.order-detail-lines th {
  color: #64748b;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #f1f5f9;
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.form-row input,
.form-row select,
.form-row textarea {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.inline-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.inline-radio:hover {
  border-color: var(--brand);
}

.inline-radio input[type='radio'] {
  width: auto;
  accent-color: var(--brand);
  margin: 0;
}

.inline-radio:has(input[type='radio']:checked) {
  border-color: var(--brand);
  background: rgba(29, 78, 216, 0.08);
  color: var(--brand);
  font-weight: 600;
}

html[data-theme='dark'] .inline-radio {
  background: #0f172a;
}

html[data-theme='dark'] .inline-radio:has(input[type='radio']:checked) {
  background: rgba(96, 165, 250, 0.12);
}

.form-help {
  font-size: 12px;
  color: var(--muted);
}

.field-error ul {
  list-style: none;
  color: var(--danger);
  font-size: 13px;
  margin-top: 4px;
}

.form-row input.field-invalid,
.form-row select.field-invalid,
.form-row textarea.field-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.searchable-select {
  position: relative;
}

.searchable-select input {
  width: 100%;
}

.searchable-options {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.searchable-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: none;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.searchable-option:hover,
.searchable-option.highlighted {
  background: var(--hover);
}

.searchable-option.selected {
  font-weight: 600;
}

.searchable-option mark {
  background: #fef08a;
  color: inherit;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* ---------- Tables ---------- */
.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: var(--row-hover);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-success {
  background: #dcfce7;
  color: #166534;
}

.badge-failed,
.badge-danger {
  background: #fee2e2;
  color: #991b1b;
}

.badge-pending,
.badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.badge-info {
  background: #e0f2fe;
  color: #075985;
}

.badge-muted {
  background: #f1f5f9;
  color: #64748b;
}

/* Dark theme badge chips. The active pastel tints above are light-only and
   render as bright/white pills on the dark surface — e.g. inside the Event
   Details popout and the Activity Log ledger. Apply dark tint variants so
   chips stay visibly "chippy" without a light patch. */
html[data-theme='dark'] .badge-success {
  background: #052e16;
  color: #86efac;
  border: 1px solid var(--border);
}
html[data-theme='dark'] .badge-failed,
html[data-theme='dark'] .badge-danger {
  background: #450a0a;
  color: #fca5a5;
  border: 1px solid var(--border);
}
html[data-theme='dark'] .badge-pending,
html[data-theme='dark'] .badge-warning {
  background: #451a03;
  color: #fcd34d;
  border: 1px solid var(--border);
}
html[data-theme='dark'] .badge-info {
  background: #082f49;
  color: #7dd3fc;
  border: 1px solid var(--border);
}
html[data-theme='dark'] .badge-muted {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid var(--border);
}
</parameter>
<parameter name="oldString" string="true">.badge-muted {
  background: #f1f5f9;
  color: #64748b;
}

/* Pending &amp; failed tender submissions card. Light mode keeps the warm
   amber slab; dark mode tints it dark-amber so the light --text stays
   readable (a bare #fff7ed background would collide with dark --text). */
.card-pending-warning {
  background: #fff7ed;
  border-color: #fdba74;
}

html[data-theme='dark'] .card-pending-warning {
  background: #2a1a05;
  border-color: #78350f;
}

/* Alerts (messages) ---------- */
.messages {
  margin: 16px auto 0;
  padding: 0 20px;
}

.alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  border: 1px solid transparent;
}

.alert-success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.alert-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.alert-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.alert-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #eff6ff 0%, #f1f5f9 100%);
}

.auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  padding: 40px 36px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* Sign-in page, held to the LR/POD header artwork: a rounded gradient tile
   with a filled truck, and a wordmark and tagline ramped along the same
   brand blue to green. The tile gradient runs top to bottom and the text
   ramp runs left to right, which is how the documents paint them. Scoped to
   the sign-in brand so the navbar and sidebar keep their own icon. */
.auth-brand .brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 9.7px;
  background-image: var(--brand-ramp-tile);
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.28);
}

.auth-brand .brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.auth-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.auth-brand-word {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--brand);
}

.auth-brand-tagline {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}

/* The gradient only takes over where the browser can clip a background to
   the glyphs, so the wordmark and tagline keep their flat brand colour
   rather than vanishing on a browser that cannot do it. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .auth-brand-word,
  .auth-brand-tagline {
    background-image: var(--brand-ramp-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.auth-heading {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 6px;
}

.auth-sub {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
}

.auth-card .form-row {
  margin-bottom: 16px;
}

.auth-card input[type='text'],
.auth-card input[type='email'],
.auth-card input[type='password'] {
  height: 40px;
}

.phone-group {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.phone-group .phone-prefix {
  padding: 9px 12px;
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  font-size: 14px;
}

.phone-group input {
  flex: 1;
}

.phone-group input.with-prefix {
  border-radius: 0 8px 8px 0;
}

.password-group {
  display: flex;
  align-items: center;
  position: relative;
}

.password-group input {
  width: 100%;
  padding-right: 42px;
}

.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.password-toggle:hover {
  color: var(--brand);
  background: rgba(29, 78, 216, 0.08);
}

html[data-theme='dark'] .password-toggle:hover {
  background: rgba(96, 165, 250, 0.12);
}

.auth-footer {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin-top: 18px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  margin: 18px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #1f2937;
  border: 1px solid var(--border);
  font-weight: 600;
}

.btn-google:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.auth-inline-links {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  font-size: 14px;
}

/* ---------- Auth themed background ---------- */
.auth-theme {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #0b1c33 0%, #12314f 45%, #0d2440 100%);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.auth-theme.theme-day {
  background-image: url('../img/daytheme.jpg');
  background-image: image-set(url('../img/daytheme.webp') type('image/webp') 1x, url('../img/daytheme.jpg') type('image/jpeg') 1x);
}
.auth-theme.theme-earlynight {
  background-image: url('../img/earlynight.jpg');
  background-image: image-set(url('../img/earlynight.webp') type('image/webp') 1x, url('../img/earlynight.jpg') type('image/jpeg') 1x);
}
.auth-theme.theme-midnight {
  background-image: url('../img/midnight.jpg');
  background-image: image-set(url('../img/midnight.webp') type('image/webp') 1x, url('../img/midnight.jpg') type('image/jpeg') 1x);
}

.auth-theme::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11, 28, 51, 0.55) 0%, rgba(18, 49, 79, 0.45) 50%, rgba(13, 36, 64, 0.6) 100%);
  pointer-events: none;
}

/* moving constellation layer above the port image; the port stays visible through it */
.auth-themed-bg .auth-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  background: #edf2f7;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.auth-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.auth-tab.active {
  background: #ffffff;
  color: var(--brand);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

.auth-otp-sent {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
}

.auth-code-input {
  font-size: 20px !important;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-align: center;
}

.auth-otp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

.auth-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.auth-link[disabled] {
  color: var(--muted);
  cursor: not-allowed;
}

/* keep the inscribed brand card readable above the image */
.auth-theme {
  color-scheme: light;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --brand: #1d4ed8;
  --brand-dark: #1e40af;
  --brand-light: #dbeafe;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --info: #0284c7;
}

.auth-theme .auth-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

.auth-theme .auth-card input,
.auth-theme .auth-card select,
.auth-theme .auth-card textarea {
  background: #ffffff;
  color: #0f172a;
  border-color: var(--border);
}

.auth-theme .auth-card input::placeholder,
.auth-theme .auth-card textarea::placeholder {
  color: #94a3b8;
}

.auth-theme .auth-card input:focus,
.auth-theme .auth-card select:focus,
.auth-theme .auth-card textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.auth-themed-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #9fc4e8;
}

.auth-themed-bg .bg-truck,
.auth-themed-bg .bg-container {
  position: absolute;
  opacity: 0.09;
  filter: drop-shadow(0 0 6px rgba(160, 200, 240, 0.25));
}

.auth-themed-bg .bg-truck-1 {
  width: 480px;
  left: -40px;
  bottom: 40px;
  opacity: 0.14;
}
.auth-themed-bg .bg-truck-2 {
  width: 420px;
  right: -30px;
  top: 18%;
  opacity: 0.1;
  transform: scaleX(-1);
}
.auth-themed-bg .bg-truck-3 {
  width: 380px;
  right: 6%;
  bottom: 70px;
  opacity: 0.08;
}

.auth-themed-bg .bg-container {
  width: 190px;
  opacity: 0.12;
}
.bg-container-1 { top: 12%; left: 14%; }
.bg-container-2 { bottom: 16%; right: 22%; }
.bg-container-3 { top: 55%; left: 6%; }

.bg-depot-label {
  position: absolute;
  top: 8%;
  left: 6%;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(200, 226, 250, 0.18);
  white-space: nowrap;
}

/* ---------- Empty states ---------- */
.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}

.empty-icon {
  font-size: 36px;
  color: var(--brand-light);
  margin-bottom: 8px;
}

.empty p {
  margin-bottom: 16px;
}

/* ---------- Endpoint hint ---------- */
.endpoint-hint {
  background: #eff6ff;
  border: 1px dashed var(--brand);
  color: var(--brand-dark);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 20px;
}

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 24px 0;
}

.footer-hidden {
  display: none;
}

/* ---------- Profile ---------- */
.profile-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
}

.profile-side {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-avatar {
  width: 140px;
  height: 140px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--brand-light);
  outline: 1px solid var(--border);
  box-sizing: border-box;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.avatar-placeholder {
  font-size: 44px;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
}

.profile-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  text-align: center;
}

.address-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.address-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--row-hover);
}

.address-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.pagination-info {
  color: var(--muted);
  font-size: 13px;
  margin-left: 8px;
}

.pagination-num {
  min-width: 36px;
  text-align: center;
}

.pagination-current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.pagination-current:hover {
  background: var(--brand);
  color: #fff;
}

.pagination-ellipsis {
  color: var(--muted);
  padding: 0 4px;
  user-select: none;
}

/* ---------- Tracker ---------- */
.tracker-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  margin-top: 8px;
  align-items: start;
}

.tracker-sidebar {
  max-height: 660px;
  overflow: auto;
}

.tracker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tracker-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.tracker-item:hover {
  border-color: var(--brand);
}

.tracker-item-active {
  border-color: var(--brand);
  background: var(--brand-light);
}

.tracker-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.tracker-item-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.tracker-item-route {
  margin: 2px 0 8px;
}

.tracker-item-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.tracker-progress {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}

.tracker-progress-bar {
  height: 100%;
  background: var(--brand);
  border-radius: 3px;
  transition: width 1s linear;
}

.tracker-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ---- Tracker: Global Order Tracking Registry ---- */
.tracker-count {
  font-size: 12px;
  color: var(--muted);
}

.tracker-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tracker-toolbar .search-box {
  flex: 1;
  min-width: 240px;
}

.tracker-toolbar .tracker-status-filter {
  width: 180px;
}

.tracker-toolbar .tracker-status-filter select.filters-control {
  width: 180px;
}

.tracker-registry-table {
  width: 100%;
  table-layout: fixed;
}

.tracker-registry-table th:nth-child(1),
.tracker-registry-table th:nth-child(2),
.tracker-registry-table th:nth-child(3),
.tracker-registry-table th:nth-child(4) {
  width: 18.5%;
}

.tracker-registry-table th:nth-child(5) {
  width: 26%;
}

.tracker-registry-table td {
  vertical-align: middle;
}

.registry-primary {
  font-weight: 600;
}

.registry-sub {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.registry-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tracker-empty-row {
  text-align: center;
  padding: 26px;
  color: var(--muted);
}

.tracker-table-fade {
  opacity: 0.6;
}

.tracker-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.tracker-pagination-size,
.tracker-pagination-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.tracker-pagination-size select {
  width: auto;
  padding: 5px 8px;
}

.tracker-pagination-actions {
  display: flex;
  gap: 8px;
}

.tracker-modal {
  max-width: 720px;
  display: flex;
  flex-direction: column;
}

.tracker-modal-body {
  padding-top: 4px;
}

.doc-desk {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin-top: 18px;
}

.doc-desk-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.doc-desk-head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.doc-desk-head p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 520px;
}

.doc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.doc-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}

.doc-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
}

.doc-card-head > div {
  flex: 1;
  min-width: 0;
}

.doc-card-generate {
  flex: none;
  margin-left: auto;
}

.doc-card-body {
  padding: 0 14px 12px;
}

.doc-tile-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand, #1d4ed8);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}

.doc-tile-icon svg {
  width: 20px;
  height: 20px;
}

.doc-tile-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.doc-tile-desc {
  display: block;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 2px;
}

.doc-history-empty {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted);
}

.doc-gen-overlay {
  z-index: 1100;
  align-items: center;
}

.doc-gen-panel {
  max-width: 460px;
}

.doc-gen-body {
  padding: 16px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.doc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doc-field label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.doc-field input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.doc-field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.doc-field input[readonly] {
  background: var(--hover);
  cursor: default;
}

.doc-history {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.doc-history-note {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}

.doc-history-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
}

/* The issued document stays on its own top line; whoever signed it, or who is
   still waiting to, is reported underneath instead of squeezed beside it. */
.doc-history-item .sig-state {
  flex: 1 1 100%;
  margin-top: 4px;
}

.doc-history-item .sig-state-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

.doc-history-item .sig-party-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.doc-history-item .sig-party {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.4;
}

.doc-history-item .sig-party-role {
  flex: 0 0 40%;
  font-weight: 600;
  color: var(--text);
}

.doc-history-item .sig-party-who {
  flex: 1 1 200px;
  color: var(--muted);
}

.doc-history-item .sig-party-when {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}

.doc-history-item .sig-party-demo {
  display: inline-block;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  padding: 0 8px;
  cursor: help;
}

.doc-history-item .sig-party-thumb {
  flex: 0 0 auto;
  width: 78px;
  height: 34px;
  object-fit: contain;
  object-position: left center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  padding: 2px 4px;
  cursor: pointer;
}

html[data-theme='dark'] .doc-history-item .sig-party-thumb {
  background: #0f172a;
}

.doc-history-item .sig-voided-why {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--color-danger, #dc2626);
  font-style: italic;
}

.doc-history-item a {
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
}

.doc-history-item a:hover {
  text-decoration: underline;
}

.doc-history-item span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}

.doc-history-item button {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.doc-history-item button:hover {
  color: var(--color-danger, #dc2626);
}

.tracker-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 16px;
}

.tracker-route {
  font-size: 13px;
  color: var(--muted);
}

.tracker-stepper {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 18px;
  margin-bottom: 18px;
}

.tracker-stepper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tracker-stepper-head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tracker-stepper-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}

.tracker-stepper-track {
  min-width: 560px;
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: 12px;
}

.tracker-stepper-line {
  position: absolute;
  top: 15px;
  left: 4%;
  right: 4%;
  height: 2px;
  background: var(--border);
  z-index: 1;
}

.tracker-stepper-progress {
  position: absolute;
  top: 15px;
  left: 4%;
  height: 2px;
  background: var(--success);
  z-index: 1;
  transition: width 0.4s ease;
}

.tracker-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 16%;
  z-index: 2;
  position: relative;
}

.tracker-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}

.tracker-step.is-done .tracker-step-dot {
  background: var(--success);
  border-color: var(--success);
  color: #ffffff;
}

.tracker-step-label {
  font-size: 12px;
  margin-top: 8px;
  color: var(--muted);
  text-align: center;
}

.tracker-step.is-done .tracker-step-label {
  color: var(--text);
}

.tracker-step-desc {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  margin-top: 2px;
  line-height: 1.3;
}

.tracker-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 20px;
  margin-bottom: 18px;
}

.tracker-detail-grid .detail-label {
  margin-bottom: 2px;
}

.tracker-trucks {
  margin-bottom: 18px;
}

.tracker-truck {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}

.tracker-truck-label {
  font-weight: 600;
  font-size: 13px;
  margin-right: auto;
}

.tracker-truck-eta {
  font-size: 12px;
  color: var(--muted);
}

.tracker-truck-phone {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}

.tracker-truck-phone:hover {
  text-decoration: underline;
}

.tracker-detail-map-wrap {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.tracker-detail-map {
  height: 280px;
  width: 100%;
}

@media (max-width: 640px) {
  .tracker-detail-map {
    height: 230px;
  }
}

.tracker-map-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 60%;
}

@media (max-width: 900px) {
  .tracker-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .app-layout {
    flex-direction: column;
    padding: 0;
  }

  .sidebar {
    width: 100%;
    position: static;
    max-height: none;
    padding: 8px 16px 0;
    overflow: visible;
    border-bottom: 1px solid var(--border);
  }

  .sidebar .nav-links {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .sidebar .nav-links a {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .navbar-inner {
    height: 62px;
    padding: 0 16px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
  }
}
[v-cloak] { display: none; }

.users-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: var(--brand-light);
  color: var(--brand-dark);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.users-summary:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
}

.users-summary-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
}

.users-summary-dot.is-online {
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.users-summary-sep {
  color: var(--muted);
}

.users-summary-label {
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
}

.users-summary-arrow {
  margin-left: 4px;
}

html[data-theme='dark'] .users-summary {
  background: #1e3a5f;
}

.users-presence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.users-presence-col {
  min-width: 0;
  max-height: 340px;
  overflow-y: auto;
}

.users-presence-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--brand-dark);
}

.user-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: #94a3b8;
}

.user-status-dot.is-online {
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

@media (max-width: 800px) {
  .users-presence {
    grid-template-columns: 1fr;
  }
}

.pref-group {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.pref-group:last-of-type {
  border-bottom: 0;
}

.pref-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding-top: 4px;
}

.pref-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pref-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.pref-option input[type='radio'] {
  width: auto;
  margin-top: 3px;
}

.pref-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pref-option-body strong {
  font-size: 14px;
  color: var(--text);
}

.pref-option-body small {
  font-size: 12px;
  color: var(--muted);
}

.terms-builder {
  margin: 4px 0 12px;
}

.terms-builder-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.terms-builder-row input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}

.terms-builder-row input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.terms-builder-row .terms-percent-input {
  flex: 0 0 80px;
  min-width: 0;
  text-align: center;
}

.payterm-item-split {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.payterm-percent {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: right;
  font-weight: 700;
  color: var(--brand);
}

.payterm-items {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.payterm-items li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.payterm-items li:last-child {
  border-bottom: 0;
}

/* ---------- Webhook URL box ---------- */
.webhook-box {
  display: flex;
  align-items: stretch;
  min-width: 240px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.webhook-box:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.webhook-box .webhook-url {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--text);
  text-overflow: ellipsis;
}

.webhook-box .webhook-url:focus {
  outline: none;
}

.webhook-box .btn-copy {
  flex-shrink: 0;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  padding: 0 20px;
  background: var(--card);
  color: var(--brand);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.webhook-box .btn-copy:hover {
  background: var(--brand);
  color: #fff;
}

html[data-theme='dark'] .webhook-box {
  background: #0f172a;
}

/* ---------- Payment callback card ---------- */
.callback-card {
  border-color: #bbf7d0;
  background: #f7fef8;
}

.callback-text {
  color: #475569;
  font-size: 14px;
  margin-bottom: 14px;
}

html[data-theme='dark'] .callback-card {
  border-color: #166534;
  background: #052e16;
}

html[data-theme='dark'] .callback-text {
  color: #bbf7d0;
}

/* ---------- Search box / combobox ---------- */
.search-box {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.search-box-point {
  flex: 0 1 300px;
}

.search-box .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

.search-box input.search-input {
  width: 100%;
  padding: 9px 32px 9px 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-box input.search-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.search-box .search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.search-box .search-clear:hover {
  color: var(--text);
  background: var(--hover);
}

html[data-theme='dark'] .search-box input.search-input {
  background: #0f172a;
}

.escrow-account-link {
  color: var(--brand);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.15s ease;
}

.escrow-account-link:hover {
  color: var(--brand);
  text-decoration: underline;
}

/* ---------- Escrow account detail ---------- */
.back-link {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.back-link:hover {
  color: var(--brand);
}

.inv-total {
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.amount-col {
  text-align: right;
  white-space: nowrap;
}

.fees-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.fee {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.fee-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}

.comm-breakdown {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13.5px;
  color: var(--text);
}

.breakdown-row > span:first-child {
  color: var(--muted);
}

.breakdown-total {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 8px;
  font-weight: 700;
  color: var(--text);
}

.breakdown-total > span:first-child {
  color: var(--text);
  font-weight: 600;
}

/* ==========================================================================
   Responsive · Mobile & Tablet
   Pure layout adaptation — no content is added or removed. Breakpoints:
   <=1240px tablets (small laptops), <=1024px portrait tablets,
   <=900px large phones / small tablets, <=640px phones, <=480px small phones.
   ========================================================================== */

/* ---------- Up to 1240px (tablets / small laptops) ---------- */
@media (max-width: 1240px) {
  .navbar-inner,
  .app-layout,
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------- Up to 1024px (portrait tablets) ---------- */
@media (max-width: 1024px) {
  .container {
    padding-top: 20px;
  }

  .stats {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }

  .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
  }

  .sidebar {
    width: 200px;
  }

  .order-detail-heading {
    flex-wrap: wrap;
  }
}

/* ---------- Up to 900px (phones landscape / small tablets) ---------- */
@media (max-width: 900px) {
  /* Content maps live in 55vh so the map + results/route panel fit on one screen. */
  #tracker-map,
  #truck-map,
  #map,
  #tender-route-map,
  #map-preview {
    height: 55vh !important;
    min-height: 340px;
    max-height: 720px;
  }

  #geo-frame {
    height: 55vh !important;
    min-height: 340px;
    max-height: 720px;
  }

  /* The sidebar becomes a sticky horizontal nav strip so it stays reachable. */
  .sidebar {
    position: sticky;
    top: 62px;
    z-index: 40;
    background: var(--card);
    box-shadow: var(--shadow);
  }

  .sidebar .nav-links {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sidebar .nav-links::-webkit-scrollbar {
    display: none;
  }

  .tracker-sidebar {
    max-height: 42vh;
  }
}

/* ---------- Up to 640px (phones) ---------- */
@media (max-width: 640px) {
  .container {
    padding: 16px 12px 48px;
  }

  .app-layout {
    padding: 0;
  }

  .navbar-inner {
    height: 58px;
    padding: 0 12px;
    gap: 8px;
  }

  .sidebar {
    top: 58px;
  }

  .brand {
    gap: 8px;
    font-size: 15px;
    min-width: 0;
  }

  .brand > span:not(.brand-mark) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 7px;
  }

  .brand small {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }

  .nav-avatar {
    width: 34px;
    height: 34px;
  }

  .nav-dropdown-menu.user-menu {
    position: fixed;
    right: 12px;
    top: 66px;
    left: auto;
  }

  .card {
    padding: 16px;
    border-radius: 8px;
  }

  .card-title {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .page-title {
    font-size: 20px;
  }

  .page-subtitle {
    font-size: 13px;
  }

  .page-header {
    gap: 12px;
    margin-bottom: 16px;
  }

  .stats {
    gap: 10px;
    margin-bottom: 16px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .stat {
    padding: 14px;
  }

  .stat-value {
    font-size: 24px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .form-actions {
    gap: 10px;
  }

  /* Dense tables: keep the horizontal-scroll wrapper comfortable on touch. */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 10px 12px;
  }

  .table-wrap th {
    font-size: 11px;
  }

  .table-wrap td {
    font-size: 13px;
  }

  /* The 6-column order-lines table (order_list/invoice_list) scrolls on
     phones instead of crushing its columns. */
  .order-detail-lines {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .order-detail-lines table {
    min-width: 560px;
  }

  /* Filter bars stack every field full-width on phones. !important wins over
     the page-local `.filter-field-control` min-width:152px rules. */
  .filter-bar {
    gap: 10px !important;
  }

  .filter-bar > * {
    flex: 1 1 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .filter-field-control select.filters-control,
  .filter-field-control input[type='date'].filters-control {
    min-width: 0 !important;
  }

  .search-box {
    min-width: 0;
  }

  /* Geo map controls wrap and stretch full-width. */
  .control-row {
    flex-wrap: wrap;
  }

  .control-row input[type='text'],
  .control-row input:not([type]) {
    flex: 1 1 100% !important;
    width: 100%;
    min-width: 0;
  }

  /* Route overlay panes fill the map width. */
  .route-toolbar {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    left: 8px !important;
    right: 8px !important;
  }

  .tracker-map-hint {
    max-width: calc(100% - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    font-size: 12px;
  }

  .tracker-sidebar {
    max-height: 48vh;
  }

  /* Modals become near-full-screen bottom sheets. !important also beats the
     page-local `.modal-overlay`/`.modal-panel` rules shipped inside some
     templates (e.g. agent_transporter_vehicles), which would otherwise keep
     modals top-anchored. */
  .modal-overlay {
    padding: 12px 8px 8px !important;
    align-items: flex-end !important;
  }

  .modal-panel {
    max-width: none !important;
    width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    max-height: 90vh !important;
    padding: 18px 16px !important;
  }

  /* Preference rows (profile) collapse to a single column. */
  .pref-group {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  /* Agent tab pill rows wrap instead of overflowing the screen. */
  .agent-tabs {
    flex-wrap: wrap;
  }

  /* Config pill tabs shrink to fit comfortably. */
  .config-tabs a {
    padding: 7px 12px;
    font-size: 13px;
  }

  .config-tabs {
    margin-bottom: 14px;
  }

  .footer {
    padding: 16px 0;
    font-size: 12px;
  }

  .pagination-info {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  .webhook-box {
    min-width: 0;
  }
}

/* ---------- Up to 480px (small phones) ---------- */
@media (max-width: 480px) {
  .brand small {
    display: none;
  }

  .navbar-inner {
    padding: 0 10px;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 9px 10px;
  }

  .auth-theme {
    padding: 16px;
  }

  .auth-card {
    padding: 26px 18px;
  }
}

/* ---------- In-app notifications (bell, panel and toasts) ---------- */
.nav-notification {
  position: relative;
  display: flex;
  align-items: center;
}

button.nav-theme {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

button.nav-theme:hover {
  background: var(--hover);
  color: var(--text);
}

.nav-theme-icon {
  position: absolute;
}

.nav-theme-icon--sun {
  display: none;
}

.nav-theme-icon--moon {
  display: block;
}

html[data-theme='dark'] .nav-theme-icon--sun {
  display: block;
}

html[data-theme='dark'] .nav-theme-icon--moon {
  display: none;
}

button.nav-theme[disabled] {
  cursor: wait;
  opacity: 0.7;
}

button.nav-bell {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

button.nav-bell:hover {
  background: var(--hover);
  color: var(--text);
}

button.nav-bell--has {
  color: var(--brand);
}

.nav-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--card);
}

.nav-bell-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  z-index: 90;
  overflow: hidden;
}

.nav-bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.nav-bell-head-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

.nav-bell-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 340px;
  overflow-y: auto;
}

.nav-bell-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}

.nav-bell-item:hover {
  background: var(--hover);
}

.nav-bell-item-body {
  min-width: 0;
}

.nav-bell-item-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.nav-bell-item-msg {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

.nav-bell-item-meta,
.notif-toast-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.nav-bell-meta {
  padding: 22px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.nav-bell-foot {
  border-top: 1px solid var(--border);
  padding: 9px;
  text-align: center;
}

.nav-bell-foot a {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
}

.notif-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 3px;
}

.notif-dot--tender_sent { background: #2563eb; }
.notif-dot--order_submitted { background: #0891b2; }
.notif-dot--order_awarded { background: #16a34a; }
.notif-dot--payment { background: #ca8a04; }
.notif-dot--pickup { background: #7c3aed; }
.notif-dot--login,
.notif-dot--system { background: #94a3b8; }

.notif-toasts {
  position: fixed;
  top: 74px;
  right: 20px;
  width: 360px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1200;
}

.notif-toast {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid #2563eb;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  padding: 12px 14px;
  cursor: pointer;
}

.notif-toast--order_awarded,
.notif-toast--payment { border-left-color: #16a34a; }

.notif-toast--order_submitted { border-left-color: #0891b2; }

.notif-toast--pickup { border-left-color: #7c3aed; }

.notif-toast--login,
.notif-toast--system { border-left-color: #94a3b8; }

.notif-toast-body {
  min-width: 0;
  flex: 1;
}

.notif-toast-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.notif-toast-msg {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

.notif-toast-close {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.notif-toast-close:hover {
  color: var(--text);
}

.notif-pop-enter-active,
.notif-pop-leave-active {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.notif-pop-enter-from,
.notif-pop-leave-to {
  opacity: 0;
  transform: translateY(-6px);
}

.notif-toast-enter-active,
.notif-toast-leave-active {
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.notif-toast-enter-from,
.notif-toast-leave-to {
  opacity: 0;
  transform: translateX(24px);
}

@media (max-width: 640px) {
  .notif-toasts {
    right: 10px;
    left: 10px;
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
   First-sign-in onboarding wizard
--------------------------------------------------------------------------- */

.onboarding-steps {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 22px;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.onboarding-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border, #d9dee3);
  background: var(--card-bg, #fff);
  font-size: 12px;
  line-height: 1;
}

.onboarding-step.is-active {
  color: var(--primary, #0d6efd);
}

.onboarding-step.is-active .onboarding-step-num {
  border-color: var(--primary, #0d6efd);
  color: var(--primary, #0d6efd);
}

.onboarding-step.is-done .onboarding-step-num {
  border-color: var(--success, #198754);
  background: var(--success, #198754);
  color: #fff;
}

.onboarding-step-line {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--border, #d9dee3);
  min-width: 28px;
}

.onboarding-step-line.is-done {
  background: var(--success, #198754);
}

.onboarding-dropzone {
  border: 2px dashed var(--border, #d9dee3);
  border-radius: 10px;
  padding: 26px;
  text-align: center;
  background: var(--card-bg, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.onboarding-dropzone:hover {
  border-color: var(--primary, #0d6efd);
  background: rgba(13, 110, 253, 0.04);
}

.onboarding-success {
  text-align: center;
  padding: 26px 8px;
}

.onboarding-success-icon {
  font-size: 44px;
  line-height: 1;
  animation: onboarding-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.onboarding-success-title {
  margin: 14px 0 6px;
  font-size: 22px;
}

.onboarding-success-text {
  color: var(--muted);
  margin-bottom: 22px;
}

.onboarding-success-action {
  display: flex;
  justify-content: flex-end;
}

.terms-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.terms-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.terms-input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border, #d9dee3);
  border-radius: 8px;
  background: var(--card-bg, #fff);
  color: var(--text, #1f2937);
  font-size: 14px;
}

.terms-total {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.terms-total strong {
  color: var(--text, #1f2937);
}

.terms-total.is-ok {
  color: var(--success, #198754);
}

.terms-total.is-bad {
  color: var(--danger, #dc3545);
}

.onboarding-welcome {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.94), rgba(25, 135, 84, 0.9));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.onboarding-welcome.is-visible {
  opacity: 1;
  visibility: visible;
}

.onboarding-welcome-inner {
  text-align: center;
  color: #fff;
  animation: onboarding-welcome-rise 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.onboarding-welcome-badge {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 18px;
  animation: onboarding-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.onboarding-welcome-title {
  font-size: 30px;
  margin-bottom: 10px;
  font-weight: 700;
}

.onboarding-welcome-sub {
  font-size: 15px;
  max-width: 460px;
  margin: 0 auto 26px;
  opacity: 0.92;
}

@keyframes onboarding-pop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes onboarding-welcome-rise {
  0% {
    transform: translateY(26px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.preset-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.preset-tile:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(13, 110, 253, 0.10);
  transform: translateY(-1px);
}

html[data-theme='dark'] .preset-tile:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.preset-tile--selected {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.preset-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-tile-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  cursor: pointer;
}

.preset-tile-title {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
}

.preset-desc {
  color: var(--muted);
  font-size: 14px;
}

/* Vivid button that pops a new payment term widget */
.btn-create-term {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #2563eb;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  font-weight: 700;
}

.btn-create-term:hover {
  background: #1d4ed8;
  color: #fff;
}

html[data-theme='dark'] .btn-create-term {
  background: #3b82f6;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

html[data-theme='dark'] .btn-create-term:hover {
  background: #2563eb;
  color: #fff;
}

/* ==========================================================================
   Shell arrangement: top bar + side bar mirror of the reference app layout.
   Header: hamburger + brand + role badge (left) / theme + bell + logout (right).
   Side bar: brand on top, "{Role} Portal" label, icon + label nav items,
   user card pinned at the bottom. Side bar becomes an off-canvas drawer on
   small screens opened by the hamburger.
   ========================================================================== */

/* ---------- Header ---------- */
.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 6px;
  margin-left: -6px;
  border-radius: 8px;
}

.nav-hamburger:hover {
  background: var(--hover);
}

.nav-brand-inline {
  gap: 8px;
  min-width: 0;
}

.nav-brand-title {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-role-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--brand-light);
  color: var(--brand-dark);
  border: 1px solid var(--brand);
}

.nav-logout-form {
  margin: 0;
  display: flex;
}

.nav-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.nav-logout:hover {
  background: rgba(239, 68, 68, 0.16);
  color: var(--danger);
}

/* ---------- Side bar shell ---------- */
.sidebar {
  display: flex;
  flex-direction: column;
  width: 240px;
  padding: 16px 12px 12px 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  overflow: hidden;
  z-index: 40;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 8px 14px;
}

.sidebar-brand-title {
  min-width: 0;
}

.sidebar-brand .brand {
  min-width: 0;
}

.sidebar-brand .brand > span:last-child {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar-brand .brand small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  margin-left: auto;
}

.sidebar-close:hover {
  background: var(--hover);
  color: var(--text);
}

.sidebar-section {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
  padding: 0 8px 10px;
}

.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 0 12px;
}

.sidebar-nav::-webkit-scrollbar {
  width: 8px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar .nav-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 2px;
}

.sidebar .nav-links a svg {
  flex: none;
}

.sidebar .nav-links a span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .nav-links .active a,
.sidebar .nav-links a.active {
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
}

.sidebar-user {
  border-top: 1px solid var(--border);
  padding: 12px 4px 0;
}

.sidebar-user-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 10px;
}

.sidebar-user-link:hover {
  background: var(--hover);
  text-decoration: none;
}

.sidebar-user-link .nav-avatar {
  width: 36px;
  height: 36px;
  flex: none;
}

.sidebar-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Shell: the left nav spans the full height and meets the top bar,
   so the top bar and the brand sit at the intersection corner ---------- */
:root {
  --side-width: 240px;
}

@media (max-width: 1024px) and (min-width: 901px) {
  :root {
    --side-width: 200px;
  }
}

@media (min-width: 901px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--side-width);
    height: 100vh;
    max-height: 100vh;
    z-index: 52;
  }

  .navbar-inner,
  .app-layout-sidebar {
    padding-left: calc(var(--side-width) + 20px);
  }
}

/* ---------- Small screens: off-canvas side bar drawer ---------- */
@media (max-width: 900px) {
  .nav-hamburger {
    display: flex;
  }

  .app-layout {
    flex-direction: row;
    padding: 0;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    max-height: 100vh;
    width: 272px;
    max-width: 85vw;
    padding: 18px 16px;
    margin: 0;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    z-index: 120;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  }

  .sidebar.sidebar--open {
    transform: none;
  }

  .sidebar-close {
    display: flex;
  }

  .sidebar .nav-links {
    flex-direction: column;
    overflow: visible;
    padding: 0;
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 110;
  }

  .sidebar-overlay--show {
    display: block;
  }

  html[data-theme='dark'] .sidebar {
    background: #0b1220;
  }
}

@media (max-width: 640px) {
  .nav-logout-label {
    display: none;
  }

  .nav-logout {
    padding: 8px;
  }
}

.app-install-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: none;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.app-install-fab svg {
  width: 18px;
  height: 18px;
}

.app-install-fab:hover {
  filter: brightness(1.07);
}

.app-install-fab:active {
  transform: translateY(1px);
}

.app-install--hidden {
  display: none !important;
}

/* Install proposal banner (shown to browser users who have not installed the app) */
.app-install-banner {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 380px;
  max-width: calc(100vw - 24px);
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
  animation: app-install-in 0.3s ease-out;
}

@keyframes app-install-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-install-banner__icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 12px;
}

.app-install-banner__body {
  flex: 1 1 auto;
  min-width: 0;
}

.app-install-banner__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  padding-right: 22px;
}

.app-install-banner__text {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.app-install-banner__steps {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.55;
}

.app-install-banner__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.app-install-banner__btn {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}

.app-install-banner__btn:hover {
  background: var(--bg);
}

.app-install-banner__btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, #1d4ed8, #16a34a);
  color: #fff;
}

.app-install-banner__btn--primary:hover {
  filter: brightness(1.08);
  background: linear-gradient(135deg, #1d4ed8, #16a34a);
}

.app-install-banner__link {
  display: block;
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.app-install-banner__link:hover {
  color: var(--text);
}

.app-install-banner__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.app-install-banner__close:hover {
  background: var(--bg);
  color: var(--text);
}

@media (max-width: 640px) {
  .app-install-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}

/* ---------- Sign-up consent ---------- */
/* Sits under the two password fields. The whole label is a click target, so
   the boxes and the links are one control rather than two. */
.form-consent label {
  display: flex;
  align-items: flex-start;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.55;
  cursor: pointer;
}

/* The space before "I have read" comes from this margin rather than from a
   flex gap on the label: a gap only exists while that flex rule is in force,
   and the checkbox sitting flush against the text is the one thing that makes
   the consent line hard to scan. 12px reads as a gap at 13px type. */
.form-consent input[type='checkbox'] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 12px 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  accent-color: var(--brand);
  cursor: pointer;
}

.form-consent input[type='checkbox']:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.form-consent a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Legal documents (Privacy Policy / Terms of Service) ---------- */
.legal-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 20px 8px;
}

.legal-card {
  padding: 24px 32px 40px;
}

.legal-toolbar {
  margin-bottom: 4px;
}

.legal-back {
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.legal-back:hover {
  text-decoration: underline;
}

.legal-doc {
  max-width: 78ch;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

.legal-doc h1 {
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 4px;
}

.legal-doc h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 34px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.legal-doc h3 {
  font-size: 16px;
  margin: 26px 0 8px;
}

.legal-doc p {
  margin: 0 0 12px;
}

.legal-doc ul,
.legal-doc ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal-doc li {
  margin-bottom: 7px;
}

.legal-doc > ul,
.legal-doc > ol {
  padding-left: 26px;
}

.legal-doc li p:last-child {
  margin-bottom: 0;
}

.legal-doc blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--brand);
  background: var(--bg);
  border-radius: 0 8px 8px 0;
}

.legal-doc blockquote p:last-child {
  margin-bottom: 0;
}

.legal-doc code {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.9em;
}

.legal-doc hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0;
}

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 20px;
  font-size: 14px;
}

.legal-doc th,
.legal-doc td {
  padding: 9px 11px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}

.legal-doc th {
  background: var(--bg);
  font-weight: 700;
}

.legal-doc tbody tr:nth-child(even) td {
  background: var(--row-hover);
}

@media (max-width: 720px) {
  .legal-page {
    padding: 20px 12px 8px;
  }

  .legal-card {
    padding: 20px 16px 32px;
  }

  .legal-doc {
    font-size: 14px;
  }

  .legal-doc h1 {
    font-size: 24px;
  }

  .legal-doc table {
    font-size: 13px;
  }

  .legal-doc th,
  .legal-doc td {
    padding: 7px 8px;
  }
}

/* ---------- Admin change-password dialog ---------- */
/* The generated password is typed into a masked field, so the button has to
   sit beside it rather than underneath: the administrator sees that both
   fields moved and can go straight to setting the password. */
.pw-input {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pw-input input {
  flex: 1;
  min-width: 0;
}

.pw-generate {
  flex: 0 0 auto;
  white-space: nowrap;
}