/* UX flow patch 2026-08-21: date-first search, guided booking, recovery and feedback. */
.availability-search-card,
.home-availability-launcher {
    display: grid;
    gap: 20px;
    padding: clamp(20px, 3vw, 32px);
    margin-bottom: 24px;
    border: 1px solid #c7d2fe;
    background: linear-gradient(135deg, #fff 0%, #eef2ff 100%);
}

.availability-search-card h2,
.home-availability-launcher h2 { margin: 4px 0 6px; }

.availability-search-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
    gap: 12px;
    align-items: end;
}

.availability-search-grid label { display: grid; gap: 6px; font-weight: 700; }
.availability-result-summary { padding: 12px 14px; border-radius: 12px; background: #ecfdf5; color: #065f46; }

/* Put the task users came to complete before management-oriented metrics. */
.home-dashboard-p0p2 .home-availability-launcher { order: -2; }
.home-dashboard-p0p2 .snapshot-top-card { order: -1; }

.booking-query-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    background: #ecfdf5;
    color: #065f46;
}
.booking-query-summary > div { display: grid; gap: 4px; }
.booking-query-summary strong { font-size: 1.05rem; }
.booking-query-summary span { color: #047857; }

.availability-search-editor {
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
}
.availability-search-editor > summary {
    cursor: pointer;
    padding: 13px 16px;
    color: #334155;
    font-weight: 750;
}
.availability-search-editor > form { padding: 0 16px 16px; }
.empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

.booking-stepper {
    position: sticky;
    top: 8px;
    z-index: 8;
    padding: 8px;
    margin: 14px 0 22px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
    backdrop-filter: blur(8px);
}

.booking-stepper ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.booking-stepper button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 44px;
    padding: 7px 10px;
    border: 0;
    border-radius: 11px;
    color: #475569;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.booking-stepper button > span:first-child {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #e2e8f0;
}

.booking-stepper button:hover,
.booking-stepper button:focus-visible,
.booking-stepper button[aria-current="step"] { color: #312e81; background: #eef2ff; }
.booking-stepper button[aria-current="step"] > span:first-child { color: #fff; background: #4f46e5; }
.booking-stepper button.is-complete > span:first-child { color: #fff; background: #16a34a; }

.booking-wizard-panel { scroll-margin-top: 92px; }
.booking-form.is-enhanced .booking-wizard-panel[hidden] { display: none !important; }
.booking-panel-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}
.booking-panel-actions .btn:last-child { margin-left: auto; }

.booking-review-card {
    padding: clamp(16px, 3vw, 24px);
    margin-bottom: 18px;
    border: 1px solid #c7d2fe;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff 0%, #eef2ff 100%);
}
.booking-review-card h2 { margin: 0 0 14px; font-size: 1.15rem; }
.booking-review-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}
.booking-review-card dl > div {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .82);
}
.booking-review-card dt { color: #64748b; font-size: .85rem; font-weight: 700; }
.booking-review-card dd { margin: 4px 0 0; color: #172554; font-weight: 750; overflow-wrap: anywhere; }
.booking-options-content { padding: 0 14px 14px; }
.nested-form-section { margin: 0; }

.advanced-time-fields,
.booking-options-disclosure {
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #f8fafc;
}

.advanced-time-fields > summary,
.booking-options-disclosure > summary {
    cursor: pointer;
    padding: 14px 16px;
    color: #334155;
    font-weight: 750;
}

.booking-options-disclosure > summary { display: grid; gap: 3px; font-size: 1.05rem; }
.booking-options-disclosure > summary small { color: #64748b; font-size: .88rem; font-weight: 500; }
.advanced-time-grid { padding: 4px 16px 12px; }
.advanced-time-fields > .field-help { display: block; padding: 0 16px 14px; }
.booking-options-disclosure > .form-section { margin: 0 14px 14px; }

.availability-alternatives {
    padding: 14px;
    border: 1px solid #fbbf24;
    border-radius: 14px;
    background: #fffbeb;
}

.availability-alternative-list { display: grid; gap: 8px; margin-top: 10px; }
.availability-recovery-group + .availability-recovery-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid #fde68a; }
.availability-recovery-group h3 { margin: 0; color: #78350f; font-size: 1rem; }
.availability-suggestion-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.availability-alternative-card {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #dbeafe;
    border-radius: 11px;
    color: #1e3a8a;
    text-align: left;
    text-decoration: none;
    background: #fff;
    font: inherit;
    cursor: pointer;
}
.availability-alternative-card:hover,
.availability-alternative-card:focus-visible { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .13); }
.availability-alternative-card span { color: #64748b; font-size: .9rem; }
.availability-alternative-card small { margin-top: 3px; color: #4338ca; font-weight: 700; }
.booking-form.is-saving-draft { cursor: progress; }
.booking-form.is-saving-draft [data-preserve-booking-draft],
.booking-form.is-saving-draft .availability-alternative-card { pointer-events: none; opacity: .66; }

.room-secondary-availability {
    margin-top: 16px;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #f8fafc;
}
.room-secondary-availability > summary {
    cursor: pointer;
    display: grid;
    gap: 3px;
    padding: 14px 16px;
    color: #334155;
}
.room-secondary-availability > summary span { color: #64748b; font-size: .9rem; font-weight: 500; }
.room-secondary-availability > .list-clean { padding: 0 14px 14px; }
.room-weekly-schedule.room-secondary-availability { padding: 0; }
.room-weekly-schedule.room-secondary-availability > .calendar-strip { padding: 0 16px 16px; }

.booking-actions-sticky {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 9;
    padding: 12px;
    border: 1px solid #dbe3ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -8px 28px rgba(15, 23, 42, .12);
    backdrop-filter: blur(8px);
}

[aria-invalid="true"] { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .13) !important; }
.calendar-book-selected { width: 100%; margin-top: 12px; }

.booking-status-guidance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #cbd5e1;
    border-left-width: 5px;
    border-radius: 16px;
    background: #fff;
}
.booking-status-guidance h2 { margin: 4px 0; }
.booking-status-guidance p { margin: 0; color: #475569; }
.booking-status-guidance.is-success { border-left-color: #16a34a; background: #f0fdf4; }
.booking-status-guidance.is-warning { border-left-color: #d97706; background: #fffbeb; }
.booking-status-guidance.is-danger { border-left-color: #dc2626; background: #fef2f2; }
.rejection-reason { margin-top: 12px; padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, .8); }
.table-rejection-note { display: block; max-width: 260px; margin-top: 8px; color: #991b1b; white-space: normal; }

.my-bookings-toolbar { align-items: flex-start; }
.my-bookings-toolbar .toolbar-search {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.my-bookings-toolbar .toolbar-search .input { min-width: min(310px, 70vw); }

.booking-view-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}
.booking-view-tabs a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    background: #fff;
    font-weight: 700;
}
.booking-view-tabs a:hover,
.booking-view-tabs a:focus-visible { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.booking-view-tabs a[aria-current="page"] { border-color: #4f46e5; color: #312e81; background: #eef2ff; }
.booking-view-tabs strong {
    display: grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0 6px;
    border-radius: 999px;
    color: #1e293b;
    background: #e2e8f0;
    font-size: .85rem;
}
.booking-view-tabs a[aria-current="page"] strong { color: #fff; background: #4f46e5; }
.result-summary { margin: 0 0 14px; }
.my-bookings-empty { margin-top: 16px; }

/* Desktop retains the compact table; mobile gets task-oriented cards. */
.my-booking-cards { display: none; }
.booking-task-card {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 17px;
    overflow: hidden;
    border: 1px solid #dbe3ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}
.booking-task-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--booking-accent, #4f46e5);
    content: "";
}
.booking-task-card header,
.booking-task-card header > div,
.booking-task-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.booking-task-card header { justify-content: space-between; }
.booking-task-card h2 { margin: 0; color: #172554; font-size: 1.08rem; }
.booking-task-card .booking-number { color: #64748b; font-size: .88rem; font-weight: 700; }
.booking-task-card dl { display: grid; gap: 8px; margin: 0; }
.booking-task-card dl > div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #eef2f7;
}
.booking-task-card dt { color: #64748b; font-size: .88rem; font-weight: 700; }
.booking-task-card dd { margin: 0; color: #1e293b; overflow-wrap: anywhere; }
.booking-task-actions { align-items: stretch; }
.booking-task-actions .btn { flex: 1 1 180px; }

.checkin-countdown {
    min-height: 48px;
    margin: 16px 0;
    padding: 12px 14px;
    border-radius: 12px;
    color: #1e3a8a;
    background: #eff6ff;
    font-weight: 750;
}
.checkin-error-state { max-width: 720px; margin: 40px auto; }

.account-status-panel { margin-bottom: 18px; padding: 14px; border-radius: 12px; }
.account-status-panel p { margin: 6px 0 0; }
.account-status-panel.is-pending { color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; }
.account-status-panel.is-rejected { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }

.admin-booking-actions { min-width: min(310px, 78vw); }
.admin-booking-actions > summary {
    cursor: pointer;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #334155;
    background: #f8fafc;
    font-weight: 700;
}
.admin-booking-actions[open] > summary { margin-bottom: 9px; }
.admin-booking-action-content { display: grid; gap: 12px; }
.admin-approval-form,
.admin-secondary-actions,
.admin-delete-form { display: grid; gap: 10px; }
.admin-approval-form .btn,
.admin-secondary-actions .btn,
.admin-action-links .btn,
.admin-delete-form .btn { min-height: 42px; white-space: normal; }

.admin-filter-panel {
    display: grid;
    gap: 16px;
    padding: clamp(18px, 3vw, 26px);
    margin-bottom: 18px;
    border: 1px solid #dbe3ee;
    border-radius: 16px;
    background: #fff;
}
.admin-filter-heading,
.admin-filter-panel .booking-search-summary,
.admin-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-filter-heading,
.admin-filter-panel .booking-search-summary { justify-content: space-between; }
.admin-filter-heading h2 { margin: 3px 0 0; font-size: 1.2rem; }
.admin-booking-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(150px, 1fr));
    gap: 12px;
    align-items: end;
}
.admin-booking-filter-form label { display: grid; gap: 6px; min-width: 0; font-weight: 700; }
.admin-booking-filter-form .booking-search-actions {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 8px;
}

.admin-system-readiness {
    margin: 0 0 18px;
    border: 1px solid #fbbf24;
    border-radius: 14px;
    background: #fffbeb;
}
.admin-system-readiness > summary,
.admin-system-readiness .alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.admin-system-readiness > summary {
    cursor: pointer;
    padding: 13px 16px;
    color: #78350f;
    font-weight: 750;
}
.admin-system-readiness-content { display: grid; gap: 10px; padding: 0 14px 14px; }
.admin-system-readiness .alert { margin: 0; }
.admin-system-readiness .alert p { margin: 4px 0 0; }
.admin-booking-table-card .table-wrap { min-height: 220px; }

.approval-decision {
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 0;
    border: 0;
}
.approval-decision legend { margin-bottom: 4px; color: #334155; font-weight: 800; }
.approval-decision-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
}
.approval-decision-option:has(input:checked) {
    border-color: #4f46e5;
    background: #eef2ff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.approval-decision-option input { margin-top: 4px; }
.approval-decision-option span { display: grid; gap: 2px; }
.approval-decision-option small { color: #64748b; font-weight: 500; }
.admin-rejection-fields {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid #fecaca;
    border-radius: 11px;
    background: #fef2f2;
}
.admin-rejection-fields[hidden] { display: none !important; }
.admin-rejection-fields label { font-weight: 700; }
.admin-secondary-actions,
.admin-action-links { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-secondary-actions .btn,
.admin-action-links .btn { flex: 1 1 120px; }
.admin-delete-disclosure { padding-top: 8px; border-top: 1px solid #e2e8f0; }
.admin-delete-disclosure > summary { cursor: pointer; color: #991b1b; font-size: .9rem; font-weight: 700; }
.admin-delete-form { padding-top: 10px; }
.admin-delete-form label { font-weight: 700; }

/* Accessible replacement for native confirm() with a safe browser fallback. */
.confirmation-dialog {
    width: min(520px, calc(100vw - 28px));
    max-width: none;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 18px;
    color: #1e293b;
    background: transparent;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .34);
}
.confirmation-dialog::backdrop { background: rgba(15, 23, 42, .64); backdrop-filter: blur(3px); }
.confirmation-dialog-surface {
    display: grid;
    gap: 14px;
    padding: clamp(20px, 4vw, 28px);
    border: 1px solid #dbe3ee;
    border-radius: 18px;
    background: #fff;
}
.confirmation-dialog h2 { margin: 0; color: #172554; }
.confirmation-dialog p { margin: 0; color: #475569; line-height: 1.65; }
.confirmation-dialog-summary {
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    color: #334155;
    background: #f8fafc;
    overflow-wrap: anywhere;
}
.confirmation-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.confirmation-dialog-actions .btn { min-width: 145px; }

@media (max-width: 1180px) {
    .admin-booking-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
    .availability-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .booking-view-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .my-booking-cards { display: grid; gap: 12px; }
    .my-bookings-table { display: none; }
    .my-bookings-toolbar .toolbar-search { width: 100%; justify-content: stretch; }
    .my-bookings-toolbar .toolbar-search .input { flex: 1 1 100%; min-width: 0; }
}

@media (max-width: 680px) {
    .availability-search-grid { grid-template-columns: 1fr; }
    .booking-stepper { position: static; }
    .booking-stepper ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .booking-stepper button { flex-direction: column; gap: 3px; padding: 6px 4px; font-size: .8rem; }
    .booking-stepper .step-name { display: inline; font-size: .75rem; }
    .booking-review-card dl { grid-template-columns: 1fr; }
    .booking-panel-actions { align-items: stretch; flex-direction: column-reverse; }
    .booking-panel-actions .btn { width: 100%; margin-left: 0 !important; }
    .booking-query-summary { align-items: flex-start; flex-direction: column; }
    .booking-status-guidance { align-items: stretch; flex-direction: column; }
    .booking-status-guidance .btn { width: 100%; }
    .booking-actions-sticky { bottom: calc(70px + env(safe-area-inset-bottom)); }
    .booking-view-tabs {
        display: flex;
        padding-bottom: 4px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }
    .booking-view-tabs a { flex: 0 0 auto; min-width: 142px; scroll-snap-align: start; }
    .booking-task-card dl > div { grid-template-columns: 82px minmax(0, 1fr); }
    .admin-booking-filter-form { grid-template-columns: 1fr; }
    .admin-booking-filter-form .booking-search-actions { grid-column: auto; }
    .admin-system-readiness-content .alert { align-items: stretch; flex-direction: column; }
    .admin-secondary-actions .btn,
    .admin-action-links .btn { flex-basis: 100%; }
    .confirmation-dialog-actions { flex-direction: column-reverse; }
    .confirmation-dialog-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .booking-stepper,
    .booking-actions-sticky { backdrop-filter: none; }
}