/*
 * 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;

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

    /* Borders */
    --color-border: #e2e8f0;
    --color-border-subtle: #f1f5f9;
    --color-border-strong: #cbd5e1;

    /* 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 */
    --color-scrollbar: #cbd5e1;
}

/* ── 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;

    --color-scrollbar: #334155;

    /* 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;
}

/* ── 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 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 the dark label (matches .btn-primary via --color-button-text = #0f172a). */
/* Lucide icons inside inherit it via currentColor.                              */
.bg-teal-400.text-white,
.bg-teal-500.text-white,
.bg-teal-600.text-white {
    color: var(--color-button-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 ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-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 ───────────────────────────────────────────────────────────────────── */
.nav-active {
    background: var(--color-primary);
    color: #fff;
    border-radius: 6px;
}

/* ── 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);
}

.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;
}

/* ── 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);
    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-text-muted);
}

/* ── 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: #0f172a;
    color: #ffffff;
}
.tab-pill-inactive {
    color: #64748b;
}
.tab-pill-inactive:hover {
    color: #374151;
    background: #f1f5f9;
}

[data-theme="dark"] .tab-pill-active {
    background: #334155;
    color: #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;
}