/* Material Design 3 - Dark Theme */
:root {
    /* MD3 Color System - Dark Theme */
    --md-sys-color-primary: #7dd3c0;
    --md-sys-color-on-primary: #00382e;
    --md-sys-color-primary-container: #005144;
    --md-sys-color-on-primary-container: #99f0db;
    
    --md-sys-color-secondary: #b1ccc3;
    --md-sys-color-on-secondary: #1d352f;
    --md-sys-color-secondary-container: #344c45;
    --md-sys-color-on-secondary-container: #cde8df;
    
    --md-sys-color-tertiary: #a8cbe2;
    --md-sys-color-on-tertiary: #0d3446;
    --md-sys-color-tertiary-container: #274b5e;
    --md-sys-color-on-tertiary-container: #c4e7ff;
    
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    
    --md-sys-color-background: #191c1b;
    --md-sys-color-on-background: #e1e3e0;
    --md-sys-color-surface: #191c1b;
    --md-sys-color-on-surface: #e1e3e0;
    --md-sys-color-surface-variant: #3f4945;
    --md-sys-color-on-surface-variant: #bec9c4;
    --md-sys-color-outline: #88938e;
    --md-sys-color-outline-variant: #3f4945;
    
    --md-sys-color-surface-container-lowest: #0d0f0e;
    --md-sys-color-surface-container-low: #191c1b;
    --md-sys-color-surface-container: #1d201f;
    --md-sys-color-surface-container-high: #272a29;
    --md-sys-color-surface-container-highest: #323534;
    
    --md-sys-color-inverse-surface: #e1e3e0;
    --md-sys-color-inverse-on-surface: #2e3130;
    --md-sys-color-inverse-primary: #006b5a;
    
    /* Elevation */
    --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
    --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
    --md-sys-elevation-3: 0 1px 3px rgba(0,0,0,0.3), 0 4px 8px 3px rgba(0,0,0,0.15);
    
    /* Shape */
    --md-sys-shape-corner-none: 0;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;
    
    /* Typography - Fraunces for display/headlines, Outfit for body/labels */
    --md-sys-typescale-display-large: 500 57px/64px 'Fraunces', serif;
    --md-sys-typescale-display-medium: 500 45px/52px 'Fraunces', serif;
    --md-sys-typescale-display-small: 500 36px/44px 'Fraunces', serif;
    --md-sys-typescale-headline-large: 400 32px/40px 'Fraunces', serif;
    --md-sys-typescale-headline-medium: 400 28px/36px 'Fraunces', serif;
    --md-sys-typescale-headline-small: 400 24px/32px 'Fraunces', serif;
    --md-sys-typescale-title-large: 500 22px/28px 'Outfit', sans-serif;
    --md-sys-typescale-title-medium: 500 16px/24px 'Outfit', sans-serif;
    --md-sys-typescale-title-small: 500 14px/20px 'Outfit', sans-serif;
    --md-sys-typescale-body-large: 400 16px/24px 'Outfit', sans-serif;
    --md-sys-typescale-body-medium: 400 14px/20px 'Outfit', sans-serif;
    --md-sys-typescale-body-small: 400 12px/16px 'Outfit', sans-serif;
    --md-sys-typescale-label-large: 500 14px/20px 'Outfit', sans-serif;
    --md-sys-typescale-label-medium: 500 12px/16px 'Outfit', sans-serif;
    --md-sys-typescale-label-small: 500 11px/16px 'Outfit', sans-serif;
    
    /* State layers */
    --md-sys-state-hover-opacity: 0.08;
    --md-sys-state-focus-opacity: 0.12;
    --md-sys-state-pressed-opacity: 0.12;
    --md-sys-state-dragged-opacity: 0.16;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font: var(--md-sys-typescale-body-large);
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent background scroll when a mobile overlay (sidebar, modal) is open */
body.scroll-locked {
    overflow: hidden;
}
body.share-dialog-open {
    overflow: hidden;
}

.provider-alert {
    background: #5a1a1a;
    color: #ffd2d2;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #7a2a2a;
    font-size: 0.92rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.provider-alert__message { flex: 1; line-height: 1.35; }
.provider-alert__timestamp { opacity: 0.7; }
.provider-alert__action { color: #ffe8a8; white-space: nowrap; }

/* Material Symbols */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

/* Icon helper class */
.icon {
    font-family: 'Material Symbols Outlined';
    font-size: 24px;
    line-height: 1;
    vertical-align: middle;
}

.icon-sm { font-size: 18px; }
.icon-lg { font-size: 32px; }
.icon-xl { font-size: 48px; }

/* Icon system: one optical baseline across the app. Material Symbols are
   intentionally kept outlined at rest; active/confirming states can opt into
   a filled glyph without changing the markup contract. */
.material-symbols-outlined,
.icon {
    font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 24;
    font-optical-sizing: auto;
    text-rendering: geometricPrecision;
    flex: 0 0 auto;
}
.icon-sm { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20; }
.icon-lg, .icon-xl { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40; }
.icon-filled,
.active > .icon,
.active .icon,
[aria-current="page"] > .icon,
[aria-pressed="true"] > .icon {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.icon[aria-hidden="true"] { pointer-events: none; }

/* Layout */
.page-layout {
    display: flex;
    min-height: 100vh;
}

.page-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.page-main-full {
    width: 100%;
}

/* MD3 App Bar / Top Bar — visual base only; sticky positioning is
   handled by .dashboard-header which every page uses in combination. */
.top-app-bar {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
    background: var(--md-sys-color-surface);
    min-height: 64px;
}

.top-app-bar-leading {
    display: flex;
    align-items: center;
}

.top-app-bar-title {
    flex: 1;
    font: var(--md-sys-typescale-title-large);
    color: var(--md-sys-color-on-surface);
    margin: 0;
}

.top-app-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* MD3 Navigation Rail (Desktop Sidebar) */
.nav-rail {
    width: 80px;
    background: var(--md-sys-color-surface-container);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    gap: 0.5rem;
    border-right: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}

.nav-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0.75rem 1rem;
    border-radius: var(--md-sys-shape-corner-large);
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    min-width: 56px;
}

.nav-rail-item:hover {
    background: rgba(125, 211, 192, 0.08);
}

.nav-rail-item.active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.nav-rail-item:focus-visible,
.app-topbar-brand:focus-visible,
.app-topbar-section:focus-visible,
.app-primary-nav:focus-visible,
.bottom-nav-item:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

.nav-rail-item .icon {
    font-size: 24px;
}

.nav-rail-item span {
    font: var(--md-sys-typescale-label-medium);
}

.filter-group {
    width: 100%;
}

.multiselect {
    position: relative;
    width: 100%;
}

.multiselect-toggle {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-small);
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-body-medium);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s;
}

.multiselect-toggle:hover {
    border-color: var(--md-sys-color-primary);
}

.multiselect.open .multiselect-toggle {
    border-color: var(--md-sys-color-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.multiselect-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multiselect-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-primary);
    border-top: none;
    border-radius: 0 0 var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}

.multiselect.open .multiselect-dropdown {
    display: block;
}

.multiselect-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font: var(--md-sys-typescale-body-medium);
    transition: background 0.15s;
}

.multiselect-option:hover {
    background: rgba(125, 211, 192, 0.08);
}

.multiselect-option input[type="checkbox"] {
    accent-color: var(--md-sys-color-primary);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Stat Items (legacy, kept for compatibility) */
.stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-icon {
    width: 48px;
    height: 48px;
    background: var(--md-sys-color-primary-container);
    border-radius: var(--md-sys-shape-corner-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon .icon {
    color: var(--md-sys-color-on-primary-container);
    font-size: 24px;
}

.stat-info {
    overflow: hidden;
}

.stat-value {
    font: var(--md-sys-typescale-headline-small);
    color: var(--md-sys-color-on-surface);
}

.stat-label {
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* MD3 Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    min-height: 44px;
}

.btn .icon {
    font-size: 18px;
}

.btn-filled {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.btn-filled:hover {
    box-shadow: var(--md-sys-elevation-1);
    filter: brightness(1.1);
}

.btn-tonal {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.btn-tonal:hover {
    box-shadow: var(--md-sys-elevation-1);
}

.btn-outlined {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline);
}

.btn-outlined:hover {
    background: rgba(125, 211, 192, 0.08);
}

.btn-text {
    background: transparent;
    color: var(--md-sys-color-primary);
    padding: 0.625rem 0.75rem;
}

.btn-text:hover {
    background: rgba(125, 211, 192, 0.08);
}

/* Icon Button */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--md-sys-shape-corner-full);
    background: transparent;
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.icon-btn:focus-visible,
.btn:focus-visible,
.fab:focus-visible,
.multiselect-toggle:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}
.icon-btn[aria-current="page"],
.app-primary-nav.active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}
.icon-btn[aria-current="page"] .icon,
.app-primary-nav.active .icon { color: var(--md-sys-color-primary); }

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--md-sys-color-on-surface);
}

.icon-btn .icon {
    font-size: 20px;
}

/* Filled Icon Button */
.icon-btn-filled {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.icon-btn-filled:hover {
    box-shadow: var(--md-sys-elevation-1);
    color: var(--md-sys-color-on-primary);
}

/* FAB */
.fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: var(--md-sys-shape-corner-large);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--md-sys-elevation-3);
    transition: all 0.2s;
    z-index: 1000;
}

.fab:hover {
    box-shadow: var(--md-sys-elevation-3);
    filter: brightness(1.1);
}

.fab .icon {
    font-size: 24px;
}

/* MD3 Cards */
.card {
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-medium);
    overflow: hidden;
}

.card-elevated {
    box-shadow: var(--md-sys-elevation-1);
}

.card-filled {
    background: var(--md-sys-color-surface-container-highest);
}

.card-outlined {
    border: 1px solid var(--md-sys-color-outline-variant);
}

/* Landing Page */
.landing-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.landing-content {
    text-align: center;
    max-width: 400px;
    padding: 2rem;
}

.landing-icon {
    margin-bottom: 1.5rem;
}

.landing-icon .icon {
    font-size: 80px;
    color: var(--md-sys-color-primary);
}

.landing-icon.error .icon {
    color: var(--md-sys-color-error);
}

.landing-content h1 {
    font: var(--md-sys-typescale-display-small);
    color: var(--md-sys-color-on-surface);
    margin: 0 0 1rem 0;
}

.landing-subtitle {
    font: var(--md-sys-typescale-body-large);
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Dashboard Container */
.dashboard-container {
    padding: 1rem;
    width: 100%;
    flex: 1;
}

.bottom-nav-ai {
    display: none;
}

@media (max-width: 768px) {
    .bottom-nav-ai {
        display: flex;
    }
}

/* Dashboard Header */
.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 1rem;
    gap: 0.75rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(25, 28, 27, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Note: .app-topbar .header-left always overrides to display:flex via
   higher specificity, so header-left is never hidden inside the topbar. */

.header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Header ticker */
.header-ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
}

.ticker-track {
    display: inline-flex;
    white-space: nowrap;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    animation: tickerScroll 120s linear infinite;
    will-change: transform;
}

.header-ticker:hover .ticker-track {
    animation-play-state: paused;
    cursor: default;
}

.ticker-copy {
    display: inline;
}

.ticker-sep {
    display: inline;
    opacity: 0.4;
    padding: 0 4px;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 640px) {
    .header-ticker {
        display: none;
    }
}

/* User avatar */
.user-avatar {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    border: 2px solid var(--md-sys-color-outline-variant);
    transition: border-color 0.2s, transform 0.2s;
    cursor: pointer;
}

.user-avatar:hover {
    border-color: var(--md-sys-color-primary);
    transform: scale(1.06);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-avatar-initials {
    font-family: 'Fraunces', serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--md-sys-color-on-primary-container);
    background: var(--md-sys-color-primary-container);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* User menu dropdown */
.user-menu {
    position: relative;
}

.user-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    z-index: 500;
    overflow: hidden;
}

.user-menu.open .user-menu-dropdown {
    display: block;
}

.user-menu-header {
    padding: 0.75rem 1rem 0.6rem;
}

.user-menu-name {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-on-surface);
}

.user-menu-email {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 0.1rem;
    word-break: break-all;
}

.user-menu-divider {
    height: 1px;
    background: var(--md-sys-color-outline-variant);
    margin: 0.2rem 0;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    width: 100%;
    background: none;
    border: none;
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-body-medium);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.user-menu-item:hover,
.user-menu-item:focus {
    background: var(--md-sys-color-surface-container-highest);
    outline: none;
}

.user-menu-item.active {
    color: var(--md-sys-color-primary);
}

.user-menu-item .icon {
    font-size: 20px;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
}

.user-menu-item.active .icon {
    color: var(--md-sys-color-primary);
}

.user-menu-item--danger {
    color: var(--md-sys-color-error);
}

.user-menu-item--danger .icon {
    color: var(--md-sys-color-error);
}

.user-menu-dropdown form {
    display: block;
    margin: 0;
    padding: 0;
}

/* Trips Grid */
.trips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    padding-bottom: 1rem;
}

/* ─── Trip Hero Banner ───────────────────────────────────────────────────── */
.trip-hero {
    grid-column: 1 / -1;
    position: relative;
    display: block;
    border-radius: var(--md-sys-shape-corner-extra-large);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    min-height: 240px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trip-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

.trip-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--md-sys-color-surface-container-highest);
    transition: transform 0.4s ease;
}

.trip-hero:hover .trip-hero-bg {
    transform: scale(1.03);
}

.trip-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.45) 50%,
        rgba(0,0,0,0.15) 100%
    );
}

.trip-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 2rem 1.75rem;
}

.trip-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--md-sys-color-primary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.trip-hero-eyebrow .icon {
    font-size: 15px;
}

.trip-hero-name {
    font: 500 clamp(28px, 5vw, 48px)/1.1 'Fraunces', serif;
    margin: 0 0 0.75rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    letter-spacing: -0.5px;
}

.trip-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
}

.trip-hero-sep {
    opacity: 0.4;
}

.trip-hero-city {
    color: var(--md-sys-color-primary);
    font-weight: 500;
}

/* ─── Home Divider — unified card tile ──────────────────────────────────── */
.home-divider {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    color: var(--md-sys-color-on-surface-variant);
}

.home-divider--commitments {
    cursor: pointer;
}

.home-divider-rule {
    display: none;
}

.home-divider-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem 1rem;
    font-family: 'Outfit', sans-serif;
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-large);
    border: 1px solid var(--md-sys-color-outline-variant);
    min-height: 200px;
    flex: 1;
    text-align: center;
    transition: background 0.2s, border-radius 0.2s;
}

.home-divider--commitments .home-divider-body:hover {
    background: var(--md-sys-color-surface-container-high);
}

/* When expanded, square the bottom corners so commitments connect */
.home-divider.expanded .home-divider-body {
    border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0 0;
    border-bottom-color: transparent;
}

/* Vertically stacked number + label */
.home-divider-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.home-divider-days {
    font: 700 52px/1 'Fraunces', serif;
    color: var(--md-sys-color-on-surface);
}

.home-divider-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.5;
    margin-top: 4px;
}

.home-divider-dates {
    font-size: 12px;
    opacity: 0.5;
    line-height: 1.4;
}

.home-divider-toggle {
    display: flex;
    align-items: center;
    opacity: 0.45;
    margin-top: 0.25rem;
    transition: transform 0.25s ease;
}

.home-divider-toggle .icon {
    font-size: 18px !important;
}

.home-divider.expanded .home-divider-toggle {
    transform: rotate(180deg);
}

/* Commitments list — expands below the card body */
.home-divider-commitments {
    display: none;
    flex-direction: column;
    gap: 0;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-top: none;
    border-radius: 0 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large);
    padding: 0.5rem 0.75rem 0.75rem;
}

.home-divider.expanded .home-divider-commitments {
    display: flex;
}

.home-divider-commitment {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    padding: 0.25rem 0.5rem;
    border-left: 2px solid var(--md-sys-color-outline-variant);
}

.home-divider-location {
    margin-left: auto;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    opacity: 0.7;
}

.home-divider-location .icon {
    font-size: 13px !important;
}

/* Keep commitment-detail sub-styles */
.commitment-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 11px;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.2;
}

.commitment-icon {
    font-size: 14px !important;
    color: var(--md-sys-color-on-surface-variant);
}

.commitment-icon.guests {
    color: #c2410c;
}

.commitment-icon.away {
    color: #7dd3c0;
}

.commitment-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

.commitment-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.commitment-dates {
    font-size: 10px;
    opacity: 0.7;
    line-height: 1.1;
}

/* Flip hint kept for AI suggestion cards */
.flip-hint {
    font-size: 10px;
    opacity: 0.6;
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

.flip-hint .icon {
    font-size: 12px !important;
}

.back-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(26, 61, 54, 0.2);
}

.back-header .icon {
    font-size: 16px;
}

.back-commitments {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
    flex: 1;
    overflow-y: auto;
}

.back-commitment-item {
    padding: 0.4rem;
    background: rgba(26, 61, 54, 0.1);
    border-radius: 6px;
}

.back-commitment-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 12px;
    font-weight: 500;
}

.back-commitment-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.back-commitment-dates {
    font-size: 10px;
    opacity: 0.8;
    margin-top: 0.15rem;
    margin-left: 1.1rem;
    line-height: 1.2;
}

.back-commitment-desc {
    font-size: 11px;
    margin-top: 0.2rem;
    margin-left: 1.1rem;
    opacity: 0.9;
    line-height: 1.3;
}

.back-commitment-location {
    font-size: 10px;
    margin-top: 0.15rem;
    margin-left: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: #7dd3c0;
}

.back-commitment-location .icon {
    font-size: 12px !important;
}

/* Trip Card */
.trip-card {
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-large);
    overflow: hidden;
    text-decoration: none;
    color: var(--md-sys-color-on-surface);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 200px;
    border: 1px solid #9ee0d0;
    position: relative;
}

/* j/k keyboard navigation focus outline (Task #109). Applies to both the
 * trip-card grid and the hero card so the user can see which trip card
 * Enter will open. Mirrors the default focus-visible ring but tinted to
 * the MD3 primary so it stands out against trip artwork. */
.trip-card:focus-visible,
.trip-hero:focus-visible {
    outline: 3px solid var(--md-sys-color-primary, #7dd3c0);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(125, 211, 192, 0.25);
}

.trip-alert-ribbon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 7px 12px;
    z-index: 10;
    position: relative;
}

.trip-alert-ribbon.ribbon--red {
    background: #dc2626;
}

.trip-alert-ribbon.ribbon--orange {
    background: #ea580c;
}

.trip-alert-ribbon.ribbon--yellow {
    background: #ca8a04;
}

.ribbon-icon {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: help;
    position: relative;
}


.alert-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 15;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.alert-modal-content {
    font-size: 13px;
    line-height: 1.6;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}

.alert-modal-content::-webkit-scrollbar {
    width: 4px;
}

.alert-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.alert-modal-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
}

.alert-modal-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.alert-modal-item:last-child {
    border-bottom: none;
}

.alert-modal-item .icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-modal-item span:last-child {
    flex: 1;
}

.trip-alert-ribbon:hover + .alert-modal,
.alert-modal:hover {
    opacity: 1;
    visibility: visible;
}

.ribbon-icon .icon {
    font-size: 16px;
    color: white;
}

/* Hero card: alert ribbon on the right edge as a vertical strip */
.trip-hero .trip-alert-ribbon {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    padding: 12px 0;
    gap: 10px;
    border-radius: 0;
}

.trip-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--md-sys-elevation-2);
}

.trip-card--hawaii {
    background: rgba(158, 224, 208, 0.42);
}

.trip-card-header {
    padding: 0.75rem 1rem;
    background: rgba(0,0,0,0.2);
}

.trip-name {
    font: var(--md-sys-typescale-title-small);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-duration {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
}

.trip-image {
    min-height: 220px;
    background-size: cover;
    background-position: center;
    background-color: var(--md-sys-color-surface-container-highest);
    flex: 1;
    position: relative;
}

.trip-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 0.875rem 0.875rem;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
}

.trip-overlay-name {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.2rem 0;
    overflow: hidden;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    display: block;
}

.trip-overlay-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    min-width: 0;
}

.trip-overlay-city {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #9ee0d0;
    overflow: hidden;
    min-width: 0;
}

.scroll-text {
    display: inline-block;
    white-space: nowrap;
}

.scroll-text.is-looping {
    animation: marqueeLoop var(--marquee-dur, 4s) linear infinite;
    animation-play-state: paused;
    will-change: transform;
}

.trip-card:hover .scroll-text.is-looping {
    animation-play-state: running;
}

@keyframes marqueeLoop {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


.trip-overlay-duration {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    flex-shrink: 0;
}

.trip-location {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 0.5rem;
    text-align: center;
    font: var(--md-sys-typescale-label-large);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.sf-stop-flag {
    position: absolute;
    top: 0;
    right: 0;
    background: #C0362C;
    padding: 4px 6px;
    border-radius: 0 var(--md-sys-shape-corner-large) 0 5px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sf-bridge-icon {
    height: 0.7rem;
    width: auto;
    filter: brightness(0) invert(1);
}

.trip-badges {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--md-sys-color-surface-container-high);
}

.badge {
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge .icon {
    font-size: 18px;
    color: var(--md-sys-color-on-surface-variant);
}

.trip-dates {
    padding: 0.5rem;
    text-align: center;
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.no-trips {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--md-sys-color-on-surface-variant);
    grid-column: 1 / -1;
}

.no-trips .icon {
    font-size: 64px;
    margin-bottom: 1rem;
    color: var(--md-sys-color-outline);
}

.no-trips h3 {
    font: var(--md-sys-typescale-title-large);
    margin: 0 0 0.5rem 0;
}

.no-trips p {
    font: var(--md-sys-typescale-body-medium);
}

/* Trip Detail Cover Header */
.trip-detail-cover {
    width: 100%;
    height: 260px;
    background-size: cover;
    background-position: center;
    background-color: var(--md-sys-color-surface-container-highest);
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.trip-detail-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(12, 16, 14, 0.15) 0%,
        rgba(12, 16, 14, 0.65) 60%,
        rgba(12, 16, 14, 0.88) 100%
    );
}

.trip-detail-cover-content {
    position: relative;
    z-index: 1;
    padding: 1.5rem 1.75rem;
    width: 100%;
}

.trip-detail-cover-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font: var(--md-sys-typescale-label-medium);
    color: var(--md-sys-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.375rem;
}

.trip-detail-cover-eyebrow .icon {
    font-size: 16px;
}

.trip-detail-cover-name {
    font-family: 'Fraunces', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.trip-detail-cover-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font: var(--md-sys-typescale-body-medium);
    color: rgba(255, 255, 255, 0.82);
}

.trip-detail-cover-sep {
    opacity: 0.5;
}

.trip-detail-cover-countdown {
    font-style: italic;
    color: var(--md-sys-color-primary);
}

/* Cover nav bar — single row near the top of the hero */
.cover-nav-bar {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 4;
}

/* Prev/next circle arrows inside the nav bar */
.cover-nav-arrow {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--md-sys-shape-corner-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.cover-nav-arrow .icon {
    font-size: 26px;
}

.cover-nav-arrow:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.08);
    color: #fff;
}

/* Arrow group — sits on the right side of the nav bar */
.cover-nav-arrows {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Invisible placeholder keeps arrow group width stable when one arrow is absent */
.cover-nav-arrow--placeholder {
    background: none;
    border: none;
    backdrop-filter: none;
    pointer-events: none;
}

/* Back pill — left of nav bar */
.cover-back-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 10px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--md-sys-shape-corner-full);
    color: rgba(255, 255, 255, 0.92);
    font: var(--md-sys-typescale-label-large);
    text-decoration: none;
    transition: background 0.2s;
}

.cover-back-pill:hover {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}

@media (max-width: 600px) {
    .cover-nav-bar {
        top: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
    }
    .cover-nav-arrow {
        width: 36px;
        height: 36px;
    }
    .cover-nav-arrow .icon {
        font-size: 22px;
    }
}

/* Trip Detail Container */
.trip-detail-container {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.trip-detail-container.no-sidebar .trip-content {
    width: 100%;
    max-width: 100%;
}

/* Trip Sidebar */
.trip-sidebar {
    width: 280px;
    flex-shrink: 0;
    align-self: flex-start;
    position: sticky;
    /* Sit below the 64px sticky .dashboard-header with breathing room */
    top: calc(64px + 1rem);
    max-height: calc(100vh - 64px - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline-variant) transparent;
    padding-top: 1rem;
}

.trip-sidebar-card {
    display: block;
    background: rgba(29, 35, 32, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.trip-sidebar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
    background: rgba(35, 42, 38, 0.82);
}

.trip-sidebar-header {
    padding: 1rem;
}

.trip-sidebar-header h2 {
    font: var(--md-sys-typescale-title-medium);
    margin: 0 0 0.25rem 0;
    color: var(--md-sys-color-on-surface);
}

.trip-sidebar-duration {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
}

.trip-sidebar-image {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: var(--md-sys-color-surface-container-highest);
}

.trip-sidebar-location {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 0.75rem;
    text-align: center;
    font: var(--md-sys-typescale-label-large);
}

.trip-sidebar-dates {
    padding: 0.75rem;
    text-align: center;
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
}

.budget-panel {
    margin-top: 0.75rem;
    background: rgba(29, 35, 32, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    overflow: hidden;
    transition: box-shadow 0.2s, background 0.2s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.budget-panel:hover {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
    background: rgba(35, 42, 38, 0.82);
}

.budget-panel-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-title-small);
    gap: 0.5rem;
}

.budget-panel-toggle:hover {
    background: rgba(125, 211, 192, 0.08);
}

.budget-panel-toggle-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.budget-panel-toggle-left .icon {
    font-size: 20px;
    color: var(--md-sys-color-primary);
}

.budget-panel-toggle-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.budget-panel-total {
    font: var(--md-sys-typescale-title-small);
    color: var(--md-sys-color-primary);
}

.budget-panel-chevron {
    font-size: 20px;
    color: var(--md-sys-color-on-surface-variant);
    transition: transform 0.3s;
}

.budget-panel.open .budget-panel-chevron {
    transform: rotate(180deg);
}

.budget-panel-content {
    display: none;
    padding: 0 1rem 0.75rem;
}

.budget-panel.open .budget-panel-content {
    display: block;
}

.budget-category {
    margin-bottom: 0.75rem;
}

.budget-category:last-of-type {
    margin-bottom: 0.5rem;
}

.budget-category-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.budget-category-header .icon {
    font-size: 18px;
    color: var(--md-sys-color-on-surface-variant);
}

.budget-category-name {
    flex: 1;
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-on-surface);
}

.budget-category-subtotal {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-on-surface);
}

.budget-category-items {
    padding-left: 1.75rem;
}

.budget-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
}

.budget-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0.5rem;
}

.budget-item-note {
    display: block;
    font: var(--md-sys-typescale-label-small);
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.budget-item-cost {
    flex-shrink: 0;
}

.budget-no-cost {
    padding-top: 0.25rem;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.budget-no-cost-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0;
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    font-style: italic;
}

.budget-no-cost-item .icon {
    font-size: 16px;
    color: var(--md-sys-color-outline);
}

.budget-grand-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0 0.25rem;
    border-top: 2px solid var(--md-sys-color-primary);
    margin-top: 0.5rem;
    font: var(--md-sys-typescale-title-small);
    color: var(--md-sys-color-primary);
}

.trip-content {
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* Sticky Header (Filter Bar + Map) */
.trip-sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0 0;
    overflow: hidden;
}

/* Filter Bar */
.trip-filter-bar {
    background: var(--md-sys-color-surface-container);
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    width: 100%;
    box-sizing: border-box;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-large);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn .icon {
    font-size: 18px;
}

.filter-btn:hover {
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
}

.filter-btn.active {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.filter-count {
    font-size: 0.85em;
    opacity: 0.8;
}

/* AI Filter Button - Purple theme */
.ai-filter-btn {
    background: rgba(147, 112, 219, 0.15);
    border-color: rgba(147, 112, 219, 0.4);
    color: #b39ddb;
}

.ai-filter-btn:hover {
    background: rgba(147, 112, 219, 0.25);
    color: #d1c4e9;
}

.ai-filter-btn.active {
    background: #7c4dff;
    border-color: #7c4dff;
    color: #ffffff;
}

.ai-filter-btn.has-purpose {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-color: #a855f7;
    color: #ffffff;
}

.ai-filter-btn.has-purpose:hover {
    background: linear-gradient(135deg, #8b5cf6, #c084fc);
}

/* Trip Items Container */
.trip-items-container {
    background: var(--md-sys-color-surface-container);
    border-radius: 0 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large);
    width: 100%;
}

/* Map */
.trip-map {
    width: 100%;
    height: 300px;
    margin-bottom: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

@media (max-width: 768px) {
    .trip-map {
        display: block;
        height: 148px;
        opacity: 0.92;
    }
}

/* Itinerary Day Headers */
.itinerary-day-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.5rem 1.25rem;
    background: var(--md-sys-color-surface-container);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    position: sticky;
    top: 0;
    z-index: 5;
}

.day-header-num {
    font-family: 'Fraunces', serif;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1;
    color: var(--md-sys-color-outline);
    min-width: 2rem;
    text-align: right;
    flex-shrink: 0;
    padding-right: 0.875rem;
    border-right: 1px solid var(--md-sys-color-outline-variant);
}

.itinerary-day-header .day-header-text {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-on-surface-variant);
    letter-spacing: 0.25px;
}

.itinerary-day-header.today {
    background: var(--md-sys-color-primary-container);
}

.itinerary-day-header.today .day-header-text {
    color: var(--md-sys-color-on-primary-container);
}

.itinerary-day-header.today .day-header-num {
    color: var(--md-sys-color-primary);
    border-right-color: var(--md-sys-color-primary);
}

.day-today-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-small);
    vertical-align: middle;
}

.itinerary-day-header.empty-day {
    background: var(--md-sys-color-surface);
}

.itinerary-day-header.empty-day .day-header-text {
    color: var(--md-sys-color-outline);
}

.itinerary-empty-day {
    opacity: 0.65;
    background: transparent;
    border-bottom: 1px dashed var(--md-sys-color-outline-variant);
}

.itinerary-empty-day .itinerary-icon {
    color: var(--md-sys-color-outline);
}

.itinerary-empty-day .itinerary-title {
    font-style: italic;
    color: var(--md-sys-color-on-surface-variant);
}

/* Itinerary Items */
.itinerary-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    align-items: flex-start;
    cursor: pointer;
    transition: background 0.2s;
}

.itinerary-item:last-child {
    border-bottom: none;
}

.itinerary-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.itinerary-item:focus-visible,
.home-divider-body:focus-visible,
.filter-btn:focus-visible,
.day-rail-link:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.itinerary-item[role="button"] {
    cursor: pointer;
}

.flight-item {
    border-left: 3px solid #7dd3c0;
}

.hotel-item {
    border-left: 3px solid #818cf8;
}

.restaurant-item {
    border-left: 3px solid #f59e0b;
}

.cruise-item {
    border-left: 3px solid #34d399;
}

.transport-item {
    border-left: 3px solid #a78bfa;
}

.itinerary-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-full);
    flex-shrink: 0;
    overflow: hidden;
}

.flight-item .itinerary-icon {
    background: rgba(125, 211, 192, 0.18);
}

.hotel-item .itinerary-icon {
    background: rgba(129, 140, 248, 0.18);
}

.restaurant-item .itinerary-icon {
    background: rgba(245, 158, 11, 0.18);
}

.cruise-item .itinerary-icon {
    background: rgba(52, 211, 153, 0.18);
}

.transport-item .itinerary-icon {
    background: rgba(167, 139, 250, 0.18);
}

.itinerary-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--md-sys-shape-corner-full);
}

.itinerary-icon .icon {
    font-size: 26px;
    color: var(--md-sys-color-primary);
}

.flight-item .itinerary-icon .icon {
    color: #7dd3c0;
}

.hotel-item .itinerary-icon .icon {
    color: #818cf8;
}

.restaurant-item .itinerary-icon .icon {
    color: #f59e0b;
}

.cruise-item .itinerary-icon .icon {
    color: #34d399;
}

.transport-item .itinerary-icon .icon {
    color: #a78bfa;
}

.activity-item {
    border-left: 3px solid #ff9800;
}

.activity-item .itinerary-icon {
    background: rgba(255, 152, 0, 0.18);
}

.activity-item .itinerary-icon .icon {
    color: #ff9800;
}

.itinerary-details {
    flex: 1;
    min-width: 0;
}

.itinerary-photo {
    width: 140px;
    min-width: 140px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    margin-left: auto;
    flex-shrink: 0;
    align-self: stretch;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.itinerary-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itinerary-date {
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.itinerary-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3;
}

.itinerary-title .icon {
    font-size: 18px;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
}
.itinerary-title .place-detail-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:.18em}.itinerary-title .place-detail-link:hover{text-decoration-color:currentColor}
.hotel-item[id^="reservation-"],.restaurant-item[id^="reservation-"]{scroll-margin-top:7rem}

.itinerary-subtitle {
    font: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-on-surface-variant);
}

.itinerary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Chip groups visually segregate trusted-traveler credentials. */
.chip-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem 0.25rem 0.625rem;
    border-radius: var(--md-sys-shape-corner-small);
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
}

.chip-group .chip-group-label {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.85;
    margin-right: 0.125rem;
}

.chip-group-credentials {
    border-color: rgba(125, 211, 192, 0.45);
    background: rgba(125, 211, 192, 0.08);
}

/* Weather Strip */
.weather-strip {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-small);
    overflow-x: auto;
    scrollbar-width: none;
}

.weather-strip::-webkit-scrollbar {
    display: none;
}

.weather-strip.weather-unavailable {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.7;
    padding: 0.25rem 0.625rem;
}

.weather-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0.375rem;
    min-width: 44px;
    border-radius: var(--md-sys-shape-corner-extra-small);
}

.weather-day-name {
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.5px;
}

.weather-day-icon {
    font-size: 16px;
    line-height: 1.2;
}

.weather-day-temps {
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    font-size: 10px;
}

.weather-low {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.7;
}

@media (max-width: 768px) {
    .weather-day {
        min-width: 38px;
        padding: 0.125rem 0.25rem;
    }
    .weather-day-icon {
        font-size: 14px;
    }
}

/* MD3 Chips/Labels */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-small);
    font: var(--md-sys-typescale-label-medium);
    color: var(--md-sys-color-on-surface-variant);
}

.chip .icon {
    font-size: 14px;
    font-family: 'Material Symbols Outlined';
}

.chip-success {
    background: rgba(125, 211, 192, 0.2);
    color: var(--md-sys-color-primary);
}

.chip-warning {
    background: rgba(255, 180, 0, 0.2);
    color: #ffb400;
}

.chip-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.chip-link:hover {
    background: rgba(125, 211, 192, 0.18);
    color: var(--md-sys-color-primary);
    text-decoration: none;
}

.confirmation-copy {
    border: 0;
    font: var(--md-sys-typescale-label-medium);
    cursor: pointer;
}

.confirmation-copy.is-copied {
    background: rgba(125, 211, 192, 0.2);
    color: var(--md-sys-color-primary);
}

.confirmation-copy.is-copied .icon {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.chip-live-ontime {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
}

.chip-live-delayed {
    background: rgba(255, 152, 0, 0.25);
    color: #ff9800;
}

.chip-live-cancelled {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

.chip-live-departed {
    background: rgba(33, 150, 243, 0.2);
    color: #2196f3;
}

.chip-live-landed {
    background: rgba(125, 211, 192, 0.2);
    color: var(--md-sys-color-primary);
}

.live-indicator {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4caf50;
    display: inline-block;
    animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.live-delay-amount {
    font-weight: 600;
    opacity: 0.9;
}

.live-gate-chip {
    background: rgba(168, 203, 226, 0.15);
    color: var(--md-sys-color-tertiary);
}

.live-new-time-chip {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.tripit-link {
    padding: 0.25rem 0.5rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.tripit-link:hover {
    background: rgba(27, 117, 188, 0.2);
    transform: scale(1.05);
}

.tripit-link .tripit-icon {
    width: 16px;
    height: 16px;
    display: block;
    border-radius: 3px;
}

/* LIH Taxi Button — keep the action visually consistent with TripIt chips. */
.lih-taxi-btn {
    cursor: pointer;
    border: none;
    padding: 0.25rem 0.5rem;
    color: #f4c20d;
    transition: all 0.2s ease;
}

.lih-taxi-btn:hover {
    background: rgba(244, 194, 13, 0.2);
    transform: scale(1.05);
}

.lih-taxi-btn .icon {
    font-size: 16px;
    line-height: 16px;
    display: block;
}

.lih-taxi-btn.loading {
    opacity: 0.6;
    cursor: wait;
}

.lih-taxi-btn.loading .icon {
    animation: pulse 1s infinite;
}

.lih-taxi-btn.success {
    background: rgba(125, 211, 192, 0.3);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.no-items {
    text-align: center;
    padding: 3rem;
    color: var(--md-sys-color-on-surface-variant);
}

.no-items .icon {
    font-size: 48px;
    margin-bottom: 1rem;
    color: var(--md-sys-color-outline);
}

/* Trips Strip */
.trips-strip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 1rem 0;
    margin-top: 1rem;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline) transparent;
}

.trips-strip::-webkit-scrollbar {
    height: 6px;
}

.trips-strip::-webkit-scrollbar-track {
    background: transparent;
}

.trips-strip::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline);
    border-radius: 3px;
}

.trip-strip-card {
    display: flex;
    flex-direction: column;
    width: 140px;
    min-width: 140px;
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-medium);
    overflow: hidden;
    text-decoration: none;
    color: var(--md-sys-color-on-surface);
    transition: all 0.2s;
    flex-shrink: 0;
}

.trip-strip-card:hover {
    box-shadow: var(--md-sys-elevation-1);
}

.trip-strip-card.active {
    box-shadow: 0 0 0 2px var(--md-sys-color-primary);
}

.trip-strip-header {
    padding: 0.5rem;
    background: rgba(0,0,0,0.2);
}

.trip-strip-name {
    font: var(--md-sys-typescale-label-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-strip-duration {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 10px;
}

.trip-strip-image {
    height: 60px;
    background-size: cover;
    background-position: center;
    background-color: var(--md-sys-color-surface-container-highest);
}

.trip-strip-dates {
    padding: 0.5rem;
    text-align: center;
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 10px;
}

.strip-home-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    min-width: 100px;
    padding: 0.75rem;
    background: linear-gradient(135deg, #9ee0d0 0%, #c5ece4 100%);
    border-radius: var(--md-sys-shape-corner-medium);
    color: #1a3d36;
    text-align: center;
    flex-shrink: 0;
}

.strip-home-icon .icon {
    font-size: 18px;
}

.strip-home-days {
    font: var(--md-sys-typescale-headline-small);
    line-height: 1;
}

.strip-home-label {
    font: var(--md-sys-typescale-label-small);
    font-size: 8px;
    opacity: 0.9;
}

.strip-home-dates {
    font-size: 8px;
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* Transport Items */
.transport-route {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.transport-location {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font: var(--md-sys-typescale-body-medium);
}

.transport-location .icon {
    font-size: 16px;
    color: #f5a623;
    margin-top: 2px;
}

.transport-location .location-label {
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    min-width: 60px;
}

.transport-vehicle {
    font-weight: normal;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9em;
    margin-left: 0.5rem;
}

/* Loading States */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--md-sys-color-surface-container);
    border-top-color: var(--md-sys-color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes wand-magic {
    0%, 100% { 
        transform: rotate(-15deg) scale(1);
        color: inherit;
    }
    25% { 
        transform: rotate(15deg) scale(1.1);
        color: #a855f7;
    }
    50% { 
        transform: rotate(-10deg) scale(1.2);
        color: #667eea;
    }
    75% { 
        transform: rotate(10deg) scale(1.1);
        color: #a855f7;
    }
}

/* Map Popups */
.mapboxgl-popup-content {
    background: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface) !important;
    padding: 0.75rem !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    box-shadow: var(--md-sys-elevation-2) !important;
}

.mapboxgl-popup-content strong {
    display: block;
    margin-bottom: 0.25rem;
    font: var(--md-sys-typescale-title-small);
}

.mapboxgl-popup-close-button {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 1.2rem;
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
    border-bottom-color: var(--md-sys-color-surface-container-high);
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-top-color: var(--md-sys-color-surface-container-high);
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: var(--md-sys-color-surface-container-high);
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: var(--md-sys-color-surface-container-high);
}

.map-popup {
    min-width: 150px;
}

.popup-address {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.popup-dates {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.popup-dates .icon {
    font-size: 14px;
    opacity: 0.7;
}

.popup-route {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* MD3 Dialogs/Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-extra-large);
    padding: 1.5rem;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: var(--md-sys-elevation-3);
}

.modal-content h3 {
    font: var(--md-sys-typescale-headline-small);
    color: var(--md-sys-color-on-surface);
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-content h3 .icon {
    color: var(--md-sys-color-primary);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* MD3 Form Elements */
.form-section-title {
    font: var(--md-sys-typescale-title-small);
    color: var(--md-sys-color-on-surface);
    margin-bottom: 1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.form-grid .full-width {
    grid-column: 1 / -1;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field label {
    font: var(--md-sys-typescale-label-medium);
    color: var(--md-sys-color-on-surface-variant);
}

.form-field input,
.form-field textarea,
.form-field select {
    padding: 0.875rem 1rem;
    background: transparent;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-small);
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-body-large);
    transition: border-color 0.2s;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--md-sys-color-on-surface-variant);
}

/* MD3 Switch */
.switch {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    padding: 0.5rem 0;
    min-height: 48px;
    width: 100%;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-track {
    width: 56px;
    height: 32px;
    min-width: 56px;
    background-color: #3a3f3e;
    border: 2px solid #8e918f;
    border-radius: 16px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: block;
}

.switch-thumb {
    width: 16px;
    height: 16px;
    background-color: #8e918f;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    transition: all 0.2s ease;
}

.switch input:checked + .switch-track {
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}

.switch input:checked + .switch-track .switch-thumb {
    background-color: #fff;
    left: calc(100% - 22px);
    width: 24px;
    height: 24px;
}

.switch-label {
    font-size: 1rem;
    color: #c4c7c5;
    line-height: 1.4;
}

/* MD3 Tabs */
.tabs {
    display: flex;
    background: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    overflow-x: auto;
}

.tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-title-small);
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    white-space: nowrap;
}

.tab .icon {
    font-size: 20px;
}

.tab:hover {
    color: var(--md-sys-color-on-surface);
    background: rgba(255, 255, 255, 0.04);
}

.tab.active {
    color: var(--md-sys-color-primary);
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--md-sys-color-primary);
    border-radius: 3px 3px 0 0;
}

.tab-content {
    display: none;
    padding: 1.5rem;
}

.tab-content.active {
    display: block;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.875rem 1.5rem;
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    border-radius: var(--md-sys-shape-corner-small);
    font: var(--md-sys-typescale-body-medium);
    box-shadow: var(--md-sys-elevation-2);
    z-index: 10000;
    animation: slideUp 0.3s ease;
}

.toast.error {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.toast.success {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--md-sys-color-on-surface-variant);
}

.empty-state .icon {
    font-size: 64px;
    color: var(--md-sys-color-outline);
    margin-bottom: 1rem;
}

.empty-state p {
    font: var(--md-sys-typescale-body-large);
    max-width: 300px;
    margin: 0 auto;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .trip-detail-cover {
        height: 200px;
    }

    .trip-detail-cover-name {
        font-size: 1.5rem;
    }

    .trip-detail-container {
        flex-direction: column;
    }
    
    .trip-sidebar {
        width: 100%;
        /* Reset the desktop sticky-rail behavior: in the stacked column
           layout a sticky, height-capped, self-scrolling sidebar becomes a
           nested scroll container that traps touch scrolling ("stuck" page). */
        position: static;
        top: auto;
        max-height: none;
        overflow-y: visible;
        overscroll-behavior: auto;
    }

    .itinerary-photo {
        width: 100px;
        min-width: 100px;
        height: 72px;
    }
}

@media (max-width: 768px) {
    /* .header-right flex alignment handled by higher-specificity
       .app-topbar .header-right rule below */

    .trips-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    
    .modal-content {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .tabs {
        overflow-x: auto;
        /* Horizontal-only strip: contain horizontal chain-scroll at edges,
           let vertical gestures propagate to the page. */
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
    }
    
    .tab {
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 480px) {
    .dashboard-container {
        padding: 0.75rem;
    }
    
    .trips-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    
    .trip-card {
        min-height: 180px;
    }
    
    .trip-image {
        min-height: 180px;
    }
    
    .trip-hero {
        min-height: 170px;
    }

    .trip-hero-name {
        font-size: clamp(22px, 6vw, 32px);
    }

    .trip-hero-content {
        padding: 1.25rem 1.25rem 1.25rem;
    }
    
    .trip-content {
        display: flex;
        flex-direction: column;
    }
    
    .trip-filter-bar {
        order: 2;
        border-radius: 0;
        border-bottom: none;
        border-top: 1px solid var(--md-sys-color-outline-variant);
    }
    
    .trip-items-container {
        order: 1;
        border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0 0;
    }
    
    .filter-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
    
    .filter-btn {
        flex-shrink: 0;
    }
    
    .itinerary-item {
        padding: 0.75rem 1rem;
        gap: 0.625rem;
    }
    
    .itinerary-icon {
        width: 40px;
        height: 40px;
    }
    
    .itinerary-icon .icon {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Bottom Navigation for Mobile */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--md-sys-color-surface-container);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    /* Account for notched-phone safe area */
    padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom));
    z-index: 1000;
}

@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        justify-content: space-around;
    }
    
    .page-main {
        /* 64px nav bar height + safe-area inset so content is never hidden */
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem clamp(0.35rem, 1.5vw, 1rem);
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    border-radius: var(--md-sys-shape-corner-large);
    transition: all 0.2s;
}

.bottom-nav-item.active {
    color: var(--md-sys-color-on-secondary-container);
    background: var(--md-sys-color-secondary-container);
}

.bottom-nav-item[aria-pressed="true"] {
    color: var(--md-sys-color-on-secondary-container);
    background: var(--md-sys-color-secondary-container);
}

.bottom-nav-item .icon {
    font-size: 24px;
}

.bottom-nav-item span:not(.icon) {
    font: var(--md-sys-typescale-label-medium);
}

button.bottom-nav-item {
    background: none;
    border: none;
    cursor: pointer;
}

@media (max-width: 480px) {
    .bottom-nav-item span:not(.icon) {
        display: none;
    }

    /* Labels are hidden; let each item grow equally so even 6 items
       fit within a 375 px viewport without overflowing. */
    .bottom-nav-item {
        flex: 1;
        min-width: 0;
        padding: 0.75rem 0;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-on-surface-variant);
}

/* Selection */
::selection {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

/* Admin page legacy classes support - aliased to MD3 */
.ui.button,
button.ui {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.ui.button:hover {
    background: var(--md-sys-color-surface-container-highest);
}

.ui.button.primary {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.ui.button.primary:hover {
    filter: brightness(1.1);
}

.ui.button.inverted {
    background: transparent;
    border: 1px solid var(--md-sys-color-outline);
    color: var(--md-sys-color-on-surface);
}

.ui.button.inverted:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ui.icon.button {
    padding: 0.75rem;
    border-radius: var(--md-sys-shape-corner-full);
}

.ui.large.button {
    padding: 0.875rem 2rem;
    font-size: 1rem;
}

/* Legacy label support */
.ui.label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-small);
    font: var(--md-sys-typescale-label-medium);
    color: var(--md-sys-color-on-surface-variant);
}

.ui.label.basic {
    background: transparent;
    border: 1px solid var(--md-sys-color-outline-variant);
}

.ui.label.tiny {
    font-size: 11px;
    padding: 0.2rem 0.5rem;
}

.ui.label.green {
    background: rgba(125, 211, 192, 0.2);
    color: var(--md-sys-color-primary);
}

.ui.label.orange {
    background: rgba(255, 180, 0, 0.2);
    color: #ffb400;
}

/* Legacy dimmer/loader */
.ui.dimmer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}

.ui.dimmer.active {
    display: flex;
}

.ui.loader {
    width: 48px;
    height: 48px;
    border: 4px solid var(--md-sys-color-surface-container);
    border-top-color: var(--md-sys-color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Aliases for legacy icon classes */
.icon.plane::before { content: 'flight'; font-family: 'Material Symbols Outlined'; }
.icon.home::before { content: 'home'; font-family: 'Material Symbols Outlined'; }
.icon.bed::before { content: 'hotel'; font-family: 'Material Symbols Outlined'; }
.icon.utensils::before { content: 'restaurant'; font-family: 'Material Symbols Outlined'; }
.icon.taxi::before { content: 'local_taxi'; font-family: 'Material Symbols Outlined'; }
.icon.sync::before { content: 'sync'; font-family: 'Material Symbols Outlined'; }
.icon.cog::before { content: 'settings'; font-family: 'Material Symbols Outlined'; }
.icon.sign.out::before,
.icon.sign-out::before { content: 'logout'; font-family: 'Material Symbols Outlined'; }
.icon.sign.in::before,
.icon.sign-in::before { content: 'login'; font-family: 'Material Symbols Outlined'; }
.icon.list::before { content: 'list'; font-family: 'Material Symbols Outlined'; }
.icon.th::before { content: 'grid_view'; font-family: 'Material Symbols Outlined'; }
.icon.chevron.left::before { content: 'chevron_left'; font-family: 'Material Symbols Outlined'; }
.icon.chevron.right::before { content: 'chevron_right'; font-family: 'Material Symbols Outlined'; }
.icon.dropdown::before { content: 'expand_more'; font-family: 'Material Symbols Outlined'; }
.icon.chart.bar::before { content: 'bar_chart'; font-family: 'Material Symbols Outlined'; }
.icon.arrows.alternate.horizontal::before { content: 'swap_horiz'; font-family: 'Material Symbols Outlined'; }
.icon.moon::before { content: 'dark_mode'; font-family: 'Material Symbols Outlined'; }
.icon.exclamation.triangle::before { content: 'warning'; font-family: 'Material Symbols Outlined'; }
.icon.map.marker.alternate::before { content: 'location_on'; font-family: 'Material Symbols Outlined'; }
.icon.clipboard.outline::before { content: 'content_paste'; font-family: 'Material Symbols Outlined'; }
.icon.users::before { content: 'group'; font-family: 'Material Symbols Outlined'; }
.icon.user::before { content: 'person'; font-family: 'Material Symbols Outlined'; }
.icon.user.plus::before { content: 'person_add'; font-family: 'Material Symbols Outlined'; }
.icon.calendar::before { content: 'calendar_today'; font-family: 'Material Symbols Outlined'; }
.icon.calendar.check::before { content: 'event_available'; font-family: 'Material Symbols Outlined'; }
.icon.clock.outline::before { content: 'schedule'; font-family: 'Material Symbols Outlined'; }
.icon.edit::before { content: 'edit'; font-family: 'Material Symbols Outlined'; }
.icon.trash::before { content: 'delete'; font-family: 'Material Symbols Outlined'; }
.icon.plus::before { content: 'add'; font-family: 'Material Symbols Outlined'; }
.icon.upload::before { content: 'upload'; font-family: 'Material Symbols Outlined'; }
.icon.image::before { content: 'image'; font-family: 'Material Symbols Outlined'; }
.icon.close::before { content: 'close'; font-family: 'Material Symbols Outlined'; }
.icon.check::before { content: 'check'; font-family: 'Material Symbols Outlined'; }
.icon.arrow.left::before { content: 'arrow_back'; font-family: 'Material Symbols Outlined'; }
.icon.flag.checkered::before { content: 'flag'; font-family: 'Material Symbols Outlined'; }

/* Icon styling */
i.icon {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
}

i.icon::before {
    font-family: 'Material Symbols Outlined';
}

/* Search Bar Styles */
.search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-bar:focus-within {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px rgba(125, 211, 192, 0.2);
}

.search-bar > .icon {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 20px;
}

.search-bar input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--md-sys-color-on-surface);
    font-size: 0.9rem;
    padding: 0.25rem 0;
}

.search-bar input::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.7;
}

.search-bar .clear-search {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
}

.search-bar .clear-search:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.search-bar .clear-search .icon {
    font-size: 18px;
}

/* Pagination Styles */
.pagination-container {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    color: var(--md-sys-color-on-surface);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.pagination-btn:hover:not(.disabled):not(.active) {
    background: var(--md-sys-color-surface-container-highest);
    border-color: var(--md-sys-color-outline);
}

.pagination-btn.active {
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-weight: 500;
}

.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-btn .icon {
    font-size: 18px;
}

.pagination-ellipsis {
    padding: 0 0.5rem;
    color: var(--md-sys-color-on-surface-variant);
}

/* No results message */
.no-results {
    text-align: center;
    padding: 2rem;
    color: var(--md-sys-color-on-surface-variant);
}

.no-results .icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

/* AI Trip Planner */
.ai-trip-planner {
    position: relative;
    display: flex;
    align-items: center;
}

.ai-planner-toggle.icon-btn {
    width: auto;
    height: 36px;
    min-width: unset;
    padding: 0 14px 0 10px;
    gap: 6px;
    background: transparent;
    color: var(--md-sys-color-on-secondary-container);
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large);
}

.ai-planner-toggle.icon-btn:hover {
    background: transparent;
    filter: brightness(1.18);
    color: var(--md-sys-color-on-secondary-container);
}

.ai-planner-toggle.icon-btn.active {
    background: transparent;
    color: var(--md-sys-color-on-primary-container);
    filter: none;
}

.ai-planner-toggle.icon-btn .icon {
    font-size: 18px;
    color: inherit;
}

.ai-planner-form {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-large);
    padding: 1rem;
    min-width: 220px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--md-sys-color-outline-variant);
    flex-direction: column;
    gap: 0.75rem;
    z-index: 200;
}

.ai-planner-form.expanded {
    display: flex;
}

.ai-planner-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #ba68c8;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.ai-planner-header .icon {
    color: #ba68c8;
}

.ai-planner-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ai-planner-field label {
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-planner-field input {
    padding: 0.5rem;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    color: var(--md-sys-color-on-surface);
    font-size: 0.9rem;
}

.ai-planner-field input:focus {
    outline: none;
    border-color: #ba68c8;
}

.ai-purpose-icons {
    display: flex;
    gap: 0.5rem;
}

.ai-purpose-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    cursor: pointer;
    transition: all 0.2s;
}

.ai-purpose-btn .icon {
    font-size: 20px;
    color: var(--md-sys-color-on-surface-variant);
}

.ai-purpose-btn:hover {
    background: var(--md-sys-color-surface-container-high);
    border-color: #ba68c8;
}

.ai-purpose-btn:hover .icon {
    color: #ba68c8;
}

.ai-purpose-btn.active {
    background: rgba(156, 39, 176, 0.2);
    border-color: #ba68c8;
}

.ai-purpose-btn.active .icon {
    color: #ba68c8;
}

.ai-months-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
}

.ai-month-btn {
    padding: 0.35rem 0.25rem;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--md-sys-color-on-surface-variant);
    transition: all 0.2s;
    text-align: center;
}

.ai-month-btn:hover {
    background: var(--md-sys-color-surface-container-high);
    border-color: #ba68c8;
}

.ai-month-btn.active {
    background: rgba(156, 39, 176, 0.2);
    border-color: #ba68c8;
    color: #ba68c8;
}

.ai-planner-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
    border: none;
    border-radius: var(--md-sys-shape-corner-small);
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.ai-planner-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.ai-planner-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.ai-planner-submit .icon {
    font-size: 18px;
}

.ai-planner-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ai-planner-clear:hover {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border-color: var(--md-sys-color-error);
}

.ai-planner-clear .icon {
    font-size: 16px;
}

.ai-planner-mode-toggle {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.ai-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    cursor: pointer;
    transition: all 0.2s;
}

.ai-mode-btn .icon {
    font-size: 16px;
    color: var(--md-sys-color-on-surface-variant);
}

.ai-mode-btn:hover {
    border-color: #ba68c8;
}

.ai-mode-btn:hover .icon {
    color: #ba68c8;
}

.ai-mode-btn.active {
    background: rgba(156, 39, 176, 0.2);
    border-color: #ba68c8;
}

.ai-mode-btn.active .icon {
    color: #ba68c8;
}

.ai-planner-field textarea {
    padding: 0.5rem;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    color: var(--md-sys-color-on-surface);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
}

.ai-planner-field textarea:focus {
    outline: none;
    border-color: #ba68c8;
}

.ai-planner-field textarea::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.6;
}

.ai-parsed-intent {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    background: rgba(156, 39, 176, 0.1);
    border: 1px solid rgba(186, 104, 200, 0.3);
    border-radius: var(--md-sys-shape-corner-medium);
    color: #ce93d8;
    font-size: 0.9rem;
}

.ai-parsed-intent .icon {
    color: #ba68c8;
    font-size: 20px;
}

.ai-parsed-intent strong {
    color: #e1bee7;
}

.ai-parsed-assumptions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    background: rgba(255, 183, 77, 0.1);
    border: 1px solid rgba(255, 183, 77, 0.3);
    border-radius: var(--md-sys-shape-corner-medium);
    color: #ffcc80;
    font-size: 0.85rem;
}

.ai-parsed-assumptions .icon {
    color: #ffb74d;
    font-size: 18px;
}

/* AI Suggestion Trip Card */
.ai-suggestion-card {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(123, 31, 162, 0.1) 100%);
    border: 1px solid rgba(186, 104, 200, 0.3);
    border-radius: var(--md-sys-shape-corner-large);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.ai-suggestion-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #9c27b0, #ba68c8, #9c27b0);
}

.ai-suggestion-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.ai-suggestion-header .icon {
    color: #ba68c8;
    font-size: 16px;
}

.ai-suggestion-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    background: rgba(156, 39, 176, 0.2);
    color: #ba68c8;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ai-suggestion-title {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
    display: block;
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

.ai-suggestion-title:hover {
    color: #ba68c8;
    text-decoration: underline;
}

.ai-suggestion-dates {
    display: inline;
    font-size: 0.7rem;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.2;
}

.ai-suggestion-dates .icon {
    font-size: 12px;
    color: #ba68c8;
    vertical-align: middle;
    margin-right: 0.15rem;
}

.ai-suggestion-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface-variant);
}

.ai-suggestion-location .icon {
    font-size: 16px;
    color: #ba68c8;
}

.ai-suggestion-flip {
    perspective: 1000px;
    min-height: 200px;
    cursor: pointer;
}

.ai-suggestion-flip.top-suggestion .ai-suggestion-front {
    border: 1px solid #4caf50;
}

.ai-suggestion-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.ai-suggestion-flip.flipped .ai-suggestion-inner {
    transform: rotateY(180deg);
}

.ai-suggestion-front,
.ai-suggestion-back {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 200px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-sizing: border-box;
}

.ai-suggestion-back {
    transform: rotateY(180deg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.ai-suggestion-home-days {
    display: flex;
    gap: 0.5rem;
    font-size: 0.55rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 0.25rem;
    white-space: nowrap;
}

.ai-suggestion-home-days .home-days-item {
    display: inline;
}

.ai-suggestion-reasoning {
    font-size: 0.6rem;
    color: var(--md-sys-color-on-surface);
    line-height: 1.4;
    margin-top: 0.25rem;
    flex: 1;
    overflow-y: auto;
}

.ai-suggestion-reasoning .icon {
    font-size: 14px;
    vertical-align: middle;
    margin-right: 0.25rem;
    color: #ba68c8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ai-planner-form {
        position: fixed;
        top: 60px;
        left: 0.5rem;
        right: 0.5rem;
        min-width: auto;
    }
}

.refresh-indicator {
    display: none;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--md-sys-color-primary);
    padding: 0.25rem 0.6rem;
    border-radius: 1rem;
    background: rgba(125, 211, 192, 0.1);
    white-space: nowrap;
}

.refresh-indicator.active {
    display: inline-flex;
}

.refresh-indicator-icon {
    font-size: 16px;
    animation: spin 1s linear infinite;
}

.sync-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--md-sys-color-on-surface-variant);
    padding: 0.25rem 0.6rem;
    border-radius: 1rem;
    background: var(--md-sys-color-surface-container-high);
    white-space: nowrap;
    opacity: 0.85;
    transition: color 0.3s, background 0.3s;
    user-select: none;
}

.sync-status.stale {
    color: var(--md-sys-color-error);
    background: rgba(255, 180, 171, 0.12);
    opacity: 1;
}

.sync-status.sync-failed {
    color: var(--md-sys-color-error);
    background: rgba(255, 180, 171, 0.12);
    opacity: 1;
}

.sync-status .icon {
    font-size: 14px;
}

.trip-freshness {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.85rem 0 0.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.trip-freshness[hidden] {
    display: none;
}

.trip-freshness__icon {
    flex: 0 0 auto;
    color: var(--md-sys-color-primary);
}

.trip-freshness[data-state="refreshing"] .trip-freshness__icon {
    animation: spin 1s linear infinite;
}

.trip-freshness[data-state="stale"] {
    border-color: rgba(246, 190, 90, 0.45);
    background: rgba(246, 190, 90, 0.08);
}

.trip-freshness[data-state="stale"] .trip-freshness__icon {
    color: #f6be5a;
}

.trip-freshness[data-state="failed"] {
    border-color: var(--md-sys-color-error);
    background: rgba(255, 180, 171, 0.08);
}

.trip-freshness[data-state="failed"] .trip-freshness__icon {
    color: var(--md-sys-color-error);
}

.trip-freshness__body {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
    font-size: 0.82rem;
}

.trip-freshness__body strong {
    font-size: 0.9rem;
}

.trip-freshness__body > span {
    color: var(--md-sys-color-on-surface-variant);
}

.trip-freshness__time {
    font-size: 0.75rem;
}

.trip-freshness__retry {
    margin-left: auto;
    border: 1px solid currentColor;
    border-radius: var(--md-sys-shape-corner-full);
    padding: 0.42rem 0.8rem;
    background: transparent;
    color: var(--md-sys-color-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.trip-freshness__retry[hidden] {
    display: none;
}

@media (max-width: 600px) {
    .sync-status {
        display: none;
    }

    .trip-freshness {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .trip-freshness__body {
        flex: 1 1 calc(100% - 2.5rem);
    }

    .trip-freshness__retry {
        margin-left: 2.25rem;
    }
}

.trips-grid {
    transition: opacity 0.2s ease;
}

.trips-grid--updating {
    opacity: 0.3;
    pointer-events: none;
}

.skeleton-card {
    border-radius: var(--md-sys-shape-corner-large);
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    overflow: hidden;
    min-height: 200px;
    position: relative;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.skeleton-card--home {
    background: linear-gradient(135deg, rgba(158, 224, 208, 0.15) 0%, rgba(197, 236, 228, 0.1) 100%);
    border: 1px solid rgba(158, 224, 208, 0.2);
    min-height: 150px;
}

.skeleton-card--fade-out {
    opacity: 0;
}

.skeleton-shimmer {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(125, 211, 192, 0.06) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

#tripsContent {
    display: contents;
}

.trips-content--hidden {
    display: none !important;
}

.trips-content--reveal > * {
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* View Toggle Group */
.view-toggle-group {
    display: flex;
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 2px;
    gap: 2px;
}

.view-toggle-btn {
    border-radius: var(--md-sys-shape-corner-full) !important;
    width: 36px;
    height: 36px;
    transition: background 0.2s, color 0.2s;
}

.view-toggle-btn.active {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.view-toggle-btn:not(.active) {
    color: var(--md-sys-color-on-surface-variant);
}

/* Calendar View */
.calendar-view {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.calendar-loading,
.calendar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem;
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-body-large);
}

.action-status {
    margin: 0.75rem auto 0;
    width: min(1100px, calc(100% - 2rem));
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.875rem;
}

.action-status[hidden] {
    display: none;
}

.action-status--error {
    border-color: var(--md-sys-color-error);
}

.action-status--success {
    border-color: var(--md-sys-color-primary);
}

.action-status--modal {
    width: auto;
    margin: 0 0 1rem;
}

.action-status button {
    margin-left: 0.65rem;
    border: 0;
    background: transparent;
    color: var(--md-sys-color-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.calendar-loading .icon {
    font-size: 32px;
    color: var(--md-sys-color-primary);
}

.calendar-empty .icon {
    font-size: 48px;
    color: var(--md-sys-color-error);
}

.cal-month {
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-large);
    overflow: hidden;
}

.cal-month-header {
    font: var(--md-sys-typescale-title-large);
    color: var(--md-sys-color-on-surface);
    padding: 1rem 1.25rem 0.75rem;
}

.cal-day-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--md-sys-color-outline-variant);
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.cal-day-name {
    padding: 0.5rem 0.25rem;
    text-align: center;
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--md-sys-color-surface-container-high);
}

.cal-week {
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.cal-week-cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--md-sys-color-outline-variant);
}

.cal-week-spans {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    padding: 0 1px;
    background: var(--md-sys-color-surface-container);
}

.cal-cell {
    min-height: 72px;
    padding: 4px;
    background: var(--md-sys-color-surface-container-lowest);
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
}

.cal-cell-empty {
    background: var(--md-sys-color-surface-container);
}

.cal-cell-today {
    background: rgba(125, 211, 192, 0.06);
}

.cal-cell-today .cal-day-num {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-radius: var(--md-sys-shape-corner-full);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cal-day-num {
    font: var(--md-sys-typescale-label-medium);
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 1px;
}

.cal-span {
    display: flex;
    align-items: center;
    height: 22px;
    padding: 0 5px;
    font: var(--md-sys-typescale-label-small);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
    transition: filter 0.15s;
}

.cal-span:hover {
    filter: brightness(1.3);
}

.cal-span-commitment {
    background: rgba(255, 183, 77, 0.25);
    color: #ffcc80;
}

.cal-span-round {
    border-radius: var(--md-sys-shape-corner-extra-small);
}

.cal-span-round-left {
    border-radius: var(--md-sys-shape-corner-extra-small) 0 0 var(--md-sys-shape-corner-extra-small);
}

.cal-span-round-right {
    border-radius: 0 var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0;
}

.cal-span-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-span-bridge {
    flex-shrink: 0;
    margin-left: 4px;
}

/* Past trip spans — muted to indicate history */
.cal-span-past {
    opacity: 0.42;
    filter: saturate(0.35);
}

/* Past month blocks — subtly dimmed */
.cal-month-past {
    opacity: 0.72;
}
.cal-month-past .cal-month-header {
    color: var(--md-sys-color-on-surface-variant);
}

/* Today jump button — sticky inside the calendar scroll container */
.cal-today-btn {
    position: sticky;
    top: 8px;
    align-self: flex-end;
    z-index: 10;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    padding: 0.3rem 1rem;
    font: var(--md-sys-typescale-label-medium);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin-bottom: -0.5rem;
}
.cal-today-btn:hover {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

@media (max-width: 768px) {
    .calendar-view {
        padding: 0.5rem;
        gap: 1.5rem;
    }

    .cal-month-header {
        font: var(--md-sys-typescale-title-medium);
        padding: 0.75rem 1rem 0.5rem;
    }

    .cal-cell {
        min-height: 52px;
        padding: 2px;
    }

    .cal-day-name {
        padding: 0.35rem 0.1rem;
        font-size: 10px;
    }

    .cal-span {
        font-size: 9px;
        padding: 0 3px;
    }

    .cal-day-num {
        font-size: 10px;
    }
}

.coverage-bar-wrapper {
    position: relative;
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
}

.coverage-bar {
    display: flex;
    gap: 2px;
    height: 28px;
    border-radius: var(--md-sys-shape-corner-small);
    overflow-x: auto;
    overflow-y: hidden;
    /* Only scrolls horizontally; y gestures must chain to the page.
       overscroll-behavior-x: contain prevents the horizontal strip from
       triggering a pull-to-refresh or horizontal page chain at the edges. */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}

.coverage-bar::-webkit-scrollbar {
    height: 4px;
}

.coverage-bar::-webkit-scrollbar-track {
    background: transparent;
}

.coverage-bar::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: 2px;
}

.coverage-segment {
    flex: 1 1 0;
    min-width: 18px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
    position: relative;
}

.coverage-segment:hover {
    transform: scaleY(1.35);
    filter: brightness(1.2);
    z-index: 2;
}

.coverage-segment-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
    overflow: hidden;
}

.coverage-covered {
    background: var(--md-sys-color-primary-container);
}

.coverage-covered.has-flight {
    background: var(--md-sys-color-tertiary-container);
}

.coverage-covered.has-hotel {
    background: var(--md-sys-color-primary-container);
}

.coverage-covered.has-cruise {
    background: #274b5e;
}

.coverage-covered.has-flight.has-hotel {
    background: linear-gradient(135deg, var(--md-sys-color-tertiary-container) 50%, var(--md-sys-color-primary-container) 50%);
}

.coverage-gap {
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed var(--md-sys-color-outline-variant);
}

.coverage-gap.urgency-red {
    background: rgba(255, 76, 76, 0.2);
    border-color: #ff4c4c;
}

.coverage-gap.urgency-orange {
    background: rgba(255, 152, 0, 0.2);
    border-color: #ff9800;
}

.coverage-gap.urgency-yellow {
    background: rgba(255, 235, 59, 0.12);
    border-color: #ffeb3b;
}

.coverage-type-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.coverage-dot-flight {
    background: var(--md-sys-color-tertiary);
}

.coverage-dot-hotel {
    background: var(--md-sys-color-primary);
}

.coverage-dot-cruise {
    background: #64b5f6;
}

.coverage-dot-activity {
    background: #ff9800;
}

.coverage-dot-transport {
    background: #f5a623;
}

.coverage-tooltip {
    position: absolute;
    bottom: calc(100% - 4px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    padding: 0.35rem 0.75rem;
    border-radius: var(--md-sys-shape-corner-small);
    font: var(--md-sys-typescale-label-small);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 10;
}

.coverage-tooltip.visible {
    opacity: 1;
}

.coverage-legend {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-on-surface-variant);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-flight {
    background: var(--md-sys-color-tertiary-container);
}

.legend-hotel {
    background: var(--md-sys-color-primary-container);
}

.legend-cruise {
    background: #274b5e;
}

.legend-activity {
    background: rgba(255, 152, 0, 0.3);
}

.legend-gap {
    background: rgba(255, 76, 76, 0.2);
    border: 1px dashed #ff4c4c;
}

.coverage-highlight {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
    animation: coverageHighlightPulse 0.6s ease-in-out 2;
}

@keyframes coverageHighlightPulse {
    0%, 100% { outline-color: var(--md-sys-color-primary); }
    50% { outline-color: transparent; }
}

@media (max-width: 768px) {
    .coverage-bar {
        height: 24px;
    }

    .coverage-segment {
        min-width: 14px;
    }

    .coverage-type-dot {
        width: 4px;
        height: 4px;
    }
}

.shared-view-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large);
}

@media print {
    .bottom-nav,
    .dashboard-header,
    .header-right,
    #refreshBtn,
    .refresh-indicator {
        display: none !important;
    }
}

/* ── Card entrance animations ── */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.trips-grid > .trip-card,
.trips-grid > .trip-hero,
.trips-grid > .home-divider {
    animation: fadeSlideUp 0.3s ease-out both;
}

.trips-grid > *:nth-child(1)  { animation-delay: 0ms;    }
.trips-grid > *:nth-child(2)  { animation-delay: 100ms;  }
.trips-grid > *:nth-child(3)  { animation-delay: 200ms;  }
.trips-grid > *:nth-child(4)  { animation-delay: 300ms;  }
.trips-grid > *:nth-child(5)  { animation-delay: 400ms;  }
.trips-grid > *:nth-child(6)  { animation-delay: 500ms;  }
.trips-grid > *:nth-child(7)  { animation-delay: 600ms;  }
.trips-grid > *:nth-child(8)  { animation-delay: 700ms;  }
.trips-grid > *:nth-child(9)  { animation-delay: 800ms;  }
.trips-grid > *:nth-child(10) { animation-delay: 900ms;  }
.trips-grid > *:nth-child(11) { animation-delay: 1000ms; }
.trips-grid > *:nth-child(12) { animation-delay: 1100ms; }

/* ── Pre-trip Checklist ────────────────────────────────── */
.trip-sidebar .checklist-section {
    margin: 0 0 1rem;
}

.checklist-section {
    margin: 1.5rem 0 0;
    border-radius: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container);
    overflow: hidden;
}

.checklist-header-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: rgba(125, 211, 192, 0.06);
}

.checklist-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-on-surface);
    text-align: left;
    font-size: inherit;
    gap: 0.5rem;
    min-width: 0;
}

.checklist-toggle:hover {
    background: rgba(125, 211, 192, 0.08);
}

.checklist-toggle-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.checklist-toggle-left .icon {
    font-size: 20px;
    color: var(--md-sys-color-primary);
    flex-shrink: 0;
}

.checklist-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checklist-chevron {
    font-size: 20px;
    color: var(--md-sys-color-on-surface-variant);
    transition: transform 0.3s;
    flex-shrink: 0;
}

.checklist-section.open .checklist-chevron {
    transform: rotate(180deg);
}

.checklist-body {
    display: none;
    padding: 1rem;
}

.checklist-section.open .checklist-body {
    display: block;
}

.checklist-hint {
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

#checklistLoading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 0;
    justify-content: center;
}

.checklist-category {
    margin-bottom: 1rem;
}

.checklist-category:last-child {
    margin-bottom: 0;
}

.checklist-category-header {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 0.3rem;
    padding: 0 0.25rem;
}

.checklist-category-header > .icon {
    font-size: 14px;
}

.checklist-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    border-radius: 6px;
    transition: background 0.15s;
}

.checklist-item:hover {
    background: rgba(125, 211, 192, 0.06);
}

.checklist-drag-handle {
    font-size: 16px;
    color: var(--md-sys-color-outline-variant);
    flex-shrink: 0;
    padding: 0.38rem 0 0.38rem 0.3rem;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s;
    user-select: none;
    line-height: 1;
}

.checklist-item:hover .checklist-drag-handle {
    opacity: 1;
}

.checklist-item.dragging {
    opacity: 0.35;
}

.checklist-item.drag-over {
    border-top: 2px solid var(--md-sys-color-primary);
}

.checklist-label {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.32rem 0.4rem 0.32rem 0.25rem;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

.checklist-checkbox {
    accent-color: var(--md-sys-color-primary);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
}

.checklist-item-text {
    font-size: 0.84rem;
    color: var(--md-sys-color-on-surface);
    line-height: 1.45;
}

.checklist-item.checked .checklist-item-text {
    text-decoration: line-through;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.55;
}

.checklist-item-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.38rem 0.3rem;
    color: var(--md-sys-color-primary);
    text-decoration: none;
    opacity: 0.55;
    transition: opacity 0.15s;
    line-height: 1;
}

.checklist-item-link:hover {
    opacity: 1;
}

.checklist-item-link .icon {
    font-size: 13px;
}

.checklist-item-delete {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.38rem 0.4rem 0.38rem 0.1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0;
    transition: opacity 0.15s;
    line-height: 1;
}

.checklist-item:hover .checklist-item-delete {
    opacity: 0.6;
}

.checklist-item-delete:hover {
    opacity: 1 !important;
    color: var(--md-sys-color-error);
}

.checklist-item-delete .icon {
    font-size: 14px;
}

.checklist-item-edit {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.38rem 0.4rem 0.38rem 0.1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0;
    transition: opacity 0.15s;
    line-height: 1;
}

.checklist-item:hover .checklist-item-edit {
    opacity: 0.6;
}

.checklist-item-edit:hover {
    opacity: 1 !important;
    color: var(--md-sys-color-primary);
}

.checklist-item-edit .icon {
    font-size: 14px;
}

.checklist-item-editing {
    flex-direction: column;
    align-items: stretch;
}

.checklist-edit-form {
    padding: 0.5rem;
    background: var(--md-sys-color-surface-container-high);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.checklist-edit-input,
.checklist-edit-url {
    width: 100%;
    padding: 0.38rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-size: 0.82rem;
    box-sizing: border-box;
    font-family: inherit;
}

.checklist-edit-input:focus,
.checklist-edit-url:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
}

.checklist-edit-actions {
    display: flex;
    gap: 0.4rem;
}

.checklist-edit-save {
    flex: 1;
    font-size: 0.78rem !important;
    padding: 0.3rem 0.5rem !important;
    min-height: unset !important;
}

.checklist-edit-cancel {
    font-size: 0.78rem !important;
    padding: 0.3rem 0.5rem !important;
    min-height: unset !important;
}

.checklist-add-row {
    margin-top: 0.15rem;
    margin-bottom: 0.25rem;
}

.checklist-add-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-primary);
    font-size: 0.79rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    opacity: 0.6;
    transition: opacity 0.15s, background 0.15s;
    width: 100%;
    font-family: inherit;
}

.checklist-add-btn:hover {
    opacity: 1;
    background: rgba(125, 211, 192, 0.08);
}

.checklist-add-btn .icon {
    font-size: 15px;
}

.checklist-add-form {
    padding: 0.5rem;
    background: var(--md-sys-color-surface-container-high);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.checklist-add-input,
.checklist-add-url {
    width: 100%;
    padding: 0.38rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-size: 0.82rem;
    box-sizing: border-box;
    font-family: inherit;
}

.checklist-add-input:focus,
.checklist-add-url:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
}

.checklist-add-actions {
    display: flex;
    gap: 0.4rem;
}

.checklist-add-submit {
    flex: 1;
    font-size: 0.78rem !important;
    padding: 0.3rem 0.5rem !important;
    min-height: unset !important;
}

.checklist-add-cancel {
    font-size: 0.78rem !important;
    padding: 0.3rem 0.5rem !important;
    min-height: unset !important;
}

/* ===== Travel Document Vault ===== */

/* Admin: document cards
   Visual language matches the sibling configuration tabs (Users / Airlines /
   Restaurants): translucent rgba surface, 8px radius, rgba(255,255,255,*)
   borders, circular icon chip, and the same action-button treatment. */
.documents-list { display: flex; flex-direction: column; gap: 0.5rem; }
.document-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: background 0.2s, border-color 0.2s;
}
.document-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}
.document-icon {
    width: 40px;
    height: 40px;
    background: rgba(74, 144, 217, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.document-icon .icon { font-size: 1.2rem; color: #4a90d9; }
.document-info { flex: 1; min-width: 0; }
.document-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}
.document-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: #888;
    font-size: 0.85rem;
}
.document-details .detail-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.document-details .icon { font-size: 0.85rem; opacity: 0.85; }
.document-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.document-actions button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #888;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.document-actions button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.document-actions .delete-document-btn:hover {
    background: rgba(219, 40, 40, 0.2);
    border-color: rgba(219, 40, 40, 0.5);
    color: #db2828;
}
.document-actions .icon { font-size: 1.125rem; }

.document-owner-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.document-owner-pill.owner-jeff { background: rgba(74, 144, 217, 0.2); color: #74b9ff; }
.document-owner-pill.owner-jose { background: rgba(155, 89, 182, 0.2); color: #c39bd3; }
.document-owner-pill.owner-both { background: rgba(46, 204, 113, 0.2); color: #82e0aa; }

.document-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.document-form-grid .full-width { grid-column: 1 / -1; }


/* Dashboard expiry banner */
.doc-expiry-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.12), rgba(231, 76, 60, 0.08));
    border: 1px solid rgba(243, 156, 18, 0.35);
    border-radius: 12px;
}
.doc-expiry-banner-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(243, 156, 18, 0.2);
    color: #f39c12;
}
.doc-expiry-banner-icon .icon { font-size: 22px; }
.doc-expiry-banner-body { flex: 1; min-width: 0; }
.doc-expiry-banner-title {
    display: flex; align-items: center; gap: 0.5rem;
    color: #e8eaed;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
}
.doc-expiry-banner-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 0.45rem;
    background: rgba(243, 156, 18, 0.3);
    color: #f39c12;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.doc-expiry-banner-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.doc-expiry-banner-action {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #9aa4b2;
    text-decoration: none;
    transition: all 0.15s;
}
.doc-expiry-banner-action:hover { background: rgba(74, 144, 217, 0.2); color: #74b9ff; }
.doc-expiry-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #c0c6d1;
    font-size: 0.78rem;
    line-height: 1.2;
}
.doc-expiry-pill .icon { font-size: 14px; opacity: 0.85; }
.doc-expiry-pill strong { color: #e8eaed; font-weight: 600; }
.doc-expiry-pill.urgency-warning { border-color: rgba(243, 156, 18, 0.4); }
.doc-expiry-pill.urgency-critical { border-color: rgba(231, 126, 34, 0.55); background: rgba(231, 126, 34, 0.12); }
.doc-expiry-pill.urgency-expired { border-color: rgba(231, 76, 60, 0.6); background: rgba(231, 76, 60, 0.15); color: #f5b7b1; }
.doc-expiry-pill.urgency-expired strong { color: #f5b7b1; }

/* Trip detail traveler chips */
.chip-doc {
    background: rgba(74, 144, 217, 0.12) !important;
    border: 1px solid rgba(74, 144, 217, 0.3) !important;
    color: #c0d4ec !important;
}
.chip-doc .icon { font-size: 14px; opacity: 0.9; }
.chip-doc-jeff {
    background: rgba(74, 144, 217, 0.12) !important;
    border-color: rgba(74, 144, 217, 0.35) !important;
    color: #b3d4f0 !important;
}
.chip-doc-jose {
    background: rgba(155, 89, 182, 0.12) !important;
    border-color: rgba(155, 89, 182, 0.35) !important;
    color: #d7b9e3 !important;
}

/* Document groups by owner — sub-section header inside the Documents tab.
   Uses the same translucent rgba border the rest of admin uses. */
.documents-group {
    margin-bottom: 1.25rem;
}
.documents-group:last-child {
    margin-bottom: 0;
}
.documents-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    color: #aaa;
    font-size: 0.85rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.documents-group-header .icon {
    font-size: 1rem;
    color: var(--md-sys-color-primary, #7dd3c0);
    opacity: 0.85;
}
.documents-group-label { color: #fff; }
.documents-group-count {
    margin-left: auto;
    background: rgba(74, 144, 217, 0.2);
    color: #74b9ff;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.documents-group-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Packing list ───────────────────────────────────── */
/* Shell matches .checklist-section (same border, radius, background) so the
   Packing card sits flush with the Pre-Trip Checklist visually. */
.packing-section {
    margin: 1.5rem 0 0;
    border-radius: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container);
    overflow: hidden;
}
.packing-header-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: rgba(125, 211, 192, 0.06);
}
.packing-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-on-surface);
    text-align: left;
    font-size: inherit;
    gap: 0.5rem;
    min-width: 0;
}
.packing-toggle:hover {
    background: rgba(125, 211, 192, 0.08);
}
.packing-toggle-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.packing-toggle-left .icon {
    font-size: 20px;
    color: var(--md-sys-color-primary);
    flex-shrink: 0;
}
.packing-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.packing-toggle-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.packing-header-summary {
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
    font-variant-numeric: tabular-nums;
}
.packing-chevron {
    font-size: 20px;
    color: var(--md-sys-color-on-surface-variant);
    transition: transform 0.3s;
    flex-shrink: 0;
}
.packing-section.open .packing-chevron {
    transform: rotate(180deg);
}
.packing-header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-right: 0.5rem;
}
.packing-body {
    display: none;
    padding: 1rem;
}
.packing-section.open .packing-body {
    display: block;
}
.packing-progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-medium);
    margin-bottom: 1rem;
}
.packing-progress-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font: var(--md-sys-typescale-label-medium);
    color: var(--md-sys-color-on-surface-variant);
}
.packing-progress-label {
    width: 48px;
    flex-shrink: 0;
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
}
.packing-progress-track {
    flex: 1;
    height: 8px;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-full);
    overflow: hidden;
}
.packing-progress-fill {
    height: 100%;
    border-radius: var(--md-sys-shape-corner-full);
    transition: width 0.3s ease;
}
.packing-progress-fill--jeff { background: linear-gradient(90deg, #4a90d9, #74b9ff); }
.packing-progress-fill--jose { background: linear-gradient(90deg, #d97a4a, #ffb074); }
.packing-progress-pct {
    width: 110px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.packing-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--md-sys-color-on-surface-variant);
}
.packing-empty-text { margin: 0 0 1rem; font: var(--md-sys-typescale-body-medium); }
.packing-empty-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.packing-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding: 1rem;
    color: var(--md-sys-color-on-surface-variant);
}
.packing-categories {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.packing-category {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    overflow: hidden;
}
.packing-category-toggle {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-title-small);
}
.packing-category-toggle:hover { background: rgba(125, 211, 192, 0.06); }
.packing-category-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.packing-category-left .icon { color: var(--md-sys-color-primary); font-size: 20px; }
.packing-category-name { font-weight: 600; }
.packing-category-count {
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 0.05rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
}
.packing-category-chev { transition: transform 0.2s; color: var(--md-sys-color-on-surface-variant); }
.packing-category.open .packing-category-chev { transform: rotate(180deg); }
.packing-category-body { display: none; padding: 0.25rem 0.5rem 0.75rem; }
.packing-category.open .packing-category-body { display: block; }
.packing-item {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--md-sys-shape-corner-small);
    transition: background 0.15s;
}
.packing-item:hover { background: rgba(125, 211, 192, 0.04); }
.packing-check {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--md-sys-shape-corner-small);
    font: var(--md-sys-typescale-label-small);
    cursor: pointer;
    user-select: none;
}
.packing-check input[type=checkbox] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}
.packing-check--jeff { background: rgba(74, 144, 217, 0.10); color: #74b9ff; }
.packing-check--jeff input[type=checkbox] { accent-color: #4a90d9; }
.packing-check--jose { background: rgba(217, 122, 74, 0.10); color: #ffb074; }
.packing-check--jose input[type=checkbox] { accent-color: #d97a4a; }
.packing-check-label { font-weight: 600; }
.packing-item-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--md-sys-color-on-surface);
    min-width: 0;
}
.packing-item-name { font: var(--md-sys-typescale-body-medium); }
.packing-item-qty {
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-medium);
    font-variant-numeric: tabular-nums;
}
.packing-item-qty--add,
.packing-item-notes--add {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.55;
    font-style: italic;
}
.packing-past-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    margin: 0 0 0.75rem 0;
    border-radius: var(--md-sys-shape-corner-medium);
    background: color-mix(in srgb, var(--md-sys-color-secondary-container) 70%, transparent);
    color: var(--md-sys-color-on-secondary-container);
    font: var(--md-sys-typescale-body-medium);
}
.packing-past-summary .icon { font-size: 1.1rem; }
.packing-item:hover .packing-item-qty--add,
.packing-item:hover .packing-item-notes--add {
    opacity: 0.85;
}
.packing-item-notes {
    width: 100%;
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-body-small);
}
.packing-item-del {
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--md-sys-color-on-surface-variant);
    background: transparent;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}
.packing-item:hover .packing-item-del { opacity: 1; }
.packing-item-del:hover { background: rgba(255, 180, 171, 0.12); color: var(--md-sys-color-error); }
.packing-item-del .icon { font-size: 18px; }
.packing-add-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-medium);
    flex-wrap: wrap;
}
.packing-input {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    padding: 0.5rem 0.75rem;
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-body-medium);
}
.packing-input:focus { outline: none; border-color: var(--md-sys-color-primary); }
.packing-input--cat { min-width: 140px; }
.packing-input--name { flex: 1; min-width: 160px; }
.packing-input--qty { width: 70px; }
.packing-input--inline {
    padding: 0.15rem 0.4rem;
    font: var(--md-sys-typescale-body-medium);
    width: auto;
    min-width: 120px;
}
@media (max-width: 600px) {
    .packing-item { grid-template-columns: auto auto 1fr; }
    .packing-item-del { grid-column: 4; opacity: 1; }
    .packing-progress-pct { width: 90px; font-size: 0.75rem; }
}

/* ── Sidebar variant for the packing section (280px column) ─────────────
   Mirror the .trip-sidebar .checklist-section override exactly so the
   Packing card matches the Pre-Trip Checklist shell. The dense overrides
   below this rule are for the *inner* content (progress bars, item rows)
   which are denser than checklist items. */
.trip-sidebar .packing-section {
    margin: 0 0 1rem;
}
.trip-sidebar .packing-header-actions .btn,
.trip-sidebar .packing-header-actions .icon-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}
.trip-sidebar .packing-header-actions .icon { font-size: 16px; }
.trip-sidebar .packing-progress {
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.625rem;
    gap: 0.375rem;
}
.trip-sidebar .packing-progress-row {
    gap: 0.5rem;
    font-size: 0.7rem;
}
.trip-sidebar .packing-progress-label {
    width: 36px;
    font-size: 0.75rem;
}
.trip-sidebar .packing-progress-track { height: 6px; }
.trip-sidebar .packing-progress-pct {
    width: auto;
    min-width: 56px;
    font-size: 0.7rem;
}
.trip-sidebar .packing-empty {
    padding: 0.75rem 0.5rem;
}
.trip-sidebar .packing-empty-text { font-size: 0.8rem; }
.trip-sidebar .packing-empty-actions {
    flex-direction: column;
    gap: 0.375rem;
}
.trip-sidebar .packing-empty-actions .btn {
    width: 100%;
    justify-content: center;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
}
.trip-sidebar .packing-categories { gap: 0.375rem; }
.trip-sidebar .packing-category-toggle {
    padding: 0.5rem 0.625rem;
    font-size: 0.8rem;
}
.trip-sidebar .packing-category-left { gap: 0.375rem; min-width: 0; }
.trip-sidebar .packing-category-left .icon { font-size: 18px; }
.trip-sidebar .packing-category-name {
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.trip-sidebar .packing-category-count {
    font-size: 0.65rem;
    padding: 0.05rem 0.4rem;
}
.trip-sidebar .packing-category-body {
    padding: 0.25rem 0.25rem 0.5rem;
}
.trip-sidebar .packing-item {
    grid-template-columns: auto auto 1fr auto;
    gap: 0.25rem;
    padding: 0.375rem 0.4rem;
}
.trip-sidebar .packing-check {
    padding: 0.1rem 0.3rem;
    gap: 0.2rem;
    font-size: 0.65rem;
}
.trip-sidebar .packing-check input[type=checkbox] {
    width: 14px;
    height: 14px;
}
.trip-sidebar .packing-check-label { display: none; }
.trip-sidebar .packing-item-main {
    gap: 0.25rem;
    flex-wrap: wrap;
}
.trip-sidebar .packing-item-name {
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.trip-sidebar .packing-item-qty,
.trip-sidebar .packing-item-notes { font-size: 0.7rem; }
.trip-sidebar .packing-item-del { opacity: 1; width: 22px; height: 22px; }
.trip-sidebar .packing-item-del .icon { font-size: 14px; }
.trip-sidebar .packing-add-row {
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem;
    margin-top: 0.625rem;
}
.trip-sidebar .packing-input {
    padding: 0.4rem 0.5rem;
    font-size: 0.78rem;
    width: 100%;
    min-width: 0;
}
.trip-sidebar .packing-input--cat,
.trip-sidebar .packing-input--name,
.trip-sidebar .packing-input--qty { width: 100%; min-width: 0; }
.trip-sidebar .packing-add-row .btn {
    width: 100%;
    justify-content: center;
    font-size: 0.78rem;
    padding: 0.4rem 0.75rem;
}
.trip-sidebar .packing-loading { padding: 0.625rem; font-size: 0.8rem; }
.trip-sidebar .packing-past-summary {
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
}

/* ============================================================ *
 * "Now" command-center panel (top of dashboard)                *
 * ============================================================ */
.now-panel {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    margin: 0.75rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    color: var(--md-sys-color-on-surface);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.now-panel[data-state="in_transit"],
.now-panel[data-state="day_of_travel"] {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 1px var(--md-sys-color-primary-container) inset;
}
.now-panel[data-state="returning"] {
    border-color: #ffb78a;
}
.now-panel[data-state="error"] {
    border-color: var(--md-sys-color-outline-variant);
    opacity: 0.85;
}

.now-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.now-panel-state {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-on-surface-variant);
}
.now-panel-state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--md-sys-color-on-surface-variant);
    box-shadow: 0 0 0 0 rgba(255,255,255,0.0);
}
.now-panel[data-state="in_transit"] .now-panel-state-dot,
.now-panel[data-state="day_of_travel"] .now-panel-state-dot {
    background: var(--md-sys-color-primary);
    animation: now-pulse 2.6s ease-in-out infinite;
}
.now-panel[data-state="returning"] .now-panel-state-dot {
    background: #ffb78a;
}
.now-panel[data-state="at_home"] .now-panel-state-dot {
    background: var(--md-sys-color-on-surface-variant);
}
@keyframes now-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(120, 220, 200, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(120, 220, 200, 0); }
    100% { box-shadow: 0 0 0 0 rgba(120, 220, 200, 0); }
}
.now-panel-state-label {
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.now-panel-degraded-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 183, 138, 0.12);
    color: #ffb78a;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    text-transform: none;
    letter-spacing: 0;
}
.now-panel-degraded-badge .icon {
    font-size: 14px;
}

.now-panel-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
}
.now-panel-trip {
    color: var(--md-sys-color-on-surface);
    font-weight: 500;
}
.now-panel-fresh {
    font-variant-numeric: tabular-nums;
}

.now-panel-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: stretch;
}
@media (max-width: 640px) {
    .now-panel-body { grid-template-columns: 1fr; }
}

.now-panel-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.now-panel-action {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    background: var(--md-sys-color-surface-container-high);
    border-radius: 12px;
    font-size: 0.95rem;
    color: var(--md-sys-color-on-surface);
}
.now-panel-action .icon {
    font-size: 20px;
    color: var(--md-sys-color-primary);
    flex: 0 0 auto;
}
.now-panel-action-label {
    line-height: 1.3;
}

.now-panel-skeleton-row {
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(90deg,
        var(--md-sys-color-surface-container-high) 0%,
        var(--md-sys-color-surface-container-highest) 50%,
        var(--md-sys-color-surface-container-high) 100%);
    background-size: 200% 100%;
    animation: now-shimmer 1.4s ease-in-out infinite;
}
@keyframes now-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.now-panel-side {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 160px;
}
.now-panel-weather,
.now-panel-flight-status {
    background: var(--md-sys-color-surface-container-low);
    border-radius: 12px;
    padding: 0.5rem 0.7rem;
    text-align: right;
}
.now-panel-weather-label,
.now-panel-flight-status-flight {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-on-surface-variant);
}
.now-panel-weather-temps {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--md-sys-color-on-surface);
}
.now-panel-weather-low {
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 400;
    font-size: 0.95rem;
    margin-left: 0.15rem;
}
.now-panel-weather-dest,
.now-panel-flight-status-detail {
    font-size: 0.78rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 0.1rem;
}
.now-panel-flight-status-detail {
    color: var(--md-sys-color-on-surface);
    font-weight: 500;
}

.now-panel-wallet {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--md-sys-color-outline-variant);
}
.now-panel-wallet-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 10px;
    color: var(--md-sys-color-on-surface);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 150ms ease, transform 80ms ease;
    text-align: left;
}
.now-panel-wallet-item:hover {
    background: var(--md-sys-color-surface-container-high);
}
.now-panel-wallet-item:active {
    transform: scale(0.98);
}
.now-panel-wallet-item--copied {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-surface);
}
.now-panel-wallet-item .icon {
    font-size: 18px;
    color: var(--md-sys-color-primary);
    flex: 0 0 auto;
}
.now-panel-wallet-item-body {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.now-panel-wallet-item-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-on-surface-variant);
}
.now-panel-wallet-item-value {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 18ch;
}

.now-panel-empty {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    background: var(--md-sys-color-surface-container-low);
    border-radius: 12px;
    color: var(--md-sys-color-on-surface);
}
.now-panel-empty .icon {
    font-size: 28px;
    color: var(--md-sys-color-primary);
}
.now-panel-empty-sub {
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 0.15rem;
}
.now-panel-flight-status--degraded {
    opacity: 0.85;
    border: 1px dashed var(--md-sys-color-outline-variant);
    background: transparent;
}
.now-panel-flight-status-detail--muted {
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 400;
    font-style: italic;
}

/* =========================================================================
   Trip overlay "Your additions" — tabbed quick-add form, items list,
   chat panel. Styled to match the dark Material surface used elsewhere.
   ========================================================================= */
.trip-overlay-section {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 16px;
    padding: 1rem 1.25rem 1.25rem;
    margin: 1rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trip-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.trip-overlay-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.trip-overlay-header h3 .icon {
    color: var(--md-sys-color-primary);
}

.trip-overlay-quickadd {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.overlay-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding-bottom: 0.5rem;
}

.overlay-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-large);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.overlay-tab .icon {
    font-size: 16px;
}

.overlay-tab:hover {
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
}

.overlay-tab.active {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.overlay-tab-bodies {
    position: relative;
}

.overlay-quickadd-form {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
    align-items: end;
}

.overlay-quickadd-form.active {
    display: grid;
}

.overlay-quickadd-form input,
.overlay-quickadd-form textarea,
.overlay-quickadd-form select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 10px;
    color: var(--md-sys-color-on-surface);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.overlay-quickadd-form textarea {
    grid-column: 1 / -1;
    min-height: 72px;
    resize: vertical;
}

.overlay-quickadd-form input:focus,
.overlay-quickadd-form textarea:focus,
.overlay-quickadd-form select:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px rgba(125, 211, 192, 0.18);
}

.overlay-quickadd-form input::placeholder,
.overlay-quickadd-form textarea::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.7;
}

.overlay-quickadd-form button[type="submit"] {
    justify-self: start;
    grid-column: 1 / -1;
    width: auto;
    margin-top: 0.25rem;
}

/* Items list */
.overlay-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.overlay-items-list:empty {
    display: none;
}

.overlay-group h4 {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--md-sys-color-on-surface-variant);
}

.overlay-group h4 .icon {
    font-size: 16px;
    color: var(--md-sys-color-primary);
}

.overlay-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    margin-bottom: 0.4rem;
}

.overlay-item-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.65rem;
    flex: 1;
    min-width: 0;
    color: var(--md-sys-color-on-surface);
    font-size: 0.9rem;
}

.overlay-item-body p {
    margin: 0;
    flex-basis: 100%;
}

.overlay-item-body strong {
    font-weight: 600;
}

.overlay-amount,
.overlay-kind,
.overlay-qty,
.overlay-when,
.overlay-where {
    font-size: 0.82rem;
    color: var(--md-sys-color-on-surface-variant);
}

.overlay-amount {
    color: var(--md-sys-color-primary);
    font-weight: 600;
}

.overlay-notes {
    flex-basis: 100%;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.8rem;
    font-style: italic;
}

.overlay-attribution {
    flex-basis: 100%;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.72rem;
    opacity: 0.75;
    margin-top: 0.15rem;
}

.overlay-item-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.overlay-item-actions .icon-btn {
    background: transparent;
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.overlay-item-actions .icon-btn:hover {
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
}

.overlay-item-actions .overlay-delete:hover {
    color: var(--md-sys-color-error);
}

/* Chat panel */
.overlay-chat-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
}

.overlay-chat-log {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 240px;
    overflow-y: auto;
}

.overlay-chat-log:empty {
    display: none;
}

.overlay-chat-turn {
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.35;
    max-width: 85%;
}

.overlay-chat-user {
    align-self: flex-end;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.overlay-chat-assistant {
    align-self: flex-start;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.overlay-chat-preview {
    padding: 0.6rem 0.75rem;
    background: var(--md-sys-color-surface-container-high);
    border: 1px dashed var(--md-sys-color-outline-variant);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface);
}

.overlay-chat-form {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.overlay-chat-form input[type="text"] {
    flex: 1;
    padding: 0.6rem 0.85rem;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 10px;
    color: var(--md-sys-color-on-surface);
    font-family: inherit;
    font-size: 0.9rem;
}

.overlay-chat-form input[type="text"]:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px rgba(125, 211, 192, 0.18);
}

@media (max-width: 640px) {
    .trip-overlay-section {
        padding: 0.85rem;
        border-radius: 12px;
    }
    .overlay-quickadd-form {
        grid-template-columns: 1fr;
    }
}

/* Overlay JS-generated UI: flashes, undo toasts, AI patch previews */
.overlay-flash {
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    font-size: 0.88rem;
    margin: 0.35rem 0;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
}
.overlay-flash-info {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: transparent;
}
.overlay-flash-error {
    background: rgba(220, 80, 80, 0.15);
    color: #ff8a8a;
    border-color: rgba(220, 80, 80, 0.35);
}

.overlay-undo-toast {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.7rem 1.1rem;
    background: var(--md-sys-color-inverse-surface, #2d2f31);
    color: var(--md-sys-color-inverse-on-surface, #f1f1f1);
    border-radius: 999px;
    box-shadow: var(--md-sys-elevation-2, 0 4px 12px rgba(0,0,0,0.35));
    font-size: 0.88rem;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.overlay-undo-toast button {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
}
.overlay-undo-toast button:hover {
    background: rgba(255,255,255,0.08);
}

.patch-summary {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.patch-diff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0.35rem 0;
    font-size: 0.85rem;
}
.patch-diff-before,
.patch-diff-after {
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    overflow-x: auto;
}
.patch-diff-before {
    border-left: 3px solid rgba(220, 80, 80, 0.55);
    color: var(--md-sys-color-on-surface-variant);
}
.patch-diff-after {
    border-left: 3px solid var(--md-sys-color-primary);
}
.patch-diff-removed {
    grid-column: 1 / -1;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: rgba(220, 80, 80, 0.1);
    border: 1px solid rgba(220, 80, 80, 0.3);
    color: #ffb3b3;
    font-size: 0.85rem;
}
@media (max-width: 640px) {
    .patch-diff { grid-template-columns: 1fr; }
}

/* ── Global keyboard shortcuts (modal + kbd chips) ────────────────── */
.shortcuts-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.shortcuts-modal.open { display: flex; }
.shortcuts-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.shortcuts-modal-card {
    position: relative;
    background: #1d2230;
    color: #e1e3e0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
    animation: dialog-arrive 160ms ease-out;
}
.shortcuts-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.shortcuts-modal-head h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.05rem;
    color: #fff;
}
.shortcuts-modal-head h3 .icon { color: #6cb1ff; }
.shortcuts-modal-close {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
}
.shortcuts-modal-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.shortcuts-modal-body { padding: 1rem 1.25rem 1.25rem; }
.shortcuts-section { margin-bottom: 1rem; }
.shortcuts-section h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}
.shortcuts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}
.shortcuts-list li {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
}
.shortcuts-list li:hover { background: rgba(255,255,255,0.04); }
.shortcuts-list li > span { color: #ddd; font-size: 0.9rem; }
.shortcuts-list kbd {
    display: inline-block;
    min-width: 1.6rem;
    padding: 2px 6px;
    margin-right: 4px;
    text-align: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: #eee;
}
.shortcuts-foot {
    margin: 0.5rem 0 0 0;
    color: #888;
    font-size: 0.78rem;
}
#shortcutsHelpTrigger { gap: 0.35rem; }
.shortcuts-trigger-label { font-size: 0.82rem; color: inherit; }
@media (max-width: 760px) {
    .shortcuts-trigger-label { display: none; }
}

/* ─────────────── Trip detail day rail (Task #103) ─────────────── */
.trip-day-rail {
    width: 64px;
    flex-shrink: 0;
    align-self: flex-start;
    position: sticky;
    top: calc(64px + 1rem);
    max-height: calc(100vh - 64px - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline-variant) transparent;
    padding: 0.25rem 0;
}

.trip-day-rail .day-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trip-day-rail .day-rail-item {
    margin: 0;
}

.trip-day-rail .day-rail-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px 8px;
    border-radius: var(--md-sys-shape-corner-medium);
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    min-height: 52px;
}

.trip-day-rail .day-rail-link:hover {
    background: rgba(125, 211, 192, 0.08);
    color: var(--md-sys-color-on-surface);
}

.trip-day-rail .day-rail-link.active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border-color: var(--md-sys-color-primary);
}

.trip-day-rail .day-rail-link.today {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px var(--md-sys-color-primary), 0 0 0 4px rgba(125, 211, 192, 0.35);
    position: relative;
    animation: dayRailTodayPulse 2.2s ease-in-out infinite;
}

.trip-day-rail .day-rail-link.today::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px var(--md-sys-color-surface);
}

.trip-day-rail .day-rail-link.today.active {
    box-shadow: 0 0 0 2px var(--md-sys-color-primary), 0 0 0 5px rgba(125, 211, 192, 0.45);
}

@keyframes dayRailTodayPulse {
    0%, 100% {
        box-shadow: 0 0 0 2px var(--md-sys-color-primary), 0 0 0 4px rgba(125, 211, 192, 0.35);
    }
    50% {
        box-shadow: 0 0 0 2px var(--md-sys-color-primary), 0 0 0 7px rgba(125, 211, 192, 0.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .trip-day-rail .day-rail-link.today {
        animation: none;
    }
}

.trip-day-rail .day-rail-link.empty {
    opacity: 0.45;
}

.trip-day-rail .day-rail-dow {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
}

.trip-day-rail .day-rail-num {
    font: 600 18px/1 'Outfit', sans-serif;
    color: var(--md-sys-color-on-surface);
}

.trip-day-rail .day-rail-link.empty .day-rail-num {
    color: var(--md-sys-color-on-surface-variant);
}

.trip-day-rail .day-rail-link.active .day-rail-num,
.trip-day-rail .day-rail-link.today .day-rail-num {
    color: inherit;
}

.trip-day-rail .day-rail-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1px;
    min-height: 16px;
    max-width: 48px;
}

.trip-day-rail .day-rail-icon {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
}

.trip-day-rail .day-rail-icon-flight    { color: #90caf9; }
.trip-day-rail .day-rail-icon-hotel     { color: #80cbc4; }
.trip-day-rail .day-rail-icon-hotel-checkout { color: #ef5350; }
.trip-day-rail .day-rail-icon-hotel-split {
    background: linear-gradient(90deg, #80cbc4 0 50%, #ef5350 50% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.trip-day-rail .day-rail-icon-cruise    { color: #ce93d8; }
.trip-day-rail .day-rail-icon-transport { color: #b0bec5; }
.trip-day-rail .day-rail-icon-activity  { color: #f48fb1; }

@media (max-width: 1024px) {
    .trip-day-rail {
        width: 100%;
        position: relative;
        top: auto;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        /* The desktop rail scrolls vertically, so it uses
           overscroll-behavior: contain. In the stacked layout the rail has
           no vertical scroll range at all, so `contain` on the y-axis
           swallows vertical wheel/touch gestures that start on the rail and
           the page appears stuck. Keep x contained (horizontal day
           scrubbing), let y chain to the page. */
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        background: var(--md-sys-color-surface-container);
        border-radius: var(--md-sys-shape-corner-medium);
        padding: 6px 8px;
        z-index: 9;
    }
    .trip-day-rail .day-rail-list {
        flex-direction: row;
        gap: 6px;
        scroll-snap-type: x proximity;
    }
    .trip-day-rail .day-rail-item { scroll-snap-align: start; }
    .trip-day-rail .day-rail-link {
        min-width: 52px;
        flex-shrink: 0;
    }
}

/* ─── "Your additions" overlay in trip sidebar ─── */
.trip-sidebar .trip-overlay-section--sidebar {
    margin: 0 0 1rem;
    padding: 0;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    display: block;
}

.trip-sidebar .trip-overlay-section--sidebar .trip-overlay-body {
    display: none;
    padding: 1rem;
    flex-direction: column;
    gap: 0.85rem;
}

.trip-sidebar .trip-overlay-section--sidebar.open .trip-overlay-body {
    display: flex;
}

.trip-sidebar .trip-overlay-section--sidebar .trip-overlay-header {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.trip-sidebar .trip-overlay-section--sidebar .trip-overlay-header .btn-text {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

.trip-sidebar .trip-overlay-section--sidebar .overlay-tabs {
    gap: 0.3rem;
    padding-bottom: 0.4rem;
}

.trip-sidebar .trip-overlay-section--sidebar .overlay-tab {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
}

.trip-sidebar .trip-overlay-section--sidebar .overlay-tab .icon {
    font-size: 14px;
}

.trip-sidebar .trip-overlay-section--sidebar .overlay-quickadd-form {
    grid-template-columns: 1fr;
}

.trip-sidebar .trip-overlay-section--sidebar .overlay-quickadd-form input,
.trip-sidebar .trip-overlay-section--sidebar .overlay-quickadd-form textarea,
.trip-sidebar .trip-overlay-section--sidebar .overlay-quickadd-form select {
    font-size: 0.85rem;
    padding: 0.45rem 0.6rem;
}

.trip-sidebar .trip-overlay-section--sidebar .overlay-items-list {
    gap: 0.6rem;
}

.trip-sidebar .trip-overlay-section--sidebar .overlay-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
}

.trip-sidebar .trip-overlay-section--sidebar .overlay-chat-panel {
    margin-top: 0;
}

/* ─── Unified app topbar (shared across every page) ─── */
.app-topbar {
    gap: 1rem;
    display: flex;
    align-items: center;
    /* Uniform horizontal breathing room on the left and right of the
       global nav, applied here so every page using the topbar macro
       (dashboard, trip detail, planning, admin)
       gets the same edge inset. Vertical padding inherited from
       .dashboard-header. */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (max-width: 760px) {
    .app-topbar {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
.app-topbar .header-left { gap: 0.45rem; display: flex; align-items: center; }
.app-topbar .header-right { gap: 0.4rem; display: flex; align-items: center; }
.app-topbar .app-weather-link {
    width: auto;
    min-width: 77px;
    padding: 0 9px;
    gap: 3px;
    white-space: nowrap;
    color: #c9e3dd;
    border: 1px solid rgba(201, 227, 221, .22);
    background: rgba(125, 211, 192, .07);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.app-topbar .app-weather-link:hover,
.app-topbar .app-weather-link:focus-visible {
    color: #fff;
    background: rgba(125, 211, 192, .16);
}
.app-topbar .app-weather-link__temp {
    font-size: .82rem;
    font-weight: 650;
}
.app-topbar .app-weather-link__icon {
    font-family: 'Material Symbols Outlined';
    font-size: 21px;
}
@media (max-width: 400px) {
    .app-topbar .app-weather-link { min-width: 68px; padding: 0 6px; }
}
.app-topbar .match-review-notification {
    position: relative;
    flex: 0 0 44px;
    border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 10%, transparent);
}
.app-topbar .match-review-notification--empty { display: none; }
.app-topbar .match-review-notification--watch { color: #f0bb68; }
.app-topbar .match-review-notification--urgent { color: #f1847e; }
.app-topbar .match-review-notification--unavailable { color: #b9c5c7; }
.app-topbar .match-review-notification .icon {
    color: inherit;
    font-size: 21px;
    transform: translate(-3px, -3px);
}
.app-topbar .match-review-notification .match-review-count {
    position: absolute;
    right: 1px;
    bottom: 1px;
    min-width: 16px;
    padding: 0 2px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: #202d30;
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
.app-topbar .match-review-notification:hover {
    color: inherit;
    background: color-mix(in srgb, currentColor 20%, transparent);
}
@media (max-width: 768px) {
    .app-topbar .header-right {
        flex: 1;
        justify-content: flex-end;
    }
}
.app-topbar .icon-btn.active {
    background: rgba(74, 144, 217, 0.25);
    color: #6cb1ff;
    border: 1px solid rgba(74, 144, 217, 0.5);
}
.app-topbar .icon-btn.active .icon { color: #6cb1ff; }
.app-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #ddd;
    font-weight: 600;
    font-size: 0.95rem;
    margin-right: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
}
.app-topbar-brand .icon { color: #6cb1ff; font-size: 22px; }
.app-topbar-brand:hover { color: #fff; }
.app-topbar-section {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    color: #9ca3af;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 500;
}
.app-topbar-section:hover,
.app-topbar-section.active {
    color: #fff;
    background: rgba(108, 177, 255, 0.14);
}
.app-topbar-section .icon { font-size: 18px; }
@media (max-width: 760px) {
    .app-topbar-brand .brand-text { display: none; }
    .app-topbar-section { display: none; }
    .app-primary-nav { display: none; }
}

/* Page-specific sub-toolbar that sits below the unified topbar
   (used by dashboard view-toggle/AI planner row, trip detail
   action row, etc.) — same .dashboard-header layout but visually
   distinct from the global nav so the two rows don't blur together. */
.app-toolbar {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ─── Page-specific extras inlined into the unified topbar row ─── */
.app-topbar .topbar-extras {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}
.app-topbar .topbar-extras--left {
    margin-left: 0.5rem;
}
.app-topbar .topbar-extras--right {
    margin-right: 0.25rem;
}
/* Keep the AI planner anchored relative to its toggle button so its
   pop-out form positions correctly when nested inside the topbar. */
.app-topbar .ai-trip-planner { position: relative; }
/* Compact the "Plan a trip" label so the topbar fits comfortably. */
@media (max-width: 1180px) {
    .app-topbar .ai-planner-toggle { font-size: 0.78rem; padding: 0.35rem 0.55rem; }
}
@media (max-width: 980px) {
    .app-topbar .topbar-extras .refresh-indicator { display: none; }
}
/* ===== Global cross-trip search modal (`/` shortcut) ===== */
.search-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 1rem 1rem;
}
.search-modal.open { display: flex; }
.search-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.search-modal-card {
    position: relative;
    background: #1d2230;
    color: #e1e3e0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    width: 100%;
    max-width: 640px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
    overflow: hidden;
    animation: dialog-arrive 160ms ease-out;
}
@keyframes dialog-arrive {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.search-modal-head h2 {
    display: contents;
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-title-medium);
}
.search-modal-head h2 .icon { order: -1; }
.search-modal-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.search-modal-head .icon { color: #8aa1c0; }
.search-modal-head input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 1.05rem;
    padding: 0.4rem 0.25rem;
}
.search-modal-close {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
}
.search-modal-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.search-modal-close:focus-visible,
.shortcuts-modal-close:focus-visible,
.app-topbar a:focus-visible,
.app-topbar button:focus-visible,
.bottom-nav-item:focus-visible,
.user-avatar:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}
.search-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9rem;
}
.search-status .icon { animation: search-pulse 1.2s ease-in-out infinite; }
.search-status--error { color: var(--md-sys-color-error); }
.search-retry {
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font: inherit;
}
@keyframes search-pulse {
    0%, 100% { opacity: .45; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .search-modal-card, .shortcuts-modal-card, .search-status .icon { animation: none; }
}
.search-modal-body {
    padding: 0.5rem 0.5rem 0.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}
.search-result {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
}
.search-result:hover,
.search-result.active {
    background: rgba(108, 177, 255, 0.14);
}
.search-result-icon { color: #8aa1c0; font-size: 1.15rem; }
.search-result-text { display: flex; flex-direction: column; min-width: 0; }
.search-result-title {
    color: #fff;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-result-sub {
    color: #9aa3b2;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-hint {
    margin: 0.5rem 0.6rem 0;
    font-size: 0.75rem;
    color: #888;
}

/* ── Search modal: mobile adjustments ─────────────────────────────── */
@media (max-width: 480px) {
    .search-modal {
        /* Minimal top padding keeps the card near the top of the
           visual viewport even when the virtual keyboard is open. */
        padding: 0.5rem;
        align-items: flex-start;
    }
    .search-modal-card {
        max-width: 100%;
        border-radius: 8px;
        /* dvh (dynamic viewport height) automatically shrinks when the
           virtual keyboard appears, so the card stays fully visible and
           the results list remains scrollable without overflowing. */
        max-height: calc(100dvh - 1rem);
    }
}

/* Final shared-nav overrides: this file contains legacy responsive blocks
   earlier in the stylesheet, so keep the breakpoint contract and mobile
   affordances authoritative at the end of the cascade. */
@media (max-width: 768px) {
    .app-topbar {
        min-height: 56px;
        padding-left: clamp(0.65rem, 2.5vw, 1rem);
        padding-right: clamp(0.65rem, 2.5vw, 1rem);
        gap: 0.35rem;
        flex-wrap: nowrap;
    }
    .app-topbar .header-left,
    .app-topbar .header-right {
        min-width: 0;
        flex-wrap: nowrap;
        gap: 0.2rem;
    }
    .app-topbar-section,
    .app-primary-nav {
        display: inline-flex;
        flex: 0 0 auto;
    }
    .app-topbar-section {
        padding: 0.4rem;
    }
    .app-topbar-section > span:not(.icon) {
        display: none;
    }
    .app-topbar-section .icon,
    .app-primary-nav .icon {
        font-size: 20px;
    }
    .app-topbar-brand {
        margin-right: 0.1rem;
    }
    .app-topbar .topbar-extras {
        gap: 0.15rem;
    }
    .app-topbar .icon-btn {
        min-width: 40px;
        min-height: 40px;
    }
    .bottom-nav {
        justify-content: stretch;
        gap: 0.15rem;
        padding-left: max(0.25rem, env(safe-area-inset-left));
        padding-right: max(0.25rem, env(safe-area-inset-right));
    }
    .bottom-nav-item {
        flex: 1 1 0;
        min-width: 0;
        min-height: 52px;
        padding: 0.35rem 0.1rem 0.3rem;
        gap: 0.15rem;
        border-radius: 0.7rem;
        justify-content: center;
        white-space: nowrap;
    }
    .bottom-nav-item .icon {
        font-size: 22px;
        line-height: 1;
    }
    .bottom-nav-item span:not(.icon) {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.68rem;
        line-height: 1.1;
    }
    .bottom-nav-item--admin {
        display: none;
    }
    .dashboard-container {
        padding: 0.85rem;
    }
    .trip-detail-cover {
        height: clamp(218px, 52vw, 260px);
    }
    .trip-detail-cover-content {
        padding: 1.15rem 1rem;
    }
    .trip-detail-cover-name {
        font-size: clamp(1.55rem, 7vw, 2rem);
        overflow-wrap: anywhere;
    }
    .trip-detail-container {
        gap: 0.85rem;
    }
    .trip-content {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .app-topbar {
        min-height: 52px;
    }
    .app-topbar-brand .brand-text {
        /* The bottom bar is the mobile destination switcher. Keeping the
           mark, rather than a clipped wordmark, leaves room for page
           actions and the account control at 320px. */
        display: none;
    }
    .app-topbar-brand .icon {
        font-size: 20px;
    }
    .app-topbar-section,
    .app-primary-nav {
        display: none;
    }
    .app-topbar .header-right {
        flex: 1 1 auto;
        overflow: visible;
    }
    .app-topbar .user-avatar {
        width: 32px;
        height: 32px;
    }
    .bottom-nav-item {
        min-height: 54px;
    }
    .bottom-nav-item .icon {
        font-size: 21px;
    }
    .bottom-nav-item span:not(.icon) {
        display: block;
        font-size: clamp(0.61rem, 2.65vw, 0.7rem);
        letter-spacing: -0.01em;
    }

    /* Alert ribbons occupy a vertical strip on the hero. Reserve that
       strip before sizing the title so long trip names wrap instead of
       disappearing beneath the orange/red panel. */
    .trip-hero:has(> .trip-alert-ribbon) .trip-hero-content {
        right: 44px;
    }
    .trip-hero-content {
        padding: 1.25rem 1rem 1.15rem;
    }
    .trip-hero-name {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
        font-size: clamp(24px, 8vw, 32px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bottom-nav-item,
    .app-topbar a,
    .app-topbar button {
        transition: none;
    }
}