/* DJ Capital Transport Driver Portal - Styles
 *
 * Portal-specific styles: form layouts, step navigation, shift card layouts,
 * inspection checkboxes, trip/expense cards, review summaries, admin tables.
 *
 * Follows the brand palette and tokens from styles.css.
 * Mobile-first, large touch targets (minimum 44px), accessible color contrasts.
 */

/* PORTAL PAGE WRAPPER & HEADER */
.portal-page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.portal-header {
  background-color: var(--navy);
  color: var(--white);
  padding: var(--s-4);
  border-bottom: 2px solid var(--teal);
}

.portal-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.portal-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.portal-brand img {
  height: 40px;
  width: auto;
}

.portal-logout {
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm);
  background-color: transparent;
  color: var(--white);
  border: 1px solid var(--white);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.portal-logout:hover {
  background-color: var(--white);
  color: var(--navy);
}

/* PORTAL MAIN CONTENT */
.portal main {
  flex: 1;
}

/* DASHBOARD GREETING + AVATAR */
.portal-greeting-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.portal-driver-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--teal);
  flex-shrink: 0;
}

.admin-driver-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  display: inline-block;
}

.admin-driver-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mist);
  color: var(--slate);
}

.admin-vehicle-cell {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.admin-vehicle-cell select {
  max-width: 140px;
}

/* STATUS BLOCKS & BANNERS */
.portal-status-block {
  background-color: var(--mist);
  border: 1px solid var(--teal);
  padding: var(--s-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s-5);
}

.portal-status-block p {
  margin: var(--s-2) 0;
  display: flex;
  gap: var(--s-3);
}

.portal-status-block .label {
  font-weight: 600;
  min-width: 100px;
}

.status-badge {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border-radius: 20px;
  font-weight: 600;
  font-size: var(--t-sm);
}

.status-badge--neutral {
  background-color: var(--slate);
  color: var(--white);
}

.status-badge--active {
  background-color: var(--green);
  color: var(--white);
}

.status-badge--completed {
  background-color: var(--green);
  color: var(--white);
}

/* FORM CARDS */
.form-card {
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--shadow);
}

.form {
  margin-top: var(--s-5);
}

.fieldset {
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}

.fieldset:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.fieldset legend {
  font-size: var(--t-lg);
  font-weight: 600;
  margin-bottom: var(--s-4);
  color: var(--navy);
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

@media (min-width: 640px) {
  .form__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
}

.field label {
  font-weight: 600;
  margin-bottom: var(--s-2);
  color: var(--ink);
  font-size: var(--t-base);
}

.field input,
.field select,
.field textarea {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.5;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(31, 120, 124, 0.1);
}

.field textarea {
  resize: vertical;
  min-height: 100px;
}

.field-label {
  font-weight: 600;
  margin-bottom: var(--s-2);
  color: var(--ink);
  font-size: var(--t-base);
  display: block;
}

.field-value {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--mist);
  font-size: var(--t-base);
  margin: 0;
}

.hint {
  font-size: var(--t-sm);
  color: var(--slate);
  margin-top: var(--s-2);
}

.req {
  color: #d32f2f;
}

/* BUTTONS */
.btn {
  padding: var(--s-3) var(--s-4);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--t-base);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  font-family: var(--font-body);
}

.btn--primary {
  background-color: var(--navy);
  color: var(--white);
}

.btn--primary:hover {
  background-color: var(--deep);
}

.btn--secondary {
  background-color: var(--teal);
  color: var(--white);
}

.btn--secondary:hover {
  background-color: var(--teal-dark);
}

.btn--tertiary {
  background-color: var(--mist);
  color: var(--navy);
  border: 1px solid var(--line);
}

.btn--tertiary:hover {
  background-color: var(--line);
}

.btn--lg {
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-lg);
  min-height: 52px;
  width: 100%;
}

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

/* NOTICES/ALERTS */
.notice {
  padding: var(--s-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s-5);
  border: 1px solid;
}

.notice h3 {
  margin: 0 0 var(--s-2) 0;
  font-size: var(--t-base);
}

.notice p {
  margin: var(--s-2) 0;
}

.notice a {
  text-decoration: underline;
}

.notice--success {
  background-color: rgba(50, 159, 94, 0.1);
  border-color: var(--green);
  color: var(--green-dark);
}

.notice--error {
  background-color: rgba(211, 47, 47, 0.1);
  border-color: #d32f2f;
  color: #b71c1c;
}

.notice--warning {
  background-color: rgba(201, 130, 30, 0.1);
  border-color: var(--amber);
  color: var(--amber-dark);
}

.notice--info {
  background-color: rgba(79, 168, 199, 0.1);
  border-color: var(--sky);
  color: #0277bd;
}

.safety-ack-label { display: flex; align-items: flex-start; gap: .5rem; margin: .75rem 0; font-weight: 600; cursor: pointer; }
.safety-ack-label input[type="checkbox"] { margin-top: .2rem; width: 20px; height: 20px; flex: 0 0 20px; }
#btn-safety-acknowledge[disabled] { opacity: .5; cursor: not-allowed; }

/* PORTAL ACTIONS */
.portal-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}

@media (min-width: 640px) {
  .portal-actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* SHIFT LIST */
.portal-shift-list {
  margin-top: var(--s-7);
}

.portal-shift-list h2 {
  font-size: var(--t-xl);
  margin-bottom: var(--s-4);
  color: var(--navy);
}

.shift-card {
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.shift-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow);
}

.shift-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--s-3);
}

.shift-card-date {
  font-weight: 600;
  font-size: var(--t-lg);
  color: var(--navy);
}

.shift-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-3);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.stat-label {
  font-size: var(--t-sm);
  color: var(--slate);
  font-weight: 500;
}

.stat-value {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--navy);
}

/* STEP SECTIONS (Multi-step shift form) */
.portal-shift-container {
  max-width: 900px;
  margin: 0 auto;
}

.step-section {
  display: none;
}

.step-section.active {
  display: block;
}

.step-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

/* INSPECTION PROGRESS + CELEBRATION */
.inspection-progress {
  margin-bottom: var(--s-5);
}

.inspection-progress-bar-track {
  height: 14px;
  border-radius: 999px;
  background-color: var(--mist);
  border: 1px solid var(--line);
  overflow: hidden;
}

.inspection-progress-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--teal), var(--navy));
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.inspection-progress-label {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--navy);
}

.inspection-continue-hint {
  color: var(--slate, #5a6b7d);
  font-size: var(--t-sm);
  margin-top: var(--s-3);
}

.inspection-complete-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background-color: var(--teal);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: var(--s-4);
  font-weight: 600;
  margin-bottom: var(--s-4);
}

.inspection-complete-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--teal);
  font-size: var(--t-sm);
}

.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  opacity: 0.9;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(540deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-piece {
    animation: none;
    display: none;
  }
}

/* INSPECTION FORM */
.inspection-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

.inspection-item.is-answered {
  border-color: var(--teal);
}

.inspection-item-error {
  margin-top: var(--s-2);
  margin-bottom: 0;
  color: #b71c1c;
  font-size: var(--t-sm);
  font-weight: 600;
}

.inspection-item {
  background-color: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-4);
}

.inspection-item-title {
  font-weight: 600;
  margin-bottom: var(--s-3);
  color: var(--navy);
  font-size: var(--t-base);
}

.inspection-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

.inspection-button {
  padding: var(--s-3);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: 600;
  transition: all 0.2s;
  min-height: 44px;
}

.inspection-button:hover {
  border-color: var(--teal);
}

.inspection-button.selected {
  background-color: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}

.inspection-note {
  margin-top: var(--s-3);
  display: none;
}

.inspection-note textarea {
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  resize: vertical;
  min-height: 80px;
}

.inspection-photo {
  margin-top: var(--s-3);
  display: none;
}

.inspection-photo input {
  width: 100%;
}

/* TRIP & EXPENSE CARDS */
.trips-list,
.expenses-list {
  margin-bottom: var(--s-5);
}

.trip-card,
.expense-card {
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--s-3);
}

.trip-card-content,
.expense-card-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

.trip-meta {
  font-size: var(--t-sm);
  color: var(--slate);
}

.trip-meta strong {
  color: var(--navy);
  display: block;
  font-size: var(--t-base);
}

.card-delete-button {
  background-color: transparent;
  color: #d32f2f;
  border: none;
  cursor: pointer;
  font-size: var(--t-lg);
  padding: var(--s-2);
  min-height: 44px;
  min-width: 44px;
}

/* REVIEW SUMMARY */
.portal-review-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

.review-block {
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
}

.review-block h3 {
  font-size: var(--t-lg);
  margin-bottom: var(--s-3);
  color: var(--navy);
}

.review-block dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  row-gap: var(--s-2);
}

.review-block dt {
  font-weight: 600;
  color: var(--slate);
}

.review-block dd {
  color: var(--navy);
  margin: 0;
}

.review-totals {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.review-totals dt {
  font-weight: 600;
}

.review-totals dd {
  color: var(--teal);
  font-weight: 600;
}

/* PRINT STYLES */
.print-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.button-group {
  display: flex;
  gap: var(--s-3);
}

@media print {
  .print-controls,
  [data-portal-logout],
  .portal-logout {
    display: none !important;
  }

  body {
    background: white;
  }

  .portal-header {
    display: none;
  }

  .print-section {
    page-break-inside: avoid;
  }
}

.print-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  border-bottom: 2px solid var(--navy);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-5);
}

.print-driver-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--teal);
  flex-shrink: 0;
}

.print-brand h1 {
  margin: 0;
  font-size: var(--t-3xl);
  color: var(--navy);
}

.print-brand p {
  margin: 0;
  color: var(--slate);
}

.print-content {
  margin-bottom: var(--s-7);
}

.print-block {
  margin-bottom: var(--s-6);
  page-break-inside: avoid;
}

.print-block h2 {
  font-size: var(--t-xl);
  margin-bottom: var(--s-3);
  color: var(--navy);
  border-bottom: 2px solid var(--teal);
  padding-bottom: var(--s-2);
}

.print-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s-4);
  font-size: var(--t-sm);
}

.print-table th,
.print-table td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.print-table th {
  background-color: var(--mist);
  font-weight: 600;
  color: var(--navy);
}

.print-table tbody tr:nth-child(even) {
  background-color: rgba(238, 243, 246, 0.5);
}

.print-table--inspection tbody td:nth-child(3) {
  font-size: var(--t-xs);
  color: var(--slate);
}

/* Shift Summary and Pre-Trip Inspection print tables read as grids: each <tr>
   still holds one item's cells in DOM order, but a wide column-track count
   wraps two items per visual row, so the report uses the page's full width
   instead of one tall single-file column. */
.print-table--summary {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr;
  column-gap: var(--s-5);
}

.print-table--summary tbody,
.print-table--summary tr {
  display: contents;
}

.print-table--summary th,
.print-table--summary td {
  border-bottom: 1px solid var(--line);
  padding: var(--s-2) var(--s-3);
}

.print-table--inspection {
  display: grid;
  grid-template-columns: 1.5fr max-content 1fr 1.5fr max-content 1fr;
  column-gap: var(--s-5);
}

.print-table--inspection thead,
.print-table--inspection tbody,
.print-table--inspection tr {
  display: contents;
}

.print-table--inspection th,
.print-table--inspection td {
  border-bottom: 1px solid var(--line);
  padding: var(--s-2) var(--s-3);
}

.print-table--inspection thead th {
  background-color: var(--mist);
  font-weight: 600;
  color: var(--navy);
}

@media (max-width: 640px) {
  .print-table--summary,
  .print-table--inspection {
    grid-template-columns: max-content 1fr;
  }
}

.print-totals {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  row-gap: var(--s-2);
  padding: var(--s-3);
  background-color: var(--mist);
  border-radius: var(--radius-sm);
  width: fit-content;
}

.print-totals dt {
  font-weight: 600;
}

.print-totals dd {
  margin: 0;
  text-align: right;
}

.print-certification {
  background-color: var(--white);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  text-align: center;
  padding: var(--s-5);
}

.print-certification p {
  margin: var(--s-2) 0;
}

.print-legal {
  font-size: var(--t-sm);
  color: var(--slate);
  font-style: italic;
}

/* PRINT/REPORT FOOTER -- logo + business contact line on every report,
   founder request 2026-09-16 ("keep the brand visible on every report").
   The server-generated PDF stamps this same content on every page via
   pdf-lib directly; this is the on-screen / browser-print equivalent. */
.print-footer {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 2px solid var(--teal);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.print-footer__logo {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

.print-footer__text {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--slate);
}

.print-footer__text a {
  color: var(--slate);
  text-decoration: none;
}

@media print {
  .print-footer {
    position: fixed;
    bottom: 0;
    left: var(--s-6);
    right: var(--s-6);
    background-color: white;
  }

  /* Reserve room at the bottom of every printed page so body content never
     runs underneath the fixed footer above. */
  .print-content {
    margin-bottom: 60px;
  }
}

/* ADMIN DASHBOARD */
.admin-filters {
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
}

.admin-filters h2 {
  font-size: var(--t-lg);
  margin-top: 0;
}

.form--inline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

@media (min-width: 640px) {
  .form--inline {
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: flex-end;
  }
}

.admin-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.admin-table th {
  background-color: var(--navy);
  color: var(--white);
  padding: var(--s-3);
  text-align: left;
  font-weight: 600;
  position: sticky;
  top: 0;
}

.admin-table td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.admin-table tbody tr:hover {
  background-color: var(--mist);
  cursor: pointer;
}

.admin-table tbody tr:nth-child(even) {
  background-color: rgba(238, 243, 246, 0.5);
}

.admin-table .issue-flag {
  color: #d32f2f;
  font-weight: 600;
}

.text-center {
  text-align: center;
}

/* LOADING STATE */
.loading-text {
  text-align: center;
  color: var(--slate);
  padding: var(--s-5);
}

/* GLOVE BOX UPLOAD MODAL -- replaces a chained prompt()+fileInput.click()
   flow that silently never opened a file picker on a real browser (the
   click loses "user activation" once a native prompt() has resolved). */
.glovebox-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(13, 37, 75, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  z-index: 1000;
}

.glovebox-modal {
  background-color: var(--white);
  border-radius: var(--radius-md);
  padding: var(--s-6);
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.glovebox-modal h3 {
  margin: 0;
  color: var(--navy);
}

.glovebox-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
}

/* DIGITAL GLOVE BOX */
.glovebox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-5);
  margin: var(--s-5) 0;
}

.glovebox-card {
  background-color: var(--white);
  border: 2px solid var(--teal);
  border-radius: var(--radius-md);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(31, 120, 124, 0.1);
}

.glovebox-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 120, 124, 0.2);
}

.glovebox-card__icon {
  font-size: 2.5rem;
  text-align: center;
  line-height: 1;
}

.glovebox-card__content {
  flex: 1;
}

.glovebox-card__content h3 {
  margin: 0 0 var(--s-2) 0;
  font-size: var(--t-base);
  color: var(--navy);
}

.glovebox-card__status-line {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-2) 0;
  font-size: var(--t-sm);
}

.glovebox-card__version {
  display: inline-block;
  background-color: var(--slate);
  color: var(--white);
  padding: var(--s-1) var(--s-2);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.glovebox-card__meta {
  margin: 0 0 var(--s-1) 0;
  font-size: var(--t-sm);
  color: var(--slate);
}

.glovebox-card__updated {
  margin: 0;
  font-size: 0.75rem;
  color: var(--slate);
  font-style: italic;
}

.glovebox-card__actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.btn--sm {
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-sm);
  min-height: 36px;
}

.btn--xs {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  min-height: 32px;
}

/* Status badge additions for glovebox */
.status-badge--valid {
  background-color: var(--green);
  color: var(--white);
}

.status-badge--warning {
  background-color: #f59e0b;
  color: var(--white);
}

.status-badge--danger {
  background-color: #ef4444;
  color: var(--white);
}

/* RESPONSIVE */
@media (max-width: 480px) {
  .form__grid {
    grid-template-columns: 1fr;
  }

  .btn--lg {
    padding: var(--s-3) var(--s-4);
    font-size: var(--t-base);
    min-height: 44px;
  }

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

  .inspection-buttons {
    grid-template-columns: 1fr;
  }

  .portal-shift-header {
    font-size: var(--t-sm);
  }
}

/* 2026-09-28: trip recorded while a paperwork checklist issue was open. */
.trip-flag { color: #9a5b00; font-style: normal; font-weight: 600; }

/* 2026-09-28: shift tabs, active trips, stops. */
.shift-tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.shift-tab { flex: 1 1 auto; min-height: 44px; padding: .55rem 1rem; border: 2px solid var(--navy, #0B2545); background: #fff; color: var(--navy, #0B2545); border-radius: 8px; font-weight: 700; cursor: pointer; }
.shift-tab.is-current { background: var(--navy, #0B2545); color: #fff; }
.trip-card--active { border-left: 4px solid #29A66B; }
.trip-card--done { opacity: .95; }
.trip-card-head { display: flex; align-items: center; gap: .6rem; }
.trip-card-head .card-delete-button { margin-left: auto; }
.trip-badge { font-size: .75rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; }
.trip-badge--active { background: #e3f5ec; color: #1d7a4d; }
.trip-badge--done { background: #eef3f6; color: #5B6B7B; }
.trip-line { margin: .35rem 0 0; }
.trip-stops { margin: .4rem 0 0 1.1rem; padding: 0; }
.trip-add-stop { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.trip-add-stop input[type="text"] { flex: 1 1 180px; min-height: 44px; }
.trip-add-stop input[type="time"] { flex: 0 0 auto; min-height: 44px; }
.trip-complete { margin-top: .75rem; }
.trip-complete summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.trip-complete label { display: block; margin-top: .5rem; font-weight: 600; }
.trip-complete input, .trip-complete select, .trip-complete textarea { display: block; width: 100%; min-height: 44px; margin-top: .25rem; }
.trip-complete .btn { margin-top: .75rem; }
.trip-card--active, .trip-card--done { display: block; }
.trip-card-head { flex-wrap: wrap; }
.trip-card-head .trip-meta { font-weight: 600; }

/* Offline sync status pill, header (assets/portal-sync.js). Shown on every
   portal page, not just the dashboard, per the founder's offline-first spec. */
.portal-sync-indicator { display: none; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap; }
.portal-sync-indicator[data-state]{ display: inline-flex; }
.portal-sync-indicator::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.portal-sync-indicator[data-state="online"] { background: #E6F4EC; color: #1B7A43; }
.portal-sync-indicator[data-state="online"]::before { background: #2FA860; }
.portal-sync-indicator[data-state="offline"] { background: #FDECEC; color: #B3271F; }
.portal-sync-indicator[data-state="offline"]::before { background: #D9362A; }
.portal-sync-indicator[data-state="pending"] { background: #FFF6DE; color: #8A6200; }
.portal-sync-indicator[data-state="pending"]::before { background: #E8AA1F; }
.portal-sync-indicator[data-state="syncing"] { background: #FFF6DE; color: #8A6200; }
.portal-sync-indicator[data-state="syncing"]::before { background: #E8AA1F; animation: portal-sync-pulse 1.1s ease-in-out infinite; }
.portal-sync-indicator[data-state="error"] { background: #FDECEC; color: #B3271F; cursor: pointer; text-decoration: underline; border: none; }
@keyframes portal-sync-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* This app is used mostly on a driver's phone, so the label stays visible on
   narrow screens too -- only shrink padding/font slightly to fit the header. */
@media (max-width: 560px) { .portal-sync-indicator { font-size: .68rem; padding: .25rem .45rem; } }

/* 2026-09-28: Install The App prompt + header button (assets/install-app.js). */
.portal-header__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.portal-install { min-height: 40px; padding: .4rem .85rem; border-radius: 8px; border: 2px solid #29A66B; background: #29A66B; color: #fff; font-weight: 700; cursor: pointer; }
.portal-install[hidden] { display: none; }
/* TOP of screen: the cookie consent banner owns the bottom and would cover it. */
.djct-install { position: fixed; left: 12px; right: 12px; top: 12px; z-index: 10001; display: flex; gap: .75rem; align-items: flex-start;
  max-width: 520px; margin: 0 auto; padding: 1rem 2.4rem 1rem 1rem; background: #0B2545; color: #fff; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28); font-size: .95rem; line-height: 1.45; }
.djct-install__icon { flex: 0 0 48px; border-radius: 10px; background: #fff; }
.djct-install__title { display: block; font-size: 1.05rem; margin-bottom: .2rem; }
.djct-install p { margin: 0 0 .5rem; color: #dfe7ee; }
.djct-install__steps { margin: .25rem 0 .6rem 1.1rem; padding: 0; color: #fff; }
.djct-install__steps li { margin-bottom: .3rem; }
.djct-install__share { display: inline-block; font-weight: 700; }
.djct-install__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.djct-install__primary { min-height: 44px; padding: .5rem 1.1rem; border: 0; border-radius: 8px; background: #29A66B; color: #fff; font-weight: 700; cursor: pointer; }
.djct-install__secondary { min-height: 44px; padding: .5rem 1rem; border: 2px solid rgba(255,255,255,.5); border-radius: 8px; background: transparent; color: #fff; font-weight: 600; cursor: pointer; }
.djct-install__close { position: absolute; top: 6px; right: 8px; width: 36px; height: 36px; border: 0; background: transparent; color: #fff; font-size: 1.5rem; cursor: pointer; }

/* 2026-09-28: trip CTA buttons (Add Stop / Complete Trip / Cancel Trip). */
.trip-cta-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .8rem; }
.trip-cta { min-height: 48px; padding: .5rem .4rem; border-radius: 8px; font-weight: 700; font-size: .95rem; cursor: pointer; border: 2px solid; line-height: 1.2; }
.trip-cta--stop { background: #fff; color: #0B2545; border-color: #0B2545; }
.trip-cta--complete { background: #29A66B; color: #fff; border-color: #29A66B; }
.trip-cta--cancel { background: #fff; color: #b3261e; border-color: #b3261e; }
.trip-cta.is-open { box-shadow: 0 0 0 3px rgba(20,128,126,.35); }
.trip-panel { margin-top: .75rem; padding: .85rem; background: #f4f7f9; border-radius: 8px; }
.trip-panel label { display: block; margin-top: .5rem; font-weight: 600; }
.trip-panel input, .trip-panel select, .trip-panel textarea { display: block; width: 100%; min-height: 44px; margin-top: .25rem; }
.trip-panel .btn { margin-top: .8rem; width: 100%; min-height: 48px; }
.trip-cta--cancel-confirm { background: #b3261e; color: #fff; border: 0; }
.trip-badge--cancelled { background: #fbe9e7; color: #b3261e; }

/* 2026-09-28: unmissable Submit Shift CTA + not-submitted alerts. */
.submit-alert { margin: 1rem 0; padding: 1rem 1.1rem; border-radius: 10px; background: #fff4e0; border: 2px solid #C9821E; color: #4a2f05; line-height: 1.5; }
.submit-alert strong { color: #7a4a00; }
.submit-alert--dashboard .btn-submit-shift { margin-top: .8rem; }
.btn-submit-shift { display: block; width: 100%; min-height: 60px; margin: 1rem 0; padding: .9rem 1rem; border: 0; border-radius: 12px;
  background: #29A66B; color: #fff; font-size: 1.25rem; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 16px rgba(41,166,107,.35); }
.btn-submit-shift:hover { background: #218a58; }
.btn-submit-shift:disabled { opacity: .7; cursor: wait; }
#confetti-layer-global { position: fixed; inset: 0; pointer-events: none; z-index: 10002; overflow: hidden; }
.status-badge--warning { background: #fff4e0; color: #7a4a00; border: 1px solid #C9821E; }

/* 2026-09-28: admin nav + reports. */
.admin-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.admin-nav a { padding: .45rem .8rem; border-radius: 999px; border: 1px solid #0B2545; color: #0B2545; text-decoration: none; font-weight: 600; font-size: .9rem; }
.admin-nav a[aria-current="page"] { background: #0B2545; color: #fff; }
.report-filters { margin: 1rem 0; padding: 1rem; background: #f4f7f9; border-radius: 10px; }
.report-filters label { display: block; font-weight: 600; }
.report-filters input, .report-filters select { display: block; width: 100%; min-height: 44px; margin-top: .25rem; }
.report-quick { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.chip { min-height: 38px; padding: .35rem .8rem; border-radius: 999px; border: 1px solid #14807E; background: #fff; color: #14807E; font-weight: 600; cursor: pointer; }
.report-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.report-range { margin: 1rem 0 .5rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1.2rem; }
.stat { padding: .75rem .9rem; background: #fff; border: 1px solid #d8e1e8; border-radius: 10px; }
.stat__label { display: block; font-size: .8rem; color: #5B6B7B; font-weight: 600; }
.stat__value { display: block; font-size: 1.25rem; font-weight: 800; color: #0B2545; }
.report-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.report-table th, .report-table td { padding: .45rem .5rem; border-bottom: 1px solid #e3e9ee; text-align: left; vertical-align: top; }
.report-table th { background: #0B2545; color: #fff; font-weight: 700; white-space: nowrap; }
.row-cancelled td { color: #8a2a22; background: #fdf3f2; }
.pill { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: #e3f5ec; color: #1d7a4d; }
.pill--warn { background: #fff4e0; color: #7a4a00; }
.pill--bad { background: #fbe9e7; color: #b3261e; }
@media print {
  .portal-header, .admin-nav, .report-filters, .djct-install, .fbc-root, #admin-auth-section { display: none !important; }
  .report-table { font-size: 9pt; }
}

/* 2026-09-30: driver bottom navigation, Current Trip card, Today summary,
   Trips / Reports / Profile screens, Close Shift summary, error banner. */
.portal-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-top: 1px solid var(--line, #d7e0e7); box-shadow: 0 -4px 16px rgba(11, 37, 69, .08);
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.portal-bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px;
  padding: 6px 2px; color: var(--slate, #5b6b7b); text-decoration: none; font-size: .72rem; font-weight: 700; letter-spacing: .01em; }
.portal-bottom-nav__item svg { flex: 0 0 24px; }
.portal-bottom-nav__item[aria-current="page"] { color: var(--teal-dark, #16605f); box-shadow: inset 0 3px 0 var(--teal, #1f787c); }
.portal-bottom-nav__item:focus-visible { outline: 3px solid var(--sky, #4fa8c7); outline-offset: -3px; }
/* Room for the bar so the last control on a page is never hidden behind it. */
.portal--has-bottom-nav main { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) {
  .portal-bottom-nav { max-width: 560px; margin: 0 auto; border: 1px solid var(--line, #d7e0e7); border-bottom: 0; border-radius: 14px 14px 0 0; }
}

.current-trip { margin-bottom: 1.25rem; padding: 1rem 1.1rem 1.1rem; background: #fff; border: 2px solid var(--teal, #1f787c); border-radius: var(--radius, 12px);
  box-shadow: var(--shadow, 0 8px 24px rgba(11, 37, 69, .07)); min-height: 132px; }
.current-trip__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.current-trip__eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-dark, #16605f); }
.current-trip__title { margin: .35rem 0 .2rem; font-size: 1.35rem; font-weight: 800; color: var(--navy, #0d254b); }
.current-trip .btn { display: block; width: 100%; margin-top: .85rem; text-align: center; }

.today-summary { margin: 1.5rem 0 .5rem; }
.today-summary__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.today-summary__head h2 { margin: 0; }
.today-summary__head a { font-weight: 700; }
.today-summary .stats, #trips-stats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }

.day-picker { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.day-picker input[type="date"] { grid-column: 1 / -1; grid-row: 1; min-height: 48px; width: 100%; font-size: 1rem; padding: .4rem .6rem; }
.day-picker .btn { min-height: 48px; }
.day-picker #trips-today { grid-column: 1 / -1; }
.day-picker .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (min-width: 640px) {
  .day-picker { grid-template-columns: auto minmax(180px, 240px) auto auto; align-items: center; justify-content: start; }
  .day-picker input[type="date"] { grid-column: auto; grid-row: auto; }
  .day-picker #trips-today { grid-column: auto; }
}

.trip-card--link { display: block; color: inherit; text-decoration: none; }
.trip-card--link:hover, .trip-card--link:focus-visible { border-color: var(--teal, #1f787c); }
.trip-card--link .trip-badge { margin-left: auto; }

.range-picker { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .75rem; }
.range-chip { min-height: 44px; padding: .4rem .95rem; border-radius: 999px; border: 1px solid var(--teal, #1f787c); background: #fff;
  color: var(--teal-dark, #16605f); font-weight: 700; cursor: pointer; }
.range-chip.is-current { background: var(--teal-dark, #16605f); color: #fff; }
.range-custom input[type="date"] { min-height: 48px; width: 100%; }
#my-report-run { margin-top: .75rem; min-height: 48px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.profile-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem; background: #fff; border: 1px solid var(--line, #d7e0e7); border-radius: var(--radius, 12px); }
.profile-card h1 { margin: 0 0 .4rem; font-size: 1.5rem; }
.profile-card p { margin: .2rem 0; overflow-wrap: anywhere; }
.profile-avatar { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--teal, #1f787c); }
.profile-links { display: grid; gap: .5rem; margin-top: 1rem; }
.profile-links .btn { text-align: center; min-height: 48px; }
@media (min-width: 640px) { .profile-links { grid-template-columns: repeat(2, 1fr); } }
.profile-section { margin-top: 2rem; }
.profile-section h2 { margin-bottom: .25rem; }
.profile-logout { margin-top: 2.5rem; min-height: 48px; width: 100%; }

.review-block--closeout { border: 2px solid var(--navy, #0d254b); border-radius: var(--radius, 12px); padding: 1rem 1.1rem; background: #f7fafc; }
.review-open-issues { margin-top: .9rem; }
.review-open-issues h4 { margin: 0 0 .35rem; color: #8a2a22; }
.review-open-issues ul { margin: 0 0 0 1.1rem; padding: 0; }

.portal-toast { position: fixed; left: 12px; right: 12px; top: 12px; z-index: 10003; max-width: 560px; margin: 0 auto; padding: .9rem 1rem;
  border-radius: 12px; font-weight: 700; line-height: 1.4; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); cursor: pointer; }
.portal-toast[hidden] { display: none; }
.portal-toast--error { background: #b3261e; color: #fff; }
.portal-toast--ok { background: #1e7845; color: #fff; }

.email-pdf-extra { margin-top: var(--s-4, 1rem); max-width: 420px; }
.email-pdf-extra input { min-height: 44px; width: 100%; }

.admin-edit-row > td { background: #f4f7f9; padding: 1rem; }
.admin-edit-form h3 { margin-top: 0; }
.admin-edit-form label { display: block; font-weight: 600; }
.admin-edit-form input, .admin-edit-form select, .admin-edit-form textarea { display: block; width: 100%; min-height: 44px; margin-top: .25rem; }

/* The cookie consent banner and its small reopen button are fixed to the
   bottom of the screen, exactly where the driver navigation now lives. On
   driver screens both sit above the navigation instead of on top of it. */
.portal--has-bottom-nav .fbc-banner { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
.portal--has-bottom-nav .fbc-corner-link { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

@media print { .portal-bottom-nav, .portal-toast, .email-pdf-extra { display: none !important; } }

/* 2026-10-01: trips missing details, the trip fixer and Before You Submit. */
.review-missing { margin: 1rem 0; padding: 1rem 1.1rem; border-radius: 10px; background: #fff4e0; border: 2px solid #C9821E; color: #4a2f05; }
.review-missing h3 { margin: 0 0 .25rem; color: #7a4a00; }
.review-missing p { margin: 0 0 .6rem; }
.missing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.missing-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .7rem; background: #fff; border: 1px solid #ecd9b8; border-radius: 8px; color: var(--ink, #0a1219); }
.missing-list li .btn { flex: 0 0 auto; min-height: 44px; }
.portal-dialog { width: min(92vw, 460px); max-height: 88vh; overflow-y: auto; padding: 1.2rem 1.2rem 1.1rem; border: 0; border-radius: 14px; background: #fff; color: var(--ink, #0a1219);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.portal-dialog::backdrop { background: rgba(7, 27, 57, .55); }
.portal-dialog h2 { margin: 0 0 .4rem; font-size: 1.3rem; color: var(--navy, #0d254b); }
.portal-dialog p { margin: 0 0 .8rem; }
.portal-dialog label { display: block; margin-top: .65rem; font-weight: 600; }
.portal-dialog label input, .portal-dialog label select { display: block; width: 100%; min-height: 46px; margin-top: .25rem; padding: .4rem .6rem; font-size: 1rem; border: 1px solid var(--line, #d7e0e7); border-radius: 8px; }
.portal-dialog label.is-missing { color: #7a4a00; }
.portal-dialog label.is-missing input, .portal-dialog label.is-missing select { border: 2px solid #C9821E; background: #fffaf0; }
.portal-dialog__actions { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.1rem; position: sticky; bottom: -1.1rem; padding: .7rem 0 1.1rem; margin-bottom: -1.1rem; background: #fff; box-shadow: 0 -8px 12px -8px rgba(11, 37, 69, .18); }
.portal-dialog__actions .btn { min-height: 50px; width: 100%; }
.trip-card--done .btn[data-fix-trip] { margin-top: .4rem; min-height: 44px; }
.email-pdf-extra .field + .field { margin-top: .6rem; }
.admin-edit-check { display: flex !important; align-items: center; gap: .5rem; font-weight: 700; }
.admin-edit-check input { width: 22px !important; min-height: 22px !important; height: 22px; display: inline-block !important; margin: 0 !important; }
.admin-vehicle-cell { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }