/*
 * Sync-Voyage CRM — Sync-Voyage.css
 * Centralized component styles
 * Load via: <link rel="stylesheet" href="{% static 'css/Sync-Voyage.css' %}">
 */

/* ── Light mode tokens ─────────────────────────────────────────────────────── */
/* Tenant primary colors are overridden via inline <style> in base.html        */
:root {
    /* Brand / tenant primary (accent: icons, borders, focus rings) */
    --color-primary: #14b8a6;
    --color-primary-hover: #0d9488;
    --color-primary-bg: #f0fdfa;

    /* Button colors — bright teal with dark label, matching dark mode
       (#14b8a6 vs #0f172a is the same pairing dark mode ships). */
    --color-button: #14b8a6;
    --color-button-hover: #22c9b5;
    --color-button-text: #0f172a;

    /* Brand-colored text directly on the page background (e.g. breadcrumb
       hover) — a shade picked for guaranteed WCAG AA 4.5:1 against
       --color-bg (see apps/tenant_settings/themes.py::_select_accent_text_shade),
       unlike --color-primary above which is unchecked and too light here. */
    --color-accent-text: #115e59;

    /* Nav bar background/label — mode-independent "always dark chrome"
       (see apps/tenant_settings/themes.py::_select_nav_shade); no
       [data-theme="dark"] override on purpose, same as --color-ramp-*. */
    --color-nav-bg: #042f2c;
    --color-nav-text: #ffffff;

    /* Page chrome */
    --color-bg: #d8dedc;
    --color-surface: #ffffff;
    --color-surface-raised: #f8fafc;
    --color-surface-sunken: #f1f5f9;

    /* Borders */
    --color-border: #94a3b8;
    --color-border-subtle: #f1f5f9;
    --color-border-strong: #64748b;

    /* Text hierarchy */
    --color-text: #0f172a;
    --color-text-secondary: #374151;
    --color-text-muted: #64748b;
    --color-text-faint: #94a3b8;

    /* Semantic dark surface (nav-style headers, active pills) */
    --color-navy: #0d1b2a;
    --color-navy-text: #ffffff;

    /* Danger */
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-bg: #fef2f2;

    /* Scrollbar — mode-independent "always dark chrome", same reasoning as
       --color-nav-bg above; keeps the scrollbar from reading as a light seam
       next to the dark nav bar in either mode. */
    --color-scrollbar: #475569;
    --color-scrollbar-track: #1e293b;
}

/* ── Dark mode tokens ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-surface-raised: #253044;
    --color-surface-sunken: #172033;

    --color-border: #334155;
    --color-border-subtle: #1e2d40;
    --color-border-strong: #475569;

    --color-text: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-faint: #94a3b8;

    --color-navy: #162032;
    --color-navy-text: #ffffff;

    --color-danger: #f87171;
    --color-danger-hover: #ef4444;
    --color-danger-bg: #3f1111;

    /* Accent (icons/borders/focus) — keep bright on dark surfaces */
    --color-primary: #2dd4bf;
    --color-primary-hover: #14b8a6;

    /* Primary button — bright teal, dark label; gentle brighten on hover
       (softened lift between teal-500 and teal-400; full #2dd4bf read too vivid) */
    --color-button: #14b8a6;
    --color-button-hover: #22c9b5;
    --color-button-text: #0f172a;

    /* Brand-colored text directly on the page background — see the :root
       definition above; dark mode's near-black bg lets this stay bright. */
    --color-accent-text: #2dd4bf;
}

/* ── Tailwind utility overrides — make bg-teal-* respect the tenant color ──── */
/* bg-teal-500/600 → button variables so white text always meets WCAG AA 4.5:1  */
.bg-teal-500 {
    background-color: var(--color-button) !important;
}
.bg-teal-600 {
    background-color: var(--color-button-hover) !important;
}
.hover\:bg-teal-500:hover {
    background-color: var(--color-button) !important;
}
.hover\:bg-teal-600:hover {
    background-color: var(--color-button-hover) !important;
}
.hover\:bg-teal-100:hover {
    background-color: var(--color-primary-bg) !important;
}
.bg-teal-50 {
    background-color: var(--color-primary-bg) !important;
}
.hover\:bg-teal-50:hover {
    background-color: var(--color-primary-bg) !important;
}
.text-teal-500 {
    color: var(--color-primary) !important;
}
.text-teal-600 {
    color: var(--color-primary-hover) !important;
}
.text-teal-700 {
    color: var(--color-primary-hover) !important;
}
.hover\:text-teal-600:hover {
    color: var(--color-primary-hover) !important;
}
.hover\:text-teal-700:hover {
    color: var(--color-primary-hover) !important;
}
.border-teal-500 {
    border-color: var(--color-primary) !important;
}
.border-teal-200 {
    border-color: var(--color-primary-bg) !important;
}
.focus\:border-teal-500:focus {
    border-color: var(--color-primary) !important;
}
.focus\:ring-teal-500:focus {
    --tw-ring-color: var(--color-primary) !important;
}
.group-hover\:text-teal-500 {
    color: var(--color-primary) !important;
}
.group-hover\:text-teal-600 {
    color: var(--color-primary-hover) !important;
}
.group-hover\:text-teal-700 {
    color: var(--color-primary-hover) !important;
}
.group-hover\:bg-teal-400 {
    background-color: var(--color-primary) !important;
}
/* dark:text-teal-400 is exactly today's dark-mode --color-primary value. */
[data-theme="dark"] .dark\:text-teal-400 {
    color: var(--color-primary) !important;
}
[data-theme="dark"] .dark\:hover\:text-teal-400:hover {
    color: var(--color-primary) !important;
}
[data-theme="dark"] .group:hover .dark\:group-hover\:text-teal-400 {
    color: var(--color-primary) !important;
}
[data-theme="dark"] .group\/client:hover .dark\:group-hover\/client\:text-teal-400 {
    color: var(--color-primary) !important;
}

/* ── Remaining accent-role classes (thin borders/rings/text) — same
   toggle-reactive --color-primary / --color-primary-hover as above, just
   shades/variants the first pass didn't cover. ──────────────────────────── */
.hover\:text-teal-500:hover,
[data-theme="dark"] .dark\:text-teal-500 {
    color: var(--color-primary) !important;
}
.text-teal-800,
.hover\:text-teal-800:hover,
.group-hover\/client\:text-teal-600,
[data-theme="dark"] .dark\:text-teal-300 {
    color: var(--color-primary-hover) !important;
}
.hover\:border-teal-400:hover,
.ring-teal-400,
.focus\:ring-teal-400:focus,
.focus-within\:border-teal-500:focus-within,
.focus-within\:ring-teal-500:focus-within,
.focus-visible\:ring-teal-500:focus-visible,
.peer:checked ~ .peer-checked\:border-teal-500,
.peer:checked ~ .peer-checked\:ring-teal-500 {
    border-color: var(--color-primary) !important;
    --tw-ring-color: var(--color-primary) !important;
}
.shadow-teal-500\/20 {
    --tw-shadow-color: var(--color-primary) !important;
}

/* ── Remaining button-role classes (solid teal-500/600/700 fills) ────────── */
.hover\:bg-teal-400:hover,
.hover\:bg-teal-500:hover,
.peer:checked ~ .peer-checked\:bg-teal-500 {
    background-color: var(--color-button) !important;
}
.hover\:bg-teal-700:hover,
.focus\:bg-teal-600:focus,
.bg-teal-700 {
    background-color: var(--color-button-hover) !important;
}
.hover\:border-teal-600:hover {
    border-color: var(--color-button-hover) !important;
}

/* ── Remaining light-tint classes (teal-50/100/200-family) — same
   --color-primary-bg as the first pass. Split by property so, e.g., a
   text-only class doesn't pick up an unwanted background/border. ────────── */
.bg-teal-100,
.hover\:bg-teal-100:hover {
    background-color: var(--color-primary-bg) !important;
}
.border-teal-100,
.hover\:border-teal-300:hover,
.hover\:border-teal-200:hover {
    border-color: var(--color-primary-bg) !important;
}
.text-teal-100,
.text-teal-200 {
    color: var(--color-primary-bg) !important;
}

/* ── Dark-tint badge/callout idiom ────────────────────────────────────────
   Repeated pattern across ~15 templates: `bg-teal-50 dark:bg-teal-900/NN
   border border-teal-100 dark:border-teal-800` — a light tint in light mode,
   a translucent dark tint in dark mode. This exposed a real pre-existing bug:
   the light-tint rules above are unconditional `!important`, which was
   silently beating the more-specific `[data-theme="dark"] .dark\:bg-teal-900`
   selector (an !important declaration always wins over specificity alone),
   so these badges have been showing the LIGHT tint in dark mode this whole
   time, regardless of any tenant color. Fixed here by giving the dark
   variants their own !important overrides scoped under [data-theme="dark"],
   using color-mix() against the new mode-independent color-ramp-900/800
   variables (apps/tenant_settings/themes.py) so every opacity level in use
   (/10 /20 /30 /40 /50) is covered without hardcoding each blend by hand. */
[data-theme="dark"] .dark\:bg-teal-900\/10 {
    background-color: color-mix(in srgb, var(--color-ramp-900) 10%, transparent) !important;
}
[data-theme="dark"] .dark\:bg-teal-900\/20 {
    background-color: color-mix(in srgb, var(--color-ramp-900) 20%, transparent) !important;
}
[data-theme="dark"] .dark\:bg-teal-900\/30,
[data-theme="dark"] .dark\:hover\:bg-teal-900\/30:hover {
    background-color: color-mix(in srgb, var(--color-ramp-900) 30%, transparent) !important;
}
[data-theme="dark"] .dark\:bg-teal-900\/40 {
    background-color: color-mix(in srgb, var(--color-ramp-900) 40%, transparent) !important;
}
[data-theme="dark"] .dark\:bg-teal-900\/50,
[data-theme="dark"] .dark\:hover\:bg-teal-900\/50:hover {
    background-color: color-mix(in srgb, var(--color-ramp-900) 50%, transparent) !important;
}
[data-theme="dark"] .dark\:border-teal-800 {
    border-color: var(--color-ramp-800) !important;
}

/* ── "Always dark" chrome (nav bar, auth-page headers, a few permanently-
   dark cards like Data Management) — these have no dark: counterpart at all
   because the element itself never changes with the light/dark toggle, so
   they need the theme's fixed shade rather than the toggle-reactive
   --color-primary/-hover, which would otherwise flip to the LIGHT shades
   when the site is in light mode and look wrong against their own
   permanently-dark background. Deliberately excludes two documentation-only
   swatches that must show the literal Tailwind color, not the tenant's:
   the style guide's raw teal-300 token swatch (_tokens.html) and the
   itinerary report cover style preview's teal-to-slate gradient (decorative
   example, not a themed element). */
.text-teal-400,
.hover\:text-teal-400:hover,
.group-hover\:text-teal-400 {
    color: var(--color-ramp-400) !important;
}
.hover\:text-teal-300:hover {
    color: var(--color-ramp-300) !important;
}
.border-teal-700 {
    border-color: var(--color-ramp-700) !important;
}
.border-teal-800\/40 {
    border-color: color-mix(in srgb, var(--color-ramp-800) 40%, transparent) !important;
}
.bg-teal-900\/20 {
    background-color: color-mix(in srgb, var(--color-ramp-900) 20%, transparent) !important;
}
.bg-teal-900\/30,
.hover\:bg-teal-900\/30:hover {
    background-color: color-mix(in srgb, var(--color-ramp-900) 30%, transparent) !important;
}
.bg-teal-900\/40 {
    background-color: color-mix(in srgb, var(--color-ramp-900) 40%, transparent) !important;
}

/* ── Dark label on bright-teal surfaces (both light & dark modes) ──────────── */
/* Ad-hoc `bg-teal-* text-white` buttons/pills/avatars keep literal white text   */
/* while their background is recolored to bright teal, giving harsh white-on-teal.*/
/* Force a label color matched to whichever button-role variable that shade      */
/* actually resolves to: -400/-500 map to --color-button, -600 maps to           */
/* --color-button-hover (a different, and not always equally-contrasting, shade  */
/* of the ramp) — so it needs its own contrast-checked text color rather than    */
/* reusing --color-button-text, which was only ever computed against --color-button. */
/* Lucide icons inside inherit it via currentColor.                              */
.bg-teal-400.text-white,
.bg-teal-500.text-white {
    color: var(--color-button-text) !important;
}
.bg-teal-600.text-white {
    color: var(--color-button-hover-text) !important;
}

/* ── Nav dropdown: active item text — dark mode only ───────────────────────── */
/* Must use !important + higher specificity to beat the .text-teal-700 override  */
/* that maps to --color-primary-hover (user-defined). Scoped to .dropdown-panel  */
/* so no other teal-700 text in the app is affected.                             */
[data-theme="dark"] .dropdown-panel .text-teal-700 {
    color: #ffffff !important;
}
[data-theme="dark"] .dropdown-panel .bg-teal-50 {
    background-color: #0f172a !important;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
body {
    font-family: "Inter", system-ui, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}
.font-display {
    font-family: "Sora", system-ui, sans-serif;
}
.font-mono {
    font-family: "JetBrains Mono", monospace;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track);
}
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar);
    border-radius: 4px;
}

/* ── Animations ────────────────────────────────────────────────────────────── */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.page-enter {
    animation: fadeIn 200ms ease both;
}

/* ── HTMX ──────────────────────────────────────────────────────────────────── */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms;
}
.htmx-request .htmx-indicator {
    opacity: 1;
}

/* ── Nav ───────────────────────────────────────────────────────────────────── */
/* Theme-derived background instead of the fixed bg-navy-900 Tailwind class —
   mode-independent, see --color-nav-bg above. */
.nav-bar {
    background: var(--color-nav-bg);
}
.nav-brand {
    color: var(--color-nav-text);
}
/* Backing chip for an agency-uploaded logo image. Logos are arbitrary
   uploads designed for a light background (dark wordmarks, transparent PNGs
   expecting white behind them) — since the nav bg is permanently dark, give
   the image its own light plate instead of assuming any given logo reads
   against color-nav-bg. Fixed white, not a token: this needs to look right
   against the logo's own colors, not shift with the toggle/theme. */
.nav-logo-chip {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    padding: 0.375rem 0.625rem;
    display: flex;
    align-items: center;
}
/* Same rationale as .nav-logo-chip, sized for the larger logo on the dark
   auth pages (login, 2FA wizard). */
.auth-logo-chip {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
}
/* Uses the button pair rather than color-primary: a solid pill with a text
   label needs the same guaranteed-4.5:1 shade a button does, not the
   thin-accent color (which a hardcoded #fff label used to sit on — as low as
   3.24:1 for Thistle's dark-mode accent). color-button/-text is already
   covered by ThemeContrastTests, so this can't regress per-theme. */
.nav-active {
    background: var(--color-button);
    color: var(--color-button-text);
    border-radius: 6px;
}
/* Agency Settings tab/sub-pills: same theme-derived dark chrome as the nav
   bar itself, so these pills shade the same way per selected theme. */
.settings-tab-active {
    background: var(--color-nav-bg);
    color: var(--color-nav-text);
}

/* ── Status badges ─────────────────────────────────────────────────────────── */
.badge-confirmed {
    background: #d1fae5;
    color: #065f46;
}
.badge-pending {
    background: #fef3c7;
    color: #92400e;
}
.badge-completed {
    background: #dbeafe;
    color: #1e40af;
}
.badge-cancelled {
    background: #fee2e2;
    color: #991b1b;
}
.badge-draft {
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
}
.badge-in_progress {
    background: #ede9fe;
    color: #5b21b6;
}
.badge-ticketed {
    background: #f0fdf4;
    color: #166534;
}
.badge-refunded {
    background: #f0f9ff;
    color: #0369a1;
}

[data-theme="dark"] .badge-confirmed {
    background: #064e3b;
    color: #6ee7b7;
}
[data-theme="dark"] .badge-pending {
    background: #78350f;
    color: #fcd34d;
}
[data-theme="dark"] .badge-completed {
    background: #1e3a8a;
    color: #93c5fd;
}
[data-theme="dark"] .badge-cancelled {
    background: #7f1d1d;
    color: #fca5a5;
}
[data-theme="dark"] .badge-in_progress {
    background: #3b0764;
    color: #c4b5fd;
}
[data-theme="dark"] .badge-ticketed {
    background: #14532d;
    color: #86efac;
}
[data-theme="dark"] .badge-refunded {
    background: #0c4a6e;
    color: #7dd3fc;
}

/* ── Client status dots ────────────────────────────────────────────────────── */
.dot-green {
    background: var(--color-primary);
}
.dot-amber {
    background: #f59e0b;
}
.dot-gray {
    background: var(--color-text-faint);
}

/* ── Tag chips ─────────────────────────────────────────────────────────────── */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid;
}
.tag-vip {
    background: #fef9c3;
    color: #78350f;
    border-color: #fde68a;
}
.tag-luxury {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}
.tag-beach {
    background: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}
.tag-wine {
    background: #fdf4ff;
    color: #6b21a8;
    border-color: #e9d5ff;
}
.tag-default {
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

[data-theme="dark"] .tag-vip {
    background: #78350f;
    color: #fef08a;
    border-color: #ca8a04;
}
[data-theme="dark"] .tag-luxury {
    background: #14532d;
    color: #86efac;
    border-color: #166534;
}
[data-theme="dark"] .tag-beach {
    background: #1e3a8a;
    color: #93c5fd;
    border-color: #1d4ed8;
}
[data-theme="dark"] .tag-wine {
    background: #3b0764;
    color: #e9d5ff;
    border-color: #7e22ce;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    transition:
        background 0.15s,
        color 0.15s,
        transform 0.1s;
    cursor: pointer;
    border: none;
    text-decoration: none;
}
.btn:active {
    transform: scale(0.98);
}
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--color-button);
    color: var(--color-button-text);
}
.btn-primary:hover {
    background: var(--color-button-hover);
    color: var(--color-button-text);
}

.btn-secondary {
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.btn-secondary:hover {
    background: var(--color-border);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.btn-danger {
    background: var(--color-danger);
    color: #fff;
}
.btn-danger:hover {
    background: var(--color-danger-hover);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    padding: 0.5rem 1rem;
}
.btn-ghost:hover {
    color: var(--color-text);
}

.filter-chip-active {
    background: var(--color-button);
    color: var(--color-button-text);
}

.btn-sm {
    font-size: 0.75rem;
    padding: 0.375rem 0.875rem;
    border-radius: 0.5rem;
}

.btn-icon {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-text-faint);
    transition:
        color 0.15s,
        background 0.15s;
    cursor: pointer;
    border: none;
}
.btn-icon:hover {
    color: var(--color-primary);
    background: var(--color-primary-bg);
}
.btn-icon.btn-icon-danger:hover {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}
.btn-icon:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Disabled state — applies to every .btn-* variant and .btn-icon. No disabled
   convention existed anywhere in the app before the style guide (/style-guide/)
   defined this one; raw-Tailwind buttons that don't use .btn should use the
   equivalent `disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none`
   utility classes instead. */
.btn:disabled,
.btn[disabled],
.btn-icon:disabled,
.btn-icon[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Form inputs ───────────────────────────────────────────────────────────── */
.form-input {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text);
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
    font-family: "Inter", system-ui, sans-serif;
}
.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
    background: var(--color-surface);
}
.form-input::placeholder {
    color: var(--color-text-faint);
}
textarea.form-input {
    resize: vertical;
}
select.form-input {
    appearance: auto;
}

.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}
.form-label-required::after {
    content: " *";
    color: #f87171;
}

.form-error {
    color: var(--color-danger);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.form-hint {
    color: var(--color-text-faint);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
    background: var(--color-surface);
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    overflow: hidden;
}

.card-header {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface-raised);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-header-dark {
    padding: 1rem 1.5rem;
    background: var(--color-navy);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-title-dark {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-navy-text);
}

.card-body {
    padding: 1.25rem;
}

/* ── Page header ───────────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.page-title {
    font-family: "Sora", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-text);
}

.page-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-faint);
    margin-top: 0.125rem;
}

/* ── Tables ────────────────────────────────────────────────────────────────── */
.table-container {
    background: var(--color-surface);
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.table-head th {
    padding: 0.75rem 1.25rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border-subtle);
}

.table-row {
    transition: background 0.15s;
}
.table-row:hover {
    background: var(--color-surface-raised);
}

.table-row td {
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* ── Breadcrumb ────────────────────────────────────────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-faint);
    margin-bottom: 0.25rem;
}
.breadcrumb a:hover {
    color: var(--color-accent-text);
}

/* Same brand-accent hover as .breadcrumb a:hover above, for hand-rolled
   breadcrumb markup that hasn't been migrated to the .breadcrumb class. */
.breadcrumb-hover:hover {
    color: var(--color-accent-text);
}

/* ── Filter bar ────────────────────────────────────────────────────────────── */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.25rem;
}

.filter-label {
    font-size: 0.75rem;
    color: var(--color-text-faint);
    font-weight: 500;
    padding: 0 0.5rem;
}

.filter-pill {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition:
        background 0.15s,
        color 0.15s;
    color: var(--color-text-muted);
    text-decoration: none;
}
.filter-pill:hover {
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
}
.filter-pill.active {
    background: var(--color-navy);
    color: var(--color-navy-text);
}
.filter-pill:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.empty-state {
    padding: 4rem 1.25rem;
    text-align: center;
    color: var(--color-text-faint);
}
.empty-state-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.75rem;
    opacity: 0.3;
}
.empty-state-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-faint);
}

/* ── Booking type icon badges ──────────────────────────────────────────────── */
.type-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.type-icon-flight {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
}
.type-icon-hotel {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}
.type-icon-tour {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.type-icon-cruise {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}
.type-icon-transfer {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
}
.type-icon-rail {
    background: #fffbeb;
    border: 1px solid #fde68a;
}
.type-icon-car {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
}
.type-icon-other {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .type-icon-flight {
    background: #0c2233;
    border-color: #0369a1;
}
[data-theme="dark"] .type-icon-hotel {
    background: #1d1040;
    border-color: #7c3aed;
}
[data-theme="dark"] .type-icon-tour {
    background: #052e16;
    border-color: #166534;
}
[data-theme="dark"] .type-icon-cruise {
    background: #0f1f40;
    border-color: #1d4ed8;
}
[data-theme="dark"] .type-icon-rail {
    background: #2d1f00;
    border-color: #ca8a04;
}

/* ── Client list sidebar tab pills ────────────────────────────────────────── */
.tab-pill-active {
    background: var(--color-button);
    color: var(--color-button-text);
}
.tab-pill-inactive {
    color: #475569;
}
.tab-pill-inactive:hover {
    color: #1e293b;
    background: #f1f5f9;
}

[data-theme="dark"] .tab-pill-inactive {
    color: #94a3b8;
}
[data-theme="dark"] .tab-pill-inactive:hover {
    color: #e2e8f0;
    background: #1e293b;
}

/* ── Itinerary sidebar — client card ───────────────────────────────────────── */
.iti-client-name {
    color: #0f172a;
    font-weight: 700;
}
[data-theme="dark"] .iti-client-card {
    background: #253044;
    border-color: #334155;
}
[data-theme="dark"] .iti-client-card .iti-client-name {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.15);
}

/* ── Alpine x-cloak ────────────────────────────────────────────────────────── */
[x-cloak] {
    display: none !important;
}

/* ── Field label / error aliases (agent profile) ───────────────────────────── */
.field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}
.field-error {
    color: var(--color-danger-hover);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* ── Booking form layout (4-column magazine grid on desktop) ───────────────── */
@media (min-width: 768px) {
    #booking-form {
        grid-template-columns: 3fr 1.25fr 1.1fr 1.675fr;
        align-items: start;
    }
    #section-booking-det {
        grid-column: 1;
        grid-row: 1;
    }
    #section-route-notes {
        grid-column: 1;
        grid-row: 2;
    }
    #booking-payments {
        grid-column: 2 / 4;
        grid-row: 1;
    }
    #section-right-lower {
        grid-column: 2 / 4;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
}

/* ── Print styles ──────────────────────────────────────────────────────────── */
@media print {
    nav,
    footer,
    .no-print {
        display: none !important;
    }
    body {
        background: white !important;
        color: #000 !important;
    }
    .print-area {
        padding: 0 !important;
    }
    .print-card {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin-bottom: 16px !important;
    }
    .print-card table {
        font-size: 11px !important;
    }
    th,
    td {
        padding: 5px 8px !important;
    }
    a {
        color: inherit !important;
        text-decoration: none !important;
    }
    .client-avatar {
        display: none !important;
    }
    .badge-confirmed,
    .badge-pending,
    .badge-ticketed {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #999 !important;
    }
}

/* ── Itinerary Report ──────────────────────────────────────────────────────── */

/* Outer page background — darkens in dark mode, report document stays light */
.itin-page-bg {
    background: #f1f5f9;
}
[data-theme="dark"] .itin-page-bg {
    background: var(--color-bg);
}

/* Force the report document to always render with light-mode tokens */
.itin-document {
    color-scheme: light;
    --color-surface: #ffffff;
    --color-surface-raised: #f8fafc;
    --color-surface-sunken: #f1f5f9;
    --color-border: #e2e8f0;
    --color-border-subtle: #f1f5f9;
    --color-text: #0f172a;
    --color-text-secondary: #374151;
    --color-text-muted: #64748b;
    --color-text-faint: #94a3b8;
    --color-navy: #0d1b2a;
    --color-navy-text: #ffffff;
}

/* Revert hardcoded dark-mode overrides inside the light document */
[data-theme="dark"] .itin-document .itin-badge-accommodation {
    background: #fef3c7;
    color: #b45309;
}
[data-theme="dark"] .itin-document .itin-badge-meal {
    background: #dcfce7;
    color: #166534;
}
[data-theme="dark"] .itin-document .itin-cat-flight {
    background: #e0f2fe;
    color: #0284c7;
}
[data-theme="dark"] .itin-document .itin-cat-accommodation {
    background: #fef3c7;
    color: #b45309;
}
[data-theme="dark"] .itin-document .itin-cat-tour {
    background: #dcfce7;
    color: #15803d;
}
[data-theme="dark"] .itin-document .itin-cat-activity {
    background: #f0fdf4;
    color: #16a34a;
}
[data-theme="dark"] .itin-document .itin-cat-meal {
    background: #fff7ed;
    color: #c2410c;
}
[data-theme="dark"] .itin-document .itin-cat-cruise {
    background: #dbeafe;
    color: #1d4ed8;
}
[data-theme="dark"] .itin-document .itin-cat-train {
    background: #ede9fe;
    color: #7c3aed;
}
[data-theme="dark"] .itin-document .itin-cat-other {
    background: #ccfbf1;
    color: #0d9488;
}

.itin-cover {
    background: var(--color-surface-raised);
}

.itin-agency-bar {
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.itin-hero {
    background: linear-gradient(
        135deg,
        var(--color-surface-raised) 0%,
        var(--color-border) 100%
    );
}

.itin-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.itin-meta-pill {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
}

.itin-vip-badge {
    background: #f59e0b;
    color: #000;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Sections & day cards share a flush-stacked visual */
.itin-section,
.itin-day-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    margin-top: 1px;
}

.itin-day-card {
    border-left: 4px solid var(--color-primary);
}

.itin-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-text);
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.itin-table-head {
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.itin-table-head th {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.itin-table-row {
    border-bottom: 1px solid var(--color-border-subtle);
}
.itin-table-row:last-child {
    border-bottom: none;
}
.itin-table-row:hover {
    background: var(--color-surface-raised);
}

.itin-day-header {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem 0.875rem;
}

.itin-day-number {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0;
    background: #ffffff;
    color: #0d1b2a;
    border: 2px solid #000000;
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.itin-location-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
}

.itin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.itin-badge-accommodation {
    background: #fef3c7;
    color: #b45309;
}
.itin-badge-meal {
    background: #dcfce7;
    color: #166534;
}

[data-theme="dark"] .itin-badge-accommodation {
    background: #78350f;
    color: #fbbf24;
}
[data-theme="dark"] .itin-badge-meal {
    background: #052e16;
    color: #4ade80;
}

.itin-activity-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
}

/* Category icon chips */
.itin-cat-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.itin-cat-flight {
    background: #e0f2fe;
    color: #0284c7;
}
.itin-cat-transfer {
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
}
.itin-cat-accommodation {
    background: #fef3c7;
    color: #b45309;
}
.itin-cat-tour {
    background: #dcfce7;
    color: #15803d;
}
.itin-cat-activity {
    background: #f0fdf4;
    color: #16a34a;
}
.itin-cat-meal {
    background: #fff7ed;
    color: #c2410c;
}
.itin-cat-cruise {
    background: #dbeafe;
    color: #1d4ed8;
}
.itin-cat-train {
    background: #ede9fe;
    color: #7c3aed;
}
.itin-cat-other {
    background: #ccfbf1;
    color: #0d9488;
}

[data-theme="dark"] .itin-cat-flight {
    background: #0c2233;
    color: #38bdf8;
}
[data-theme="dark"] .itin-cat-accommodation {
    background: #2d1f00;
    color: #fbbf24;
}
[data-theme="dark"] .itin-cat-tour {
    background: #052e16;
    color: #4ade80;
}
[data-theme="dark"] .itin-cat-activity {
    background: #052e16;
    color: #4ade80;
}
[data-theme="dark"] .itin-cat-meal {
    background: #2d0d00;
    color: #fb923c;
}
[data-theme="dark"] .itin-cat-cruise {
    background: #0f1f40;
    color: #60a5fa;
}
[data-theme="dark"] .itin-cat-train {
    background: #1d1040;
    color: #a78bfa;
}
[data-theme="dark"] .itin-cat-other {
    background: #064e3b;
    color: #2dd4bf;
}

.itin-footer {
    background: var(--color-surface-raised);
    border-top: 1px solid var(--color-border);
    padding: 1.5rem 2.5rem;
    margin-top: 1px;
}

/* ── Itinerary Report — Print ──────────────────────────────────────────────── */
@media print {
    .itin-cover,
    .itin-agency-bar,
    .itin-hero,
    .itin-day-card,
    .itin-cat-icon,
    .itin-badge,
    .itin-day-number,
    .itin-footer {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .itin-page-break {
        page-break-before: always;
    }
    .itin-day-card {
        break-inside: avoid;
    }
    .itin-section {
        break-inside: avoid;
    }
    .itin-activity-row {
        break-inside: avoid;
    }

    #itinerary-report {
        max-width: 100% !important;
    }
    .itin-cover {
        border-radius: 0 !important;
    }
    .itin-footer {
        border-radius: 0 !important;
    }
    .itin-page-bg {
        background: transparent !important;
        min-height: 0 !important;
    }
}

/* ── Itinerary Report: Cover Style Variants ──────────────────────────────── */

/* Classic: optional banner image between agency bar and hero */
.itin-cover-classic-banner {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* Full-bleed: image as CSS background, hero content overlaid */
.itin-cover-full-bleed {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 340px;
}
.itin-agency-bar-overlay {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
}
.itin-hero-overlay {
    position: relative;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.05) 100%
    );
}
.itin-meta-pill-overlay {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(6px);
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Split: text left, image right */
.itin-cover-split {
    display: flex;
    min-height: 280px;
}
.itin-cover-split-text {
    flex: 1;
    padding: 2.5rem;
    background: var(--surface, #eff6f5);
}
.itin-cover-split-img {
    width: 42%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ── Intro / Closing text blocks ─────────────────────────────────────────── */
.itin-intro-block,
.itin-closing-block {
    border-left: 3px solid #14b8a6;
}

/* ── Activity images in report ───────────────────────────────────────────── */
.itin-activity-image {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

/* ── Print additions for new elements ───────────────────────────────────── */
@media print {
    .itin-cover-full-bleed {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .itin-cover-classic-banner,
    .itin-cover-split-img,
    .itin-activity-image {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .itin-activity-image-wrap {
        break-inside: avoid;
    }
    .itin-intro-block,
    .itin-closing-block {
        break-inside: avoid;
    }
}

/* Inline "Add one" pill button in vendor/select empty-state messages */
.btn-add-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #d1d5db; /* gray-300 */
    color: #dc2626; /* red-600 */
    border: none;
    border-radius: 0.5rem;
    padding: 0.25rem 0.625rem;
    margin-left: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s;
}
.btn-add-inline:hover {
    background-color: #b1b5bc;
}

/* Ghost-click guard: applied to <html> on touchstart, survives HTMX body swap */
html.nav-guard #hamburger-btn {
    pointer-events: none !important;
}

/* Native checkboxes/radios use the brand accent instead of the browser's blue.
   Tracks light/dark and any tenant override via --color-primary. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-primary);
}

/* Preserve the intentional semantic coding in the Agency Settings field grid
   and the logo remover, which the global teal rule would otherwise flatten. */
input[type="checkbox"][name$="_required"] {
    accent-color: #f59e0b; /* amber-500 */
}
input[type="checkbox"][name="clear_logo"] {
    accent-color: #ef4444; /* red-500 */
}

/* Dark mode: tell the browser to render native date/time/select chrome in dark */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="color"],
[data-theme="dark"] select {
    color-scheme: dark;
}

/* Dark mode: fix report filter form inputs — Tailwind's text-slate-700 overrides
   browser defaults from color-scheme:dark, making typed text invisible */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="color"],
[data-theme="dark"] select {
    color: #f1f5f9;
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

/* Dark mode: report filter form container */
[data-theme="dark"] form.report-filter {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

/* Override browser autofill background (Chrome/Edge inject a bright tint that ignores bg-slate-700).
   !important is required because Tailwind CDN injects its styles after TAAP.css in the cascade. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f1f5f9 !important;
    box-shadow: 0 0 0 1000px #334155 inset !important;
    transition: background-color 0s 600000s;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #0f172a !important;
    box-shadow: 0 0 0 1000px #f8fafc inset !important;
    transition: background-color 0s 600000s;
}

/* ── Drag-and-drop activity sorting ──────────────────── */
.drag-handle {
    cursor: grab;
    touch-action: none;
}
.drag-handle:active {
    cursor: grabbing;
}
.activity-drag-ghost {
    opacity: 0.4;
    background: #f0fdfa;
    border-radius: 0.5rem;
}
.activity-dragging {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0.9;
    border-radius: 0.5rem;
}
/* Itinerary list drag-reorder (mirrors activity sorting) */
.itinerary-drag-ghost {
    opacity: 0.4;
    background: #f0fdfa;
    border-radius: 1rem;
}
.itinerary-dragging {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0.95;
    border-radius: 1rem;
}
.activity-thumb {
    height: 4rem;
    width: 6rem;
    object-fit: cover;
    border-radius: 0.5rem;
}