/* =====================================================================
   ambulance/assets/css/components.css
   Shared UI primitives. Tokens only — no new colours or radii.
   ===================================================================== */

/* Buttons ------------------------------------------------------------ */
.amb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    min-height: var(--touch-target);
    padding: 0 var(--space-20);
    border: 1px solid transparent;
    border-radius: var(--radius-8);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.amb-btn:disabled, .amb-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}
.amb-btn--primary {
    background: var(--brand);
    color: var(--brand-contrast);
}
.amb-btn--primary:hover:not(:disabled) { background: var(--color-primary-600); }
.amb-btn--ghost {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-primary);
}
/* Anchors styled as buttons must never pick up the generic link colour. */
a.amb-btn, a.amb-btn:hover { text-decoration: none; }
a.amb-btn--primary, a.amb-btn--primary:hover { color: var(--brand-contrast); }
a.amb-btn--ghost, a.amb-btn--ghost:hover { color: var(--color-text-primary); }
a.amb-btn--danger, a.amb-btn--danger:hover { color: #FFFFFF; }
.amb-btn--ghost:hover:not(:disabled) { background: var(--color-bg-subtle); }
.amb-btn--danger {
    background: var(--color-error-500);
    color: #FFFFFF;
}
.amb-btn--danger:hover:not(:disabled) { background: var(--color-error-text); }
.amb-btn--link {
    min-height: auto;
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-link);
}
.amb-btn--block { width: 100%; }
.amb-btn--sm { min-height: 36px; padding: 0 var(--space-12); font-size: 13px; }

.amb-link-btn {
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--space-8);
    min-height: 36px;
    border-radius: var(--radius-8);
}
.amb-link-btn:hover { background: var(--color-bg-subtle); }

/* Forms -------------------------------------------------------------- */
.amb-field { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-16); }
.amb-label {
    font-family: var(--font-heading);
    font-size: var(--font-size-label);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
.amb-label .req { color: var(--color-error-text); }
.amb-input, .amb-select, .amb-textarea {
    width: 100%;
    min-height: var(--touch-target);
    padding: 10px var(--space-12);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-8);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.amb-textarea { min-height: 100px; resize: vertical; }
.amb-input::placeholder, .amb-textarea::placeholder { color: var(--color-text-placeholder); }
.amb-input:focus, .amb-select:focus, .amb-textarea:focus {
    border-color: var(--color-primary-400);
    box-shadow: var(--focus-ring);
    outline: none;
}
.amb-input[aria-invalid="true"], .amb-select[aria-invalid="true"] {
    border-color: var(--color-error-500);
}
/* The inputs set display:block, which would defeat the hidden attribute. */
.amb-input[hidden], .amb-select[hidden], .amb-textarea[hidden] {
    display: none;
}
/* .amb-field is display:flex — the same hidden-attribute problem. */
.amb-field[hidden] {
    display: none;
}
.amb-help { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.amb-error-text { font-size: var(--font-size-caption); color: var(--color-error-text); }
.amb-hint-warning { color: var(--color-warning-text); }

/* Cards -------------------------------------------------------------- */
.amb-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-1);
    padding: var(--space-20);
}
.amb-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
}
.amb-card__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    font-weight: 600;
}
.amb-card__muted { color: var(--color-text-secondary); font-size: var(--font-size-caption); }

.amb-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-16);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-12);
}
.amb-stat__label { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.amb-stat__value { font-family: var(--font-heading); font-size: 24px; font-weight: 700; }

/* Badges / chips ----------------------------------------------------- */
.amb-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-label);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.amb-badge--success { background: var(--color-success-100); color: var(--color-success-text); }
.amb-badge--warning { background: var(--color-warning-100); color: var(--color-warning-text); }
.amb-badge--error   { background: var(--color-error-100); color: var(--color-error-text); }
.amb-badge--info    { background: var(--color-info-100); color: var(--color-info-text); }
.amb-badge--primary { background: var(--color-primary-100); color: var(--color-primary-text); }

.amb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    font-size: var(--font-size-caption);
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.amb-chip--active {
    border-color: var(--color-primary-300);
    background: var(--color-primary-50);
    color: var(--color-primary-text);
    font-weight: 600;
}
.amb-chip-row {
    display: flex;
    gap: var(--space-8);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--space-4);
}
.amb-chip-row::-webkit-scrollbar { display: none; }

/* Tables ------------------------------------------------------------- */
.amb-table-wrap { width: 100%; overflow-x: auto; }
.amb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.amb-table th, .amb-table td {
    padding: var(--space-12) var(--space-16);
    text-align: left;
    border-bottom: 1px solid var(--color-border-soft);
    vertical-align: middle;
}
.amb-table th {
    font-family: var(--font-heading);
    font-size: var(--font-size-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
    white-space: nowrap;
}
.amb-table tbody tr:hover { background: var(--color-bg-subtle); }

/* Modal / sheet ------------------------------------------------------ */
.amb-modal[hidden], .amb-sheet[hidden] { display: none !important; }
.amb-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
}
.amb-modal__backdrop, .amb-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 22, 32, 0.55);
}
.amb-modal__panel {
    position: relative;
    width: min(620px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-bg-surface);
    border-radius: var(--radius-16);
    box-shadow: var(--shadow-3);
    padding: var(--space-24);
}
.amb-modal__hint {
    margin: 0 0 var(--space-16, 1rem);
    color: var(--color-text-secondary);
    font-size: var(--font-size-caption);
}
.amb-sheet {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.amb-sheet__panel {
    position: relative;
    width: min(620px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--color-bg-surface);
    border-radius: var(--radius-16) var(--radius-16) 0 0;
    box-shadow: var(--shadow-3);
    padding: var(--space-24);
}
.amb-modal__head, .amb-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
}
.amb-modal__close, .amb-sheet__close {
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    min-width: 36px;
    min-height: 36px;
    border-radius: var(--radius-8);
}
.amb-modal__close:hover, .amb-sheet__close:hover { background: var(--color-bg-subtle); }

/* Toast -------------------------------------------------------------- */
.amb-toast-stack {
    position: fixed;
    right: var(--space-16);
    bottom: var(--space-16);
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: min(380px, calc(100vw - 32px));
}
.amb-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-12);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-2);
    font-size: 14px;
}
.amb-toast--success i { color: var(--color-success-500); }
.amb-toast--warning i { color: var(--color-warning-500); }
.amb-toast--error i { color: var(--color-error-500); }
.amb-toast--info i { color: var(--color-info-500); }

/* Skeletons / states ------------------------------------------------- */
.amb-skeleton {
    background: linear-gradient(90deg, var(--color-bg-subtle) 25%, var(--color-border-soft) 37%, var(--color-bg-subtle) 63%);
    background-size: 400% 100%;
    animation: amb-shimmer 1.4s ease infinite;
    border-radius: var(--radius-8);
    min-height: 14px;
}
@keyframes amb-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.amb-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    padding: var(--space-40) var(--space-20);
    text-align: center;
    color: var(--color-text-secondary);
}
.amb-state__icon { font-size: 28px; color: var(--color-primary-300); }
.amb-state__title { margin: 0; font-family: var(--font-heading); font-size: var(--font-size-h4); color: var(--color-text-primary); }
.amb-state__text { margin: 0; font-size: var(--font-size-caption); max-width: 40ch; }

/* OTP input ---------------------------------------------------------- */
.amb-otp {
    display: flex;
    gap: var(--space-8);
    justify-content: center;
}
.amb-otp input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-8);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}
.amb-otp input:focus {
    border-color: var(--color-primary-400);
    box-shadow: var(--focus-ring);
    outline: none;
}

/* Timeline ----------------------------------------------------------- */
.amb-timeline { display: flex; flex-direction: column; gap: var(--space-12); }
.amb-timeline__item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: var(--space-12);
    position: relative;
}
.amb-timeline__dot {
    width: 12px; height: 12px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--color-primary-300);
    justify-self: center;
}
.amb-timeline__item--pickup .amb-timeline__dot { background: var(--map-pickup); }
.amb-timeline__item--drop .amb-timeline__dot { background: var(--map-drop); }
.amb-timeline__item--stop .amb-timeline__dot { background: var(--map-stop); }
.amb-timeline__label { font-weight: 600; font-size: 14px; }
.amb-timeline__meta { font-size: var(--font-size-caption); color: var(--color-text-secondary); }

/* Utility ------------------------------------------------------------ */
.amb-grid { display: grid; gap: var(--space-16); }
.amb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.amb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.amb-row { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.amb-spacer { flex: 1 1 auto; }
.amb-muted { color: var(--color-text-secondary); }
.amb-small { font-size: var(--font-size-caption); }
.amb-mb-0 { margin-bottom: 0; }
.amb-mt-16 { margin-top: var(--space-16); }
.amb-text-right { text-align: right; }
.amb-stack { display: flex; flex-direction: column; gap: var(--space-8); }
.amb-no-scroll { overflow: hidden; }
.amb-field.is-invalid .amb-input,
.amb-field.is-invalid .amb-select,
.amb-field.is-invalid .amb-textarea { border-color: var(--color-error-500); }
.amb-field.is-valid .amb-input,
.amb-field.is-valid .amb-select { border-color: var(--color-success-500); }
.amb-field__error { display: none; font-size: 12px; color: var(--color-error-text); }
.amb-field.is-invalid .amb-field__error { display: block; }
.amb-field__hint { font-size: 12px; color: var(--color-text-secondary); }
.amb-form-message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-16);
    margin-bottom: var(--space-16);
    border: 1px solid var(--color-error-500);
    border-radius: var(--radius-8);
    background: var(--color-error-100);
    color: var(--color-error-text);
    font-size: 14px;
}
.amb-form-message[hidden] { display: none; }
.amb-form-actions { display: flex; justify-content: flex-end; gap: var(--space-8); margin-top: var(--space-16); }
.amb-otp-group { display: flex; flex-direction: column; gap: var(--space-8); }
.amb-theme-toggle { min-width: 40px; min-height: 40px; justify-content: center; }
.amb-toast.is-hiding { opacity: 0; transition: opacity 180ms ease; }

@media (max-width: 767px) {
    .amb-grid--2, .amb-grid--3 { grid-template-columns: 1fr; }
    .amb-btn { width: auto; }
}

/* List pages (Phase 14+) ---------------------------------------------- */
.amb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-bottom: var(--space-16); }
.amb-toolbar__search { flex: 1 1 240px; max-width: 360px; }
.amb-toolbar__spacer { flex: 1 1 auto; }
.amb-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-top: var(--space-16); font-size: 13px; color: var(--color-text-secondary); }
.amb-pagination__actions { display: flex; gap: var(--space-8); }
.amb-empty { padding: var(--space-40) var(--space-16); text-align: center; color: var(--color-text-secondary); }
.amb-table__actions { display: flex; gap: var(--space-8); justify-content: flex-end; white-space: nowrap; }
.amb-table__primary { font-weight: 600; }
.amb-table__muted { color: var(--color-text-secondary); font-size: 13px; }

/* Company editor (Phase 15) ------------------------------------------- */
.amb-check { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 14px; cursor: pointer; }
.amb-check input { width: 16px; height: 16px; }
.amb-color-row { display: flex; align-items: center; gap: var(--space-8); }
.amb-color-row input[type="color"] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-8); background: var(--color-bg-surface); cursor: pointer; }
.amb-brand-preview { display: flex; gap: var(--space-8); margin-top: var(--space-8); }
.amb-brand-preview__swatch { width: 34px; height: 34px; border-radius: var(--radius-8); border: 1px solid var(--color-border-soft); }
.amb-company-preview { margin-top: var(--space-8); }
.amb-company-preview img { max-width: 140px; max-height: 80px; border-radius: var(--radius-8); border: 1px solid var(--color-border-soft); background: var(--color-bg-subtle); padding: 4px; }