/* Shared charcoal and red palette for every system role. */
:root {
    /* System-wide design tokens: keep shared colors, type, and spacing here. */
    --design-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --design-ink: #101216;
    --design-canvas: #080c12;
    --design-surface: #12151c;
    --design-surface-raised: #1a1e28;
    --design-text: #f8fafc;
    --design-muted: #64748b;
    --design-line: #e5e7eb;
    --design-primary: #e3262e;
    --design-primary-hover: #bd1e27;
    --design-primary-soft: #fff1f1;
    --design-primary-light: #ffb4b7;
    --design-primary-border: #fecaca;
    --design-space-1: 4px;
    --design-space-2: 8px;
    --design-space-3: 12px;
    --design-space-4: 16px;
    --design-space-5: 20px;
    --design-space-6: 24px;
    --design-radius-control: 8px;
    --design-radius-card: 14px;
    --design-radius-panel: 18px;
    --admin-sidebar-width: 240px;
    --admin-sidebar-collapsed-width: 72px;
    --type-caption: 12px;
    --type-body: 14px;
    --type-emphasis: 16px;
    --type-section: 18px;
    --type-page-title: 28px;

    --bg: #f7f7f7;
    --surface: #fff;
    --surface-light: #f8fafc;
    --surface-hover: #fff1f1;
    --sidebar: var(--design-ink);
    --text: #1f2937;
    --muted: #64748b;
    --orange: var(--design-primary);
    --orange-dark: var(--design-primary-hover);
    --orange-light: #f35b61;
    --orange-glow: rgba(227, 38, 46, .2);
    --portal-bg: #f7f7f7;
    --portal-card: #fff;
    --portal-navy: var(--design-ink);
    --portal-ink: #1f2937;
    --portal-muted: #64748b;
    --portal-line: var(--design-line);
    --portal-orange: var(--design-primary);
    --portal-orange-dark: var(--design-primary-hover);
    --staff-red: var(--design-primary);
    --staff-red-dark: var(--design-primary-hover);
    --red-dark: var(--design-primary-hover);
    --red: var(--design-primary);
    --navy: var(--design-ink);
}

/* Admin pages */
html { scrollbar-gutter: stable; }
html body .sidebar {
    background: #101216;
    color: #fff;
}
html body .sidebar .brand,
html body .sidebar .nav-link,
html body .sidebar .nav-link i { color: #f8fafc; }
html body .sidebar .nav-link:hover,
html body .sidebar .nav-link.active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
html body .sidebar .nav-link.active::before { background: #f35b61; }
html body .sidebar .nav-title { color: var(--design-primary-border); }
html body .sidebar .logout-btn { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; }
html body .sidebar .logout-btn:hover { background: rgba(255, 255, 255, .16); }
html body .topbar {
    border-color: #e5e7eb;
    background: rgba(255, 255, 255, .96);
    color: #1f2937;
}
html body .nav-title,
html body .stat-label,
html body .page-subtitle,
html body .muted,
html body .text-muted { color: #64748b; }
html body .main-content,
html body .content-wrapper { background: #f7f7f7; color: #1f2937; }
html body .admin-card,
html body .stat-card,
html body .table-container,
html body .content-card { border-color: #e5e7eb; background: #fff; }

/* Renter portal and public pages */
body {
    --portal-orange: var(--design-primary);
    --portal-orange-dark: var(--design-primary-hover);
}
body:not(.public-home) { background: #080c12; color: #f8fafc; }
html body { font-family: var(--design-font); }
html body button,
html body input,
html body select,
html body textarea { font-family: inherit; }
.public-home { --public-accent: var(--design-primary); --public-accent-light: var(--design-primary-light); }
.public-register-link:hover { background: var(--design-primary-hover); }
.public-footer-contact .public-footer-phone,
.public-footer-contact a:hover,
.public-back-top { color: var(--design-primary); }
.user-nav a:hover,
.user-nav a.active { background: var(--design-primary-soft); color: var(--design-primary-hover); }
.user-avatar,
.portal-stat-icon { border-color: var(--design-primary-border); background: var(--design-primary-soft); color: var(--design-primary); }
.welcome-kicker,
.vehicle-type,
.text-link,
.booking-request-heading > strong,
.back-link:hover { color: var(--design-primary); }
.welcome-banner .welcome-kicker { color: #ffd9da; }
.renter-bookings-page .section-heading h2 { color: #1f2937; }
.renter-bookings-page .section-heading p { color: #64748b; }
.booking-list .booking-row { color: #334155; }
.booking-list .booking-head { color: #ffd9da; }
.booking-list .booking-car strong,
.booking-list .booking-row > strong { color: #1f2937; }
.booking-list .booking-car > span > span { color: #64748b; }
.booking-list .status-pill.status-pending { background: #fff8e6; color: #805800; }
.booking-list .status-pill.status-active { background: #ecfdf3; color: #12613d; }
.booking-list .status-pill.status-returned { background: #f1f5f9; color: #465a73; }
.booking-list .status-pill.status-cancelled { background: #fff1f0; color: #a12b26; }
.welcome-banner {
    background: linear-gradient(115deg, #101216, #171a20 72%, #20242b);
}
.vehicle-card:hover { border-color: var(--design-primary-light); }
.vehicle-view,
.booking-submit { background: var(--design-primary); }
.vehicle-view:hover,
.booking-submit:hover { background: var(--design-primary-hover); }
.booking-date-fields input:focus,
.booking-edit-card .booking-date-fields input:focus { border-color: #f35b61; outline-color: rgba(227, 38, 46, .16); }
.booking-edit-card {
    border-color: #e5e7eb;
    background: linear-gradient(145deg, #fff, #fffafa);
    box-shadow: 0 18px 44px rgba(31, 41, 55, .09);
}
.booking-edit-heading { background: linear-gradient(100deg, var(--design-primary-soft), transparent 66%); }
.booking-edit-icon { border-color: var(--design-primary-border); background: var(--design-primary-soft); color: var(--design-primary); }
.booking-edit-heading h1,
.booking-edit-vehicle-name strong,
.booking-edit-section-title span { color: #1f2937; }
.booking-edit-heading .welcome-kicker { color: var(--design-primary-hover); }
.booking-edit-heading p,
.booking-edit-price small,
.booking-edit-vehicle-name small,
.booking-edit-section-title small { color: #64748b; }
.booking-edit-vehicle { border-color: #e5e7eb; background: #f8fafc; }
.booking-edit-photo { border-color: #e5e7eb; background: var(--design-primary-soft); color: var(--design-primary); }
.booking-edit-price strong { color: var(--design-primary); }
.booking-edit-card .booking-date-fields label { color: #475569; }
.booking-edit-card .booking-date-fields input {
    border-color: #cbd5e1;
    background: #fff;
    color: #1f2937;
    color-scheme: light;
}
.booking-edit-info { background: var(--design-primary-soft); color: #475569; }
.booking-edit-info i { color: var(--design-primary-hover); }
.booking-edit-cancel { border-color: #cbd5e1; color: #475569; }
.my-booking-card {
    border-color: #e5e7eb;
    background: linear-gradient(125deg, #fff, #f7f9fc 68%);
    box-shadow: 0 11px 27px rgba(31, 41, 55, .07);
}
.my-booking-card::before { background: linear-gradient(180deg, #f35b61, rgba(227, 38, 46, .08)); }
.booking-cancel-button { border-color: #e5e7eb; background: #f8fafc; color: #475569; }
.booking-edit-link { color: var(--design-primary); }
.about-kicker,
.portal-about-intro h2 span,
.about-step-icon,
.payment-summary-icon,
.my-payment-progress-label strong,
.payment-record-icon,
.payment-info-note i,
.dashboard-hero h1 span,
.dashboard-featured-chip > span,
.dashboard-hero-note i { color: var(--design-primary); }
.about-step-icon,
.payment-summary-icon { border-color: var(--design-primary-border); background: var(--design-primary-soft); }
.my-payment-progress span { background: linear-gradient(90deg, var(--design-primary-hover), var(--design-primary-light)); }
.my-payment-card::before { background: linear-gradient(180deg, var(--design-primary-light), rgba(227, 38, 46, .12)); }
.dashboard-primary-link { background: var(--design-primary); box-shadow: 0 8px 20px rgba(227, 38, 46, .2); }
.dashboard-primary-link:hover { background: var(--design-primary-hover); }
.logout-button:hover { border-color: var(--design-primary-border); color: var(--design-primary); }

/* Staff dashboard */
.staff-hero {
    background: linear-gradient(120deg, #101216, #171a20 72%, #20242b);
}
.staff-kicker,
.staff-hero .staff-date { color: #ffd9da; }
.staff-card-head p,
.staff-panel-heading p,
.staff-stat span,
.staff-vehicle-card-title > div > span,
.staff-vehicle-card-specs,
.staff-records .records-heading p { color: #64748b; }
.staff-nav-link.active,
.staff-nav-link:hover { background: var(--design-primary-soft); color: var(--design-primary-hover); }
.staff-nav-link.active::before { background: #f35b61; }
.staff-side-nav a:hover,
.staff-side-nav a.active { border-color: var(--design-primary-border); background: linear-gradient(90deg, var(--design-primary-soft), #fffafa); color: var(--design-primary-hover); }
.staff-side-nav a:hover i,
.staff-side-nav a.active i,
.staff-topbar-date i,
.staff-profile-avatar { color: var(--design-primary); }
.staff-profile-avatar { background: var(--design-primary-soft); }
.staff-hero::before { background: linear-gradient(var(--design-primary-light), #f35b61); }
.staff-hero-date i { color: #ffd9da; }
.staff-hero-links a:first-child,
.staff-actions button { border-color: var(--design-primary); background: linear-gradient(110deg, var(--design-primary), var(--design-primary-hover)); }
.staff-hero-links a:first-child:hover,
.staff-actions button:hover { background: #101216; }
.staff-stat-icon,
.staff-panel-icon,
.staff-count,
.staff-overview-row i { border-color: var(--design-primary-border); background: var(--design-primary-soft); color: var(--design-primary); }
.staff-card { border-left-color: #f35b61; }
.records-heading .eyebrow,
.records-vehicle-photo,
.staff-vehicle-card-title > i,
.vehicle-gallery-empty i { color: var(--design-primary); }
.staff-vehicle-card-title > i { border-color: var(--design-primary-border); background: var(--design-primary-soft); }
.staff-vehicle-card-title > i { border-color: var(--design-primary-border); background: var(--design-primary-soft); color: var(--design-primary); }
.staff-records .staff-section-icon { background: var(--design-primary-soft); color: var(--design-primary); }

/* Keep the staff dashboard and records on the shared charcoal and red palette. */
body .staff-hero {
    background: radial-gradient(ellipse at 88% 105%, rgba(227, 38, 46, .22), transparent 24rem), linear-gradient(120deg, #101216, #171a20 72%);
}
body .staff-hero::before { background: linear-gradient(var(--design-primary-light), #f35b61); }
body .staff-hero-links a:first-child { border-color: #f35b61; background: var(--design-primary); }
body .staff-hero-links a:first-child:hover { background: var(--design-primary-hover); }
body .staff-stat::after { background: #fff8f1; }
body .staff-stat-icon,
body .staff-panel-icon,
body .staff-count,
body .staff-overview-row i,
body .staff-vehicle-card-title > i { border-color: var(--design-primary-border); background: var(--design-primary-soft); color: var(--design-primary); }
body .staff-card { border-left-color: #f35b61; background: linear-gradient(110deg, #fff, #fff 75%, #fffafa); }
body .staff-card:hover { border-color: var(--design-primary-border); }
body .staff-vehicle-photo { color: var(--design-primary); }
body .staff-quick-links a { border-color: var(--design-primary-border); background: #fff8f1; color: var(--design-primary); }
body .staff-actions button:not(.secondary) {
    border-color: var(--design-primary);
    background: linear-gradient(135deg, var(--design-primary), var(--design-primary-hover));
    box-shadow: 0 4px 10px rgba(227, 38, 46, .14);
}
body .staff-actions button:not(.secondary):hover { background: var(--design-primary-hover); box-shadow: 0 7px 14px rgba(227, 38, 46, .2); }
body .payment-entry-form input:focus,
body .payment-entry-form select:focus { border-color: #f35b61 !important; outline-color: rgba(227, 38, 46, .16); }
body .staff-hero-links a:focus-visible,
body .staff-actions button:focus-visible,
body .staff-quick-links a:focus-visible { outline-color: rgba(227, 38, 46, .24); }
body .staff-side-nav a.active::before { background: #f35b61; }
body .staff-side-nav a:focus-visible,
body .staff-sidebar-bottom .logout-button:focus-visible,
body .staff-menu-toggle:focus-visible { outline-color: rgba(227, 38, 46, .24); }
body .staff-topbar-date i { color: var(--design-primary); }
body .staff-profile-avatar { background: var(--design-primary-soft); color: var(--design-primary); }
body .staff-records .records-heading .eyebrow,
body .staff-records .records-vehicle-photo,
body .staff-records .vehicle-gallery-empty i { color: var(--design-primary); }
body .staff-records .records-back:hover { border-color: var(--design-primary-border); background: var(--design-primary-soft); color: var(--design-primary-hover); }
body .staff-records .records-table tbody tr:hover { background: #f7f9fc; }
body .staff-records .staff-section-icon { background: var(--design-primary-soft); color: var(--design-primary); }

/* Sign in and registration */
.story-copy h1 span,
.brand strong span,
.secure-label,
.register-link a,
.login-link a,
.back-link { color: var(--design-primary); }
.story-feature i { border-color: rgba(255, 255, 255, .2); background: rgba(227, 38, 46, .32); color: #ffd9da; }
.required,
.terms-row input { accent-color: var(--design-primary); }
.login-button,
.register-button,
.submit,
.submit-button { background: linear-gradient(110deg, var(--design-primary), var(--design-primary-hover)); }
.login-button:hover,
.register-button:hover,
.submit:hover,
.submit-button:hover { background: #101216; }
.input-wrap input:focus,
.form-grid input:focus,
.form-grid textarea:focus { border-color: #f35b61; box-shadow: 0 0 0 3px rgba(227, 38, 46, .13); }
.form-panel { background-color: #f7f7f7; }
.secure-note,
.intro,
.register-link,
.login-link { color: #64748b; }

/* Payment accents follow the same brand palette. */
.payment-page .payment-summary-rental,
.payment-page .payment-summary-icon,
.payment-page .my-payment-progress-label strong,
.payment-page .payment-record-icon,
.payment-page .payment-info-note i,
.payment-page .empty-state i { color: var(--design-primary); }
.payment-page .payment-summary-icon,
.payment-page .payment-record-icon { border-color: var(--design-primary-border); background: var(--design-primary-soft); }
.payment-page .my-payment-records h3::before { background: #f35b61; }
.payment-page .payment-submit-form .booking-date-fields select:focus { border-color: #f35b61; outline-color: rgba(227, 38, 46, .16); }
.actions button { border-color: var(--design-primary); background: var(--design-primary); }

/* Keep status colors meaningful while replacing the brand red accents. */
.status-pill.status-active,
.status-pill.status-available,
.availability-badge { color: #16734b; }

/* Red backgrounds with white text for the main interactive elements. */
html body .sidebar .nav-link.active,
.user-nav a.active,
body .staff-side-nav a.active {
    border-color: var(--design-primary);
    background: var(--design-primary);
    color: #fff;
}
html body .sidebar .nav-link.active i,
.user-nav a.active i,
body .staff-side-nav a.active i { color: #fff; }
html body .sidebar .nav-link.active::before,
body .staff-side-nav a.active::before { background: #fff; }
.portal-stat-icon,
body .staff-stat-icon,
body .staff-panel-icon,
body .staff-count,
body .staff-overview-row i,
body .staff-vehicle-card-title > i,
body .staff-records .staff-section-icon {
    border-color: var(--design-primary);
    background: var(--design-primary);
    color: #fff;
}
.vehicle-view,
.booking-submit,
.dashboard-primary-link,
.login-button,
.register-button,
.submit,
.submit-button,
.actions button {
    border-color: var(--design-primary);
    background: var(--design-primary);
    color: #fff;
}
.vehicle-view:hover,
.booking-submit:hover,
.dashboard-primary-link:hover,
.login-button:hover,
.register-button:hover,
.submit:hover,
.submit-button:hover,
.actions button:hover { background: var(--design-primary-hover); color: #fff; }

/* Shared dark surfaces keep admin, staff and renter pages visually consistent. */
html body .sidebar { background: #080c12; color: #f8fafc; border-color: #202833; }
html body .sidebar .brand,
html body .sidebar .nav-link,
html body .sidebar .nav-link i { color: #e5e7eb; }
html body .sidebar .nav-link { border-left: 3px solid transparent; }
html body .sidebar .nav-link.active { border-color: var(--design-primary); background: var(--design-primary); color: #fff; }
html body .sidebar .nav-link.active { border-left-color: var(--design-primary); }
html body .sidebar .nav-link.active i { color: #fff; }
html body .sidebar .nav-title { color: #aab4c2; }
html body .topbar { border-color: #202833; background: #0b1017; color: #f8fafc; }
html body .main-content,
html body .content-wrapper,
html body .content { background: #080c12; color: #f8fafc; }
html body .page-header,
html body .panel,
html body .stat-card,
html body .admin-card,
html body .table-container,
html body .content-card,
html body .form-card,
html body .form-container { border-color: #26313f; background: #0e141d; color: #f8fafc; }
html body .panel-header { border-color: #26313f; background: #111923; color: #f8fafc; }
html body .panel-title,
html body .welcome h1,
html body .welcome h1 span,
html body .stat-number,
html body .vehicle-name,
html body .vehicle-info h3,
html body .form-card h1,
html body .form-card h2 { color: #f8fafc; }
html body .welcome p,
html body .stat-label,
html body .muted,
html body .text-muted,
html body .page-subtitle { color: #aab4c2; }
html body .vehicle-card { border-color: #26313f; background: #111923; color: #f8fafc; }
html body .vehicle-card .vehicle-info,
html body .vehicle-card .vehicle-bottom { color: #f8fafc; }
html body .vehicle-card .vehicle-bottom { border-color: #26313f; }
html body .vehicle-photo { background: #171d26; }
html body .panel table,
html body .table-container table { color: #e5e7eb; }
html body .panel th,
html body .table-container th { border-color: #26313f; background: #111923; color: #cbd5e1; }
html body .panel td,
html body .table-container td { border-color: #26313f; color: #e5e7eb; }
html body input,
html body select,
html body textarea { border-color: #354153; background: #0b1017; color: #f8fafc; color-scheme: dark; }
html body input::placeholder,
html body textarea::placeholder { color: #8994a3; }
html body label { color: #d1d5db; }
html body .staff-sidebar { background: #080c12; border-color: #202833; }
html body .staff-topbar { border-color: #202833; background: #0b1017; color: #f8fafc; }
html body .staff-topbar-title strong,
html body .staff-panel-heading h2,
html body .staff-card-head strong,
html body .staff-stat strong,
html body .staff-overview-row strong { color: #f8fafc; }
html body .staff-main { background: #080c12; color: #f8fafc; }
html body .staff-stat,
html body .staff-panel,
html body .staff-card { border-color: #26313f; background: #0e141d; color: #f8fafc; }
html body .staff-card { border-left-color: var(--design-primary); }
html body .staff-panel-heading { border-color: #26313f; }
html body .staff-card-head p,
html body .staff-panel-heading p,
html body .staff-stat span,
html body .staff-vehicle-card-specs { color: #aab4c2; }
html body .staff-actions .payment-entry-form { border-color: #26313f; background: #111923; }
html body .staff-actions input,
html body .staff-actions select { border-color: #354153; background: #0b1017; color: #f8fafc; color-scheme: dark; }
html body .staff-quick-links a { border-color: #26313f; background: #111923; color: #fff; }
html body .form-panel { border-color: #26313f; background-color: #0e141d; color: #f8fafc; }
html body .form-panel h1,
html body .form-panel h2,
html body .form-panel label { color: #f8fafc; }
html body .form-panel .intro,
html body .form-panel .secure-note { color: #aab4c2; }
html body .public-footer { border-color: #26313f; background: #0b1017; color: #aab4c2; }
html body .public-footer-brand strong,
html body .public-footer-contact > strong { color: #f8fafc; }

/* Cleaner staff dashboard surfaces, using the same charcoal and red palette. */
html body:has(.staff-main) .staff-hero {
    min-height: 190px;
    border-color: #26313f;
    border-radius: 14px;
    background: linear-gradient(110deg, #111923, #080c12);
    box-shadow: none;
}
html body:has(.staff-main) .staff-hero::after { display: none; }
html body:has(.staff-main) .staff-hero::before { background: var(--design-primary); }
html body:has(.staff-main) .staff-main { padding-top: 28px; padding-bottom: 48px; }
html body:has(.staff-main) .staff-dashboard-grid { gap: 20px; }
html body:has(.staff-main) .staff-stats { gap: 14px; margin-bottom: 20px; }
html body:has(.staff-main) .staff-stat {
    min-height: 94px;
    padding: 17px;
    border-color: #26313f;
    border-radius: 12px;
    background: #0e141d;
    box-shadow: none;
    transition: none;
}
html body:has(.staff-main) .staff-stat::after { display: none; }
html body:has(.staff-main) .staff-stat:hover { transform: none; box-shadow: none; }
html body:has(.staff-main) .staff-panel {
    margin-top: 20px;
    padding: 28px;
    border-color: #26313f;
    border-radius: 13px;
    background: #0e141d;
    box-shadow: none;
}
html body:has(.staff-main) .staff-panel-heading { margin-bottom: 20px; padding-bottom: 16px; }
html body:has(.staff-main) .staff-panel-heading h2 { font-size: 19px; }
html body:has(.staff-main) .staff-panel-heading p { font-size: 12px; }
html body:has(.staff-main) .staff-list { gap: 16px; }
html body:has(.staff-main) .staff-card {
    padding: 22px;
    border-color: #26313f;
    border-left: 2px solid var(--design-primary);
    border-radius: 11px;
    background: #111923;
    box-shadow: none;
    transition: none;
}
html body:has(.staff-main) .staff-card:hover { border-color: #354153; border-left-color: var(--design-primary); box-shadow: none; }
html body:has(.staff-main) .staff-vehicle-photo { width: 76px; height: 64px; }
html body:has(.staff-main) .staff-card-head strong { font-size: 15px; }
html body:has(.staff-main) .staff-card-head p { font-size: 12px; }
html body:has(.staff-main) .active-rental-card {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
html body:has(.staff-main) .active-rental-card .staff-card-head { grid-column: 1; min-width: 0; }
html body:has(.staff-main) .active-rental-card .staff-actions {
    display: grid;
    min-width: 0;
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 0;
}
html body:has(.staff-main) .active-rental-card .staff-actions > form:first-child {
    grid-column: auto;
    grid-row: auto;
    margin: 0;
    justify-self: start;
}
html body:has(.staff-main) .staff-actions .payment-entry-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-column: 1;
    grid-row: auto;
    padding: 14px;
    border-color: #26313f !important;
    border-radius: 10px;
    background: #0b1017 !important;
}
html body:has(.staff-main) .payment-form-heading { border-color: #26313f; }
html body:has(.staff-main) .staff-actions button { box-shadow: none; transition: background .15s ease; }
html body:has(.staff-main) .staff-actions button { min-height: 44px; padding-right: 18px; padding-left: 18px; font-size: 12px; }
html body:has(.staff-main) .staff-actions button:hover { transform: none; box-shadow: none; }
html body:has(.staff-main) .staff-actions .secondary { border-color: #354153; background: #171d26; color: #e5e7eb; }
html body:has(.staff-main) .staff-actions .secondary:hover { border-color: #64748b; background: #202833; }

@media (max-width: 760px) {
    html body:has(.staff-main) .staff-main { padding: 20px 16px 42px; }
    html body:has(.staff-main) .staff-dashboard-grid { gap: 12px; }
    html body:has(.staff-main) .staff-panel { padding: 17px 15px; }
    html body:has(.staff-main) .staff-card { padding: 14px; }
}

/* Shared, balanced type sizes for admin, renter, staff, and public pages. */
html body .sidebar .brand-name { font-size: 20px; }
html body .sidebar .nav-title { font-size: 11px; }
html body .sidebar .nav-link { font-size: 13px; }
html body .sidebar .logout-btn { font-size: 13px; }
html body .topbar .search-box,
html body .topbar .search-input,
html body .topbar .profile-info { font-size: 13px; }
html body .welcome h1 { font-size: 28px; }
html body .welcome p { font-size: 14px; }
html body .panel-title { font-size: 16px; }
html body .panel-link { font-size: 13px; }
html body .panel th,
html body .table-container th { font-size: 11px; }
html body .panel td,
html body .table-container td { font-size: 12px; }
html body .customer-name,
html body .vehicle-name { font-size: 14px; }
html body .date { font-size: 11px; }
html body .amount,
html body .paid,
html body .fully-paid,
html body .remaining { font-size: 12px; }
html body label { font-size: 13px; }
html body input,
html body select,
html body textarea { font-size: 13px; }
html body .user-nav a { font-size: 14px; }
html body .user-account-name { font-size: 12px; }
html body .section-heading h2 { font-size: 18px; }
html body .section-heading p { font-size: 13px; }
html body .vehicle-card h3 { font-size: 16px; }
html body .vehicle-meta { font-size: 12px; }
html body .vehicle-price { font-size: 15px; }
html body .booking-row { font-size: 12px; }
html body .booking-head { font-size: 10px; }
html body .staff-side-nav a { font-size: 13px; }
html body .staff-topbar-title { font-size: 11px; }
html body .staff-topbar-title strong { font-size: 13px; }
html body .staff-topbar-right { font-size: 12px; }
html body:has(.staff-main) .staff-panel-heading h2 { font-size: 17px; }
html body:has(.staff-main) .staff-card-head strong { font-size: 14px; }

html body .auth-layout label { font-size: 13px; }
html body .auth-layout input { font-size: 14px; }
html body .auth-layout .intro { font-size: 14px; }
html body .auth-layout .login-button,
html body .auth-layout .register-button { font-size: 14px; }

@media (max-width: 620px) {
    html body .welcome h1 { font-size: 24px; }
    html body .panel-title { font-size: 15px; }
    html body .section-heading h2 { font-size: 17px; }
    html body .user-nav a { font-size: 13px; }
}

/* One consistent type scale across the application. */
html body .sidebar .nav-title { font-size: var(--type-caption) !important; }
html body .sidebar .nav-link,
html body .sidebar .logout-btn,
html body .staff-side-nav a,
html body .user-nav a { font-size: var(--type-body) !important; }
html body .welcome h1,
html body .page-header .welcome h1 { font-size: var(--type-page-title) !important; }
html body .welcome p,
html body .page-header .welcome p,
html body .staff-panel-heading p,
html body .section-heading p { font-size: var(--type-body) !important; }
html body .panel-title,
html body .dashboard-grid > div:first-child > .panel > .panel-header .panel-title,
html body .section-heading h2,
html body .staff-panel-heading h2 { font-size: var(--type-section) !important; }
html body .panel-link,
html body .date-btn,
html body .staff-topbar-title strong,
html body .staff-topbar-right { font-size: var(--type-body) !important; }
html body .panel th,
html body .table-container th,
html body .badge,
html body .status-pill,
html body .availability-badge,
html body .vehicle-status,
html body .rental-id,
html body .customer-avatar { font-size: var(--type-caption) !important; }
html body .panel td,
html body .table-container td,
html body .customer-name,
html body .vehicle-description,
html body .date,
html body .amount,
html body .paid,
html body .fully-paid,
html body .remaining,
html body .vehicle-meta,
html body .booking-row { font-size: var(--type-body) !important; }
html body .vehicle-name,
html body .vehicle-card h3,
html body .vehicle-price,
html body .staff-card-head strong { font-size: var(--type-emphasis) !important; }
html body label,
html body input,
html body select,
html body textarea,
html body button,
html body .login-button,
html body .register-button { font-size: var(--type-body) !important; }
html body .staff-card-head p,
html body .staff-help,
html body .form-hint,
html body .secure-note,
html body .booking-note,
html body .activity-sub { font-size: var(--type-caption) !important; }
html body .staff-stat span,
html body .staff-overview-row,
html body .today-label,
html body .overview-name,
html body .overview-number { font-size: var(--type-body) !important; }
html body .staff-stat strong,
html body .stat-number { font-size: 24px !important; }
html body .auth-layout .intro,
html body .user-account-name { font-size: var(--type-body) !important; }

/* Shared component finish for admin, staff, and renter pages. */
html body .user-header,
html body .staff-topbar,
html body .topbar {
    border-color: #202833;
    background: #0b1017;
    color: var(--design-text);
}
html body .user-brand strong,
html body .user-account-name,
html body .staff-sidebar-brand strong,
html body .staff-topbar-title strong { color: var(--design-text); }
html body .user-brand span,
html body .staff-sidebar-brand small,
html body .staff-sidebar-label,
html body .user-account-name + span { color: #aab4c2; }
html body .dashboard-grid,
html body .staff-dashboard-grid,
html body .side-stack { gap: var(--design-space-5); }
html body .stats-grid,
html body .staff-stats { gap: var(--design-space-3); }
html body .sidebar { width: var(--admin-sidebar-width); }
html body .main { margin-left: var(--admin-sidebar-width); }
html body .sidebar .nav-link {
    min-height: 50px;
    margin-bottom: 6px;
    padding: 13px 15px;
    align-items: center;
}
html body .user-nav a,
html body .staff-side-nav a { color: #cbd5e1; }
html body .user-nav a:hover,
html body .user-nav a.active,
html body .staff-side-nav a:hover,
html body .staff-side-nav a.active {
    border-color: var(--design-primary);
    background: var(--design-primary);
    color: #fff;
}
html body .user-nav a:hover i,
html body .user-nav a.active i,
html body .staff-side-nav a:hover i,
html body .staff-side-nav a.active i { color: #fff; }
html body .panel,
html body .staff-panel,
html body .content-card { border-radius: var(--design-radius-panel); }
html body .stat-card,
html body .vehicle-card,
html body .staff-card,
html body .admin-card { border-radius: var(--design-radius-card); }
html body .panel input,
html body .panel select,
html body .panel textarea,
html body .form-group input,
html body .form-group select,
html body .form-group textarea { border-radius: var(--design-radius-control); }
html body .date-btn.primary,
html body .vehicle-view,
html body .booking-submit,
html body .login-button,
html body .register-button,
html body .staff-actions button {
    background: var(--design-primary);
    border-color: var(--design-primary);
}
html body .date-btn.primary:hover,
html body .vehicle-view:hover,
html body .booking-submit:hover,
html body .login-button:hover,
html body .register-button:hover,
html body .staff-actions button:hover {
    background: var(--design-primary-hover);
    border-color: var(--design-primary-hover);
}
html body :is(button, a, input, select, textarea):focus-visible {
    outline: 3px solid rgba(227, 38, 46, .35);
    outline-offset: 2px;
}

@media (max-width: 850px) {
    html body .sidebar { width: var(--admin-sidebar-collapsed-width); }
    html body .main { margin-left: var(--admin-sidebar-collapsed-width); }
    html body .sidebar .nav-link { min-height: 50px; padding: 13px; justify-content: center; }
}

@media (max-width: 620px) {
    html body .welcome h1,
    html body .page-header .welcome h1 { font-size: 24px !important; }
    html body .panel-title,
    html body .dashboard-grid > div:first-child > .panel > .panel-header .panel-title,
    html body .section-heading h2,
    html body .staff-panel-heading h2 { font-size: 17px !important; }
}

/* Slightly more compact typography for the All Rentals records table. */
html body.admin-rentals-page .panel-header { min-height: 52px; padding-right: 16px; padding-left: 16px; }
html body.admin-rentals-page .panel-title { font-size: 15px !important; }
html body.admin-rentals-page .panel-link { font-size: 11px !important; }
html body.admin-rentals-page .panel th { padding: 12px 14px; font-size: 10px !important; }
html body.admin-rentals-page .panel td { padding: 12px 14px; font-size: 11px !important; }
html body.admin-rentals-page .customer-name { font-size: 11px !important; }
html body.admin-rentals-page .vehicle-name { font-size: 11px !important; }
html body.admin-rentals-page .date { font-size: 11px !important; }
html body.admin-rentals-page .amount,
html body.admin-rentals-page .paid,
html body.admin-rentals-page .fully-paid,
html body.admin-rentals-page .remaining { font-size: 11px !important; }

/* Shared admin table layout for customers, rentals, and payments. */
html body .panel .table-wrapper,
html body .panel .customer-table-wrapper {
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
html body .panel table,
html body .customer-table {
    width: 100%;
    border-collapse: collapse;
}
html body .panel thead th,
html body .customer-table thead th {
    padding: 12px 14px;
    border-bottom: 1px solid #26313f;
    background: #111923;
    color: #aab4c2;
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: .45px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
html body .panel tbody td,
html body .customer-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #26313f;
    color: #e5e7eb;
    font-size: 11px !important;
    vertical-align: middle;
}
html body .panel tbody tr,
html body .customer-table tbody tr { transition: background-color .15s ease; }
html body .panel tbody tr:hover,
html body .customer-table tbody tr:hover { background: #151c26; }
html body .panel tbody tr:last-child td,
html body .customer-table tbody tr:last-child td { border-bottom: 0; }
html body .panel .badge,
html body .panel .status {
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px !important;
    font-weight: 700;
    white-space: nowrap;
}
html body .panel .actions,
html body .panel .action-buttons { align-items: center; gap: 7px; }
html body .panel .action-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--design-radius-control);
}

/* Reuse one vehicle banner across every admin page heading. */
html body:has(#admin-sidebar) .page-header {
    min-height: 150px;
    border: 1px solid #26313f;
    border-left: 4px solid #e3262e;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(8, 12, 18, .96) 0%, rgba(8, 12, 18, .86) 38%, rgba(8, 12, 18, .35) 100%),
        url('../images/renter-hero-banner.png') center 54% / cover no-repeat;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}
html body:has(#admin-sidebar) .page-header::after {
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 22px rgba(255, 255, 255, .025);
}
html[data-theme="light"] body:has(#admin-sidebar) .page-header .welcome h1 { color: #f8fafc; }
html[data-theme="light"] body:has(#admin-sidebar) .page-header .welcome p { color: #cbd5e1; }

/* The staff edit screen uses a compact topline instead of the shared admin
   header element, so give it the same banner treatment. */
html body.admin-staff-edit-page .topline {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    margin-bottom: 30px;
    padding: 20px 24px;
    border: 1px solid #26313f;
    border-left: 4px solid #e3262e;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(8, 12, 18, .96) 0%, rgba(8, 12, 18, .86) 38%, rgba(8, 12, 18, .35) 100%),
        url('../images/renter-hero-banner.png') center 54% / cover no-repeat;
}
html body.admin-staff-edit-page .topline h1,
html body.admin-staff-edit-page .topline > div > p:not(.eyebrow),
html body.admin-staff-edit-page .topline > a { position: relative; z-index: 1; color: #f8fafc; }
html body.admin-staff-edit-page .topline > div > p:not(.eyebrow) { color: #cbd5e1; }
html body.admin-staff-edit-page .topline > a { border-color: rgba(255,255,255,.22); }
html body.admin-staff-edit-page .topline > a:hover { background: rgba(255,255,255,.1); }

@media (max-width: 600px) {
    html body:has(#admin-sidebar) .page-header {
        background-image:
            linear-gradient(90deg, rgba(8, 12, 18, .96) 0%, rgba(8, 12, 18, .84) 66%, rgba(8, 12, 18, .58) 100%),
            url('../images/renter-hero-banner.png');
        background-position: center, 62% center;
    }
}

@media (max-width: 560px) {
    html body.admin-staff-edit-page .topline {
        min-height: 0;
        margin-bottom: 22px;
        padding: 18px;
        background-image:
            linear-gradient(90deg, rgba(8, 12, 18, .96) 0%, rgba(8, 12, 18, .84) 66%, rgba(8, 12, 18, .58) 100%),
            url('../images/renter-hero-banner.png');
        background-position: center, 62% center;
    }
}