/* ── Brand tokens ─────────────────────────────────────────────────────────────
   Travel's own palette: the MAUI app's palette (Resources/Styles/Colors.xaml): navy chrome, blue actions.
   Everything below derives from these so both themes stay in sync. */
:root {
    --travel-navy: #10233F;
    --travel-navy-2: #18345C;
    --travel-accent: #075BCB;
    --travel-accent-hover: #06479E;
    --travel-accent-soft: #E1ECFF;
    --travel-muted: #5B6678;
    --travel-warning: #775500;
    --travel-link: #075BCB;
    --travel-focus: #075BCB;
    --travel-radius: 14px;

    --bs-primary: var(--travel-accent);
    --bs-primary-rgb: 7, 91, 203;
    --bs-link-color: var(--travel-link);
    --bs-link-color-rgb: 7, 91, 203;
    --bs-link-hover-color: var(--travel-accent-hover);
    --bs-link-hover-color-rgb: 6, 71, 158;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-bg: #F6F8FC;
}

[data-bs-theme="dark"] {
    --travel-accent: #8AB4F8;
    --travel-accent-hover: #B8D3FA;
    --travel-accent-soft: #18345C;
    --travel-muted: #AEB8C8;
    --travel-warning: #FFD884;
    --travel-link: #8AB4F8;
    --travel-focus: #8AB4F8;
    --bs-primary: var(--travel-accent);
    --bs-primary-rgb: 138, 180, 248;
    --bs-link-color: var(--travel-link);
    --bs-link-color-rgb: 138, 180, 248;
    --bs-link-hover-color: #DDE9F9;
    --bs-link-hover-color-rgb: 221, 233, 249;
    --bs-body-bg: #101318;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html, body { font-family: var(--bs-body-font-family); }
body { font-size: 1rem; line-height: 1.6; background: var(--bs-body-bg); }
h1, h2, h3, h4, h5, h6 { font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; }
small, .small, .badge { font-size: .875rem; }
code { font-size: .875rem; }
a, .btn-link { color: var(--bs-link-color); }
.text-muted { color: var(--travel-muted) !important; }
.text-warning { color: var(--travel-warning) !important; }
[data-bs-theme="dark"] .text-danger { color: #FF9B95 !important; }
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand) { color: var(--travel-link); }

.content { max-width: 1200px; margin-inline: auto; padding-top: 1.1rem; padding-bottom: 3rem; overflow-wrap: anywhere; }
.content .d-flex { flex-wrap: wrap; }
.content .flex-grow-1 { min-width: 0; }
.content p, .content h1, .content h2, .content h5, .content a, .content code { overflow-wrap: anywhere; }
.content .form-control, .content .form-select { max-width: 100%; }
h1:focus { outline: none; }

/* ── Buttons & forms ──────────────────────────────────────────────────────── */
.btn, .form-control, .form-select, summary { min-height: 44px; }
.btn { white-space: normal; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.btn-sm { font-size: .875rem; min-height: 36px; }
.btn > .bi:first-child { margin-right: .4rem; }
.btn-primary {
    --bs-btn-bg: var(--travel-accent); --bs-btn-border-color: var(--travel-accent);
    --bs-btn-hover-bg: var(--travel-accent-hover); --bs-btn-hover-border-color: var(--travel-accent-hover);
    --bs-btn-active-bg: var(--travel-accent-hover); --bs-btn-active-border-color: var(--travel-accent-hover);
    --bs-btn-disabled-bg: var(--travel-accent); --bs-btn-disabled-border-color: var(--travel-accent);
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
}
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #10233F; --bs-btn-hover-color: #10233F; --bs-btn-active-color: #10233F; --bs-btn-disabled-color: #10233F;
}
.btn-outline-primary {
    --bs-btn-color: var(--travel-accent); --bs-btn-border-color: var(--travel-accent);
    --bs-btn-hover-bg: var(--travel-accent); --bs-btn-hover-border-color: var(--travel-accent); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--travel-accent); --bs-btn-active-border-color: var(--travel-accent); --bs-btn-active-color: #fff;
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-hover-color: #10233F; --bs-btn-active-color: #10233F; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #c1cbd6; --bs-btn-border-color: #8998aa; --bs-btn-hover-bg: #c1cbd6; --bs-btn-hover-color: #14243a; }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #FF9B95; --bs-btn-border-color: #FF9B95; }
.form-control, .form-select { border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: var(--travel-focus); box-shadow: 0 0 0 .25rem rgba(7, 91, 203, .25); }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem var(--travel-focus); }
:focus-visible { outline: 3px solid var(--travel-focus); outline-offset: 3px; }
label:has(input:focus-visible) { outline: 3px solid var(--travel-focus); outline-offset: 3px; }
.form-check-input:checked { background-color: var(--travel-accent); border-color: var(--travel-accent); }
.darker-border-checkbox.form-check-input { border-color: #929292; }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }
.clickable { cursor: pointer; }
.pre-wrap { white-space: pre-wrap; }

/* ── Width helpers (replace per-page inline max-widths) ───────────────────── */
.narrow { max-width: 480px; }
.narrow-md { max-width: 560px; }
.narrow-lg { max-width: 640px; }
.narrow-xl { max-width: 720px; }
.field-row { max-width: 420px; }
.select-md { max-width: 320px; }
.text-uppercase-input { text-transform: uppercase; }

/* ── Cards & sections ─────────────────────────────────────────────────────── */
.content .card { border-radius: var(--travel-radius); border-color: var(--bs-border-color-translucent); }
.content .card-body { padding: 1.25rem; }
.card-title { margin-bottom: .25rem; }
.trip-card-img { height: 150px; object-fit: cover; }
.trip-hero-img { width: 100%; max-height: 260px; object-fit: cover; }
.card-route { border-left: 3px solid var(--travel-accent); }
.segment-icon { font-size: 1.6rem; line-height: 1; color: var(--travel-accent); width: 2rem; text-align: center; flex-shrink: 0; }
.segment-icon-sm { font-size: 1.25rem; }
.timeline-anchor { scroll-margin-top: 4.5rem; }
.next-up { border-left: 5px solid var(--travel-accent); padding: 1.25rem; background: var(--travel-accent-soft); border-radius: var(--travel-radius); margin: 1rem 0; }
.next-up h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--travel-muted); margin-bottom: .25rem; }
.travel-time { font-size: 1.125rem; font-weight: 600; }
.day-heading { margin: 1.75rem 0 .75rem; }
.booking-section { margin-block: .75rem; }
.booking-section > summary { font-weight: 600; cursor: pointer; }
.feedback { min-height: 1.5rem; }
.page-header { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.page-header h1 { margin-bottom: 0; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.route-preview { max-width: 100%; max-height: 200px; object-fit: cover; }
.brand-logo { height: 26px; border-radius: 6px; }
.about-logo { height: 64px; border-radius: 14px; }

/* ── Loading ──────────────────────────────────────────────────────────────── */
.loading { display: flex; align-items: center; gap: .6rem; color: var(--travel-muted); margin: 1rem 0; }
.loading .spinner-border { color: var(--travel-accent); }
.skeleton-card { border-radius: var(--travel-radius); border: 1px solid var(--bs-border-color-translucent); overflow: hidden; }
.skeleton-card .skeleton-img { height: 150px; background: var(--bs-tertiary-bg); }
.placeholder { border-radius: 6px; }

/* ── Manage trip dialog ───────────────────────────────────────────────────── */
.manage-section { padding-block: 1rem; border-top: 1px solid var(--bs-border-color); }
.manage-section:first-of-type { border-top: 0; padding-top: 0; }
.manage-section h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--travel-muted); margin-bottom: .75rem; }
.manage-section .form-label { margin-bottom: .25rem; }
.share-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .25rem .25rem .75rem; border-radius: 999px; background: var(--bs-tertiary-bg); margin: 0 .35rem .35rem 0; }

/* ── Trip views (Overview / Day planner tabs) ─────────────────────────────── */
.trip-navigation { display: flex; gap: .4rem; border-bottom: 1px solid var(--bs-border-color); margin: 1rem 0 1.25rem; }
.trip-navigation a { padding: .75rem 1rem; min-height: 44px; text-decoration: none; color: var(--travel-muted); border-bottom: 3px solid transparent; font-weight: 600; }
.trip-navigation a.selected { border-color: var(--travel-accent); color: var(--travel-accent); }
.plan-note { color: var(--travel-muted); font-size: .95rem; }

/* ── Date entry ───────────────────────────────────────────────────────────── */
.calendar-field { flex: 0 1 180px; min-width: 0; }
.calendar-field .form-label { font-size: .8rem; margin-bottom: .15rem; }
.flatpickr-calendar { font-family: var(--bs-body-font-family); }
[data-bs-theme="dark"] .flatpickr-calendar { filter: invert(.9) hue-rotate(180deg); }

/* ── Plan & book ──────────────────────────────────────────────────────────── */
.plan-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.plan-row input { flex: 1 1 10rem; }
.plan-row input[type="date"] { flex: 0 1 11rem; }

/* ── Itinerary planner ────────────────────────────────────────────────────── */
.planner-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: start; padding: .75rem 0; border-bottom: 1px solid var(--bs-border-color); }
.planner-row.draggable { cursor: grab; }
.planner-time { width: 3rem; flex-shrink: 0; }
.planner-title { flex: 1 1 12rem; min-width: 0; }
.planner-edit input { flex: 1 1 8rem; }
.planner-edit input[type="time"] { flex: 0 1 7rem; }
.grip { cursor: grab; color: var(--travel-muted); }
.ideas-map { height: 260px; }
.idea-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.idea-thumb-placeholder { width: 52px; height: 52px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bs-tertiary-bg); color: var(--travel-accent); }
.action-menu { position: relative; }
.action-menu > summary { cursor: pointer; padding: .5rem .8rem; border: 1px solid var(--bs-border-color); border-radius: 10px; }
.action-menu[open] > .menu-content { padding: .75rem; margin-top: .5rem; border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--bs-body-bg); display: grid; gap: .5rem; }

/* ── Maps ─────────────────────────────────────────────────────────────────── */
.map-canvas { height: 72vh; border-radius: 12px; }

/* ── Inbox ────────────────────────────────────────────────────────────────── */
.inbox-table { width: 100%; table-layout: fixed; }
.inbox-table td, .inbox-table th { overflow-wrap: anywhere; }
.inbox-table th:first-child { width: 32%; }
.inbox-tools { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
.inbox-tools input { flex: 1 1 16rem; }

/* ── Dialog ───────────────────────────────────────────────────────────────── */
.ui-dialog { border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 1.25rem; background: var(--bs-body-bg); color: var(--bs-body-color); width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; }
.ui-dialog::backdrop { background: rgb(0 0 0 / .5); }
body:has(dialog[open]) { overflow: hidden; }
.ui-dialog header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1rem; }
.ui-dialog header h2 { margin: 0; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

/* ── Auth pages ───────────────────────────────────────────────────────────── */
.auth-page { min-height: 70vh; display: flex; justify-content: center; align-items: center; }
.auth-card { width: min(380px, 100%); }
.auth-card.wide { width: min(420px, 100%); }
.auth-logo { height: 88px; border-radius: 18px; }

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 3000; padding: .75rem; background: var(--bs-body-bg); }
.skip-link:focus { top: .5rem; }
.flag { margin-bottom: 2px; }
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .content { padding-inline: 1rem !important; }
    .content .row > .col { flex: 0 0 100%; }
    .field-pair { grid-template-columns: 1fr; }
    .planner-row > .action-menu { flex-basis: 100%; }
    .page-actions { width: 100%; }
    .page-actions > .btn { flex: 1 1 auto; }
    .plan-row input, .plan-row input[type="date"] { flex: 1 1 100%; }
    .inbox-table, .inbox-table tbody { display: block; }
    .inbox-table thead { display: none; }
    .inbox-table tr { display: block; border: 1px solid var(--bs-border-color); border-radius: var(--travel-radius); margin-bottom: 1rem; padding: 1rem; }
    .inbox-table td { display: block; border: 0; padding: .35rem 0; background: transparent; }
    .inbox-table td::before { content: attr(data-label); display: block; font-weight: 600; }
}

/* ── Account page ─────────────────────────────────────────────────────────── */
.profile-avatar { flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--travel-accent); color: #fff; font-size: 1.2rem; font-weight: 700; }
.min-width-0 { min-width: 0; }

/* ── Page header title block, booking titles, inbox columns ──────────────── */
.page-header { align-items: flex-start; }
.page-title { flex: 1 1 20rem; min-width: 0; }
.booking-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.booking-title .badge { font-size: .7rem; font-weight: 600; }
.inbox-table th:nth-child(2) { width: 18%; }
.inbox-table th:nth-child(3) { width: 15%; }
.inbox-table th:nth-child(5) { width: 19%; }
.inbox-mailbox { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.inbox-actions { flex-wrap: wrap; align-items: center; }

/* ── Booking card footer, planner rows, empty states ─────────────────────── */
.booking-ref { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block: .5rem; }
.booking-section { margin-block: .5rem; }
.booking-section > summary { font-size: .9rem; color: var(--travel-muted); }
.booking-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--bs-border-color-translucent); font-size: .85rem; color: var(--travel-muted); }
.booking-meta a { text-decoration: none; }
.booking-meta code { color: inherit; }
.planner-note { display: block; font-size: .85rem; color: var(--travel-muted); }
.planner-row .grip { opacity: .4; transition: opacity .15s; }
.planner-row:hover .grip, .planner-row:focus-within .grip { opacity: 1; }
.planner-menu > summary { font-size: .85rem; padding: .3rem .6rem; color: var(--travel-muted); border-color: transparent; list-style: none; }
.planner-menu > summary::-webkit-details-marker { display: none; }
.planner-menu > summary:hover, .planner-menu[open] > summary { border-color: var(--bs-border-color); color: var(--bs-body-color); }
.empty-state { text-align: center; padding: 2.5rem 1.5rem; border: 1px dashed var(--bs-border-color); border-radius: var(--travel-radius); max-width: 36rem; margin: 1.5rem auto; }
.empty-state > .bi { font-size: 2.25rem; color: var(--travel-accent); }
.empty-state h2 { margin-top: .5rem; }
.empty-state p { color: var(--travel-muted); margin-bottom: 1rem; }
.empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }