/* Bootstrap display utilities (d-flex and friends) use !important and would otherwise
   override the hidden attribute, leaving hidden things on screen. */
[hidden] { display: none !important; }

/* CaRR — Car Rental Risk & Reputation
   Design tokens + components layered on Bootstrap 5.3 */

:root {
  --carr-primary: #2450e6;
  --carr-primary-600: #1c40c2;
  --carr-primary-50: #eef2ff;
  --carr-ink: #0f172a;
  --carr-ink-2: #334155;
  --carr-muted: #64748b;
  --carr-line: #e5e9f2;
  --carr-bg: #f5f7fb;
  --carr-card: #ffffff;
  --carr-sidebar: #0b1220;
  --carr-sidebar-2: #131c2e;
  --carr-sidebar-text: #aab4c8;
  --carr-success: #16a34a;
  --carr-warning: #d97706;
  --carr-orange: #ea580c;
  --carr-danger: #dc2626;
  --carr-purple: #7c3aed;
  --carr-info: #0284c7;
  --carr-radius: 14px;
  --carr-radius-sm: 10px;
  --carr-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05);
  --carr-shadow-lg: 0 10px 40px rgba(15, 23, 42, .12);
  --bs-primary: var(--carr-primary);
  --bs-primary-rgb: 36, 80, 230;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--carr-ink-2);
  --bs-border-color: var(--carr-line);
  --bs-link-color: var(--carr-primary);
  --bs-link-hover-color: var(--carr-primary-600);
}

body { background: var(--carr-bg); font-size: .925rem; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--carr-ink); font-weight: 700; letter-spacing: -.01em; }
a { text-decoration: none; }
.text-muted { color: var(--carr-muted) !important; }
.small, small { font-size: .82rem; }
.fw-semibold { font-weight: 600 !important; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }

/* Buttons */
.btn { border-radius: 10px; font-weight: 600; padding: .55rem 1rem; }
.btn-sm { border-radius: 8px; padding: .35rem .7rem; }
.btn-lg { border-radius: 12px; padding: .8rem 1.4rem; }
.btn-primary { --bs-btn-bg: var(--carr-primary); --bs-btn-border-color: var(--carr-primary); --bs-btn-hover-bg: var(--carr-primary-600); --bs-btn-hover-border-color: var(--carr-primary-600); --bs-btn-active-bg: var(--carr-primary-600); --bs-btn-disabled-bg: var(--carr-primary); }
.btn-outline-primary { --bs-btn-color: var(--carr-primary); --bs-btn-border-color: var(--carr-primary); --bs-btn-hover-bg: var(--carr-primary); --bs-btn-hover-border-color: var(--carr-primary); }
.btn-soft { background: var(--carr-primary-50); color: var(--carr-primary); border: 0; }
.btn-soft:hover { background: #e0e7ff; color: var(--carr-primary-600); }
.btn-light { background: #fff; border: 1px solid var(--carr-line); color: var(--carr-ink-2); }
.btn-light:hover { background: #f8fafc; border-color: #d5dbe7; }

/* Forms */
.form-control, .form-select { border-radius: 10px; border-color: #d9dfea; padding: .55rem .8rem; font-size: .925rem; }
.form-control:focus, .form-select:focus { border-color: var(--carr-primary); box-shadow: 0 0 0 .2rem rgba(36, 80, 230, .15); }
.form-label { font-weight: 600; color: var(--carr-ink); font-size: .85rem; margin-bottom: .35rem; }
.form-text { color: var(--carr-muted); }
.form-check-input:checked { background-color: var(--carr-primary); border-color: var(--carr-primary); }
.input-group-text { border-radius: 10px; background: #f8fafc; border-color: #d9dfea; }
.required::after { content: ' *'; color: var(--carr-danger); }

/* Select2 alignment with Bootstrap */
.select2-container--bootstrap-5 .select2-selection { border-radius: 10px; border-color: #d9dfea; min-height: calc(2.35rem + 2px); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection { border-color: var(--carr-primary); box-shadow: 0 0 0 .2rem rgba(36, 80, 230, .15); }

/* Cards */
.card { border: 1px solid var(--carr-line); border-radius: var(--carr-radius); box-shadow: var(--carr-shadow); background: var(--carr-card); }
.card-header { background: transparent; border-bottom: 1px solid var(--carr-line); padding: 1rem 1.25rem; font-weight: 600; color: var(--carr-ink); }
.card-body { padding: 1.25rem; }
.card-title { font-size: 1rem; margin: 0; }
.card-footer { background: #fafbfd; border-top: 1px solid var(--carr-line); border-radius: 0 0 var(--carr-radius) var(--carr-radius); }

/* Tables */
.table { --bs-table-color: var(--carr-ink-2); margin-bottom: 0; }
.table > thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--carr-muted); font-weight: 600; background: #fafbfd; border-bottom-width: 1px; white-space: nowrap; padding: .7rem 1rem; }
.table > tbody td { padding: .8rem 1rem; vertical-align: middle; border-color: #eef1f6; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f8faff; }
.table a.row-link { color: var(--carr-ink); font-weight: 600; }
.table a.row-link:hover { color: var(--carr-primary); }

/* Soft badges */
.badge { font-weight: 600; border-radius: 999px; padding: .38em .7em; font-size: .72rem; letter-spacing: .01em; }
.badge-soft-success { background: #dcfce7; color: #15803d; }
.badge-soft-warning { background: #fef3c7; color: #b45309; }
.badge-soft-orange { background: #ffedd5; color: #c2410c; }
.badge-soft-danger { background: #fee2e2; color: #b91c1c; }
.badge-soft-info { background: #e0f2fe; color: #0369a1; }
.badge-soft-primary { background: var(--carr-primary-50); color: var(--carr-primary); }
.badge-soft-secondary { background: #eef1f6; color: #475569; }
.badge-soft-purple { background: #ede9fe; color: #6d28d9; }

/* ---------------------------------------------------------------- App shell */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { width: 260px; flex-shrink: 0; background: #fff; color: var(--carr-ink-2); border-right: 1px solid var(--carr-line); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 1040; transition: width .22s ease, transform .2s ease; }
.app-main { flex: 1; margin-left: 260px; min-width: 0; display: flex; flex-direction: column; transition: margin-left .22s ease; }
.sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: 1.2rem 1.25rem; color: var(--carr-ink); min-height: 76px; }
.sidebar-brand .brand-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--carr-ink); }
.sidebar-brand .brand-sub { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--carr-muted); line-height: 1; white-space: nowrap; }
.org-switch { margin: 0 .9rem 1rem; padding: .65rem .75rem; background: #f6f8fc; border-radius: 12px; color: var(--carr-ink-2); border: 1px solid var(--carr-line); }
.org-switch:hover { border-color: #d5dcea; }
.org-switch .org-name { font-weight: 600; font-size: .86rem; color: var(--carr-ink); }
.org-switch .org-role { font-size: .75rem; color: var(--carr-muted); }
.org-switch .dropdown-toggle::after { display: none; }
.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 .7rem 1rem; }
.nav-section { font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; color: #94a3b8; padding: 1rem .75rem .4rem; font-weight: 700; white-space: nowrap; }
.sidebar-nav .nav-link { display: flex; align-items: center; gap: .7rem; color: #475569; padding: .55rem .75rem; border-radius: 10px; font-weight: 500; font-size: .88rem; white-space: nowrap; position: relative; }
.sidebar-nav .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; color: #64748b; flex-shrink: 0; }
.sidebar-nav .nav-link:hover { color: var(--carr-ink); background: #f3f6fb; }
/* A page that belongs to the one above it, e.g. Outsourced under Fleet. */
.sidebar-nav .nav-link.nav-sub { padding: .35rem .75rem .35rem 1.6rem; font-size: .82rem; }
.sidebar-nav .nav-link.nav-sub i { font-size: .85rem; color: #94a3b8; }
.sidebar-collapsed .sidebar-nav .nav-link.nav-sub { padding-left: .75rem; }
.sidebar-nav .nav-link:hover i { color: var(--carr-primary); }
.sidebar-nav .nav-link.active { color: var(--carr-primary); background: var(--carr-primary-50); font-weight: 600; box-shadow: inset 3px 0 0 var(--carr-primary); }
.sidebar-nav .nav-link.active i { color: var(--carr-primary); }
.sidebar-nav .nav-link .count { margin-left: auto; background: #eef1f6; color: #475569; font-size: .68rem; border-radius: 999px; padding: .1rem .5rem; font-weight: 600; }
.sidebar-nav .nav-link .count.alert-count { background: var(--carr-danger); color: #fff; }
.sidebar-check { margin: .25rem .2rem .5rem; }
.sidebar-check .btn { width: 100%; background: linear-gradient(135deg, #3563ff, #1d3fcf); border: 0; color: #fff; box-shadow: 0 6px 18px rgba(36, 80, 230, .25); white-space: nowrap; overflow: hidden; }
.sidebar-footer { padding: .9rem 1.1rem; border-top: 1px solid var(--carr-line); font-size: .72rem; color: var(--carr-muted); }
.sidebar-collapse-btn { color: var(--carr-muted); }
.sidebar-collapse-btn:hover { color: var(--carr-primary); }

/* Collapsed (icon-only) sidebar — desktop only */
@media (min-width: 992px) {
  .sidebar-collapsed .app-sidebar { width: 76px; }
  .sidebar-collapsed .app-main { margin-left: 76px; }
  .sidebar-collapsed .sidebar-brand { justify-content: center; padding: 1.2rem .5rem; }
  .sidebar-collapsed .sidebar-brand > div,
  .sidebar-collapsed .org-switch .org-details,
  .sidebar-collapsed .org-switch .bi-chevron-expand,
  .sidebar-collapsed .sidebar-footer,
  .sidebar-collapsed .sidebar-nav .nav-link .count { display: none; }
  .sidebar-collapsed .org-switch { margin: 0 .7rem 1rem; padding: .45rem; display: flex; justify-content: center; }
  .sidebar-collapsed .org-switch > a { justify-content: center; }
  .sidebar-collapsed .sidebar-nav { padding: 0 .6rem 1rem; }
  .sidebar-collapsed .nav-section { font-size: 0; padding: .6rem 0 .4rem; }
  .sidebar-collapsed .nav-section::after { content: ''; display: block; height: 1px; background: var(--carr-line); margin: 0 .4rem; }
  .sidebar-collapsed .sidebar-nav .nav-link { font-size: 0; justify-content: center; padding: .65rem 0; gap: 0; }
  .sidebar-collapsed .sidebar-nav .nav-link i { font-size: 1.15rem; width: auto; }
  .sidebar-collapsed .sidebar-nav .nav-link.has-count::after { content: ''; position: absolute; top: 7px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--carr-danger); border: 2px solid #fff; }
  .sidebar-collapsed .sidebar-check { margin: .25rem 0 .5rem; }
  .sidebar-collapsed .sidebar-check .btn { font-size: 0; padding: .6rem 0; }
  .sidebar-collapsed .sidebar-check .btn i { font-size: 1.15rem; margin: 0 !important; }
}

.app-topbar { height: 64px; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--carr-line); display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem; position: sticky; top: 0; z-index: 1030; }
.topbar-search { max-width: 420px; flex: 1; position: relative; }
.topbar-search input { padding-left: 2.3rem; background: #f3f5fa; border-color: transparent; }
.topbar-search input:focus { background: #fff; }
.topbar-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--carr-muted); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--carr-ink-2); position: relative; border: 0; background: transparent; }
.icon-btn:hover { background: #f1f4f9; }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; background: var(--carr-danger); border-radius: 50%; border: 2px solid #fff; }
.avatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #3b6bff, #6a4cff); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.avatar-lg { width: 64px; height: 64px; border-radius: 18px; font-size: 1.35rem; }
.avatar-muted { background: #e2e8f0; color: #475569; }

.app-content { padding: 1.75rem 1.75rem 3rem; flex: 1; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.page-header h1 { font-size: 1.5rem; margin: 0; }
.page-header .subtitle { color: var(--carr-muted); margin-top: .25rem; }
.breadcrumb { font-size: .8rem; margin-bottom: .35rem; }
.breadcrumb a { color: var(--carr-muted); }

@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar.open { transform: translateX(0); box-shadow: var(--carr-shadow-lg); }
  .app-main { margin-left: 0; }
  .app-content { padding: 1.25rem 1rem 2.5rem; }
  .app-topbar { padding: 0 1rem; }
}
.sidebar-backdrop { display: none; }
.sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 1035; }

/* ---------------------------------------------------------------- Stat tiles */
.stat-card { padding: 1.1rem 1.2rem; height: 100%; }
.stat-card .stat-label { color: var(--carr-muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.stat-card .stat-value { font-size: 1.65rem; font-weight: 800; color: var(--carr-ink); letter-spacing: -.02em; line-height: 1.2; margin-top: .3rem; }
.stat-card .stat-meta { font-size: .78rem; color: var(--carr-muted); margin-top: .15rem; }
/* Front desk: the SMS reminder control beside each booking. */
.desk-sms { display: inline-flex; align-items: center; gap: .2rem; font-size: .68rem; font-weight: 600; white-space: nowrap; }
.desk-row form { margin: 0; }

/* Dashboard fleet board: every vehicle, its state, and time to the next hand-over. */
.fleet-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.fleet-filter { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--carr-line); background: #fff; color: var(--carr-ink-2, #334155); border-radius: 999px; padding: .3rem .75rem; font-size: .8rem; font-weight: 600; cursor: pointer; }
.fleet-filter span { background: #f1f4f9; color: var(--carr-muted); border-radius: 999px; padding: 0 .45rem; font-size: .72rem; }
.fleet-filter em { font-style: normal; font-size: .68rem; font-weight: 700; color: #b91c1c; background: #fee2e2; border-radius: 999px; padding: 0 .4rem; }
.fleet-filter:hover:not(:disabled) { border-color: #c7d2e6; }
.fleet-filter.is-active { background: var(--carr-ink, #0f172a); border-color: var(--carr-ink, #0f172a); color: #fff; }
.fleet-filter.is-active span { background: rgba(255,255,255,.18); color: #fff; }
.fleet-filter:disabled { opacity: .45; cursor: default; }
.fleet-filter.tone-primary i { color: var(--carr-primary); }
.fleet-filter.tone-info i { color: #0369a1; }
.fleet-filter.tone-warning i { color: #b45309; }
.fleet-filter.tone-success i { color: #15803d; }
.fleet-filter.tone-slate i { color: #475569; }
.fleet-filter.is-active i { color: #fff; }

.board-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--carr-line); border-radius: 14px; overflow: hidden; }
.board-card.is-late { border-color: #fca5a5; box-shadow: 0 0 0 3px rgba(239,68,68,.08); }
.board-card .bc-photo { position: relative; display: block; height: 128px; background: #eef1f6; }
.board-card .bc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-card .bc-photo-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 2.2rem; }
.board-card .bc-state { position: absolute; top: .5rem; left: .5rem; display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; padding: .18rem .5rem; border-radius: 999px; }
.board-card .bc-reg { position: absolute; bottom: .5rem; left: .5rem; background: rgba(15,23,42,.78); color: #fff; font-size: .72rem; padding: .1rem .45rem; border-radius: 6px; }
.board-card .bc-body { display: flex; flex-direction: column; flex-grow: 1; padding: .7rem .8rem .8rem; }
.board-card .bc-name { font-weight: 700; color: var(--carr-ink); line-height: 1.25; }
.bc-clock { background: #f4f7ff; border-radius: 10px; padding: .45rem .6rem; margin-bottom: .45rem; }
.bc-clock-label { display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--carr-muted); }
.bc-clock-value { display: block; font-size: 1.2rem; font-weight: 800; color: var(--carr-primary); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bc-clock-value small { font-size: .72rem; font-weight: 600; color: var(--carr-muted); }
.bc-clock.is-late { background: #fef2f2; }
.bc-clock.is-late .bc-clock-value { color: #b91c1c; }
.bc-clock.is-quiet { background: #f8fafc; }
.bc-clock.is-quiet .bc-clock-value { color: var(--carr-ink); font-size: 1.05rem; }
.bc-rate-alt { display: block; font-size: .74rem; color: var(--carr-muted); margin-top: .1rem; }
.bc-rate-alt strong { font-size: .88rem; color: #b45309; font-variant-numeric: tabular-nums; }
.bc-trip { font-weight: 600; color: #047857; }
.bc-trip.is-out { color: #b45309; }
.state-booked .bc-clock:not(.is-late) { background: #f0f9ff; }
.state-booked .bc-clock:not(.is-late) .bc-clock-value { color: #0369a1; }
.state-idle .bc-clock { background: #fffbeb; }
.bc-meta { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--carr-muted); line-height: 1.5; }
.bc-meta i { font-size: .8rem; }
.board-card .btn { margin-top: auto; }
.board-card .listing-toggle { border-top: 0; padding-top: 0; margin-top: 0; }

.reminder-card { position: sticky; top: 1rem; }
.reminder-list { max-height: calc(100vh - 12rem); overflow-y: auto; }
.reminder { display: flex; align-items: flex-start; gap: .6rem; padding: .65rem .85rem; }
.reminder .stat-icon { width: 30px; height: 30px; border-radius: 9px; font-size: .85rem; flex-shrink: 0; }
.reminder-title { display: block; font-weight: 700; font-size: .82rem; color: var(--carr-ink); }
.reminder.tone-danger .reminder-title { color: #b91c1c; }
.reminder-detail { display: block; font-size: .76rem; color: var(--carr-ink-2, #334155); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-when { display: block; font-size: .7rem; color: var(--carr-muted); }
.reminder-action { font-size: .72rem; font-weight: 700; color: var(--carr-primary); white-space: nowrap; align-self: center; }
@media (max-width: 1199.98px) { .reminder-card { position: static; } .reminder-list { max-height: 320px; } }
/* Quick actions: one tinted button per task, so they are told apart at a glance
   without four solid colours competing with the page. */
.btn-action { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; padding: .4rem .75rem; border-radius: 9px; border: 1px solid transparent; white-space: nowrap; }
.btn-action i { font-size: .95rem; }
.btn-action.tone-rental { background: var(--carr-primary); border-color: var(--carr-primary); color: #fff; }
.btn-action.tone-rental:hover { background: #1f47d6; border-color: #1f47d6; color: #fff; }
.btn-action.tone-desk { background: #ecfdf5; border-color: #c7f0dd; color: #047857; }
.btn-action.tone-desk:hover { background: #d6f7e8; color: #036249; }
.btn-action.tone-client { background: #ede9fe; border-color: #ddd4fd; color: #6d28d9; }
.btn-action.tone-client:hover { background: #e2daff; color: #5b21b6; }
.btn-action.tone-check { background: #fff7ed; border-color: #fde3c4; color: #c2410c; }
.btn-action.tone-check:hover { background: #ffedd5; color: #9a3412; }
.btn-action.tone-vehicle { background: #e0f2fe; border-color: #bae6fd; color: #0369a1; }
.btn-action.tone-vehicle:hover { background: #cdeafd; color: #075985; }

/* A road-worthiness document that needs renewing can be clicked to record it. */
.vc-docs li.is-renewable { cursor: pointer; border-radius: 6px; margin: 0 -.35rem; padding-left: .35rem; padding-right: .35rem; transition: background .12s ease; }
.vc-docs li.is-renewable:hover, .vc-docs li.is-renewable:focus-visible { background: #f3f6fb; outline: none; }
.vc-docs li.is-renewable .vd-state::after { content: ' \203A'; font-weight: 700; }

/* Trial countdown in the top bar. Turns amber in the last few days. */
.trial-pill { background: var(--carr-primary-50); color: var(--carr-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.trial-pill:hover { background: #dbe4ff; color: var(--carr-primary); }
.trial-pill.is-ending { background: #fef3c7; color: #b45309; }
.trial-pill.is-ending:hover { background: #fde68a; color: #92400e; }
@media (max-width: 575.98px) { .trial-pill { display: none !important; } }

/* A tighter tile for screens that carry a lot of them at once. */
.stat-card.is-compact { padding: .65rem .75rem; }
.stat-card.is-compact .stat-label { font-size: .66rem; letter-spacing: .04em; line-height: 1.25; }
.stat-card.is-compact .stat-value { font-size: 1.25rem; margin-top: .1rem; }
.stat-card.is-compact .stat-meta { font-size: .68rem; margin-top: 0; line-height: 1.3; }
.stat-card.is-compact .stat-icon { width: 26px; height: 26px; border-radius: 8px; font-size: .8rem; flex-shrink: 0; }

.stat-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.tone-primary { background: var(--carr-primary-50); color: var(--carr-primary); }
.tone-success { background: #dcfce7; color: #15803d; }
.tone-warning { background: #fef3c7; color: #b45309; }
.tone-danger { background: #fee2e2; color: #b91c1c; }
.tone-purple { background: #ede9fe; color: #6d28d9; }
.tone-info { background: #e0f2fe; color: #0369a1; }
.tone-orange { background: #ffedd5; color: #c2410c; }
.tone-slate { background: #eef1f6; color: #475569; }

/* Compact grouped metrics (dashboard overview) */
.metric-group { padding: .6rem .75rem .65rem; }
.metric-group-head { display: flex; align-items: center; gap: .45rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--carr-muted); margin-bottom: .4rem; }
.metric-group-head .stat-icon { width: 22px; height: 22px; border-radius: 6px; font-size: .75rem; }
.metric-group-body { display: flex; gap: .25rem; }
.mini-metric { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: .3rem .45rem; border-radius: 8px; color: inherit; line-height: 1.15; }
.mini-metric:hover { background: #f3f6fb; color: inherit; }
.mini-metric + .mini-metric { border-left: 1px solid #eef1f6; border-radius: 0 8px 8px 0; }
.mini-value { font-size: 1.05rem; font-weight: 800; color: var(--carr-ink); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-label { font-size: .7rem; color: var(--carr-muted); font-weight: 500; white-space: nowrap; }
.mini-meta { font-size: .66rem; color: var(--carr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-metric.is-danger .mini-value, .mini-metric.is-danger .mini-meta { color: var(--carr-danger); }
.mini-metric.is-warning .mini-value, .mini-metric.is-warning .mini-meta { color: var(--carr-warning); }

/* ---------------------------------------------------------------- Check hero */
.check-searchbar { background: #fff; border-radius: 14px; padding: .4rem; display: flex; gap: .4rem; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.check-searchbar .form-select { max-width: 170px; border: 0; background-color: #f3f5fa; }
.check-searchbar .form-control { border: 0; font-size: 1.05rem; box-shadow: none; }
.check-searchbar .btn { white-space: nowrap; padding-left: 1.3rem; padding-right: 1.3rem; }
.not-crb { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: #9fb0d6; }

/* ---------------------------------------------------------------- Risk display */
.risk-gauge { position: relative; width: 190px; height: 190px; margin: 0 auto; }
.risk-gauge svg { transform: rotate(-90deg); }
.risk-gauge .gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.risk-gauge .gauge-score { font-size: 3rem; font-weight: 800; color: var(--carr-ink); line-height: 1; letter-spacing: -.03em; }
.risk-gauge .gauge-outof { color: var(--carr-muted); font-size: .8rem; font-weight: 600; }
.risk-gauge.sm { width: 110px; height: 110px; }
.risk-gauge.sm .gauge-score { font-size: 1.8rem; }
.risk-level-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.recommendation { border-radius: 12px; padding: .9rem 1rem; font-weight: 700; display: flex; gap: .7rem; align-items: center; }
.recommendation .rec-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; opacity: .75; font-weight: 600; }
.recommendation .rec-value { font-size: 1.05rem; letter-spacing: .02em; }
.level-LOW { --lvl: #16a34a; --lvl-bg: #dcfce7; --lvl-ink: #14532d; }
.level-MODERATE { --lvl: #d97706; --lvl-bg: #fef3c7; --lvl-ink: #78350f; }
.level-HIGH { --lvl: #ea580c; --lvl-bg: #ffedd5; --lvl-ink: #7c2d12; }
.level-CRITICAL { --lvl: #dc2626; --lvl-bg: #fee2e2; --lvl-ink: #7f1d1d; }
.level-INSUFFICIENT_HISTORY, .level-NONE { --lvl: #64748b; --lvl-bg: #eef1f6; --lvl-ink: #1e293b; }
.lvl-pill { background: var(--lvl-bg); color: var(--lvl-ink); }
.lvl-rec { background: var(--lvl-bg); color: var(--lvl-ink); border: 1px solid color-mix(in srgb, var(--lvl) 25%, transparent); }
.lvl-bar { height: 6px; border-radius: 99px; background: var(--lvl); }
.lvl-border { border-top: 4px solid var(--lvl) !important; }
.score-chip { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .82rem; padding: .2rem .55rem; border-radius: 8px; background: var(--lvl-bg); color: var(--lvl-ink); }

.factor-list { list-style: none; padding: 0; margin: 0; }
.factor-list li { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem 0; border-bottom: 1px dashed #edf0f5; font-size: .88rem; }
.factor-list li:last-child { border-bottom: 0; }
.factor-list .fi { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; margin-top: 1px; }
.factor-list .fi.pos { background: #dcfce7; color: #15803d; }
.factor-list .fi.neg { background: #fee2e2; color: #b91c1c; }
.factor-list .fi.warn { background: #fef3c7; color: #b45309; }
.factor-list .pts { margin-left: auto; font-weight: 700; font-size: .78rem; white-space: nowrap; }
.factor-list .pts.pos { color: #15803d; }
.factor-list .pts.neg { color: #b91c1c; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
.metric { background: #f8fafc; border: 1px solid #eef1f6; border-radius: 12px; padding: .75rem .85rem; }
.metric .m-label { font-size: .7rem; color: var(--carr-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.metric .m-value { font-size: 1.35rem; font-weight: 800; color: var(--carr-ink); letter-spacing: -.02em; }
.metric.bad .m-value { color: var(--carr-danger); }
.metric.good .m-value { color: var(--carr-success); }

/* ---------------------------------------------------------------- Timeline */
.timeline { position: relative; padding-left: 1.6rem; list-style: none; margin: 0; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: #e8ecf3; }
.timeline > li { position: relative; padding-bottom: 1.1rem; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline .t-dot { position: absolute; left: -1.6rem; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--carr-primary); }
.timeline .t-dot.success { border-color: var(--carr-success); }
.timeline .t-dot.danger { border-color: var(--carr-danger); }
.timeline .t-dot.warning { border-color: var(--carr-warning); }
.timeline .t-dot.muted { border-color: #cbd5e1; }
.timeline .t-title { font-weight: 600; color: var(--carr-ink); font-size: .88rem; }
.timeline .t-meta { font-size: .76rem; color: var(--carr-muted); }
.score-delta { font-weight: 800; font-size: .95rem; color: var(--carr-ink); }
.score-delta .up { color: var(--carr-success); }
.score-delta .down { color: var(--carr-danger); }

/* ---------------------------------------------------------------- Profile */
.profile-header { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: .5rem 1rem; font-size: .88rem; }
.kv dt { color: var(--carr-muted); font-weight: 500; }
.kv dd { margin: 0; color: var(--carr-ink); font-weight: 500; word-break: break-word; }
.nav-tabs-carr { border-bottom: 1px solid var(--carr-line); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; }
.nav-tabs-carr .nav-link { border: 0; color: var(--carr-muted); font-weight: 600; padding: .75rem .9rem; border-bottom: 2px solid transparent; white-space: nowrap; border-radius: 0; }
.nav-tabs-carr .nav-link.active { color: var(--carr-primary); border-bottom-color: var(--carr-primary); background: transparent; }
.masked { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--carr-muted); }
.empty-state .es-icon { width: 56px; height: 56px; border-radius: 16px; background: #f1f4f9; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #94a3b8; margin-bottom: .8rem; }
.empty-state h6 { color: var(--carr-ink); }

.notice { border-radius: 12px; padding: .85rem 1rem; display: flex; gap: .75rem; font-size: .86rem; }
.notice i { font-size: 1.1rem; margin-top: 1px; }
.notice-info { background: #eff6ff; color: #1e3a8a; border: 1px solid #dbeafe; }
.notice-warning { background: #fffbeb; color: #78350f; border: 1px solid #fde68a; }
.notice-danger { background: #fef2f2; color: #7f1d1d; border: 1px solid #fecaca; }
.notice-success { background: #f0fdf4; color: #14532d; border: 1px solid #bbf7d0; }
.notice-slate { background: #f8fafc; color: #334155; border: 1px solid #e2e8f0; }

.alert { border-radius: 12px; border: 0; }
.flash-stack { position: fixed; top: 76px; right: 1.25rem; z-index: 1080; width: min(420px, calc(100vw - 2rem)); }
.flash-stack .alert { box-shadow: var(--carr-shadow-lg); }

.doc-tile { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--carr-line); border-radius: 12px; background: #fff; }
.doc-tile .doc-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #f1f4f9; color: #475569; flex-shrink: 0; }
.doc-tile .doc-name { font-weight: 600; color: var(--carr-ink); font-size: .85rem; word-break: break-all; }

.progress-thin { height: 8px; border-radius: 99px; background: #eef1f6; }
.progress-thin .progress-bar { border-radius: 99px; }

.step-dots { display: flex; gap: .5rem; }
.chart-box { min-height: 280px; }

.dropdown-menu { border-radius: 12px; border-color: var(--carr-line); box-shadow: var(--carr-shadow-lg); padding: .4rem; }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-size: .88rem; }
.modal-content { border-radius: 16px; border: 0; }
.modal-header, .modal-footer { border-color: var(--carr-line); }

/* ---------------------------------------------------------------- Auth screens */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-side { background: radial-gradient(900px 500px at 10% 110%, rgba(59,107,255,.45), transparent 60%), linear-gradient(160deg, #0b1220, #131f45); color: #cbd5e1; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.auth-side h2 { color: #fff; font-size: 2.1rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: #fff; }
.auth-card { width: 100%; max-width: 440px; }
.auth-points li { display: flex; gap: .7rem; margin-bottom: .9rem; }
.auth-points i { color: #7fa0ff; }
@media (max-width: 991.98px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* ---------------------------------------------------------------- Marketing site */
.site-nav { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(229,233,242,.7); }
.site-nav .nav-link { color: var(--carr-ink-2); font-weight: 500; }
.site-nav .nav-link:hover { color: var(--carr-primary); }
.hero { background: radial-gradient(1000px 520px at 85% 0%, rgba(59,107,255,.18), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(22,163,74,.08), transparent 60%), #fff; padding: 5.5rem 0 4.5rem; overflow: hidden; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--carr-ink); }
.hero h1 .accent { background: linear-gradient(90deg, #2450e6, #6a4cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: 1.15rem; color: #475569; max-width: 560px; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; color: var(--carr-primary); background: var(--carr-primary-50); border-radius: 999px; padding: .35rem .8rem; letter-spacing: .02em; }
.hero-card { border-radius: 20px; box-shadow: 0 30px 80px rgba(15,23,42,.18); border: 1px solid var(--carr-line); background: #fff; }
.section { padding: 5rem 0; }
.section-alt { background: #f7f9fc; }
.section-dark { background: linear-gradient(160deg, #0b1220, #16224a); color: #cbd5e1; }
.section-dark h2, .section-dark h3, .section-dark h5 { color: #fff; }
.section-title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -.025em; }
.feature-card { padding: 1.6rem; height: 100%; transition: transform .15s ease, box-shadow .15s ease; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--carr-shadow-lg); }
.feature-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 1rem; }
.step-num { width: 38px; height: 38px; border-radius: 50%; background: var(--carr-primary); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.price-card { padding: 2rem; height: 100%; position: relative; }
.price-card.featured { border: 2px solid var(--carr-primary); box-shadow: 0 20px 50px rgba(36,80,230,.18); }
.price-card .price { font-size: clamp(1.5rem, 2.1vw, 2.1rem); font-weight: 800; color: var(--carr-ink); letter-spacing: -.03em; white-space: nowrap; }
.price-card ul li { padding: .35rem 0; }
.price-card { display: flex; flex-direction: column; }
.price-card .plan-features { flex-grow: 1; }
.price-card .plan-features li { display: flex; align-items: flex-start; }
.price-card .plan-features li i { flex-shrink: 0; margin-top: .15rem; }
/* Show/hide password. The button sits inside the field so the control keeps its full width. */
.pw-field { position: relative; }
.pw-field > input { padding-right: 2.9rem; }
.pw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 2.8rem; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: var(--carr-muted); border-radius: 0 10px 10px 0; cursor: pointer; }
.pw-toggle:hover { color: var(--carr-ink); }
.pw-toggle:focus-visible { outline: 2px solid var(--carr-primary); outline-offset: -2px; }
.pw-toggle i { font-size: 1.05rem; line-height: 1; }
/* Product mock-ups on the business page: real components inside a window frame,
   always labelled as sample data so nobody reads them as live figures. */
.mock { border: 1px solid var(--carr-line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(15, 23, 42, .14); }
.mock-bar { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; background: #f6f8fc; border-bottom: 1px solid var(--carr-line); }
.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: #d7deea; flex-shrink: 0; }
.mock-url { flex-grow: 1; text-align: center; font-size: .72rem; color: var(--carr-muted); background: #fff; border: 1px solid var(--carr-line); border-radius: 999px; padding: .12rem .7rem; max-width: 260px; margin: 0 auto; }
.mock-tag { position: absolute; top: .6rem; right: .7rem; z-index: 2; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: rgba(15,23,42,.62); border-radius: 999px; padding: .15rem .55rem; }
.mock-body { padding: 1rem; background: var(--carr-bg, #f7f9fc); }
.mock-wrap { position: relative; }
.mock-scale { font-size: .92rem; }
.mock-scale .stat-card .stat-value { font-size: 1.3rem; }
.mock-scale .stat-icon { width: 32px; height: 32px; font-size: .95rem; }
.mock-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .2rem; border-top: 1px solid var(--carr-line); }
.mock-row:first-of-type { border-top: 0; }
.mock-thumb { width: 44px; height: 32px; border-radius: 7px; background: #e8edf6; display: flex; align-items: center; justify-content: center; color: #94a3b8; flex-shrink: 0; font-size: .9rem; }
.mock-chart { display: flex; align-items: flex-end; gap: 6px; height: 74px; }
.mock-chart span { flex: 1 1 0; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--carr-primary), #7aa0ff); opacity: .85; }
.mock-chart span.peak { opacity: 1; }
.step-card { border-left: 2px solid var(--carr-line); padding-left: 1.1rem; position: relative; }
.step-card::before { content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--carr-primary); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--carr-primary-50, #e8eeff); }
.step-card.is-last { border-left-color: transparent; }
/* Pricing page: a shorter hero, and the monthly/yearly switch. */
.pricing-hero { padding: 3rem 0 2.6rem; --hero-shot: url("../img/photo-1580273916550-e323be2ae537.avif"), url("../img/florian-schneider-799KfBloSFQ-unsplash.jpg"); --hero-focus: center 40%; --hero-soften: blur(4px) saturate(1.05); }
.pricing-hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.period-toggle .trip-option { text-decoration: none; }

.crb-banner { border-radius: 18px; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; padding: 1.5rem 1.75rem; }
.accordion-button:not(.collapsed) { background: var(--carr-primary-50); color: var(--carr-primary); box-shadow: none; }
.accordion-item { border-color: var(--carr-line); }
.accordion-item:first-of-type, .accordion-item:first-of-type .accordion-button { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.accordion-item:last-of-type, .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.site-footer { background: #0b1220; color: #8a96ae; padding: 3.5rem 0 2rem; }
.site-footer a { color: #cbd5e1; }
.site-footer h6 { color: #fff; }

/* Portal */
.portal-shell { min-height: 100vh; background: var(--carr-bg); }
.portal-top { background: #fff; border-bottom: 1px solid var(--carr-line); }

/* Utilities */
.gap-2 { gap: .5rem; }
.min-w-0 { min-width: 0; }
.text-ink { color: var(--carr-ink) !important; }
.border-dashed { border-style: dashed !important; }
.cursor-pointer { cursor: pointer; }
.w-fit { width: fit-content; }
.code-block { background: #0b1220; color: #d4def7; border-radius: 12px; padding: 1rem 1.1rem; font-size: .8rem; overflow-x: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.code-block .k { color: #7fa0ff; }
.code-block .s { color: #86efac; }
.method { font-weight: 800; font-size: .7rem; padding: .2rem .45rem; border-radius: 6px; font-family: ui-monospace, monospace; }
.method.get { background: #dcfce7; color: #15803d; }
.method.post { background: var(--carr-primary-50); color: var(--carr-primary); }
@media print { .app-sidebar, .app-topbar, .no-print { display: none !important; } .app-main { margin: 0; } }

/* ---------------------------------------------------------------- Photos */
.photo-picker { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 10; border: 2px dashed #d5dcea; border-radius: 12px; background: #f8fafc; cursor: pointer; overflow: hidden; margin: 0; transition: border-color .15s ease, background .15s ease; }
.photo-picker:hover { border-color: var(--carr-primary); background: var(--carr-primary-50); }
.photo-picker-square { aspect-ratio: 1 / 1; }
.photo-picker-card { aspect-ratio: 85.6 / 54; }
.photo-picker-logo { aspect-ratio: 3 / 2; background: #fff; }
.photo-picker img { width: 100%; height: 100%; object-fit: cover; }
.photo-picker-logo img { object-fit: contain; padding: .5rem; }
.photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; color: var(--carr-muted); padding: .5rem; font-size: .8rem; }
.photo-placeholder i { font-size: 1.6rem; color: #94a3b8; }
.photo-placeholder small { font-size: .68rem; }
.photo-change { position: absolute; bottom: 6px; right: 6px; background: rgba(15,23,42,.72); color: #fff; font-size: .7rem; padding: .15rem .5rem; border-radius: 99px; }
.vehicle-thumb { width: 44px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #eef1f6; }
.vehicle-thumb-md { width: 64px; height: 44px; border-radius: 8px; }
.vehicle-thumb-empty { display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 1rem; }
.vehicle-hero { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #eef1f6; }
.vehicle-hero-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; color: #94a3b8; }
.vehicle-hero-empty i { font-size: 3rem; }
.avatar-photo { object-fit: cover; padding: 0; background: #eef1f6; }

/* ---------------------------------------------------------------- Front desk */
.desk-list .desk-row + .desk-row { border-top: 1px solid #eef1f6; }
.desk-row { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; }
.desk-row:hover { background: #fafbfd; }

/* ---------------------------------------------------------------- Invoice builder */
.invoice-item-row { display: grid; grid-template-columns: 1fr 70px 130px 90px 34px; gap: .35rem; align-items: center; margin-bottom: .4rem; }
.invoice-item-row .item-amount { text-align: right; font-weight: 600; font-size: .85rem; color: var(--carr-ink); white-space: nowrap; }
@media (max-width: 575.98px) {
  .invoice-item-row { grid-template-columns: 1fr 60px 34px; }
  .invoice-item-row .item-price { grid-column: 1 / 2; }
  .invoice-item-row .item-amount { grid-column: 2 / 4; }
}
.template-option { display: flex; align-items: center; padding: .5rem .7rem; border: 1px solid var(--carr-line); border-radius: 10px; cursor: pointer; margin: 0; }
.template-option:has(input:checked) { border-color: var(--carr-primary); background: var(--carr-primary-50); }
.color-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--carr-line); padding: 0; }
.color-swatch.active { box-shadow: 0 0 0 2px var(--carr-ink); }
.form-control-color { width: 42px; height: 30px; padding: .15rem; }

/* ---------------------------------------------------------------- Invoice & receipt documents */
.doc-scaler { background: #e9edf4; border-radius: 14px; padding: 1.25rem; overflow-x: auto; }
.doc-sheet { --doc-accent: #2450E6; position: relative; width: 100%; max-width: 820px; min-height: 1060px; margin: 0 auto; background: #fff; color: #1e293b; box-shadow: 0 10px 30px rgba(15,23,42,.12); padding: 44px 48px 64px; font-size: 13px; line-height: 1.5; overflow: hidden; }
.doc-sheet .is-empty { display: none !important; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 14px; }
.doc-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.doc-logo { max-width: 150px; max-height: 70px; object-fit: contain; }
.doc-company { font-size: 20px; font-weight: 800; color: #0f172a; letter-spacing: -.02em; line-height: 1.2; }
.doc-brand-text .doc-line { color: #64748b; font-size: 12px; }
.doc-title-block { text-align: right; flex-shrink: 0; }
.doc-title { font-size: 30px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--doc-accent); line-height: 1; }
.doc-number { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; color: #475569; margin-top: 6px; }
.doc-from { color: #475569; font-size: 12px; margin-bottom: 22px; }
.doc-from .doc-line { display: inline; }
.doc-from .doc-line:not(.is-empty) ~ .doc-line:not(.is-empty)::before { content: " · "; color: #cbd5e1; }
.doc-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--doc-accent); margin-bottom: 4px; }
.doc-strong { font-weight: 700; color: #0f172a; font-size: 14px; }
.doc-parties { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 16px 0; border-top: 1px solid #e5e9f2; border-bottom: 1px solid #e5e9f2; margin-bottom: 16px; }
.doc-dates table { border-collapse: collapse; }
.doc-dates th { text-align: left; font-weight: 500; color: #64748b; padding: 2px 16px 2px 0; white-space: nowrap; }
.doc-dates td { text-align: right; padding: 2px 0; white-space: nowrap; color: #0f172a; }
.doc-rental { display: flex; flex-wrap: wrap; gap: 6px 22px; background: #f8fafc; border-radius: 8px; padding: 8px 12px; margin-bottom: 16px; font-size: 12px; }
.doc-items { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.doc-items th { background: var(--doc-accent); color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 9px 10px; text-align: left; }
.doc-items td { padding: 10px; border-bottom: 1px solid #eef1f6; vertical-align: top; }
.doc-items .num { text-align: right; white-space: nowrap; }
.doc-items tbody tr:nth-child(even) td { background: #fafbfd; }
.doc-summary { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: start; margin-bottom: 20px; }
.doc-pre { white-space: pre-line; font-size: 12px; color: #334155; }
.doc-totals { border-collapse: collapse; width: 260px; }
.doc-totals th { text-align: left; font-weight: 500; color: #64748b; padding: 5px 0; }
.doc-totals td { text-align: right; padding: 5px 0; color: #0f172a; white-space: nowrap; }
.doc-totals tr.is-empty { display: none; }
.doc-totals .doc-grand th, .doc-totals .doc-grand td { border-top: 2px solid var(--doc-accent); font-weight: 800; font-size: 15px; color: #0f172a; padding-top: 8px; }
.doc-notes { font-size: 12px; color: #475569; background: #f8fafc; border-left: 3px solid var(--doc-accent); padding: 10px 14px; border-radius: 0 8px 8px 0; white-space: pre-line; }
.doc-footer { position: absolute; left: 48px; right: 48px; bottom: 24px; text-align: center; font-size: 11px; color: #94a3b8; border-top: 1px solid #eef1f6; padding-top: 10px; min-height: 1px; }
.doc-stamp { position: absolute; top: 210px; right: 56px; transform: rotate(-14deg); border: 4px solid; border-radius: 10px; padding: 4px 18px; font-size: 34px; font-weight: 900; letter-spacing: .12em; opacity: .22; pointer-events: none; }
.stamp-paid { color: #16a34a; }
.stamp-void { color: #dc2626; }
.stamp-draft { color: #64748b; }
.doc-amount-box { text-align: center; padding: 26px; border: 2px solid var(--doc-accent); border-radius: 14px; margin: 10px 0 22px; }
.doc-amount { font-size: 40px; font-weight: 900; color: var(--doc-accent); letter-spacing: -.02em; line-height: 1.1; margin: 4px 0 6px; }
.doc-receipt { min-height: 760px; }
.doc-receipt .doc-totals { margin: 0 0 20px auto; }
.doc-signature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 46px; font-size: 12px; color: #64748b; }
.doc-sign-line { border-bottom: 1px solid #94a3b8; height: 34px; margin-bottom: 6px; }

/* Template: modern (colour band header) */
.tpl-modern .doc-head { margin: -44px -48px 18px; padding: 30px 48px; background: var(--doc-accent); color: #fff; }
.tpl-modern .doc-company, .tpl-modern .doc-title { color: #fff; }
.tpl-modern .doc-brand-text .doc-line, .tpl-modern .doc-number { color: rgba(255,255,255,.85); }
.tpl-modern .doc-logo { background: #fff; border-radius: 8px; padding: 6px; }

/* Template: classic (centred letterhead) */
.tpl-classic .doc-head { flex-direction: column; align-items: center; text-align: center; border-bottom: 3px double var(--doc-accent); padding-bottom: 14px; margin-bottom: 8px; }
.tpl-classic .doc-brand { flex-direction: column; gap: 8px; }
.tpl-classic .doc-company { font-family: Georgia, "Times New Roman", serif; font-size: 24px; letter-spacing: 0; }
.tpl-classic .doc-title-block { text-align: center; }
.tpl-classic .doc-title { font-family: Georgia, "Times New Roman", serif; font-size: 22px; letter-spacing: .2em; }
.tpl-classic .doc-from { text-align: center; }
.tpl-classic .doc-items th { background: transparent; color: var(--doc-accent); border-bottom: 2px solid var(--doc-accent); }

/* Template: minimal (light and airy) */
.tpl-minimal .doc-title { color: #0f172a; font-weight: 300; letter-spacing: .15em; }
.tpl-minimal .doc-items th { background: transparent; color: #64748b; border-bottom: 1px solid #0f172a; }
.tpl-minimal .doc-items tbody tr:nth-child(even) td { background: transparent; }
.tpl-minimal .doc-parties { border-top: 0; }
.tpl-minimal .doc-notes { background: transparent; border-left-width: 2px; }
.tpl-minimal .doc-amount-box { border-width: 1px; }

@media (max-width: 767.98px) {
  .doc-scaler { padding: .5rem; }
  .doc-sheet { padding: 24px 20px 60px; min-height: 0; font-size: 12px; }
  .tpl-modern .doc-head { margin: -24px -20px 16px; padding: 20px; }
  .doc-head { flex-direction: column; }
  .doc-parties, .doc-summary { grid-template-columns: 1fr; }
  .doc-title-block { text-align: left; }
  .doc-totals { width: 100%; }
  .doc-footer { left: 20px; right: 20px; }
}

/* Printing an invoice or receipt: only the document, on A4 */
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff !important; }
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; left: 0; top: 0; width: 100%; padding: 0 !important; background: #fff !important; }
  .print-area .doc-sheet { box-shadow: none; max-width: none; width: 210mm; min-height: 297mm; }
  .doc-sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Website check modal */
.check-modal-head { background: radial-gradient(700px 240px at 100% -40%, rgba(91,130,255,.4), transparent 60%), linear-gradient(135deg, #0b1220, #1c3aa9); padding: 1.4rem 1.5rem 0; }
.check-modal-tabs { gap: .25rem; }
.check-modal-tabs .nav-link { color: #b9c4df; border: 0; border-radius: 10px 10px 0 0; padding: .6rem 1rem; font-weight: 600; font-size: .88rem; background: transparent; }
.check-modal-tabs .nav-link:hover { color: #fff; }
.check-modal-tabs .nav-link.active { background: #fff; color: var(--carr-primary); }
#checkModal .check-modal-head { flex-shrink: 0; }

/* ---------------------------------------------------------------- Network report rows */
.avatar-sq { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; background: #f1f4f9; color: #64748b; flex-shrink: 0; }
.avatar-sq.sev-low { background: #eef6ff; color: #2563eb; }
.avatar-sq.sev-medium { background: #fff7e6; color: #b45309; }
.avatar-sq.sev-high { background: #fff1f0; color: #dc2626; }
.avatar-sq.sev-critical { background: #fee2e2; color: #991b1b; }

/* ---------------------------------------------------------------- Landing: hero check, stat band, split cards */
.hero-check { background: #fff; border: 1px solid var(--carr-line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .06); }
.stat-band { background: #0b1220; padding: 1.6rem 0; }
.stat-band-item { color: #dbe4ff; }
.stat-band-item i { font-size: 1.1rem; color: #7fa0ff; }
.stat-band-item .sb-value { font-size: 1.7rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.2; }
.stat-band-item .sb-label { font-size: .78rem; color: #93a4c8; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.split-card { padding: 1.5rem; }
.split-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.split-list { list-style: none; padding: 0; margin: 0; }
.split-list li { display: flex; gap: .6rem; align-items: start; padding: .55rem 0; border-top: 1px solid var(--carr-line); font-size: .92rem; color: var(--carr-muted); }
.split-list li:first-child { border-top: 0; }
.split-list li i { color: var(--carr-primary); margin-top: .15rem; }
.masked-preview { border: 1px solid var(--carr-line); border-radius: 12px; padding: .9rem; background: #fbfcfe; }
@media (max-width: 575.98px) { .stat-band-item .sb-value { font-size: 1.35rem; } }

/* ---------------------------------------------------------------- Dashboard status cards */

.status-card { display: flex; gap: .55rem; align-items: center; padding: .5rem .65rem; border-left: 3px solid var(--carr-line); border-radius: 10px; }
.status-card .stat-icon { width: 26px; height: 26px; border-radius: 8px; font-size: .75rem; flex-shrink: 0; }
.status-card .sc-title { font-weight: 700; color: var(--carr-ink); font-size: .78rem; line-height: 1.25; }
.status-card .sc-text { font-size: .72rem; color: var(--carr-muted); line-height: 1.3; }
.status-card .sc-action { font-size: .72rem; font-weight: 600; white-space: nowrap; }
.status-card.tone-info { border-left-color: #38bdf8; }
.status-card.tone-warning { border-left-color: #f59e0b; }
.status-card.tone-primary { border-left-color: var(--carr-primary); }
.status-card.tone-danger { border-left-color: #ef4444; }

/* ---------------------------------------------------------------- Rental grid cards */
.view-switch .btn { padding: .45rem .7rem; }
.rental-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--carr-line); border-radius: 16px; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.rental-card:hover { box-shadow: 0 14px 34px rgba(15, 23, 42, .1); transform: translateY(-2px); }
.rental-card .rc-photo { position: relative; display: block; height: 150px; background: #eef1f6; }
.rental-card .rc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rental-card .rc-photo-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 2.4rem; }
.rental-card .rc-status { position: absolute; top: .6rem; left: .6rem; }
.rental-card .rc-reg { position: absolute; bottom: .6rem; right: .6rem; background: rgba(15, 23, 42, .78); color: #fff; font-size: .78rem; font-weight: 700; padding: .2rem .5rem; border-radius: 6px; letter-spacing: .04em; }
.rental-card .rc-body { display: flex; flex-direction: column; gap: .6rem; padding: .9rem 1rem 1rem; flex-grow: 1; }
.rental-card .rc-ref { font-weight: 700; color: var(--carr-ink); text-decoration: none; }
.rental-card .rc-ref:hover { color: var(--carr-primary); }
.rental-card .rc-countdown { display: flex; align-items: center; gap: .6rem; border-radius: 12px; padding: .5rem .7rem; background: #f4f6fb; }
.rental-card .rc-countdown i { font-size: 1.1rem; }
.rental-card .rc-cd-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; opacity: .75; }
.rental-card .rc-cd-value { display: block; font-weight: 800; font-size: 1.02rem; line-height: 1.25; }
.rental-card .rc-countdown.tone-success { background: #ecfdf5; color: #047857; }
.rental-card .rc-countdown.tone-info { background: #eff6ff; color: #1d4ed8; }
.rental-card .rc-countdown.tone-warning { background: #fff7ed; color: #b45309; }
.rental-card .rc-countdown.tone-danger { background: #fef2f2; color: #b91c1c; }
.rental-card .rc-countdown.tone-muted { background: #f4f6fb; color: var(--carr-muted); }
.rental-card .rc-renter { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; border-top: 1px solid var(--carr-line); padding-top: .6rem; }
.rental-card .rc-renter:hover .text-ink { color: var(--carr-primary); }
.rental-card .rc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; margin: 0; }
.rental-card .rc-meta dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--carr-muted); font-weight: 700; }
.rental-card .rc-meta dd { margin: 0; font-size: .84rem; color: var(--carr-ink); }

/* ---------------------------------------------------------------- Rental table: thumbnails and time left */
.avatar.avatar-sm { width: 28px; height: 28px; border-radius: 8px; font-size: .68rem; }
.time-left { display: inline-flex; align-items: center; font-weight: 700; font-size: .8rem; padding: .18rem .5rem; border-radius: 999px; background: #f4f6fb; color: var(--carr-muted); white-space: nowrap; }
.time-left.tone-success { background: #ecfdf5; color: #047857; }
.time-left.tone-info { background: #eff6ff; color: #1d4ed8; }
.time-left.tone-warning { background: #fff7ed; color: #b45309; }
.time-left.tone-danger { background: #fef2f2; color: #b91c1c; }

/* ---------------------------------------------------------------- Fleet cards */
.vehicle-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--carr-line); border-radius: 16px; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.vehicle-card:hover { box-shadow: 0 14px 34px rgba(15, 23, 42, .1); transform: translateY(-2px); }
.vehicle-card .vc-photo { position: relative; display: block; height: 140px; background: #eef1f6; }
.vehicle-card .vc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vehicle-card .vc-photo-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 2.2rem; }
.vehicle-card .vc-status { position: absolute; top: .55rem; left: .55rem; }
.vehicle-card .vc-reg { position: absolute; bottom: .55rem; right: .55rem; background: rgba(15, 23, 42, .78); color: #fff; font-size: .76rem; font-weight: 700; padding: .18rem .45rem; border-radius: 6px; letter-spacing: .04em; }
.vehicle-card .vc-body { display: flex; flex-direction: column; gap: .55rem; padding: .8rem .9rem .9rem; flex-grow: 1; }
.vehicle-card .vc-name { font-weight: 700; color: var(--carr-ink); text-decoration: none; }
.vehicle-card .vc-name:hover { color: var(--carr-primary); }
.vehicle-card .vc-compliance { display: flex; align-items: center; gap: .45rem; border-radius: 10px; padding: .35rem .6rem; font-size: .78rem; font-weight: 700; background: #f4f6fb; color: var(--carr-muted); }
.vehicle-card .vc-compliance.tone-success { background: #ecfdf5; color: #047857; }
.vehicle-card .vc-compliance.tone-warning { background: #fff7ed; color: #b45309; }
.vehicle-card .vc-compliance.tone-danger { background: #fef2f2; color: #b91c1c; }
.vehicle-card .vc-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.vehicle-card .vc-docs li { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--carr-muted); border-top: 1px dashed var(--carr-line); padding-top: .25rem; }
.vehicle-card .vc-docs li:first-child { border-top: 0; padding-top: 0; }
.vehicle-card .vc-docs .vd-label { flex-grow: 1; }
.vehicle-card .vc-docs .vd-state { font-weight: 700; }
.vehicle-card .vc-docs li.tone-success .vd-state { color: #047857; }
.vehicle-card .vc-docs li.tone-warning { color: #b45309; }
.vehicle-card .vc-docs li.tone-warning .vd-state { color: #b45309; }
.vehicle-card .vc-docs li.tone-danger { color: #b91c1c; }
.vehicle-card .vc-docs li.tone-danger .vd-state { color: #b91c1c; }

/* ---------------------------------------------------------------- Client cards & ratings */
.client-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--carr-line); border-radius: 16px; padding: .9rem; gap: .7rem; transition: box-shadow .15s ease, transform .15s ease; }
.client-card:hover { box-shadow: 0 14px 34px rgba(15, 23, 42, .1); transform: translateY(-2px); }
.client-card .cc-head { display: flex; gap: .7rem; align-items: flex-start; }
.client-card .cc-photo { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: #eef1f6; flex-shrink: 0; }
.client-card .cc-photo-empty { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b6bff, #6a4cff); color: #fff; font-weight: 700; font-size: 1.05rem; }
.client-card .cc-name { font-weight: 700; color: var(--carr-ink); text-decoration: none; display: block; line-height: 1.25; }
.client-card .cc-name:hover { color: var(--carr-primary); }
.client-card .cc-risk { font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: var(--carr-muted); font-weight: 700; margin-top: .2rem; max-width: 74px; line-height: 1.2; }
.client-card .cc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; border-top: 1px solid var(--carr-line); border-bottom: 1px solid var(--carr-line); padding: .55rem 0; text-align: center; }
.client-card .cc-stat-value { display: block; font-weight: 700; color: var(--carr-ink); font-size: .88rem; }
.client-card .cc-stat-label { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: var(--carr-muted); font-weight: 600; }
.client-card .cc-rating-hint { font-size: .7rem; color: var(--carr-muted); margin-top: .2rem; }
.client-card .cc-actions { display: flex; gap: .4rem; margin-top: auto; }
.rating-stars { display: inline-flex; gap: .1rem; align-items: center; }
.rating-stars .star { background: none; border: 0; padding: 0 .05rem; font-size: 1rem; color: #cbd5e1; line-height: 1; }
.rating-stars .star.on { color: #f59e0b; }
.rating-stars:not(.is-readonly):hover .star { color: #f59e0b; }
.rating-stars:not(.is-readonly) .star:hover ~ .star { color: #cbd5e1; }
.rating-stars .star:focus-visible { outline: 2px solid var(--carr-primary); border-radius: 4px; }

/* ---------------------------------------------------------------- Finance */
.mini-bar { height: 6px; border-radius: 999px; background: #eef1f6; overflow: hidden; margin-top: 3px; }
.mini-bar span { display: block; height: 100%; border-radius: 999px; }
.mini-bar span.in { background: #16a34a; }
.mini-bar span.out { background: #ef4444; }
.top-vehicle { display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem; position: relative; }
.top-vehicle .tv-rank { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--carr-primary); color: #fff; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(36,80,230,.35); }

/* ---------------------------------------------------------------- Letterhead designer */
.layout-option { display: block; border: 1px solid var(--carr-line); border-radius: 12px; padding: .5rem; cursor: pointer; text-align: center; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.layout-option:hover { border-color: #c7d2fe; }
.layout-option.is-active { border-color: var(--carr-primary); box-shadow: 0 0 0 3px rgba(36,80,230,.12); }
.layout-option .lo-sketch { display: block; height: 42px; border-radius: 8px; background: #f4f6fb; padding: .4rem; position: relative; }
.layout-option .lo-sketch i { display: block; width: 26px; height: 12px; border-radius: 3px; background: var(--carr-primary); }
.layout-option .lo-sketch b { display: block; height: 4px; border-radius: 2px; background: #cbd5e1; margin-top: .3rem; width: 70%; }
.layout-option .lo-sketch b + b { width: 45%; }
.layout-option .lo-logo_center .lo-sketch i, .layout-option .lo-sketch.lo-logo_center i { margin: 0 auto; }
.layout-option .lo-sketch.lo-logo_center b { margin-left: auto; margin-right: auto; }
.layout-option .lo-sketch.lo-logo_right i { margin-left: auto; }
.layout-option .lo-sketch.lo-logo_right b { margin-left: auto; }
.layout-option .lo-label { display: block; font-size: .72rem; font-weight: 600; color: var(--carr-ink-2); margin-top: .35rem; }
.line-sorter { list-style: none; margin: 0; padding: 0; border: 1px solid var(--carr-line); border-radius: 12px; overflow: hidden; }
.line-sorter li { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; background: #fff; border-top: 1px solid var(--carr-line); cursor: grab; font-size: .85rem; }
.line-sorter li:first-child { border-top: 0; }
.line-sorter li:hover { background: #f8fafc; }
.line-sorter li.is-dragging { opacity: .45; }
.line-sorter li.is-over { box-shadow: inset 0 2px 0 var(--carr-primary); }
.line-sorter li .bi-grip-vertical { color: #94a3b8; }
.line-sorter li [data-line-value] { max-width: 40%; }

/* Letterhead arrangements on the document itself */
.doc-head.layout-logo_center { flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
.doc-head.layout-logo_center .doc-brand { flex-direction: column; align-items: center; text-align: center; }
.doc-head.layout-logo_center .doc-title-block { text-align: center; }
.doc-from.layout-logo_center { text-align: center; }
.doc-head.layout-logo_right { flex-direction: row-reverse; }
.doc-head.layout-logo_right .doc-brand { flex-direction: row-reverse; text-align: right; }
.doc-head.layout-logo_right .doc-title-block { text-align: left; }
.doc-from.layout-logo_right { text-align: right; }
.doc-logo.size-small { max-height: 40px; }
.doc-logo.size-medium { max-height: 64px; }
.doc-logo.size-large { max-height: 88px; }
.letterhead-chip { width: 110px; height: 72px; border: 1px dashed var(--carr-line); border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #f8fafc; flex-shrink: 0; padding: .4rem; }
.letterhead-chip img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------- Hire a car (public) */
/* The hero carries a photograph behind a scrim. Each page sets --hero-shot;
   the gradient below stays as the fallback if the photo cannot be fetched. */
.rent-hero {
    --hero-shot: none;
    --hero-focus: center 60%;
    --hero-soften: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(900px 300px at 85% -30%, rgba(91,130,255,.35), transparent 60%), linear-gradient(135deg, #0b1220, #1c3aa9);
    color: #fff;
    padding: 2.4rem 0 2rem;
}
.rent-hero::before {
    content: "";
    position: absolute;
    inset: -2%;
    z-index: -2;
    background-image: var(--hero-shot);
    background-size: cover;
    background-position: var(--hero-focus);
    filter: var(--hero-soften);
}
.rent-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 320px at 85% -25%, rgba(91,130,255,.30), transparent 62%),
        linear-gradient(103deg, rgba(8,13,28,.93) 0%, rgba(9,17,36,.78) 44%, rgba(12,26,70,.52) 100%);
}
.rent-hero h1 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.3rem); text-shadow: 0 2px 18px rgba(3,7,18,.45); }
.rent-hero .lead { color: #d3dcf2; text-shadow: 0 1px 12px rgba(3,7,18,.4); }
.rent-search { background: #fff; border-radius: 16px; padding: 1rem; box-shadow: 0 18px 40px rgba(2, 8, 23, .28); }
.rent-search .form-label { color: var(--carr-muted); margin-bottom: .2rem; }
/* The submit sits in the same row as the fields, so it takes their type size too —
   .btn would otherwise inherit 1rem and stand 1.8px taller than a .form-control. */
.rent-search .btn { font-size: .925rem; }
.hire-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--carr-line); border-radius: 16px; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.hire-card:hover { box-shadow: 0 16px 36px rgba(15, 23, 42, .12); transform: translateY(-2px); }
.hire-card .hc-photo { position: relative; display: block; height: 160px; background: #eef1f6; }
.hire-card .hc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hire-card .hc-photo-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 2.4rem; }
.hire-card .hc-type { position: absolute; top: .6rem; left: .6rem; background: rgba(15,23,42,.75); color: #fff; font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.hire-card .hc-body { display: flex; flex-direction: column; gap: .4rem; padding: .85rem .9rem 1rem; flex-grow: 1; }
.hire-card .hc-name { font-weight: 700; color: var(--carr-ink); text-decoration: none; }
.hire-card .hc-name:hover { color: var(--carr-primary); }
.hire-card .hc-specs { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: .76rem; color: var(--carr-muted); }
.hire-card .hc-specs li { display: inline-flex; align-items: center; gap: .25rem; }
.hire-card .hc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--carr-line); }
.hire-card .hc-price { font-weight: 800; color: var(--carr-ink); font-size: 1.05rem; }
.booking-card { position: sticky; top: 1rem; }
.quote-box { display: flex; align-items: center; justify-content: space-between; background: #f4f6fb; border-radius: 10px; padding: .5rem .75rem; font-size: .85rem; color: var(--carr-muted); }
.quote-box strong { color: var(--carr-ink); font-size: 1.05rem; }
.hero-tabs .nav-link { font-size: .82rem; font-weight: 700; padding: .35rem .8rem; color: var(--carr-muted); border-radius: 999px; }
.hero-tabs .nav-link.active { background: var(--carr-primary-50); color: var(--carr-primary); }
.home-hero {
    padding: 3.6rem 0 2.8rem;
    --hero-shot: url("../img/florian-schneider-799KfBloSFQ-unsplash.jpg");
    --hero-focus: center 58%;
}
.home-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.15; }
/* The search page photo is small, so it is softened and reads as a textured band. */
.rent-hero .hero-muted { color: #d2dcf3; text-shadow: 0 1px 10px rgba(3,7,18,.55); }
.rent-hero .hero-eyebrow { background: rgba(255,255,255,.16); color: #e4ebff; backdrop-filter: blur(6px); }
.rent-hero .rent-search { box-shadow: 0 22px 50px rgba(2, 8, 23, .42); }
.search-hero::after {
    background:
        radial-gradient(900px 320px at 85% -25%, rgba(91,130,255,.26), transparent 62%),
        linear-gradient(103deg, rgba(8,13,28,.86) 0%, rgba(9,17,36,.70) 45%, rgba(12,26,70,.46) 100%);
}
.search-hero {
    --hero-shot: url("../img/photo-1580273916550-e323be2ae537.avif"), url("../img/florian-schneider-799KfBloSFQ-unsplash.jpg");
    --hero-focus: center 45%;
    --hero-soften: blur(3px) saturate(1.1);
}
@media (max-width: 575.98px) {
    /* The label sits beside the toggle on a wide screen; on a phone that line is wider
       than the viewport and drags the whole page sideways, so stack them. */
    .rent-search .form-label { display: block; }
    .rent-search .trip-toggle { display: flex; width: 100%; }
    .rent-search .trip-option { flex: 1 1 0; justify-content: center; padding: .45rem .5rem; }
}
@media (max-width: 767.98px) {
    .home-hero { padding: 2.4rem 0 2rem; }
    .rent-hero::after { background: linear-gradient(180deg, rgba(8,13,28,.84) 0%, rgba(9,17,36,.78) 55%, rgba(12,26,70,.74) 100%); }
}
.chip-link { display: inline-block; font-size: .78rem; font-weight: 600; color: #dbe4ff; background: rgba(255,255,255,.1); border-radius: 999px; padding: .25rem .7rem; text-decoration: none; }
.chip-link:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ---------------------------------------------------------------- Trip toggle */
.trip-toggle { display: inline-flex; gap: .35rem; background: #f1f4f9; border-radius: 12px; padding: .25rem; }
.trip-option { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 10px; font-size: .85rem; font-weight: 600; color: var(--carr-muted); cursor: pointer; white-space: nowrap; }
.trip-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.trip-option:hover { color: var(--carr-ink); }
.trip-option.is-active { background: #fff; color: var(--carr-primary); box-shadow: 0 2px 8px rgba(15,23,42,.1); }
.trip-option i { font-size: 1rem; }

/* SweetAlert to match the rest of the interface */
.swal2-popup { border-radius: 16px; font-family: var(--bs-body-font-family); }
.swal2-title { font-size: 1.15rem; color: var(--carr-ink); }
.swal2-html-container { font-size: .92rem; color: var(--carr-ink-2); }
.swal2-toast .swal2-title { font-size: .9rem; }

/* Fleet: list-for-hire switch */
.listing-toggle { border-top: 1px solid var(--carr-line); padding-top: .5rem; margin-top: .1rem; }
.listing-toggle .form-check-label { color: var(--carr-muted); font-weight: 600; }
.listing-toggle .form-check-input:checked ~ .form-check-label { color: var(--carr-success); }
.listing-toggle.is-compact { border-top: 0; padding-top: 0; margin-top: 0; }
.listing-toggle input:disabled ~ .form-check-label { opacity: .6; }

/* Listing availability badge */
.hire-card .hc-avail { position: absolute; bottom: .6rem; left: .6rem; display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--carr-ink); box-shadow: 0 2px 8px rgba(15,23,42,.18); }
.hire-card .hc-avail.tone-success { color: #047857; }
.hire-card .hc-avail.tone-warning { color: #b45309; }
.hire-card .hc-avail.tone-danger { color: #b91c1c; }

/* Vehicle page: key specs as tiles, the rest as an icon list. */
.spec-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.spec-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1rem; padding: .6rem .3rem; border-radius: 10px; background: #f5f7fc; border: 1px solid #eaeef6; }
.spec-tile i { font-size: 1.15rem; color: var(--carr-primary); }
.spec-tile-value { font-weight: 700; color: var(--carr-ink); font-size: .9rem; line-height: 1.2; }
.spec-tile-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--carr-muted); font-weight: 600; }
.spec-tile.is-empty i, .spec-tile.is-empty .spec-tile-value { color: #b6bfcf; }
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--carr-line); font-size: .86rem; }
.spec-list li:first-child { border-top: 0; }
.spec-ico { flex: 0 0 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #eef2ff; color: var(--carr-primary); font-size: .85rem; }
.spec-label { color: var(--carr-muted); font-weight: 500; flex-grow: 1; }
.spec-value { color: var(--carr-ink); font-weight: 600; text-align: right; word-break: break-word; }

/* Road-worthiness documents, one row each with its state. */
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.doc-list li { display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem; border-radius: 10px; border: 1px solid var(--carr-line); background: #fff; }
.doc-ico { flex: 0 0 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; background: #f1f5f9; color: #64748b; }
.doc-main { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; line-height: 1.25; }
.doc-name { font-weight: 700; color: var(--carr-ink); font-size: .88rem; }
.doc-sub { font-size: .75rem; color: var(--carr-muted); }
.doc-state { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; background: #f1f5f9; color: #64748b; white-space: nowrap; }
.doc-list li.tone-success .doc-ico { background: #ecfdf5; color: #047857; }
.doc-list li.tone-success .doc-state { background: #ecfdf5; color: #047857; }
.doc-list li.tone-warning { border-color: #fde68a; background: #fffbeb; }
.doc-list li.tone-warning .doc-ico, .doc-list li.tone-warning .doc-state { background: #fef3c7; color: #b45309; }
.doc-list li.tone-danger { border-color: #fecaca; background: #fef2f2; }
.doc-list li.tone-danger .doc-ico, .doc-list li.tone-danger .doc-state { background: #fee2e2; color: #b91c1c; }
.doc-list li.is-renewable { cursor: pointer; transition: box-shadow .12s ease, transform .12s ease; }
.doc-list li.is-renewable:hover, .doc-list li.is-renewable:focus-visible { box-shadow: 0 2px 10px rgba(15, 23, 42, .08); transform: translateY(-1px); outline: none; }
.doc-go { font-size: .7rem; }
/* Public booking status page. */
.bs-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.4rem 1.5rem; border-radius: 18px; border: 1px solid; margin-bottom: 1.25rem; }
.bs-banner.tone-success { background: linear-gradient(135deg, #ecfdf5, #f0fdf9); border-color: #bbf0d6; --bs-tone: #047857; }
.bs-banner.tone-warning { background: linear-gradient(135deg, #fffbeb, #fff8ef); border-color: #fde6a8; --bs-tone: #b45309; }
.bs-banner.tone-danger { background: linear-gradient(135deg, #fef2f2, #fff6f6); border-color: #fecaca; --bs-tone: #b91c1c; }
.bs-banner.tone-secondary { background: #f5f7fa; border-color: #e2e8f0; --bs-tone: #475569; }
.bs-banner-icon { flex: 0 0 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #fff; background: var(--bs-tone); box-shadow: 0 6px 16px rgba(15, 23, 42, .12); }
.bs-title { font-size: 1.35rem; font-weight: 800; margin: 0 0 .15rem; color: var(--carr-ink); letter-spacing: -.01em; }
.bs-lead { margin: 0; color: #475569; font-size: .92rem; }
.bs-ref { display: flex; flex-direction: column; align-items: flex-end; padding: .55rem .9rem; background: #fff; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--bs-tone) 45%, #fff); }
.bs-ref span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--carr-muted); font-weight: 700; }
.bs-ref strong { font-size: 1.15rem; color: var(--bs-tone); }

.bs-steps { list-style: none; display: flex; margin: 0 0 1.5rem; padding: 0; counter-reset: s; }
.bs-steps li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; }
.bs-steps li + li::before { content: ''; position: absolute; top: 17px; right: 50%; width: 100%; height: 3px; background: #e2e8f0; z-index: 0; }
.bs-steps li.is-done + li::before, .bs-steps li.is-done + li.is-current::before { background: #10b981; }
.bs-step-dot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid #e2e8f0; color: #94a3b8; font-size: .95rem; }
.bs-steps li.is-done .bs-step-dot { background: #10b981; border-color: #10b981; color: #fff; }
.bs-steps li.is-current .bs-step-dot { border-color: #f59e0b; color: #b45309; background: #fffbeb; box-shadow: 0 0 0 4px #fef3c7; }
.bs-step-label { font-size: .76rem; font-weight: 600; color: var(--carr-muted); }
.bs-steps li.is-done .bs-step-label, .bs-steps li.is-current .bs-step-label { color: var(--carr-ink); }

.bs-car, .bs-panel { background: #fff; border: 1px solid var(--carr-line); border-radius: 18px; overflow: hidden; height: 100%; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); }
.bs-car-photo { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #eef2f8, #e3e9f3); }
.bs-car-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-car-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 5rem; }
.bs-car-type { position: absolute; top: .8rem; left: .8rem; background: rgba(15, 23, 42, .75); color: #fff; font-size: .74rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; backdrop-filter: blur(4px); }
.bs-car-body { padding: 1.1rem 1.25rem 1.25rem; }
.bs-car-name { font-size: 1.4rem; font-weight: 800; margin: 0; color: var(--carr-ink); letter-spacing: -.01em; }
.bs-car-name span { color: var(--carr-muted); font-weight: 600; font-size: 1.05rem; }
.bs-car-org { font-size: .86rem; color: var(--carr-muted); margin-top: .15rem; }
.bs-plate { display: inline-block; padding: .3rem .65rem; border-radius: 8px; background: #fef9c3; border: 2px solid #1e293b; color: #0f172a; font-weight: 800; letter-spacing: .06em; font-size: .9rem; }
.bs-specs { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.bs-specs li { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .7rem; border-radius: 999px; background: #f1f5fd; color: #1e3a8a; font-size: .8rem; font-weight: 600; }
.bs-specs li i { color: var(--carr-primary); }

.bs-panel { padding: 1.25rem; display: flex; flex-direction: column; }
.bs-panel-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: var(--carr-muted); margin: 0 0 .75rem; }
.bs-trip { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.bs-trip li { display: flex; align-items: flex-start; gap: .75rem; }
.bs-trip li > div { display: flex; flex-direction: column; line-height: 1.3; }
.bs-ico { flex: 0 0 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.bs-ico.tone-green { background: #ecfdf5; color: #047857; }
.bs-ico.tone-blue { background: #eef2ff; color: var(--carr-primary); }
.bs-ico.tone-amber { background: #fff7ed; color: #c2410c; }
.bs-ico.tone-violet { background: #f3effe; color: #6d28d9; }
.bs-k { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--carr-muted); font-weight: 700; }
.bs-v { font-weight: 700; color: var(--carr-ink); font-size: .95rem; }
.bs-s { font-size: .82rem; color: var(--carr-muted); }
.bs-price { margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--carr-line); margin-top: 1.1rem; font-size: .86rem; color: var(--carr-muted); display: grid; gap: .35rem; }
.bs-price-total { color: var(--carr-ink); font-weight: 700; }
.bs-price-total strong { font-size: 1.5rem; color: var(--carr-primary); letter-spacing: -.02em; }
.bs-price-note { font-size: .76rem; background: #f8fafc; border-radius: 8px; padding: .45rem .6rem; }

.bs-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--carr-line); border-radius: 16px; }
.bs-contact-text { display: flex; align-items: center; gap: .75rem; }
@media (max-width: 575.98px) {
  .bs-ref { align-items: flex-start; width: 100%; }
  .bs-step-label { font-size: .68rem; }
  .bs-car-name { font-size: 1.2rem; }
}

/* Booking requests as cards. */
.bk-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--carr-line); border-radius: 14px; overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.bk-card:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, .09); border-color: #cfd8ea; }
.bk-card.status-pending { border-top: 3px solid #f59e0b; }
.bk-card.status-accepted { border-top: 3px solid #10b981; }
.bk-card.status-declined, .bk-card.status-expired, .bk-card.status-cancelled { border-top: 3px solid #cbd5e1; }
.bk-card.status-declined .bk-photo img, .bk-card.status-expired .bk-photo img, .bk-card.status-cancelled .bk-photo img { filter: grayscale(.7); opacity: .85; }
.bk-photo { position: relative; display: block; height: 140px; background: linear-gradient(135deg, #eef2f8, #e3e9f3); }
.bk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-photo-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 2.6rem; }
.bk-status { position: absolute; top: .55rem; left: .55rem; }
.bk-status .badge { box-shadow: 0 1px 4px rgba(15, 23, 42, .15); background-color: #fff; }
.bk-ref { position: absolute; bottom: .55rem; right: .55rem; background: rgba(15, 23, 42, .78); color: #fff; font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px; letter-spacing: .03em; }
.bk-body { display: flex; flex-direction: column; gap: .35rem; padding: .85rem .95rem .95rem; flex-grow: 1; }
.bk-client { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--carr-ink); font-size: .98rem; }
.bk-client i { color: var(--carr-primary); font-size: 1.1rem; }
.bk-car { font-size: .8rem; color: var(--carr-muted); }
.bk-when { display: inline-flex; align-self: flex-start; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: #eef2ff; color: #1d4ed8; margin-top: .1rem; }
.bk-when.is-soon { background: #fef3c7; color: #b45309; }
.bk-when.is-past { background: #fee2e2; color: #b91c1c; }
.bk-rows { display: grid; gap: .2rem; font-size: .8rem; color: #334155; margin-top: .2rem; }
.bk-rows > span { display: flex; align-items: center; gap: .45rem; }
.bk-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .65rem; border-top: 1px dashed var(--carr-line); }
.bk-foot > span:first-child { display: flex; flex-direction: column; line-height: 1.2; }
.bk-total { font-weight: 800; color: var(--carr-ink); font-size: 1.1rem; letter-spacing: -.01em; }
.bk-received { font-size: .72rem; color: var(--carr-muted); }
.bk-row { cursor: pointer; }

/* Booking request (staff view). Reuses .bs-ico/.bs-k/.bs-v/.bs-s from the public page. */
.br-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: #fff; border: 1px solid var(--carr-line); border-radius: 16px; overflow: hidden; }
.br-photo { position: relative; display: block; min-height: 260px; background: linear-gradient(135deg, #eef2f8, #e3e9f3); }
.br-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.br-photo-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 4.5rem; }
.br-type { position: absolute; top: .75rem; left: .75rem; background: rgba(15, 23, 42, .75); color: #fff; font-size: .74rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; }
.br-hero-body { padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.br-car { font-size: 1.35rem; font-weight: 800; color: var(--carr-ink); letter-spacing: -.01em; text-decoration: none; }
.br-car:hover { color: var(--carr-primary); }
.br-car span { color: var(--carr-muted); font-weight: 600; font-size: 1rem; }
.br-plate { display: inline-block; padding: .12rem .5rem; border-radius: 6px; background: #fef9c3; border: 2px solid #1e293b; color: #0f172a; font-weight: 800; letter-spacing: .05em; font-size: .8rem; }
.br-count { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; }
.br-count.tone-info { background: #eef2ff; color: #1d4ed8; }
.br-count.tone-warning { background: #fef3c7; color: #b45309; }
.br-count.tone-danger { background: #fee2e2; color: #b91c1c; }
.br-timeline { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; background: #f8fafc; border-radius: 12px; }
.br-tl-point { display: flex; align-items: flex-start; gap: .65rem; }
.br-tl-point > div { display: flex; flex-direction: column; line-height: 1.3; }
.br-tl-line { flex: 1; position: relative; min-width: 50px; height: 2px; background: repeating-linear-gradient(90deg, #cbd5e1 0 6px, transparent 6px 11px); }
.br-tl-line span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--carr-line); border-radius: 999px; padding: .1rem .55rem; font-size: .74rem; font-weight: 700; color: var(--carr-ink); white-space: nowrap; }
.br-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.br-facts > div { display: flex; align-items: center; gap: .65rem; }
.br-facts > div > div { display: flex; flex-direction: column; line-height: 1.3; }
.br-total { font-size: 1.35rem; font-weight: 800; color: var(--carr-primary); letter-spacing: -.02em; }
.br-avatar { flex: 0 0 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2450e6, #7c3aed); color: #fff; font-weight: 800; font-size: 1.1rem; }
.br-secret { display: inline-flex; align-items: center; gap: .5rem; }
.br-secret-btn { border: 0; background: #eef2ff; color: var(--carr-primary); font-size: .72rem; font-weight: 700; border-radius: 6px; padding: .1rem .45rem; }
.br-secret-btn:hover { background: #e0e7ff; }
.br-message { background: #f8fafc; border-left: 3px solid var(--carr-primary); border-radius: 0 10px 10px 0; padding: .7rem .9rem; font-size: .9rem; color: #334155; }
.br-decide.is-accept { border-color: #a7f3d0; }
.br-decide.is-accept .card-header { background: #ecfdf5; color: #047857; }
.br-decide.is-decline .card-header { color: #b91c1c; }
.br-decided.tone-success { border-color: #a7f3d0; background: #f0fdf7; }
.br-decided-ico { font-size: 1.6rem; line-height: 1; }
.br-decided.tone-success .br-decided-ico { color: #059669; }
.br-decided.tone-muted .br-decided-ico { color: #94a3b8; }
@media (max-width: 767.98px) {
  .br-hero { grid-template-columns: 1fr; }
  .br-photo { min-height: 200px; }
  .br-timeline { flex-direction: column; align-items: flex-start; }
  .br-tl-line { width: 2px; height: 28px; min-width: 0; flex: none; margin-left: 18px; background: repeating-linear-gradient(180deg, #cbd5e1 0 6px, transparent 6px 11px); }
  .br-tl-line span { left: 14px; transform: translateY(-50%); }
  .br-facts { grid-template-columns: 1fr; }
}