/* Reset / Base */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; background: #f5f5f5; color: #222; overflow-y: hidden; }

.app-loading {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-loading__spinner {
    width: 3rem;
    height: 3rem;
    color: #6F3AF2;
}

/* Blazor's default error banner - hidden until Blazor's runtime JS explicitly shows it on an unhandled error */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* App wrapper - fixed viewport height so only the main content area scrolls. 100dvh follows the
   visible area on mobile browsers (100vh includes the collapsible address bar and would hide the
   bottom of the page); 100vh stays as the fallback for browsers without dvh support. */
.app-wrapper { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* Header */
.app-header {
    background: #fff;
    color: #222;
    padding: 0 24px;
    height: 52px;
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 500;
}

/* Header left zone */
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-title { font-size: 22px; font-weight: 700; letter-spacing: 0.4px; color: #1c1c1c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.header-right { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }

.oem-logo-link { display: inline-flex; align-items: center; margin-left: 15px; text-decoration: none; }
.header-logo { height: 32px; width: auto; display: block; }
.header-logo--byd { height: 46px; }
.header-logo--nextlane { height: 24px; max-width: 150px; object-fit: contain; margin-left: 4px; }

/* Main - the only scrollable region, so a window that is too short gets a scrollbar here
   instead of clipping the content */
.app-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: auto; max-width: 1400px; width: 100%; margin: 0 auto; padding: 14px 16px; }

/* Language dropdown */
.lang-dropdown { position: relative; margin-right: 12px; user-select: none; }
.lang-dropdown__trigger { display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; background: #fff; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; font-size: 13px; color: #333; height: 30px; min-width: 130px; transition: border-color 0.15s; }
.lang-dropdown__trigger:hover, .lang-dropdown--open .lang-dropdown__trigger { border-color: #0066cc; }
.lang-dropdown__flag { width: 24px; height: 18px; border-radius: 2px; flex-shrink: 0; }
.lang-dropdown__label { flex: 1; text-align: left; }
.lang-dropdown__caret { font-size: 10px; color: #888; }
.lang-dropdown__menu { position: absolute; top: calc(100% + 4px); right: 0; background: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 4px 12px rgba(0,0,0,.12); z-index: 200; min-width: 140px; overflow: hidden; }
.lang-dropdown__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; background: none; border: none; cursor: pointer; font-size: 13px; color: #333; }
.lang-dropdown__item:hover { background: #f0f4ff; }
.lang-dropdown__item--active { background: #e6eeff; font-weight: 600; }

/* Handbook button */
.handbook-btn { background: none; border: none; padding: 0; margin-right: 15px; cursor: pointer; color: #444; display: inline-flex; align-items: center; line-height: 1; }
.handbook-btn svg, .handbook-btn .b-icon, .handbook-btn i { width: 18px; height: 18px; font-size: 18px; }
.handbook-btn:hover { color: #000; }

/* Handbook modal */
.handbook-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.handbook-modal { background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.22); width: 700px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.handbook-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid #e0e0e0; background: #f7f4ff; }
.handbook-modal-title { font-size: 17px; font-weight: 700; color: #6F3AF2; }
.handbook-modal-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #666; padding: 0 4px; border-radius: 4px; }
.handbook-modal-close:hover { color: #c00; background: #fff0f0; }
.handbook-modal-body { padding: 24px 32px; overflow-y: auto; }
.handbook-modal-body section { margin-bottom: 20px; }
.handbook-modal-body p.handbook-modal-intro { margin-bottom: 20px; font-style: italic; }
.handbook-modal-body h2 { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: #1c1c1c; }
.handbook-modal-body p { margin: 0; line-height: 1.6; color: #444; font-size: 13px; }

/* Panel (reserved for the future portal UI story) */
.panel { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 16px; margin-bottom: 16px; }
.panel h2 { font-size: 15px; font-weight: 600; margin-bottom: 10px; color: #6F3AF2; }
.booking-heading-hint { color: #222; font-size: 14px; font-weight: 400; }
.booking-service-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; max-height: 240px; overflow-y: auto; padding-right: 6px; }
.booking-service-item { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.booking-service-item input { margin-top: 3px; flex-shrink: 0; }
.booking-service-list--general { max-height: none; overflow: visible; font-weight: 600; }
.booking-service-separator { border: none; border-top: 1px solid #ddd; margin: 12px 0; }
@media (max-width: 600px) { .booking-service-list { grid-template-columns: 1fr; } }
.booking-service-total { margin-top: 10px; min-height: 1.5em; font-weight: 700; color: #333; }
/* Prices (ACTO-176829): the price sits right of the label, the VAT note once below the total. */
.booking-service-price { margin-left: auto; padding-left: 12px; white-space: nowrap; color: #333; }
.booking-service-group-heading { margin: 0 0 8px; font-size: 0.95em; font-weight: 700; color: #333; }
.booking-service-total--price { margin-top: 4px; min-height: 0; }
.booking-service-vat-note { margin: 2px 0 0; font-size: 0.85em; color: #666; }
.booking-summary-services { margin: 0; padding-left: 18px; }
.booking-remark-panel { margin-top: 16px; width: 100%; }
.booking-remark-label { display: block; margin-bottom: 6px; font-weight: 700; color: #333; }
.booking-remark-input { display: block; width: 100%; min-width: 0; border: 1px solid #bbb; border-radius: 5px; padding: 8px 10px; font: inherit; color: #222; white-space: nowrap; overflow-x: auto; text-overflow: clip; }
.booking-remark-input:focus { outline: 2px solid rgba(111,58,242,0.25); border-color: #6F3AF2; }
.booking-cancel-panel { margin-top: 16px; }
.booking-cancel-panel p { margin-top: 0; }
.booking-cancel-reason { white-space: pre-wrap; overflow-x: hidden; resize: vertical; }

/* Booking accordion (vehicle / service / appointment) - one section open at a time. */
.booking-greeting { margin: 0 0 12px; }
.booking-accordion-section { padding: 0; overflow: hidden; }
.panel h2.booking-accordion-heading { margin: 0; }
.booking-accordion-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: none; background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: #6F3AF2; text-align: left; cursor: pointer; }
.booking-accordion-toggle:hover { background: #f7f4ff; }
.booking-accordion-toggle:focus-visible { outline: 2px solid rgba(111,58,242,0.4); outline-offset: -2px; }
.booking-accordion-section.is-open .booking-accordion-toggle { border-bottom: 1px solid #eee; }
.booking-accordion-title { flex-shrink: 0; }
.booking-accordion-summary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 13px; font-weight: 400; color: #555; }
.booking-accordion-chevron { flex-shrink: 0; width: 8px; height: 8px; border-right: 2px solid #6F3AF2; border-bottom: 2px solid #6F3AF2; transform: rotate(45deg); transition: transform 0.15s ease; margin-top: -4px; }
.booking-accordion-section.is-open .booking-accordion-chevron { transform: rotate(-135deg); margin-top: 4px; }
.booking-accordion-body { padding: 16px; }
.booking-accordion-body > :first-child { margin-top: 0; }
.booking-slot-panel h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; color: #6F3AF2; }
@media (max-width: 600px) {
    .booking-accordion-summary { display: none; }
}

/* Mileage and next MOT - two equal columns on desktop, stacked on narrow screens. */
.booking-vehicle-data-panel { margin-top: 16px; width: 100%; display: flex; gap: 16px; }
.booking-vehicle-data-field { flex: 1 1 0; min-width: 0; }
@media (max-width: 700px) {
    .booking-vehicle-data-panel { flex-direction: column; }
}

/* Customer/vehicle row - spans the same width as the availability panel below it and both
   panels shrink/grow together with the window */
.details-row { display: flex; gap: 16px; }
.details-row .panel { flex: 1 1 0; min-width: 0; margin-bottom: 16px; }
@media (max-width: 700px) {
    .details-row { flex-direction: column; gap: 0; }
}

/* Drop-off/pickup selection - two equal columns on desktop, stacked on narrow screens. */
.booking-slots-row { display: flex; gap: 16px; align-items: flex-start; }
.booking-slot-panel { flex: 1 1 0; min-width: 0; }
@media (max-width: 900px) {
    .booking-slots-row { flex-direction: column; gap: 0; }
    .booking-slot-panel { width: 100%; }
}

/* Booking action bar - stays pinned to the bottom of the scroll area, button horizontally centred */
.booking-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 10px 0;
    background: linear-gradient(to bottom, rgba(245,245,245,0), #f5f5f5 40%);
}
.booking-btn {
    background: #6F3AF2;
    border: 1px solid #6F3AF2;
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 40px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(111,58,242,0.25);
}
.booking-btn:hover:not(:disabled) { background: #5a2ecc; border-color: #5a2ecc; }
.booking-btn:disabled { background: #c9c9c9; border-color: #c9c9c9; color: #fff; cursor: not-allowed; box-shadow: none; }
.booking-btn--secondary { background: #6F3AF2; border: 1px solid #6F3AF2; color: #fff; }
.booking-btn--secondary:hover:not(:disabled) { background: #5a2ecc; border-color: #5a2ecc; color: #fff; }

.greeting { font-size: 15px; font-weight: 600; color: #1c1c1c; }

.booking-confirmation-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.booking-confirmation-modal { background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.22); width: 560px; max-width: 100%; overflow: hidden; }
.booking-progress-modal { background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.22); width: 320px; max-width: 100%; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.booking-progress-modal p { margin: 0; font-weight: 600; color: #333; }
.booking-confirmation-header { padding: 16px 24px; border-bottom: 1px solid #e0e0e0; background: #f7f4ff; }
.booking-confirmation-header--error { background: #fff0f0; }
.booking-confirmation-header h2 { margin: 0; color: #6F3AF2; font-size: 17px; font-weight: 700; }
.booking-confirmation-header--error h2 { color: #c00; }
.booking-confirmation-body { padding: 20px 24px; }
.booking-confirmation-details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 16px 0 0; }
.booking-confirmation-details dt { font-weight: 700; color: #333; }
.booking-confirmation-details dd { margin: 0; color: #222; }
.booking-customer-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.booking-customer-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.booking-customer-row--address { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.5fr); }
.booking-customer-row--contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.booking-customer-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; color: #333; }
.booking-customer-input { border: 1px solid #bbb; border-radius: 5px; padding: 8px 10px; font: inherit; font-weight: 400; color: #222; }
.booking-customer-input:focus { outline: 2px solid rgba(111,58,242,0.25); border-color: #6F3AF2; }
.booking-customer-input[readonly] { background: #f3f4f6; border-color: #ddd; color: #555; }
.booking-required-marker { color: #c00; }
.booking-required-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; font-size: 13px; color: #555; }
select.booking-customer-input { background: #fff; }
.booking-confirmation-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid #e0e0e0; }
.booking-confirmation-btn { border-radius: 6px; font-size: 14px; font-weight: 600; padding: 9px 20px; cursor: pointer; }
.booking-confirmation-btn--primary { background: #6F3AF2; border: 1px solid #6F3AF2; color: #fff; }
.booking-confirmation-btn--secondary { background: #fff; border: 1px solid #bbb; color: #333; }
.booking-confirmation-btn--danger { background: #c00; border: 1px solid #c00; color: #fff; }
.booking-confirmation-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Messages */
.error-msg { color: #c00; background: #fff0f0; border: 1px solid #faa; border-radius: 4px; padding: 8px 12px; }
.info-msg { color: #555; }
.booking-error-alert { margin-bottom: 16px; }

/* BYD vehicle details table (ACTO-173921) - two balanced side-by-side blocks (vehicle info /
   dates & location) shown alongside the DMS-sourced vehicle welcome text, to reduce vertical
   scrolling compared to a single long table. */
.vehicle-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; align-items: start; }
.vehicle-details-table { width: 100%; margin-top: 0; border-collapse: collapse; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
.vehicle-details-table caption { text-align: left; font-size: 14px; font-weight: 700; color: #333; padding: 4px 0 8px; caption-side: top; }
.vehicle-details-table th,
.vehicle-details-table td { padding: 8px 12px; font-size: 13px; text-align: left; border-top: 1px solid #e0e0e0; }
.vehicle-details-table tr:first-child th,
.vehicle-details-table tr:first-child td { border-top: none; }
.vehicle-details-table th { width: 50%; font-weight: 600; color: #333; background: #f7f4ff; }
.vehicle-details-table td { color: #222; }
.vehicle-details-table tr:nth-child(even) { background: #fafafa; }

@media (max-width: 720px) {
    .vehicle-details { grid-template-columns: 1fr; }
}

/* Service-advisor day/timeslot picker */
.ts-picker { width: 100%; }
.ts-picker--disabled { opacity: 0.65; }
.ts-picker__layout { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.ts-picker__timeslots { width: 100%; min-width: 0; }
.ts-picker__section-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #111; }
.ts-picker__date-carousel { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ts-picker__carousel-btn { flex: 0 0 auto; width: 24px; height: 48px; border: none; background: transparent; color: #111; font-size: 32px; line-height: 1; cursor: pointer; }
.ts-picker__carousel-btn:disabled { color: #d6d6d6; cursor: not-allowed; }
.ts-picker__date-cards { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(72px, 1fr)); gap: 8px; min-width: 0; }
.ts-picker__date-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70px; padding: 8px 6px; border: none; border-radius: 7px; background: #f3f4f6; color: #111; cursor: pointer; }
.ts-picker__date-card:hover { background: #edf4fc; }
.ts-picker__date-card--selected { background: #6F3AF2; color: #fff; box-shadow: 0 0 0 2px #4f22c8 inset, 0 3px 10px rgba(111,58,242,0.28); }
.ts-picker__date-card--selected:hover { background: #5a2ecc; color: #fff; }
.ts-picker__date-card-day,
.ts-picker__date-card-date { font-size: 15px; font-weight: 700; line-height: 1.2; }
.ts-picker__date-card-count { margin-top: 4px; font-size: 13px; line-height: 1.2; }
.ts-picker__selected-date { margin: 0 0 10px; font-size: 16px; color: #333; font-weight: 700; }
.ts-picker__timeslot-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-picker__timeslot-btn { min-width: 76px; background: #f3f4f6; border: none; border-radius: 7px; padding: 9px 12px; font-size: 14px; cursor: pointer; color: #111; }
.ts-picker__timeslot-btn:hover { background: #edf4fc; }
.ts-picker__timeslot-btn--selected { background: #6F3AF2; color: #fff; font-weight: 700; box-shadow: 0 0 0 2px #4f22c8 inset, 0 3px 10px rgba(111,58,242,0.28); }
.ts-picker__timeslot-btn--selected:hover { background: #5a2ecc; color: #fff; }
@media (max-width: 1200px) {
    .ts-picker__date-cards { grid-template-columns: repeat(2, minmax(72px, 1fr)); }
}
@media (max-width: 700px) {
    .booking-customer-row, .booking-customer-row--address, .booking-customer-row--contact { grid-template-columns: 1fr; }
    .ts-picker__date-carousel { gap: 6px; }
    .ts-picker__date-cards { grid-template-columns: repeat(2, minmax(70px, 1fr)); gap: 8px; }
    .ts-picker__carousel-btn { width: 22px; font-size: 30px; }
    .ts-picker__timeslot-btn { min-width: 72px; }
}

/* Dealer administration (ACTO-175976) */
/* The admin page fills the visible height and pushes the save button to the bottom edge of the
   window; with a longer tab the button sticks there (.booking-actions is position: sticky). */
.admin-page { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; min-height: 100%; }
/* The saving spinner (Blazorise LoadingIndicator) wraps the page; the wrapper passes the full
   height on, so the save button stays at the bottom edge. */
.b-loading-indicator-wrapper:has(> .admin-page) { min-height: 100%; display: flex; flex-direction: column; }
.b-loading-indicator-wrapper > .admin-page { flex: 1 0 auto; width: 100%; }
.admin-page > .booking-actions { margin-top: auto; }
/* A save error stays directly above the button at the bottom. */
.admin-page > .error-msg:has(+ .booking-actions) { margin-top: auto; margin-bottom: 0; }
.admin-page > .error-msg + .booking-actions { margin-top: 0; }
.admin-page h3 { font-size: 14px; font-weight: 600; margin: 12px 0 6px; color: #333; }
.admin-hint { color: #666; font-size: 13px; margin-bottom: 8px; }
.admin-columns { display: flex; gap: 24px; flex-wrap: wrap; }
.admin-column { flex: 1 1 320px; min-width: 0; }
.admin-list { list-style: none; padding: 0; margin: 0 0 8px; }
ol.admin-list { list-style: decimal; padding-left: 22px; }
.admin-list-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #eee; }
.admin-list-item span:first-child { overflow-wrap: anywhere; }
.admin-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
/* Price and duration of a service or package entry (ACTO-176828). */
.admin-entry-fields { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
.admin-entry-field { display: flex; flex-direction: column; font-size: 12px; color: #666; }
.admin-entry-field .booking-customer-input { width: 120px; }
.admin-muted { color: #666; }
/* Switch between the labour-based and package-based services in the tab Services (ACTO-176828). */
.admin-switch { display: inline-flex; border: 1px solid #6F3AF2; border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.admin-switch__option { border: 0; background: #fff; color: #6F3AF2; padding: 6px 16px; font-size: 14px; cursor: pointer; }
.admin-switch__option + .admin-switch__option { border-left: 1px solid #6F3AF2; }
.admin-switch__option--active { background: #6F3AF2; color: #fff; }
/* A field in a row of checkboxes, e.g. the price currency in the panel Display (ACTO-176828). */
.admin-filter > .admin-inline-field { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.admin-inline-field .booking-customer-input { width: auto; min-width: 200px; padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 600px) {
    .admin-list-item:has(.admin-entry-fields) { flex-wrap: wrap; }
    .admin-entry-fields { margin-left: 0; }
}
.admin-icon-btn { border: 1px solid #6F3AF2; background: #fff; color: #6F3AF2; border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 13px; }
.admin-icon-btn:hover:not(:disabled) { background: #6F3AF2; color: #fff; }
.admin-icon-btn:disabled { border-color: #ccc; color: #ccc; cursor: not-allowed; }
.admin-search { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.admin-search .booking-customer-input { flex: 1 1 240px; }
.admin-search-btn { padding: 8px 20px; }
.admin-checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer; }
.admin-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); column-gap: 24px; row-gap: 4px; }
/* Each field spans three shared rows (label, input, error message), so the inputs stay on one
   line however the labels wrap and whether or not an error is shown. */
.admin-field { display: grid; grid-row: span 3; grid-template-rows: subgrid; font-size: 14px; margin-bottom: 8px; }
.admin-field > span { align-self: end; }
.admin-field > .error-msg { margin: 0; }
.admin-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.admin-select { flex: 1 1 280px; max-width: 520px; }
.admin-combobox { position: relative; max-width: 620px; margin-bottom: 8px; }
.admin-combobox__id { font-weight: 600; color: #6F3AF2; margin-right: 6px; }
.admin-combobox__info { padding: 6px 10px; color: #666; }
.admin-tabs { margin-bottom: 16px; }
.admin-tabs .nav-tabs { border-bottom: none; margin-bottom: 16px; }
.admin-tabs .nav-link { color: #555; font-weight: 600; }
.admin-tabs .nav-link.active { color: #fff; background: #6F3AF2; border-color: #6F3AF2; }
.admin-tab-error { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #d32f2f; color: #fff; font-size: 12px; text-align: center; }
/* All tab panels share one grid cell, so the tab content is as high as the highest tab and the
   save button below stays at the same height on every tab; inactive panels are only invisible. */
.admin-tabs .tab-content { display: grid; }
.admin-tabs .tab-content > .tab-pane { display: block !important; grid-area: 1 / 1; visibility: hidden; }
.admin-tabs .tab-content > .tab-pane.active { visibility: visible; }
/* No fade animation when switching tabs (Bootstrap .fade/.show), so the content does not flicker. */
.admin-tabs .tab-content > .tab-pane,
.admin-tabs .tab-content > .tab-pane.fade { opacity: 1 !important; transition: none !important; }
.admin-tabs .tab-content > .tab-pane:not(.active) { pointer-events: none; }
.admin-tabs .nav-link { transition: none; }
/* Reserves the scrollbar width, so nothing shifts sideways when a tab is switched. */
.app-main:has(.admin-page) { scrollbar-gutter: stable; }
/* Search spinner of the admin search combo. */
.admin-combobox__spinner { position: absolute; right: 12px; top: 10px; width: 18px; height: 18px; border: 2px solid #d9cdfc; border-top-color: #6F3AF2; border-radius: 50%; animation: admin-combobox-spin 0.8s linear infinite; pointer-events: none; }
.admin-combobox--searching input { padding-right: 38px; }
.admin-combobox__searching { display: block; margin-top: 4px; font-size: 13px; color: #6F3AF2; }
@keyframes admin-combobox-spin { to { transform: rotate(360deg); } }

/* Courtesy car table of the admin page (ACTO-175976). */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e0e0e0; font-size: 13px; }
.admin-table th, .admin-table td { padding: 6px 10px; text-align: left; vertical-align: top; border-top: 1px solid #e0e0e0; }
.admin-table th { background: #f7f4ff; font-weight: 600; color: #333; }
.admin-table tbody tr:nth-child(even) { background: #fafafa; }
.admin-table__check { width: 36px; text-align: center; }
.admin-table__check input { width: 16px; height: 16px; cursor: pointer; }
.admin-table__comment { color: #555; }
.admin-table__row--muted td { color: #888; }
.admin-table__note { display: block; margin: 2px 0 0; }

/* Courtesy car choice of the booking page (ACTO-175976). */
.booking-courtesy-panel { margin-top: 16px; }

/* Courtesy car filter and single-line comments with the full text on mouse-over (title). */
.admin-filter { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 4px; }
.admin-filter > .admin-checkbox { display: inline-flex; width: auto; margin-bottom: 0; white-space: nowrap; }
/* Fixed column widths: the comment takes the remaining width and is cut to one line. */
.admin-table--fixed { table-layout: fixed; }
.admin-col-check { width: 40px; }
.admin-col-id { width: 70px; }
.admin-col-car { width: 28%; }
.admin-col-nature { width: 16%; }
.admin-table--fixed td { overflow-wrap: anywhere; }
.admin-table__clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
@media (max-width: 700px) { .admin-col-car { width: 40%; } .admin-col-nature { width: 22%; } }

/* Department table: booking priority with arrows for the selected departments. */
.admin-table__priority { width: 120px; white-space: nowrap; }
.admin-table__priority .admin-icon-btn { margin-left: 2px; }
.admin-priority { display: inline-block; min-width: 18px; font-weight: 600; color: #6F3AF2; }
/* Smartphones (ACTO-175253) - CSS only, no device detection and no markup change. Every rule
   below sits inside a phone media query so the desktop layout stays exactly as it was.
   Shared by portrait phones and phones in landscape (short viewport): dialogs never exceed the
   visible area and scroll internally with stacked full-width buttons, and form controls use
   at least 16px text because iOS Safari zooms the page into any smaller focused input. */
@media (max-width: 480px), (max-height: 500px) and (orientation: landscape) {
    .booking-confirmation-backdrop { padding: 8px; }
    .booking-confirmation-modal,
    .handbook-modal { display: flex; flex-direction: column; max-width: 100%; max-height: 100%; }
    .handbook-modal-backdrop { padding: 8px; }
    .booking-confirmation-header,
    .handbook-modal-header { flex: 0 0 auto; padding: 12px 16px; }
    .booking-confirmation-body,
    .handbook-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; }
    .booking-confirmation-actions { flex: 0 0 auto; padding: 12px 16px; }
    .booking-confirmation-btn { min-height: 44px; }
    .booking-confirmation-details { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    .booking-confirmation-details dd { margin-bottom: 8px; overflow-wrap: anywhere; }
    .handbook-modal-close { min-width: 40px; min-height: 40px; }

    input, select, textarea,
    .booking-customer-input,
    .booking-remark-input { font-size: 16px; }

    .error-msg, .info-msg { overflow-wrap: anywhere; }

    /* Slot picker - four compact date cards in one row and touch-sized time buttons. */
    .ts-picker__date-carousel { gap: 4px; }
    .ts-picker__carousel-btn { width: 20px; height: 44px; font-size: 28px; }
    .ts-picker__date-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .ts-picker__date-card { min-height: 64px; padding: 6px 2px; }
    .ts-picker__date-card-day,
    .ts-picker__date-card-date { font-size: 13px; }
    .ts-picker__date-card-count { font-size: 11px; text-align: center; }
    .ts-picker__selected-date { font-size: 15px; }
    .ts-picker__timeslot-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .ts-picker__timeslot-btn { min-width: 0; min-height: 44px; padding: 8px 4px; font-size: 15px; }

    /* Services - touch-sized hit area per row. */
    .booking-service-item { min-height: 40px; align-items: center; }
    .booking-service-item input { margin-top: 0; width: 18px; height: 18px; }
}

/* Smartphones in portrait (360-430px wide). */
@media (max-width: 480px) {
    /* Header - all elements stay visible: the language trigger shows only the flag (the open
       menu still lists the language names), logos shrink and the title truncates with an
       ellipsis instead of pushing the right-hand controls off screen. */
    .app-header { height: 48px; padding: 0 12px; gap: 8px; }
    .header-left { flex: 1 1 auto; }
    .header-title { font-size: 15px; letter-spacing: 0; }
    .handbook-btn { width: 32px; height: 32px; justify-content: center; margin-right: 4px; }
    .lang-dropdown { margin-right: 4px; }
    .lang-dropdown__trigger { min-width: 0; height: 32px; padding: 4px 6px; gap: 4px; }
    .lang-dropdown__label { display: none; }
    .lang-dropdown__item { min-height: 40px; font-size: 15px; }
    .oem-logo-link { margin-left: 4px; }
    .header-logo--byd { height: 30px; }
    .header-logo--nextlane { height: 14px; max-width: 86px; }

    /* Spacing - give the content as much of the narrow screen as possible. */
    .app-main { padding: 8px; }
    /* :not() keeps the accordion cards at padding 0 so the toggle spans the full card width. */
    .panel:not(.booking-accordion-section) { padding: 12px; }
    .panel { margin-bottom: 12px; }
    .booking-accordion-toggle { padding: 14px 12px; }
    .booking-accordion-body { padding: 12px 10px; }
    .booking-accordion-body .panel { padding: 10px; }

    /* Vehicle tables - long values (VIN, model names) wrap instead of widening the page. */
    .vehicle-details-table { table-layout: fixed; }
    .vehicle-details-table th,
    .vehicle-details-table td { padding: 8px; overflow-wrap: anywhere; }

    /* Dialog buttons - stacked full width, primary action on top. In landscape they stay side
       by side so the scrollable dialog body keeps enough height. */
    .booking-confirmation-actions { flex-direction: column-reverse; }
    .booking-confirmation-btn { width: 100%; }

    /* Action bar - stacked, full-width buttons pinned to the bottom of the scroll area. */
    .booking-actions { flex-direction: column; gap: 8px; padding: 10px 0 4px; }
    .booking-btn { width: 100%; min-height: 48px; padding: 10px 16px; }
}

/* Smartphones in landscape - the height, not the width, is the constraint. */
@media (max-height: 500px) and (orientation: landscape) {
    .app-header { height: 44px; }
    .header-logo--byd { height: 34px; }
    .app-main { padding: 8px 16px; }
    .booking-actions { padding: 6px 0; }
    .booking-btn { min-height: 44px; padding: 8px 32px; }
}