:root {
  --fb-navy: #141C30;
  --fb-blue: #82B6F9;
  --fb-blue-dark: #236EDC; /* UX-004 (#23): darkened from #3D7FE0 (3.95:1) to clear WCAG AA 4.5:1
                              for white button-label text; computed 4.84:1, see site.css tests */
  --fb-bg: #F5F7FB;
  --fb-border: #E2E6EF;
}

html, body {
  background: var(--fb-bg);
  min-height: 100%;
  /* Pair with the viewport meta's maximum-scale/user-scalable: some browsers still allow a
     double-tap zoom gesture even when pinch-zoom is disabled there. */
  touch-action: pan-x pan-y;
}

body {
  padding-bottom: 2rem;
}

.navbar-brand img {
  display: block;
}

.photo-zoomable {
  cursor: zoom-in;
}

/* viewport-fit=cover + the PWA's black-translucent status bar (manifest.webmanifest: standalone)
   let page content draw under the phone's status bar/notch - without this the navbar sits right
   at the top edge, overlapped by the battery/wifi icons and unclickable in that strip. */
header {
  padding-top: env(safe-area-inset-top);
  background-color: var(--fb-navy);
}

.card {
  border: 1px solid var(--fb-border);
  border-radius: .6rem;
}

.btn-primary {
  background-color: var(--fb-blue-dark);
  border-color: var(--fb-blue-dark);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--fb-navy);
  border-color: var(--fb-navy);
}

.stat-card {
  border-radius: .75rem;
  padding: 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, var(--fb-navy), var(--fb-blue-dark));
}
.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
}
.stat-card .stat-label {
  opacity: .85;
  font-size: .85rem;
}

.badge-status {
  font-size: .8rem;
  padding: .4em .7em;
}

/* Large, touch-friendly controls (44px/48px minimum touch target). Originally built for the driver
   (mobile) workflow (spec section 25); per UX-005 (#24) now applied app-wide, since all roles are
   confirmed mobile-first — the class name stays for continuity with existing markup/tests. */
.btn-driver-action {
  min-height: 3rem;
  font-size: 1.05rem;
  font-weight: 600;
  /* min-height stretches the box past the text's own line-height (which centers it fine on its
     own); without flex centering the label sits at the top of the tall box instead of the middle. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shipment-card {
  cursor: pointer;
}
.shipment-card:hover {
  box-shadow: 0 2px 10px rgba(20, 28, 48, .08);
}

.table-responsive-stack th, .table-responsive-stack td {
  vertical-align: middle;
}

/* UX-001 (#10): visible scroll affordance + sticky identifying (leftmost) column for wide
   tables at narrow viewports, per product decision D-002 (keep the .table-responsive
   horizontal-scroll pattern, don't redesign to cards). */
.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.sortable::after {
  content: '\2195'; /* up-down arrow, dimmed until this column is the active sort */
  opacity: .3;
  margin-inline-start: .3em;
  font-size: .85em;
}
.sortable.sort-asc::after {
  content: '\2191';
  opacity: 1;
}
.sortable.sort-desc::after {
  content: '\2193';
  opacity: 1;
}

.table-scroll-wrap {
  position: relative;
}
.table-scroll-affordance {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--fb-blue-dark);
  background: linear-gradient(to right, rgba(245, 247, 251, 0), var(--fb-bg) 65%);
  pointer-events: none;
}
.table-sticky-col thead th:first-child,
.table-sticky-col tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #fff;
}
.table-sticky-col thead th:first-child {
  z-index: 3;
}

/* ENH-001 (#21): centered prev/next pagination bar (not a wide numbered-link row, which would clip
   at 320px per D-002's "don't widen the UX-001 fix" approach). .disabled span mirrors Bootstrap's
   disabled-anchor look without a dead href. */
.pagination-bar .disabled {
  opacity: .5;
  pointer-events: none;
}

#offline-banner {
  border-radius: 0;
}

.toast-container .toast {
  min-width: 260px;
}