/* =====================================================================
   ambulance/assets/css/ui-polish.css

   Global UI polish — loaded LAST by components/layout/head.php so it
   refines the shared primitives on every page without touching tokens:

   1. Cards            consistent padding, spacing between stacked cards
   2. Forms            clear labels, roomy inputs, readable selects,
                       hints, errors, required markers
   3. Buttons          weight, hover / press / focus states
   4. Lists & tables   toolbars, table cards, pagination
   5. Modals / sheets  header / body / footer rhythm
   6. Dashboard, detail, report and settings blocks
   7. Driver + customer portal (drv-* / prt-*) form and card polish
   8. Select2 skin
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Page rhythm
   --------------------------------------------------------------------- */
.amb-content {
    display: block;
    max-width: 1280px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

[data-theme="dark"] { color-scheme: dark; }

.amb-toolbar {
    gap: var(--space-12);
    margin-bottom: var(--space-20);
}

.amb-toolbar .amb-input,
.amb-toolbar .amb-select { min-height: 44px; }
.amb-toolbar .amb-select { width: auto; min-width: 160px; }
.amb-toolbar__search { flex: 1 1 260px; max-width: 380px; }

/* ---------------------------------------------------------------------
   1. Cards
   --------------------------------------------------------------------- */
.amb-card {
    padding: var(--space-24);
    margin-bottom: var(--space-20);
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-1);
}

/* Cards that sit in a grid / inside another card are spaced by the grid. */
.amb-grid > .amb-card,
.amb-dash-panels > .amb-card,
.amb-report-grid > .amb-card,
.amb-report-grid__col > .amb-card:last-child,
.amb-card .amb-card { margin-bottom: 0; }

/* Trip form sections are each wrapped in a [data-trip-section] div. */
[data-trip-section] > .amb-card { margin-bottom: var(--space-20); }

.amb-card > h1:first-child,
.amb-card > h2:first-child,
.amb-card > h3:first-child { margin-top: 0; }

.amb-card > h1 {
    font-size: 22px;
    margin-bottom: var(--space-20);
}

/* Section headings inside form cards read as a titled block. */
.amb-card > h2 {
    margin: 0 0 var(--space-20);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 17px;
    letter-spacing: -0.005em;
}

.amb-card > h3,
.amb-card__title { line-height: 1.3; }

.amb-card__head { margin-bottom: var(--space-20); }

.amb-card__muted { margin-top: calc(var(--space-4) * -1); }

.amb-stat { padding: var(--space-20); gap: var(--space-8); }

.amb-badge { padding: 4px 12px; }

/* Definition lists used on detail pages */
.amb-ambulance-kv { gap: var(--space-12) var(--space-24); }
.amb-ambulance-kv dt { padding-top: 1px; }
.amb-trip-kv { gap: var(--space-12); }
.amb-trip-kv > div {
    padding-bottom: var(--space-12);
    border-bottom: 1px dashed var(--color-border-soft);
}
.amb-trip-kv > div:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------------------------------------------------------------------
   2. Forms
   --------------------------------------------------------------------- */
.amb-field {
    gap: var(--space-8);
    margin-bottom: var(--space-20);
}

/* Fields in a two/three column form grid: spacing comes from the field,
   not the grid row gap, so rows never double up. */
.amb-grid:has(> .amb-field) { gap: 0 var(--space-24); }
.amb-grid > .amb-field { margin-bottom: var(--space-20); min-width: 0; }

/* Labels — most forms use a bare <label>, so style by position. */
.amb-field > label:not(.amb-check),
.amb-field > .amb-label,
.amb-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-primary);
}

/* Required marker — from the markup (required attribute) or data-required. */
.amb-field:has(> :is(input, select, textarea)[required]):not(:has(.req)) > label:first-child::after,
.amb-field:has(> .amb-field__control > input[required]):not(:has(.req)) > label:first-child::after,
.amb-field[data-required] > label:first-child::after {
    content: " *";
    color: var(--color-error-text);
    font-weight: 700;
}

.amb-input,
.amb-select,
.amb-textarea {
    min-height: 46px;
    padding: 11px var(--space-16);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background-color: var(--color-bg-surface);
    font-size: 15px;
    line-height: 1.4;
    box-shadow: inset 0 1px 1px rgba(11, 22, 32, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.amb-textarea {
    min-height: 112px;
    line-height: 1.5;
    padding-top: 12px;
}

.amb-input:hover:not(:disabled):not(:focus),
.amb-select:hover:not(:disabled):not(:focus),
.amb-textarea:hover:not(:disabled):not(:focus) {
    border-color: var(--color-primary-300);
}

.amb-input:focus,
.amb-select:focus,
.amb-textarea:focus {
    border-color: var(--color-primary-400);
    box-shadow: var(--focus-ring);
}

.amb-input:disabled,
.amb-select:disabled,
.amb-textarea:disabled,
.amb-input[readonly] {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

.amb-input[type="date"],
.amb-input[type="datetime-local"],
.amb-input[type="time"],
.amb-input[type="month"] { min-width: 0; }

.amb-input[type="number"] { font-variant-numeric: tabular-nums; }
.amb-input[type="file"] { padding: 9px var(--space-12); background: var(--color-bg-subtle); }
.amb-input[type="color"] { padding: 3px; min-height: 46px; }

/* Native select with a theme-aware chevron (drawn with gradients so it
   follows light / dark without a data-URI per theme). */
.amb-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%),
        linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.amb-select[multiple] { background-image: none; padding-right: var(--space-16); }

/* Validation */
.amb-input[aria-invalid="true"],
.amb-select[aria-invalid="true"],
.amb-field.is-invalid .amb-input,
.amb-field.is-invalid .amb-select,
.amb-field.is-invalid .amb-textarea {
    border-color: var(--color-error-500);
    background-color: color-mix(in srgb, var(--color-error-100) 40%, var(--color-bg-surface));
}
.amb-field.is-invalid .amb-input:focus,
.amb-field.is-invalid .amb-select:focus,
.amb-field.is-invalid .amb-textarea:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error-500) 28%, transparent);
}

.amb-field__hint,
.amb-help {
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.amb-field__error,
.amb-error-text {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-error-text);
}
.amb-field.is-invalid .amb-field__error { display: flex; align-items: flex-start; gap: 6px; }
.amb-field.is-invalid .amb-field__error:empty { display: none; }
.amb-field.is-invalid .amb-field__error:not(:empty)::before {
    content: "!";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--color-error-500);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
}

/* Warnings that sit under a field (trip form) */
.amb-trip-warn {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: var(--space-8) var(--space-12);
    border-radius: var(--radius-8);
    background: var(--color-warning-100);
    color: var(--color-warning-text);
    font-size: 13px;
}
.amb-trip-warn[hidden] { display: none; }

/* Checkbox / radio rows */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--brand); }

.amb-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    min-height: 40px;
    padding: var(--space-4) 0;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}
.amb-check input { width: 18px; height: 18px; flex: 0 0 auto; }
.amb-check-row { gap: var(--space-8) var(--space-24); margin-bottom: var(--space-16); }

/* Password field (eye toggle) — global, so every form that uses it is styled */
.amb-field__control {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.amb-field__control .amb-input { width: 100%; padding-right: 52px; }
.amb-field__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--radius-8);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .15s ease, color .15s ease;
}
.amb-field__toggle:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.amb-field__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.amb-field__toggle > i { pointer-events: none; }

/* Messages */
.amb-form-message {
    padding: var(--space-12) var(--space-16);
    border-radius: 10px;
    line-height: 1.45;
}

/* Action bar at the end of every form */
.amb-form-actions {
    gap: var(--space-12);
    margin-top: var(--space-24);
    padding-top: var(--space-20);
    border-top: 1px solid var(--color-border-soft);
}

/* On a form that is a stack of cards, the bar floats free of the cards. */
form > .amb-form-actions { margin-top: var(--space-4); }

/* Inline helper groups */
.amb-color-row input[type="color"] { height: 46px; width: 52px; border-radius: 10px; }
.amb-company-preview img,
.amb-business-preview { border-radius: 10px; }

/* Inline create-forms inside settings */
.amb-settings-inline-form {
    gap: 0 var(--space-24);
    padding: var(--space-20);
    border-radius: var(--radius-12);
}
.amb-settings-inline-form .amb-field { margin-bottom: var(--space-16); }

/* ---------------------------------------------------------------------
   3. Buttons
   --------------------------------------------------------------------- */
.amb-btn {
    min-height: 44px;
    padding: 0 var(--space-24);
    border-radius: 10px;
    font-size: 14px;
    letter-spacing: 0.005em;
    box-shadow: var(--shadow-1);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease, transform 0.08s ease;
}

.amb-btn:hover:not(:disabled) { box-shadow: var(--shadow-2); }
.amb-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--shadow-1); }
.amb-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.amb-btn--primary { border-color: var(--brand); }
.amb-btn--primary:hover:not(:disabled) { filter: brightness(0.92); background: var(--brand); }

.amb-btn--ghost {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
    box-shadow: none;
}
.amb-btn--ghost:hover:not(:disabled) {
    border-color: var(--color-primary-300);
    background: var(--color-bg-subtle);
    box-shadow: none;
}

.amb-btn--danger { border-color: var(--color-error-500); }
.amb-btn--danger:hover:not(:disabled) { filter: brightness(0.92); background: var(--color-error-500); }

.amb-btn--sm {
    min-height: 38px;
    padding: 0 var(--space-16);
    font-size: 13px;
    border-radius: var(--radius-8);
}

.amb-btn--link { box-shadow: none; border: 0; background: none; min-height: auto; }
.amb-btn--link:hover:not(:disabled) { box-shadow: none; text-decoration: underline; }

.amb-btn > i { font-size: 0.95em; }

/* Icon-only buttons (delete row, close …) are square. */
.amb-btn:has(> i:only-child) { padding: 0; min-width: 44px; }
.amb-btn--sm:has(> i:only-child) { min-width: 38px; }

.amb-btn:disabled,
.amb-btn[aria-disabled="true"] {
    opacity: 0.5;
    box-shadow: none;
    filter: grayscale(0.25);
}

.amb-link-btn { border-radius: 10px; }

/* ---------------------------------------------------------------------
   4. Lists, tables, filters, pagination
   --------------------------------------------------------------------- */
.amb-table-wrap {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-12);
    background: var(--color-bg-surface);
}
.amb-card .amb-table-wrap { border: 0; border-radius: 0; }
.amb-card[style*="padding:0"] .amb-table-wrap,
.amb-card[style*="padding: 0"] .amb-table-wrap { border-radius: var(--radius-12); }

.amb-table th,
.amb-table td { padding: 14px var(--space-16); }
.amb-table th { padding-top: 12px; padding-bottom: 12px; border-bottom-color: var(--color-border-soft); }
.amb-table tbody tr:last-child td { border-bottom: 0; }
.amb-table tbody tr { transition: background-color 0.12s ease; }
.amb-table__actions { gap: var(--space-8); }
.amb-table__actions .amb-btn { box-shadow: none; }

.amb-pagination {
    margin-top: 0;
    padding: var(--space-16);
    border-top: 1px solid var(--color-border-soft);
}
.amb-card > .amb-pagination:last-child { border-top: 1px solid var(--color-border-soft); }

.amb-empty,
.amb-state { padding: var(--space-48) var(--space-20); }

/* Empty states: icon + text always centred, in every portal */
.amb-empty,
.drv-empty,
.prt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.amb-empty[hidden],
.drv-empty[hidden],
.prt-empty[hidden] { display: none !important; }
.amb-empty > i,
.drv-empty > i,
.prt-empty > i {
    display: block;
    width: 100%;
    margin: 0 auto var(--space-12);
    text-align: center;
    font-size: 28px;
    line-height: 1;
    color: var(--color-primary-300);
}
.amb-empty > p,
.amb-empty > span,
.drv-empty > p,
.prt-empty > p { margin: 0; max-width: 40ch; text-align: center; }
.amb-state__icon { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; }
.amb-state__icon > i { display: block; text-align: center; }

/* Filter bars (trips, reports, billing audit) */
.amb-trips-filters,
.amb-report-filters {
    gap: var(--space-16);
    padding: var(--space-16) var(--space-20);
    margin-bottom: var(--space-20);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-12);
    background: var(--color-bg-surface);
}
.amb-trips-filters .amb-field,
.amb-report-filters .amb-field { gap: 6px; }
.amb-trips-filters .amb-input,
.amb-trips-filters .amb-select,
.amb-report-filters .amb-input,
.amb-report-filters .amb-select { min-height: 42px; padding-top: 8px; padding-bottom: 8px; }

/* Tabs */
.amb-trips-tabs,
.amb-settings-tabs { margin-bottom: var(--space-20); gap: var(--space-4); }
.amb-trips-tabs .amb-tabs__tab,
.amb-settings-tabs .amb-tabs__tab {
    padding: 12px var(--space-16);
    margin-bottom: -1px;
    border-radius: 10px 10px 0 0;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.amb-trips-tabs .amb-tabs__tab:hover,
.amb-settings-tabs .amb-tabs__tab:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }

.amb-trips-summary { gap: var(--space-24); padding: var(--space-4) 0; }
.amb-report-nav { gap: var(--space-8); margin-bottom: var(--space-20); }
.amb-report-nav__link { padding: 8px var(--space-16); font-size: 13px; }
.amb-report-nav__link:hover { background: var(--color-bg-subtle); }

/* ---------------------------------------------------------------------
   5. Modals and sheets
   --------------------------------------------------------------------- */
.amb-modal__panel,
.amb-sheet__panel { padding: var(--space-24); }
.amb-modal__panel--wide { width: min(820px, 100%); }

.amb-modal__head,
.amb-sheet__head {
    margin: 0 calc(var(--space-24) * -1) var(--space-20);
    padding: 0 var(--space-24) var(--space-16);
    border-bottom: 1px solid var(--color-border-soft);
}
.amb-modal__head h2,
.amb-modal__head h3,
.amb-sheet__head h2,
.amb-sheet__head h3 { margin: 0; font-size: 18px; }

.amb-modal__close,
.amb-sheet__close { font-size: 16px; border-radius: 10px; }

.amb-modal__body,
.amb-sheet__body { display: block; }

.amb-modal__foot,
.amb-sheet__foot {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-12);
    margin-top: var(--space-24);
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border-soft);
}

.amb-sheet__grabber {
    width: 44px;
    height: 4px;
    margin: 0 auto var(--space-16);
    border-radius: var(--radius-pill);
    background: var(--color-border);
}

.amb-confirm__message { margin: 0 0 var(--space-16); line-height: 1.5; }

.amb-toast { padding: var(--space-16); gap: var(--space-12); }
.amb-toast__message { line-height: 1.4; }

@media (max-width: 767px) {
    .amb-modal__head,
    .amb-sheet__head {
        margin: 0 calc(var(--space-16) * -1) var(--space-16);
        padding: 0 var(--space-16) var(--space-12);
    }
    .amb-modal__foot .amb-btn,
    .amb-sheet__foot .amb-btn { flex: 1 1 140px; }
}

/* ---------------------------------------------------------------------
   6. Dashboard, detail, report and settings blocks
   --------------------------------------------------------------------- */
.amb-dash-cards { gap: var(--space-16); margin-bottom: var(--space-24); }
.amb-dash-card {
    gap: var(--space-8);
    padding: var(--space-20);
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-1);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.amb-dash-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.amb-dash-card__value { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }

.amb-dash-quick { gap: var(--space-12); margin-bottom: var(--space-24); }
.amb-dash-panels { gap: var(--space-20); }
.amb-dash-panel { padding: var(--space-20); }
.amb-dash-panel__title { margin-bottom: var(--space-16); font-size: 16px; }
.amb-dash-list__row { padding: 10px 0; gap: var(--space-12); font-size: 14px; }
.amb-dash-stats { gap: var(--space-8); margin-bottom: var(--space-12); }

.amb-report-totals { gap: var(--space-24); padding: var(--space-20); margin-bottom: var(--space-20); }
.amb-report-section { margin-bottom: var(--space-24); }
.amb-report-section__title { margin-bottom: var(--space-12); }
.amb-report-grid { gap: var(--space-20); }

.amb-settings-panel__head { margin-bottom: var(--space-16); }
.amb-badge-list { gap: var(--space-8); }

.amb-trip-photos { gap: var(--space-12); }
.amb-trip-photos a img { border-radius: 10px; }
.amb-trip-photo { display: inline-block; }
.amb-trip-photo__open { cursor: zoom-in; }
.amb-trip-stepper { gap: var(--space-8); }
.amb-trip-stepper__step { padding: 6px 14px; }

.amb-timeline { gap: var(--space-16); }
.amb-timeline__list { display: flex; flex-direction: column; gap: var(--space-16); margin: 0; padding: 0; list-style: none; }
.amb-timeline__label { line-height: 1.4; }

/* Auth cards */
.amb-auth__card { padding: var(--space-32); }
.amb-auth__card .amb-field { margin-bottom: var(--space-16); }
.amb-auth__submit { min-height: 48px; }

/* ---------------------------------------------------------------------
   7. Driver (drv-*) and customer portal (prt-*)
   --------------------------------------------------------------------- */
.drv-card,
.prt-card {
    padding: var(--space-20);
    margin-bottom: var(--space-16);
    border-radius: var(--radius-16);
    box-shadow: var(--shadow-1);
}

.drv-card__title,
.prt-card__title {
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 16px;
}

.drv-kv,
.prt-kv { padding: 10px 0; border-bottom: 1px dashed var(--color-border-soft); }
.drv-kv:last-child,
.prt-kv:last-child { border-bottom: 0; }

.drv-field,
.prt-field { gap: var(--space-8); margin-bottom: var(--space-16); }

.drv-field__label,
.prt-field__label {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.drv-input, .drv-select, .drv-textarea,
.prt-input, .prt-select, .prt-textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px var(--space-16);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 16px; /* stops iOS zooming into the field */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.drv-textarea, .prt-textarea { min-height: 104px; line-height: 1.5; }

.drv-input:focus, .drv-select:focus, .drv-textarea:focus,
.prt-input:focus, .prt-select:focus, .prt-textarea:focus {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: var(--focus-ring);
}

.drv-select, .prt-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%),
        linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.drv-field__error,
.prt-field__error { font-size: 13px; font-weight: 500; }

.drv-btn, .prt-btn {
    min-height: 50px;
    border-radius: 12px;
    box-shadow: var(--shadow-1);
    transition: filter 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.drv-btn:active:not(:disabled), .prt-btn:active:not(:disabled) { transform: translateY(1px); }
.drv-btn--primary:hover:not(:disabled), .prt-btn--primary:hover:not(:disabled),
.drv-btn--danger:hover:not(:disabled), .prt-btn--danger:hover:not(:disabled) { filter: brightness(0.92); }
.drv-btn:focus-visible, .prt-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.drv-actions, .prt-actions { gap: var(--space-12); margin-top: var(--space-20); }
.drv-section, .prt-section { margin-top: var(--space-20); }

.drv-tile, .prt-tile { padding: var(--space-16); border-radius: var(--radius-12); }
.drv-row, .prt-row { padding: var(--space-12) 0; gap: var(--space-12); }

/* ---------------------------------------------------------------------
   8. Select2 skin (every <select> is a Select2 dropdown)
   --------------------------------------------------------------------- */
/* Only the control next to the <select> is full width. The dropdown layer
   (appended to <body> or a dialog) is sized by Select2 itself; forcing 100%
   on it pushed it past the viewport and caused a horizontal scrollbar. */
select + .select2-container { width: 100% !important; max-width: 100%; box-sizing: border-box; text-align: left; }
.select2-container { box-sizing: border-box; text-align: left; }
body > .select2-container,
.select2-container:has(> .select2-dropdown) { max-width: 100vw; }
.select2-dropdown { max-width: calc(100vw - 16px); box-sizing: border-box; }
.select2-results,
.select2-results__options { overflow-x: hidden; }
.select2-container--default .select2-results__option { white-space: normal; overflow-wrap: anywhere; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 46px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-surface);
    box-sizing: border-box;
}
.select2-container--default .select2-selection--single { display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    padding: 0 40px 0 var(--space-16);
    color: var(--color-text-primary);
    line-height: 1.4;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--color-text-secondary); }
.select2-container.amb-s2--empty .select2-selection__rendered { color: var(--color-text-placeholder); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--color-text-secondary) transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--color-text-secondary); }
.select2-container--default .select2-selection--single .select2-selection__clear { margin-right: 10px; color: var(--color-text-secondary); }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--color-primary-400);
    box-shadow: var(--focus-ring);
}
.select2-container--default.select2-container--disabled .select2-selection--single { opacity: .6; cursor: not-allowed; background: var(--color-bg-subtle); }
.select2-container--default.amb-s2--invalid .select2-selection--single,
.amb-field.is-invalid .select2-container--default .select2-selection--single { border-color: var(--color-error-500); }
.amb-field.is-valid .select2-container--default .select2-selection--single { border-color: var(--color-success-500); }
.select2-dropdown {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}
.select2-container--open .select2-dropdown { z-index: 1; }
.select2-container--default .select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}
.select2-container--default .select2-results__option { padding: 10px var(--space-16); color: var(--color-text-primary); }
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--color-bg-subtle); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--color-primary-100);
    color: var(--color-primary-text);
}
.select2-container--default .select2-results__option--disabled { color: var(--color-text-secondary); opacity: .6; }

/* Toolbars / filter rows: keep the compact widths the native selects had */
.amb-toolbar .select2-container { width: auto !important; min-width: 160px; flex: 0 1 auto; }
.amb-toolbar .select2-container .select2-selection--single { min-height: 44px; }
.amb-trips-filters .select2-container .select2-selection--single,
.amb-report-filters .select2-container .select2-selection--single { min-height: 42px; }
.amb-trip-customer-new .select2-container { flex: 1 1 260px; width: auto !important; }
.amb-trip-status-panel__row .select2-container { flex: 0 1 220px; width: auto !important; }

/* Header language pickers (driver + portal) */
.select2-container.amb-s2--lang { width: auto !important; min-width: 96px; }
.select2-container.amb-s2--lang .select2-selection--single { min-height: 38px; border-radius: 8px; }
.select2-container.amb-s2--lang .select2-selection__rendered { padding-left: 10px; font-size: .9rem; }
.select2-container--default .select2-search--dropdown[style*="display: none"] + .select2-results { margin: 0; }

/* ---------------------------------------------------------------------
   Responsive + print
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
    .amb-card { padding: var(--space-20) var(--space-16); }
    .amb-grid:has(> .amb-field) { gap: 0; }
    .amb-toolbar .amb-select,
    .amb-toolbar .select2-container,
    .amb-toolbar__search { flex: 1 1 100%; max-width: 100%; }
    .amb-toolbar .amb-btn { flex: 1 1 auto; }
    .amb-trips-filters,
    .amb-report-filters { padding: var(--space-16); }
    .amb-auth__card { padding: var(--space-24) var(--space-20); }
    .amb-dash-card__value { font-size: 24px; }
}

@media (max-width: 480px) {
    .amb-card { padding: var(--space-16); }
}

@media print {
    .amb-card { box-shadow: none; margin-bottom: var(--space-12); }
    .amb-btn { box-shadow: none; }
}


/* ---------------------------------------------------------------------
   File upload (drag & drop) — .amb-drop, used with assets/js/file-drop.js
   --------------------------------------------------------------------- */
.amb-drop {
    position: relative;
    border: 2px dashed var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-surface);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.amb-drop:hover { border-color: var(--color-primary-300); }
.amb-drop:focus-within { border-color: var(--color-primary-400); box-shadow: var(--focus-ring); }
.amb-drop.is-dragover { border-style: solid; border-color: var(--color-primary-400); background: var(--color-primary-100); }
.amb-drop[data-state="done"] { border-style: solid; border-color: var(--color-border-soft); }
.amb-drop[data-state="error"] { border-style: solid; border-color: var(--color-error-500); }

/* The real file input covers the empty state, so a click anywhere opens the picker */
.amb-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.amb-drop:not([data-state="empty"]) .amb-drop__input { pointer-events: none; }

.amb-drop__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--space-24) var(--space-16);
    text-align: center;
}
.amb-drop__empty[hidden], .amb-drop__file[hidden], .amb-drop__btn[hidden] { display: none !important; }
.amb-drop__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--color-primary-100);
    color: var(--color-primary-text, var(--color-primary-500));
    font-size: 18px;
}
.amb-drop__title { font-weight: 600; color: var(--color-text-primary); }
.amb-drop__sub { font-size: 13px; color: var(--color-text-secondary); }
.amb-drop__hint { margin-top: 6px; font-size: 12px; color: var(--color-text-placeholder); }

.amb-drop__file {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    padding: var(--space-12) var(--space-16);
    position: relative;
    z-index: 2;
}
.amb-drop__thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-bg-subtle);
    color: var(--color-text-placeholder);
    font-size: 22px;
    overflow: hidden;
}
.amb-drop__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.amb-drop__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.amb-drop__name { font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amb-drop__meta { font-size: 12px; color: var(--color-text-secondary); }
.amb-drop__meta:empty { display: none; }
.amb-drop__bar { display: none; height: 6px; border-radius: 999px; background: var(--color-bg-subtle); overflow: hidden; }
.amb-drop__bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--color-primary-400); transition: width .2s ease; }
.amb-drop[data-state="uploading"] .amb-drop__bar { display: block; }
.amb-drop__status { font-size: 12px; color: var(--color-text-secondary); }
.amb-drop__status:empty { display: none; }
.amb-drop__status[data-kind="ok"] { color: var(--color-success-text, var(--color-success-500)); }
.amb-drop__status[data-kind="error"] { color: var(--color-error-text, var(--color-error-500)); }

.amb-drop__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-8); }
.amb-drop__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.amb-drop__btn:hover { background: var(--color-bg-subtle); }
.amb-drop__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.amb-drop__btn--danger { color: var(--color-error-text, var(--color-error-500)); }
.amb-drop.is-busy .amb-drop__btn:not([data-drop-remove]) { display: none; }

@media (max-width: 520px) {
    .amb-drop__file { flex-wrap: wrap; }
    .amb-drop__actions { width: 100%; justify-content: flex-start; }
}

/* ---------------------------------------------------------------------
   Trip close popup (trip-close-modal.js)
   --------------------------------------------------------------------- */
.amb-trip-close-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-16);
}

/* OTP block: large, centred, easy to read and type into */
.amb-trip-close-modal__otp {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
    margin: var(--space-8) 0 var(--space-20);
    padding: var(--space-20);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-12);
    background: var(--color-bg-subtle);
}

.amb-trip-close-modal__otp-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-12);
}

.amb-trip-close-modal__otp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg-surface, #fff);
    border: 1px solid var(--color-border-soft);
    font-size: 14px;
}

.amb-trip-close-modal__otp-title {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 600;
}

.amb-trip-close-modal__otp-note,
.amb-trip-close-modal__otp-verified {
    margin: 0;
    font-size: 13px;
    text-align: center;
}

.amb-trip-close-modal__otp-note:empty,
.amb-trip-close-modal__otp-verified:empty { display: none; }

.amb-trip-close-modal__otp-verified { font-weight: 600; color: var(--color-success, #1f8a4c); }

.amb-trip-close-modal__code.amb-input {
    width: 100%;
    height: 64px;
    padding: 0 var(--space-16);
    font-size: 32px;
    font-weight: 600;
    line-height: 64px;
    letter-spacing: 0.6em;
    text-indent: 0.6em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border-width: 2px;
    border-radius: var(--radius-12);
}

.amb-trip-close-modal__code.amb-input::placeholder {
    letter-spacing: 0.5em;
    font-weight: 400;
    opacity: 0.35;
}

.amb-trip-close-modal__verify { width: 100%; height: 44px; }

.amb-trip-close-modal__apply { width: 100%; height: 46px; }

@media (max-width: 520px) {
    .amb-trip-close-modal__grid { grid-template-columns: minmax(0, 1fr); }
    .amb-trip-close-modal__code.amb-input { font-size: 26px; height: 58px; line-height: 58px; letter-spacing: 0.45em; text-indent: 0.45em; }
}

/* ---------------------------------------------------------------------
   Trip readings popup (trip-readings-modal.js)
   --------------------------------------------------------------------- */
.amb-trip-readings-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-16);
}