:root {
  --tp-navy: #0b2545;
  --tp-navy-dark: #061a33;
  --tp-blue: #1668d1;
  --tp-blue-light: #eaf2fd;
  --tp-white: #ffffff;
  --tp-gray: #6c7a89;
  --tp-radius: 14px;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  color: #1c2b3a;
  background-color: #f7f9fc;
}

a { text-decoration: none; }

/* Navbar */
.tp-navbar {
  background: var(--tp-navy);
  padding: 0.75rem 0;
}
.tp-navbar .navbar-brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.5px;
}
.tp-navbar .nav-link {
  color: #cfe0f7 !important;
  font-weight: 500;
  margin: 0 0.35rem;
  transition: color .2s ease;
}
.tp-navbar .nav-link:hover,
.tp-navbar .nav-link.active {
  color: #fff !important;
}
.tp-navbar .btn-portal {
  border-radius: 50px;
  padding: 0.45rem 1.1rem;
  font-weight: 600;
}

/* Hero */
.tp-hero {
  background: linear-gradient(135deg, var(--tp-navy) 0%, var(--tp-navy-dark) 100%);
  color: #fff;
  padding: 5.5rem 0 6rem;
}
.tp-hero h1 { font-weight: 800; }
.tp-hero p.lead { color: #cfe0f7; }
.tp-hero .btn-primary {
  background: var(--tp-blue);
  border: none;
  border-radius: 50px;
  padding: 0.75rem 1.8rem;
  font-weight: 600;
}
.tp-hero .btn-outline-light {
  border-radius: 50px;
  padding: 0.75rem 1.8rem;
  font-weight: 600;
}

/* Cards */
.tp-card {
  background: #fff;
  border-radius: var(--tp-radius);
  border: 1px solid #eef1f6;
  box-shadow: 0 4px 18px rgba(11, 37, 69, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;
  padding: 1.75rem;
  height: 100%;
}
.tp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(11, 37, 69, 0.12);
}
.tp-card .icon-wrap {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--tp-blue-light);
  color: var(--tp-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* Section titles */
.tp-section-title {
  font-weight: 800;
  color: var(--tp-navy);
}
.tp-eyebrow {
  color: var(--tp-blue);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* Buttons */
.btn-tp-primary {
  background: var(--tp-blue);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
}
.btn-tp-primary:hover { background: #0f52a8; color: #fff; }
.btn-tp-outline {
  border: 2px solid var(--tp-blue);
  color: var(--tp-blue);
  border-radius: 50px;
  padding: 0.55rem 1.4rem;
  font-weight: 600;
  background: transparent;
}

/* Footer */
.tp-footer {
  background: var(--tp-navy-dark);
  color: #a9bcd6;
  padding: 3rem 0 1.5rem;
}
.tp-footer a { color: #cfe0f7; }
.tp-footer a:hover { color: #fff; }
.tp-footer h6 { color: #fff; font-weight: 700; }

/* Dashboard / portal layout */
.tp-sidebar {
  background: var(--tp-navy);
  min-height: 100vh;
  color: #cfe0f7;
  padding-top: 1.5rem;
}
.tp-sidebar a {
  color: #cfe0f7;
  display: block;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  margin: 0.15rem 0.75rem;
  font-weight: 500;
}
.tp-sidebar a:hover, .tp-sidebar a.active {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.tp-sidebar .brand {
  color: #fff;
  font-weight: 700;
  padding: 0 1.25rem 1.25rem;
  font-size: 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 0.75rem;
}
.tp-stat-card {
  background: #fff;
  border-radius: var(--tp-radius);
  padding: 1.5rem;
  border: 1px solid #eef1f6;
  box-shadow: 0 4px 18px rgba(11,37,69,0.05);
}
.tp-stat-card .stat-value { font-size: 1.9rem; font-weight: 800; color: var(--tp-navy); }
.tp-stat-card .stat-label { color: var(--tp-gray); font-weight: 500; font-size: 0.9rem; }

.tp-content { padding: 2rem; }

/* Forms */
.tp-form-card {
  background: #fff;
  border-radius: var(--tp-radius);
  padding: 2rem;
  box-shadow: 0 4px 18px rgba(11,37,69,0.06);
}
.form-control, .form-select {
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
}

/* Tables */
.table-tp thead {
  background: var(--tp-blue-light);
}
.table-tp thead th {
  color: var(--tp-navy);
  font-weight: 700;
  border-bottom: none;
}

/* Badges */
.badge-status-active, .badge-status-completed, .badge-status-confirmed, .badge-status-compliant { background:#1ba97e; }
.badge-status-pending { background:#e0a316; }
.badge-status-cancelled, .badge-status-no_show, .badge-status-non_compliant, .badge-status-rejected { background:#d84343; }
.badge-status-inactive { background:#6c757d; }
.badge-status-pending_setup { background:#8a5fc9; }
.badge-status-approved, .badge-status-scheduled { background:#2f6fdb; }
.badge-status-collected, .badge-status-sent_to_lab, .badge-status-specimen_collected { background:#0f9b8e; }
.badge-status-result_received, .badge-status-pending_mro { background:#c98a1a; }

/* Compliance / document verification workflow (Employer Compliance + Documents feature) */
.badge-status-verified { background:#1ba97e; }
.badge-status-superseded { background:#8a94a6; }
.badge-status-submitted { background:#2f6fdb; }
.badge-status-under_review { background:#c98a1a; }
.badge-status-missing { background:#6c757d; }
.badge-status-expired { background:#d84343; }
.badge-status-not_applicable { background:#8a94a6; }
.badge-status-expiring_soon { background:#e0a316; }
.badge-status-valid { background:#1ba97e; }

/* Driver Qualification File compliance health (Phase 3.1) - green/yellow/red
   overall badges, distinct from the per-requirement badge-status-* classes
   above since a driver can be "Attention Needed" overall while individual
   requirements are Verified/Missing/etc. */
.badge-dqf-green { background:#1ba97e; }
.badge-dqf-yellow { background:#e0a316; }
.badge-dqf-red { background:#d84343; }

/* IFTA / IRP / Permits (Employer Compliance Platform Expansion) */
.badge-status-not_started { background:#6c757d; }
.badge-status-waiting_for_employer { background:#e0a316; }
.badge-status-in_progress { background:#2f6fdb; }
.badge-status-needs_correction { background:#d84343; }
.badge-status-ready_to_file { background:#0f9b8e; }
.badge-status-filed { background:#1ba97e; }
.badge-status-late { background:#d84343; }
.badge-status-renewal_due { background:#e0a316; }
.badge-status-not_required { background:#8a94a6; }
.badge-status-suspended { background:#d84343; }
.badge-status-closed { background:#6c757d; }

/* Loading spinner */
.tp-loading {
  display: inline-block; width: 1rem; height: 1rem;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tp-spin 0.7s linear infinite;
}
@keyframes tp-spin { to { transform: rotate(360deg); } }

@media (max-width: 991px) {
  .tp-sidebar { min-height: auto; }
}

/* ===================== Accessibility (Master Completion Phase) ===================== */

/* Visible keyboard-focus outline everywhere, including inside the dark
   sidebar where the default browser outline is hard to see against navy. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #ffb020;
  outline-offset: 2px;
}
.tp-sidebar a:focus-visible {
  outline: 3px solid #ffb020;
  outline-offset: -3px;
}

/* Skip-to-content link: invisible until keyboard-focused, then jumps
   straight to the page's main content past the repeated sidebar nav. */
.tp-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--tp-navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.tp-skip-link:focus {
  left: 0;
}

/* Responsive tables: every data table on the site is meant to be wrapped in
   .table-responsive; this is a defensive fallback for any that aren't. */
@media (max-width: 767px) {
  .table-tp { font-size: 0.9rem; }
}

/* ===================== Driver Application (V17 professional redesign) ===================== */
.tp-app-stepper {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.35rem;
  padding: 0.25rem 0.1rem 0.6rem;
  margin: 0 0 1rem;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}
.tp-app-step {
  flex: 0 0 auto;
}
.tp-app-step .tp-app-step-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #e3e8f0;
  background: #fff;
  border-radius: 50px;
  padding: 0.4rem 0.9rem 0.4rem 0.4rem;
  color: #47576b;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: all .15s ease;
}
.tp-app-step .tp-app-step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #eef1f6;
  color: #6c7a89;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.tp-app-step.is-done .tp-app-step-num { background: #1ba97e; color: #fff; }
.tp-app-step.is-active .tp-app-step-link { border-color: var(--tp-blue); background: var(--tp-blue-light); color: var(--tp-navy); }
.tp-app-step.is-active .tp-app-step-num { background: var(--tp-blue); color: #fff; }

.tp-app-progress-wrap { min-width: 220px; }
.tp-app-progress-wrap .progress { height: 10px; border-radius: 50px; background: #eef1f6; }
.tp-app-progress-wrap .progress-bar { border-radius: 50px; }

.tp-app-section-head {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin-bottom: 0.25rem;
}
.tp-app-section-num {
  color: var(--tp-blue);
  font-weight: 800;
  font-size: 0.85rem;
}
.tp-app-section-sub { color: var(--tp-gray); font-size: 0.85rem; margin-bottom: 1rem; }

/* Yes/No professional toggle - same underlying radio inputs/values, styled as a segmented control */
.tp-yesno { display: inline-flex; border: 1px solid #d7dee8; border-radius: 50px; overflow: hidden; }
.tp-yesno .btn-check:checked + .btn { background: var(--tp-blue); color: #fff; border-color: var(--tp-blue); }
.tp-yesno .btn {
  border: none; border-radius: 0; padding: 0.4rem 1.3rem; font-weight: 600; font-size: 0.85rem;
  background: #fff; color: #47576b;
}
.tp-yesno .btn:not(:last-child) { border-right: 1px solid #d7dee8; }
.was-validated .tp-yesno:has(:invalid) { border-color: #d84343; box-shadow: 0 0 0 1px #d84343; }

/* Repeatable-row cards */
.tp-app-row-card {
  border: 1px solid #eef1f6;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
  background: #fbfcfe;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap;
}
.tp-app-row-card .tp-app-row-main { font-weight: 600; color: var(--tp-navy); }
.tp-app-row-card .tp-app-row-sub { color: var(--tp-gray); font-size: 0.85rem; }

.tp-app-empty {
  text-align: center;
  padding: 1.75rem 1rem;
  color: var(--tp-gray);
  border: 1px dashed #dbe2ec;
  border-radius: 10px;
  background: #fbfcfe;
  margin-bottom: 0.75rem;
}
.tp-app-empty i { font-size: 1.4rem; color: #c3cddb; display: block; margin-bottom: 0.4rem; }

.tp-app-required { color: #d84343; font-weight: 700; }

.tp-app-review-item {
  border-bottom: 1px solid #f1f3f8;
  padding: 0.55rem 0;
}
.tp-app-review-item:last-child { border-bottom: none; }
.tp-app-review-label { color: var(--tp-gray); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; }
.tp-app-review-value { font-weight: 600; color: #1c2b3a; }

.tp-signature-card {
  border: 2px solid var(--tp-blue-light);
  border-radius: var(--tp-radius);
  padding: 1.5rem;
  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}
.tp-signature-card input[name="typed_name"] {
  font-family: 'Segoe Script', 'Brush Script MT', cursive;
  font-size: 1.4rem;
  border: none;
  border-bottom: 2px solid var(--tp-blue);
  border-radius: 0;
  padding-left: 0.25rem;
}
.tp-signature-card input[name="typed_name"]:focus { box-shadow: none; border-bottom-color: var(--tp-navy); }

@media (max-width: 767px) {
  .tp-app-stepper { padding-bottom: 0.75rem; }
  .tp-app-step .tp-app-step-link { padding: 0.35rem 0.7rem 0.35rem 0.35rem; font-size: 0.78rem; }
  .tp-app-progress-wrap { min-width: 0; width: 100%; }
}

/* ===================== Driver Application (V25 redesign additions) ===================== */
/* Section header: icon + title + numbered badge, used uniformly across all
   12 sections so every one reads as the same design language rather than
   12 independently-styled pages. */
.tp-app-section-head {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.15rem;
}
.tp-app-section-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--tp-blue-light); color: var(--tp-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; flex-shrink: 0;
}
.tp-app-section-title { display: flex; flex-direction: column; }
.tp-app-section-title h6 { margin: 0; }

/* Progress readout above the stepper - percent-complete + a short label,
   the "clear progress indicator" requested for V25 (in addition to the
   existing per-step done/current/upcoming stepper below it). */
.tp-app-progress-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0.4rem; font-size: 0.82rem; color: var(--tp-gray); font-weight: 600;
}
.tp-app-progress-summary strong { color: var(--tp-navy); }

/* Stepper: connecting line between step numbers, done/current/upcoming
   states more clearly differentiated (upcoming is now visibly muted rather
   than just "not colored"). */
.tp-app-stepper { position: relative; }
.tp-app-step:not(.is-done) .tp-app-step-link { opacity: 0.72; }
.tp-app-step.is-active .tp-app-step-link,
.tp-app-step.is-done .tp-app-step-link { opacity: 1; }

/* Correction-request "jump to section" chips - replaces a single wall of
   free text with one clickable chip per flagged section. */
.tp-app-correction-sections { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; }
.tp-app-correction-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #fff; border: 1px solid #f1b3b3; color: #b23a3a;
  border-radius: 50px; padding: 0.25rem 0.75rem 0.25rem 0.6rem;
  font-size: 0.8rem; font-weight: 700; text-decoration: none;
}
.tp-app-correction-chip:hover { background: #fdecec; color: #8f2b2b; }

/* Drawn-signature pad */
.tp-signature-pad-wrap { margin-bottom: 1rem; }
.tp-signature-pad-canvas {
  display: block; width: 100%; max-width: 480px; height: 160px;
  border: 2px dashed #c3cddb; border-radius: 10px; background: #fff;
  touch-action: none; cursor: crosshair;
}
.tp-signature-pad-canvas.has-ink { border-style: solid; border-color: var(--tp-blue); }
.tp-signature-pad-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.tp-signature-pad-hint { color: var(--tp-gray); font-size: 0.78rem; }

@media (max-width: 767px) {
  .tp-app-section-icon { width: 28px; height: 28px; font-size: 0.8rem; }
  .tp-signature-pad-canvas { max-width: 100%; height: 140px; }
  .tp-app-progress-summary { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
}

/* ===================== Print (reports, invoices, DQF printouts) ===================== */
@media print {
  .tp-sidebar, .tp-skip-link, .btn, .modal, .no-print, nav.pagination,
  form:not(.print-form) { display: none !important; }
  .tp-content { padding: 0 !important; }
  .col-lg-10, .col-md-9 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  body { background: #fff !important; }
  .tp-card, .tp-form-card { box-shadow: none !important; border: 1px solid #ccc !important; }
}