:root{
  --bg:#f7f9fc;
  --surface:#ffffff;
  --surface-2:#f2f7fc;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#2563eb;
  --primary-light:#dbeafe;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{margin:0;padding:0;box-sizing:border-box}

body{
font-family:Inter,Segoe UI,Arial,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
padding:32px;
}

.container{
max-width:1280px;
margin:auto;
background:var(--surface);
border-radius:18px;
overflow:hidden;
box-shadow:var(--shadow);
}

header{
background:#fff;
padding:60px 40px 35px;
text-align:center;
border-bottom:1px solid var(--border);
}

header h1{
font-size:3rem;
font-weight:700;
margin-bottom:10px;
color:#111827;
}

.trip-info,.trip-subtitle{color:var(--muted)}

.navigation{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
padding:18px 24px;
background:#fff;
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:10;
}

.nav-link{
text-decoration:none;
color:#374151;
padding:12px 18px;
border-radius:999px;
font-weight:600;
transition:.25s;
}

.nav-link:hover{
background:var(--primary-light);
color:var(--primary);
}

.nav-link.active{
background:var(--primary);
color:#fff;
}

.page-content,.tab-content{padding:48px;}

h2{
font-size:2rem;
margin-bottom:28px;
color:#111827;
}

h3,h4{color:#111827;margin-bottom:12px}

.overview-grid,.budget-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:24px;
}

.card,.flight-card,.hotel-card,.activity-card,.outfit-card,.itinerary-day,.budget-section{
background:#fff;
border:1px solid var(--border);
border-radius:16px;
padding:24px;
box-shadow:0 4px 14px rgba(0,0,0,.05);
transition:.25s;
}

.card:hover,.flight-card:hover,.hotel-card:hover,.activity-card:hover,.outfit-card:hover,.itinerary-day:hover,.budget-section:hover{
transform:translateY(-4px);
box-shadow:var(--shadow);
border-color:#bfdbfe;
}

.card h3,.flight-card h4,.hotel-card h4,.activity-card h4,.outfit-card h4,.itinerary-day h4{
border-left:4px solid var(--primary);
padding-left:12px;
}

.detail-row{
display:flex;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid var(--border);
}

.detail-row:last-child{border-bottom:none}
.detail-label{font-weight:600;color:#374151}
.detail-value{color:var(--primary);font-weight:700}

table{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:12px;
overflow:hidden;
}

th{
background:var(--primary);
color:#fff;
padding:14px;
}

td{
padding:12px 14px;
border-bottom:1px solid var(--border);
}

button{
background:var(--primary);
color:#fff;
border:none;
padding:12px 20px;
border-radius:10px;
cursor:pointer;
}

button:hover{background:#1d4ed8}

@media(max-width:768px){
body{padding:12px}
.page-content,.tab-content{padding:24px}
header h1{font-size:2.2rem}
.navigation{justify-content:flex-start;overflow:auto}
.nav-link{white-space:nowrap}
.detail-row{flex-direction:column;gap:4px}
}

/* ==========================
   Flights Page / Boarding Pass Layout
========================== */

.flights-page {
            display: grid;
            gap: 28px;
        }

        .flight-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
            margin-bottom: 10px;
        }

        .summary-card {
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            padding: 18px;
            box-shadow: 0 4px 14px rgba(0,0,0,.05);
        }

        .summary-card span {
            display: block;
            color: #6b7280;
            font-size: .85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-bottom: 6px;
        }

        .summary-card strong {
            color: #111827;
            font-size: 1.3rem;
        }

        .flight-section-title {
            margin-top: 24px;
            padding-top: 6px;
            color: #111827;
        }

        .flight-card.boarding-pass {
            position: relative;
            overflow: hidden;
            padding: 0;
            border: 1px solid #dbeafe;
            background: #ffffff;
        }

        .flight-card.boarding-pass::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: 6px;
            background: #2563eb;
        }

        .boarding-pass-header {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            padding: 24px 28px;
            border-bottom: 1px dashed #cbd5e1;
            background: linear-gradient(135deg, #ffffff 0%, #f2f7fc 100%);
            flex-wrap: wrap;
        }

        .flight-badge {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            background: #dbeafe;
            color: #1d4ed8;
            padding: 6px 12px;
            border-radius: 999px;
            font-size: .78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-bottom: 12px;
        }

        .flight-badge.return {
            background: #e0f2fe;
            color: #0369a1;
        }

        .flight-badge.domestic {
            background: #eef2ff;
            color: #4338ca;
        }

        .boarding-pass-header h3 {
            font-size: 1.7rem;
            margin: 0 0 8px;
            color: #111827;
        }

        .flight-meta {
            color: #6b7280;
            font-weight: 600;
        }

        .route-display {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
            min-width: 260px;
        }

        .airport-chip {
            background: #111827;
            color: #ffffff;
            border-radius: 14px;
            padding: 12px 16px;
            min-width: 72px;
            text-align: center;
            font-weight: 800;
            letter-spacing: .08em;
        }

        .route-arrow {
            color: #2563eb;
            font-weight: 900;
            font-size: 1.25rem;
        }

        .boarding-pass-body {
            padding: 26px 28px 28px;
        }

        .flight-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 14px;
            margin-bottom: 26px;
        }

        .flight-info-box {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 14px;
        }

        .flight-info-box span {
            display: block;
            color: #6b7280;
            font-size: .78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-bottom: 5px;
        }

        .flight-info-box strong {
            color: #111827;
            font-size: 1rem;
        }

        .leg-timeline {
            display: grid;
            gap: 18px;
        }

        .flight-leg {
            display: grid;
            grid-template-columns: 150px 1fr;
            gap: 18px;
            position: relative;
        }

        .leg-time {
            color: #111827;
            font-weight: 800;
            font-size: 1.05rem;
        }

        .leg-detail {
            padding: 18px;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #ffffff;
            box-shadow: 0 4px 12px rgba(0,0,0,.04);
        }

        .leg-detail h4 {
            margin-bottom: 8px;
            color: #111827;
        }

        .leg-detail p {
            color: #6b7280;
            margin-bottom: 10px;
        }

        .leg-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .leg-tag {
            display: inline-flex;
            background: #f2f7fc;
            color: #374151;
            border: 1px solid #dbeafe;
            border-radius: 999px;
            padding: 6px 10px;
            font-size: .86rem;
            font-weight: 700;
        }

        .layover-strip {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: 168px;
            color: #1d4ed8;
            font-weight: 800;
            background: #dbeafe;
            border-radius: 999px;
            padding: 10px 14px;
            width: fit-content;
        }

        .passenger-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 18px;
            padding-top: 18px;
            border-top: 1px solid #e5e7eb;
        }

        .passenger-pill {
            background: #ffffff;
            border: 1px solid #dbeafe;
            color: #111827;
            border-radius: 999px;
            padding: 9px 13px;
            font-weight: 700;
        }

        @media (max-width: 700px) {
            .boarding-pass-header,
            .boarding-pass-body {
                padding: 20px;
            }

            .route-display {
                justify-content: flex-start;
                min-width: 100%;
            }

            .flight-leg {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .layover-strip {
                margin-left: 0;
            }
        }
.flight-leg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.edit-flight-button,
.delete-flight-button {
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    background: #ffffff;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
}

.edit-flight-button:hover,
.delete-flight-button:hover {
    border-color: #93c5fd;
    background: var(--primary-light);
    color: #1d4ed8;
}

.empty-flight-message {
    padding: 32px;
    border: 1px dashed #bfdbfe;
    border-radius: 18px;
    background: #f8fbff;
    color: var(--muted);
    text-align: center;
}

.flight-list {
    display: grid;
    gap: 22px;
}


/* ==========================
   Hotels Page
========================== */

.hotels-page {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.page-hero {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 34px;
    box-shadow: 0 8px 24px rgba(0,0,0,.05);
}

.eyebrow {
    color: var(--primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    margin-bottom: 6px;
}

.page-intro {
    color: var(--muted);
    max-width: 760px;
}

.hotel-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.summary-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
}

.summary-label {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}

.summary-card strong {
    color: #111827;
    font-size: 1.7rem;
}

.hotel-route-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.hotel-route-strip span {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 700;
    font-size: .9rem;
}

.hotel-stays-list {
    display: grid;
    gap: 22px;
}

.hotel-stay-card {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.hotel-stay-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--primary);
}

.hotel-topline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 0 28px;
    flex-wrap: wrap;
}

.stay-number {
    color: var(--primary);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.hotel-main {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: start;
    padding: 12px 24px 22px 28px;
}

.hotel-location {
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 6px;
}

.hotel-main h3 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin-bottom: 8px;
}

.hotel-address {
    color: var(--muted);
    max-width: 780px;
}

.hotel-price-box {
    min-width: 130px;
    background: #f8fbff;
    border: 1px solid #bfdbfe;
    border-radius: 18px;
    padding: 16px;
    text-align: center;
}

.price-label,
.nights-label {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hotel-price-box strong {
    display: block;
    color: #111827;
    font-size: 1.8rem;
    margin: 4px 0;
}

.hotel-meta-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(180px, 1fr)
    );
    border-top: 1px solid var(--border);
    background: #fbfdff;
}

.hotel-meta-item {
    padding: 18px 24px 18px 28px;
    border-right: 1px solid var(--border);
}

.hotel-meta-item {
    padding: 18px 24px 18px 28px;
    border-right: 1px solid var(--border);
}

.hotel-meta-item:last-child {
    border-right: none;
}

.meta-label {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}

.meta-value {
    color: #111827;
    font-weight: 800;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
}

.status-pill.status-paid {
    border-color: #86efac;
    background: #dcfce7;
    color: #166534;
}

.status-pill.status-property {
    border-color: #bfdbfe;
    background: #dbeafe;
    color: #1d4ed8;
}

.status-pill.status-part-paid {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

.status-pill.status-pending {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #3730a3;
}

.status-pill.status-default {
    border-color: #dbeafe;
    background: #f8fbff;
    color: var(--primary);
}

@media(max-width:768px) {
    .page-hero {
        padding: 24px;
    }

    .hotel-main {
        grid-template-columns: 1fr;
    }

    .hotel-price-box {
        text-align: left;
    }

    .hotel-meta-grid {
        grid-template-columns: 1fr;
    }

    .hotel-meta-item {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

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

.hotel-page-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
}

.hotels-database-status {
    color: var(--muted);
    font-weight: 700;
}

.hotels-database-status[data-state="success"],
.hotels-database-status[data-state="warning"],
.hotels-database-status[data-state="error"] {
    color: var(--primary);
}

.empty-hotel-message {
    padding: 32px;
    border: 1px dashed #bfdbfe;
    border-radius: 18px;
    background: #f8fbff;
    color: var(--muted);
    text-align: center;
}

.hotel-notes {
    padding: 18px 24px 22px 28px;
    border-top: 1px solid var(--border);
    background: #ffffff;
}

.hotel-notes p {
    margin: 6px 0 0;
    color: var(--muted);
}

.hotel-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 24px 22px 28px;
    border-top: 1px solid var(--border);
    background: #ffffff;
}

.edit-hotel-button,
.delete-hotel-button {
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    background: #ffffff;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
}

.edit-hotel-button:hover,
.delete-hotel-button:hover {
    border-color: #93c5fd;
    background: var(--primary-light);
    color: #1d4ed8;
}

/* ==========================
   Car Rental Page
========================== */

.rental-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 36px;
}

.rental-card {
    position: relative;
    overflow: hidden;
    border-top: 5px solid var(--primary);
}

.rental-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.12), transparent 70%);
    pointer-events: none;
}

.rental-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.rental-header h3 {
    margin: 8px 0 6px;
    font-size: 1.45rem;
}

.rental-price {
    background: var(--primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

.rental-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 22px;
}

.rental-pill {
    background: var(--primary-light);
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.9rem;
    font-weight: 700;
}

.rental-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    margin: 20px 0;
}

.rental-route-point {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
}

.rental-route-point strong {
    display: block;
    color: #111827;
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.rental-route-point span {
    display: block;
    color: var(--muted);
    font-size: 0.9rem;
}

.rental-route-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

.rental-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.rental-feature {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
}

.rental-feature span {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 4px;
}

.rental-feature strong {
    color: #111827;
    font-size: 1rem;
}

.booking-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    margin: 18px 0;
}

.booking-strip span {
    color: var(--muted);
    font-size: 0.9rem;
}

.booking-strip strong {
    color: #111827;
}

@media(max-width:768px) {
    .rental-route {
        grid-template-columns: 1fr;
    }

    .rental-route-arrow {
        transform: rotate(90deg);
        margin: 0 auto;
    }

    .rental-price {
        width: 100%;
        text-align: center;
    }
}

.car-hire-page {
    display: grid;
    gap: 28px;
}

.car-hire-page-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
}

.car-hire-database-status {
    color: var(--muted);
    font-weight: 700;
}

.car-hire-database-status[data-state="success"],
.car-hire-database-status[data-state="warning"],
.car-hire-database-status[data-state="error"] {
    color: var(--primary);
}

.car-hire-summary-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(180px, 1fr)
    );
    gap: 16px;
}

.empty-car-hire-message {
    padding: 32px;
    border: 1px dashed #bfdbfe;
    border-radius: 18px;
    background: #f8fbff;
    color: var(--muted);
    text-align: center;
}

.car-hire-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 24px 22px;
    border-top: 1px solid var(--border);
}

.edit-car-hire-button,
.delete-car-hire-button {
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #fff;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.edit-car-hire-button:hover,
.delete-car-hire-button:hover {
    border-color: #93c5fd;
    background: var(--primary-light);
}

/* ==========================
   Outfit Planner Page
========================== */

.outfit-summary-grid { margin-bottom: 36px; }

.outfit-planner {
    display: grid;
    gap: 28px;
}

.outfit-day-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
}

.outfit-day-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
    margin-bottom: 22px;
}

.outfit-day-header h3 {
    margin: 6px 0 0;
    font-size: 1.35rem;
}

.outfit-date,
.outfit-status {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:999px;
    font-size:.85rem;
    font-weight:700;
    border:1px solid transparent;
    white-space:nowrap;
}

.outfit-date {
    background: var(--primary-light);
    color: #1d4ed8;
    padding: 7px 12px;
}

.outfit-status {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:999px;
    font-size:.85rem;
    font-weight:700;
    border:1px solid transparent;
    white-space:nowrap;
}

.outfit-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.outfit-slot {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
}

.outfit-slot-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.outfit-slot-header h4 {
    margin: 0;
    font-size: 1rem;
}

.outfit-time {
    background: #fef3c7;
    color: #92400e;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .8rem;
    font-weight: 900;
}

.outfit-time.pm {
    background: #e0e7ff;
    color: #3730a3;
}

.outfit-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.outfit-photo {
    margin: 0;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1 / 1.25;
    position: relative;
}

.outfit-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
}

.outfit-photo.empty-photo img { opacity: .18; }

.outfit-photo figcaption {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 8px;
    font-size: .75rem;
    font-weight: 800;
    color: #374151;
    text-align: center;
}

.outfit-notes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-top: 18px;
    padding: 14px;
    color: var(--muted);
}

.outfit-notes strong { color: #111827; }

@media(max-width: 900px) {
    .outfit-sections { grid-template-columns: 1fr; }
}

@media(max-width: 600px) {
    .outfit-photo-grid { grid-template-columns: repeat(2, 1fr); }
    .outfit-day-card { padding: 18px; }
}

/* ==========================
   Outfit Image Lightbox
========================== */

.outfit-photo {
    cursor: zoom-in;
}

.outfit-photo.empty-photo {
    cursor: default;
}

body.lightbox-open {
    overflow: hidden;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px 90px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(10px);
}

.image-lightbox.active {
    display: flex;
}

.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;

    width: min(900px, 88vw);
    max-height: 88vh;
    margin: 0;
}

.lightbox-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-height: 76vh;
}

.lightbox-image-wrap img,
#lightboxImage {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 76vh;
    object-fit: contain;

    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

#lightboxCaption {
    position: static !important;
    display: block;
    width: fit-content;
    max-width: min(640px, 90vw);

    margin: 0 auto;
    padding: 10px 18px;

    background: rgba(255, 255, 255, 0.96);
    color: #111827;

    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;

    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.lightbox-close,
.lightbox-arrow {
    border: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.95);
    color: #111827;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    transition: transform .2s ease, background .2s ease;
}

.lightbox-close:hover,
.lightbox-arrow:hover {
    background: #fff;
    transform: scale(1.06);
}

.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;

    width: 46px;
    height: 46px;

    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
}

.lightbox-arrow {
    position: absolute;
    top: 50%;

    width: 54px;
    height: 54px;

    border-radius: 50%;
    font-size: 2.7rem;
    line-height: 1;
    transform: translateY(-50%);
}

.lightbox-arrow:hover {
    transform: translateY(-50%) scale(1.06);
}

.lightbox-prev {
    left: 24px;
}

.lightbox-next {
    right: 24px;
}

@media(max-width: 700px) {
    .image-lightbox {
        padding: 18px 58px;
    }

    .lightbox-content {
        width: 100%;
        max-height: 86vh;
    }

    .lightbox-image-wrap,
    .lightbox-image-wrap img,
    #lightboxImage {
        max-height: 72vh;
    }

    .lightbox-arrow {
        width: 42px;
        height: 42px;
        font-size: 2rem;
    }

    .lightbox-prev {
        left: 8px;
    }

    .lightbox-next {
        right: 8px;
    }

    .lightbox-close {
        top: 12px;
        right: 12px;
        width: 42px;
        height: 42px;
    }

    #lightboxCaption {
        max-width: 82vw;
        font-size: 0.9rem;
    }
}


/* ==========================
   Outfit Status Colours
========================== */

.status-planning{
    background:#FEF3C7;
    color:#92400E;
    border-color:#FCD34D;
}

.status-complete{
    background:#DCFCE7;
    color:#166534;
    border-color:#86EFAC;
}

.status-packed{
    background:#DBEAFE;
    color:#1D4ED8;
    border-color:#93C5FD;
}

.status-shopping{
    background:#FEE2E2;
    color:#B91C1C;
    border-color:#FCA5A5;
}

.status-favourite{
    background:#F3E8FF;
    color:#7E22CE;
    border-color:#D8B4FE;
}

/* ==========================
   Itinerary Page
========================== */

.itinerary-page {
    display: grid;
    gap: 30px;
}

.itinerary-page-hero {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 34px;
    box-shadow: 0 8px 24px rgba(0,0,0,.05);
    text-align: center;
}

.itinerary-page-hero .eyebrow {
    margin-bottom: 8px;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.itinerary-page-hero h2 {
    margin-bottom: 10px;
    color: #111827;
}

.itinerary-page-hero .page-intro {
    max-width: 760px;
    margin: 0 auto;
    color: var(--muted);
    line-height: 1.7;
}

/* Summary */

.itinerary-summary-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px;
}

.itinerary-summary-grid .summary-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:20px;
    box-shadow:0 4px 14px rgba(0,0,0,.04);
    text-align:center;
}

.itinerary-summary-grid .summary-label{
    display:block;
    margin-bottom:6px;
    color:var(--muted);
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.itinerary-summary-grid strong{
    color:#111827;
    font-size:1.25rem;
}

/* Day Cards */

.itinerary-days-list{
    display:grid;
    gap:22px;
}

.itinerary-day-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 4px 14px rgba(0,0,0,.05);
    transition:.25s;
}

.itinerary-day-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow);
    border-color:#bfdbfe;
}

.itinerary-day-card[open]{
    border-color:var(--primary);
}

/* Summary */

.itinerary-day-summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    min-height:120px;
    padding:24px;
    cursor:pointer;
    list-style:none;
    transition:.2s;
}

.itinerary-day-summary:hover{
    background:#f8fbff;
}

.itinerary-day-summary::-webkit-details-marker{
    display:none;
}

.itinerary-day-summary::marker{
    display:none;
}

.day-summary-main{
    min-width:0;
}

.itinerary-date{
    display:inline-flex;
    margin-bottom:10px;
    padding:7px 12px;
    border-radius:999px;
    background:var(--primary-light);
    color:var(--primary);
    font-size:.82rem;
    font-weight:800;
}

.day-summary-main h3{
    margin:0 0 8px;
    color:#111827;
    font-size:1.35rem;
}

.day-summary-main p{
    color:var(--muted);
    margin:0;
}

.day-summary-side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
}

.expand-label{
    color:var(--primary);
    font-weight:700;
}

.expand-label::after{
    content:" ↓";
}

.itinerary-day-card[open] .expand-label::after{
    content:" ↑";
}

/* Day Types */

.itinerary-day-type{
    display:inline-flex;
    padding:7px 12px;
    border-radius:999px;
    font-size:.82rem;
    font-weight:700;
}

.travel-day{
    background:#dbeafe;
    color:#1d4ed8;
}

.park-day{
    background:#ede9fe;
    color:#6d28d9;
}

.city-day{
    background:#dcfce7;
    color:#166534;
}

.roadtrip-day{
    background:#ffedd5;
    color:#c2410c;
}

.event-day{
    background:#fce7f3;
    color:#9d174d;
}

/* Expanded */

.itinerary-day-expanded{
    padding:0 24px 24px;
    border-top:1px solid var(--border);
}

.day-summary-strip{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:20px 0;
}

.day-summary-strip span{
    background:var(--primary-light);
    color:var(--primary);
    border:1px solid #bfdbfe;
    border-radius:999px;
    padding:7px 12px;
    font-weight:700;
    font-size:.85rem;
}

/* Timeline */

.itinerary-timeline{
    position:relative;
    display:grid;
    gap:14px;
}

.itinerary-timeline::before{
    content:"";
    position:absolute;
    top:20px;
    bottom:20px;
    left:136px;
    width:2px;
    background:#bfdbfe;
}

.itinerary-item{
    position:relative;
    display:grid;
    grid-template-columns:120px 1fr;
    gap:34px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
}

.itinerary-item::before{
    content:"";
    position:absolute;
    top:24px;
    left:130px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--primary);
    border:3px solid #fff;
    box-shadow:0 0 0 2px var(--primary);
}

.itinerary-time{
    font-weight:800;
    color:#111827;
}

.itinerary-details h4{
    margin:0 0 6px;
    color:#111827;
}

.itinerary-details p{
    margin:0;
    color:var(--muted);
}

/* Special Items */

.flight-item{
    border-left:4px solid #2563eb;
    background:#eff6ff;
}

.layover-item{
    border-left:4px solid #8b5cf6;
    background:#faf5ff;
}

.car-item{
    border-left:4px solid #22c55e;
    background:#f0fdf4;
}

.evening-item{
    border-left:4px solid #6366f1;
    background:#eef2ff;
}

.template-item{
    border-style:dashed;
    opacity:.75;
}

/* Responsive */

@media(max-width:768px){

    .itinerary-day-summary{
        flex-direction:column;
        align-items:flex-start;
        padding:20px;
    }

    .day-summary-side{
        align-items:flex-start;
    }

    .itinerary-day-expanded{
        padding:0 18px 20px;
    }

    .itinerary-timeline::before{
        display:none;
    }

    .itinerary-item{
        grid-template-columns:1fr;
        gap:8px;
    }

    .itinerary-item::before{
        display:none;
    }

    .itinerary-time{
        color:var(--primary);
    }
}

@media(max-width:480px){

    .itinerary-summary-grid{
        grid-template-columns:1fr;
    }
}

.itinerary-edit-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 0 6px;
}

.edit-itinerary-button,
.save-itinerary-button,
.cancel-itinerary-button {
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
}

.cancel-itinerary-button {
    background: #fff;
    color: #374151;
    border: 1px solid var(--border);
}

[data-editable].is-editing {
    min-width: 80px;
    padding: 5px 8px;
    border: 1px dashed var(--primary);
    border-radius: 8px;
    background: #eff6ff;
    outline: none;
}

[data-editable].is-editing:focus {
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* ==========================
   Editable Day Types & Summary Tags
========================== */

.day-type-editor,
.itinerary-tag-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.day-type-editor[hidden],
.itinerary-tag-controls[hidden] {
    display: none;
}

.day-type-editor label {
    color: #374151;
    font-size: 0.85rem;
    font-weight: 800;
}

.day-type-select {
    min-height: 40px;
    padding: 8px 36px 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.day-type-select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* Additional day type */
.relaxed-day {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

/* Add location / highlight / food buttons */
.add-itinerary-tag-button {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid #bfdbfe;
}

.add-itinerary-tag-button:hover {
    background: #bfdbfe;
    color: #1d4ed8;
}

/* Added itinerary tags */
.day-summary-strip .itinerary-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px 7px 12px;
}

.itinerary-tag-text {
    border-radius: 6px;
}

.itinerary-tag-text.is-editing {
    min-width: 110px;
    padding: 2px 5px;
    background: #ffffff;
}

/* Remove tag button */
.remove-itinerary-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #fee2e2;
    color: #b91c1c;

    font-size: 1rem;
    line-height: 1;
}

.remove-itinerary-tag:hover {
    background: #fecaca;
    color: #991b1b;
}

.remove-itinerary-tag[hidden] {
    display: none;
}

/* ==========================
   Activities Page
========================== */

.activities-page {
    display: grid;
    gap: 28px;
}

.activities-page-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
}

.activities-database-status {
    color: var(--muted);
    font-weight: 700;
}

.activities-database-status[data-state="success"],
.activities-database-status[data-state="warning"],
.activities-database-status[data-state="error"] {
    color: var(--primary);
}

.activities-summary-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(180px, 1fr)
    );
    gap: 16px;
}

.activities-list {
    display: grid;
    gap: 22px;
}

.empty-activities-message {
    padding: 32px;
    border: 1px dashed #bfdbfe;
    border-radius: 18px;
    background: #f8fbff;
    color: var(--muted);
    text-align: center;
}

.activity-card {
    padding: 0;
    overflow: hidden;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fbff 100%
    );
}

.activity-header h3 {
    margin: 10px 0 8px;
    border-left: none;
    padding-left: 0;
    font-size: 1.45rem;
}

.activity-badge {
    display: inline-flex;
    margin-top: 10px;
    padding: 7px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 800;
}

.activity-location {
    color: var(--muted);
    font-weight: 700;
}

.activity-price {
    min-width: 140px;
    padding: 16px;
    border: 1px solid #bfdbfe;
    border-radius: 18px;
    background: #ffffff;
    text-align: center;
}

.activity-price span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.activity-price strong {
    color: #111827;
    font-size: 1.7rem;
}

.activity-hero {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 22px;
    align-items: center;
    padding: 24px 28px;
}

.activity-date-block {
    padding: 14px;
    border: 1px solid #bfdbfe;
    border-radius: 18px;
    background: #f8fbff;
    text-align: center;
}

.activity-date-block span,
.activity-date-block strong {
    display: block;
}

.activity-month {
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.activity-date-block strong {
    color: #111827;
    font-size: 2rem;
}

.activity-date-block span:last-child {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.activity-main-details h4 {
    margin-bottom: 10px;
}

.activity-main-details p {
    margin: 4px 0;
    color: var(--muted);
}

.activity-main-details strong {
    color: #111827;
}

.activity-meta-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(180px, 1fr)
    );
    border-top: 1px solid var(--border);
    background: #fbfdff;
}

.activity-meta-item {
    padding: 18px 24px 18px 28px;
    border-right: 1px solid var(--border);
}

.activity-meta-item:last-child {
    border-right: none;
}

.activity-status-pill {
    display: inline-flex;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
}

.activity-status-paid {
    border-color: #86efac;
    background: #dcfce7;
    color: #166534;
}

.activity-status-confirmed {
    border-color: #bfdbfe;
    background: #dbeafe;
    color: #1d4ed8;
}

.activity-status-part-paid {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

.activity-status-pending {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #3730a3;
}

.activity-status-default {
    border-color: #dbeafe;
    background: #f8fbff;
    color: var(--primary);
}

.activity-notes-panel {
    padding: 18px 28px 22px;
    border-top: 1px solid var(--border);
}

.activity-notes-panel p {
    margin-top: 6px;
    color: var(--muted);
}

@media(max-width:700px) {
    .activity-hero {
        grid-template-columns: 1fr;
    }

    .activity-date-block {
        width: 130px;
    }

    .activity-price {
        width: 100%;
    }

    .activity-meta-grid {
        grid-template-columns: 1fr;
    }

    .activity-meta-item {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}

.activity-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 28px 22px;
    border-top: 1px solid var(--border);
    background: #ffffff;
}

.edit-activity-button,
.delete-activity-button {
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #ffffff;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
}

.edit-activity-button:hover,
.delete-activity-button:hover {
    border-color: #93c5fd;
    background: var(--primary-light);
    color: #1d4ed8;
}

/* ==========================
   Supabase Itinerary Sync
========================== */
.budget-item-card{

    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:22px;
    margin-bottom:18px;
    background:#fff;
    transition:.2s;

}

.budget-item-card:hover{

    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.budget-item-header{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;

}

.budget-item-category{

    font-size:.85rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#2563eb;
    margin-bottom:8px;

}

.budget-item-price{

    font-size:2rem;
    font-weight:700;
    white-space:nowrap;

}

.budget-item-footer{

    margin-top:20px;
    display:flex;
    justify-content:space-between;
    color:#6b7280;
    font-size:.9rem;

}

.budget-item-payment-summary {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(130px, 1fr))
        auto;
    gap: 14px;
    align-items: center;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.budget-item-payment-summary div span {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.budget-item-payment-summary div strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 1rem;
}

.budget-payment-status {
    display: inline-flex;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.budget-payment-paid {
    border-color: #86efac;
    background: #dcfce7;
    color: #166534;
}

.budget-payment-part-paid {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

.budget-payment-outstanding {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.budget-item-progress {
    height: 12px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
}

.budget-item-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width 0.3s ease;
}

.budget-item-progress-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.budget-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.budget-source-edit-button,
.edit-manual-budget-button {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #ffffff;
    color: var(--primary);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.budget-source-edit-button:hover,
.edit-manual-budget-button:hover {
    border-color: #93c5fd;
    background: var(--primary-light);
    color: #1d4ed8;
}

@media(max-width:700px) {
    .budget-item-payment-summary {
        grid-template-columns: 1fr;
    }

    .budget-payment-status {
        justify-self: start;
    }

    .budget-item-progress-label,
    .budget-item-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

.add-budget-payment-button {
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: var(--primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
}

.add-budget-payment-button:hover {
    border-color: #93c5fd;
    background: #1d4ed8;
}

.budget-payment-item-name {
    margin-top: 6px;
    color: var(--muted);
    font-weight: 700;
}

.budget-payment-conversion-preview {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
    color: #374151;
}

.budget-payment-conversion-preview strong {
    color: var(--primary);
}


.budget-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.delete-manual-budget-button {
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #ffffff;
    color: var(--primary);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.delete-manual-budget-button:hover {
    border-color: #93c5fd;
    background: var(--primary-light);
    color: #1d4ed8;
}

.budget-payments-list {
    display: grid;
    gap: 16px;
}

.budget-payment-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #ffffff;
}

.budget-payment-card-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.budget-payment-card-main h3 {
    margin-bottom: 6px;
}

.budget-payment-card-main p {
    color: var(--muted);
}

.budget-payment-card-amount {
    text-align: right;
}

.budget-payment-card-amount strong {
    display: block;
    font-size: 1.4rem;
}

.budget-payment-card-amount span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.85rem;
}

.budget-payment-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    color: var(--muted);
    font-size: 0.88rem;
}

.budget-payment-notes {
    margin-top: 14px;
    color: var(--muted);
}

.budget-payment-card-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.delete-budget-payment-button {
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #ffffff;
    color: var(--primary);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.delete-budget-payment-button:hover {
    border-color: #93c5fd;
    background: var(--primary-light);
    color: #1d4ed8;
}

@media(max-width:700px) {
    .budget-payment-card-main {
        flex-direction: column;
    }

    .budget-payment-card-amount {
        text-align: left;
    }
}

.manage-budget-split-button {
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #ffffff;
    color: var(--primary);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.manage-budget-split-button:hover {
    border-color: #93c5fd;
    background: var(--primary-light);
    color: #1d4ed8;
}

.manage-budget-split-button.budget-split-equal {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.manage-budget-split-button.budget-split-custom {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #1d4ed8;
}

/* ==========================
        LOGOUT BUTTON
========================== */
.logout-button {
    margin-left: auto;
    border: 1px solid #fecaca;
    background: #fff;
    color: #b91c1c;
    font-family: inherit;
    cursor: pointer;
}

.logout-button:hover {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
    transform: translateY(-2px);
}

.logout-button:focus-visible {
    outline: 3px solid rgba(239, 68, 68, 0.2);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .logout-button {
        margin-left: 0;
    }
}

/* ==========================
   Supabase Itinerary Sync
========================== */

.itinerary-database-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
}

.database-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #374151;
    font-size: .9rem;
    font-weight: 700;
}

.database-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245,158,11,.14);
}

.database-status.is-connected .database-status-dot {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}

.database-status.is-error .database-status-dot {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239,68,68,.14);
}

.database-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.secondary-action-button {
    padding: 9px 13px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .86rem;
    font-weight: 800;
}

.secondary-action-button:hover {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #1d4ed8;
}

.save-itinerary-button:disabled,
.secondary-action-button:disabled {
    cursor: wait;
    opacity: .65;
}

@media (max-width: 700px) {
    .itinerary-database-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .database-actions {
        width: 100%;
    }

    .secondary-action-button {
        flex: 1 1 190px;
    }
}

.itinerary-loading-message,
.empty-itinerary-message {
    padding: 32px;
    border: 1px dashed #bfdbfe;
    border-radius: 18px;
    background: #f8fbff;
    color: var(--muted);
    text-align: center;
}

.empty-itinerary-message h3 {
    margin-bottom: 8px;
    color: #111827;
}

.empty-itinerary-message p {
    margin: 0;
}


/* ==========================
   My Trips Page
========================== */

.trips-page {
    display: grid;
    gap: 28px;
}

.trips-page-hero {
    text-align: center;
}

.trips-page-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}

.trips-database-status {
    color: var(--muted);
    font-weight: 700;
}

.trips-database-status[data-state="success"] {
    color: var(--primary);
}

.trips-database-status[data-state="warning"],
.trips-database-status[data-state="error"] {
    color: #1d4ed8;
}

.trips-list {
    display: grid;
    gap: 22px;
}

.trip-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 26px;
    border: 1px solid #bfdbfe;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
}

.trip-card-main {
    min-width: 0;
}

.trip-card-badge {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 6px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.trip-card h3 {
    margin-bottom: 8px;
    color: #111827;
    font-size: 1.4rem;
}

.trip-card-dates {
    color: #374151;
    font-weight: 700;
}

.trip-card-length {
    margin-top: 4px;
    color: var(--muted);
}

.trip-card-actions {
    flex-shrink: 0;
}

.open-trip-button {
    white-space: nowrap;
}

.empty-trips-message {
    padding: 36px;
    border: 1px dashed #bfdbfe;
    border-radius: 18px;
    background: #f8fbff;
    color: var(--muted);
    text-align: center;
}

.empty-trips-message h3 {
    margin-bottom: 8px;
    color: #111827;
}

.empty-trips-message p {
    margin: 0;
}

@media(max-width:700px) {
    .trip-card {
        align-items: stretch;
        flex-direction: column;
    }

    .trip-card-actions,
    .open-trip-button {
        width: 100%;
    }
}

/* ==========================
   Shared CRUD Modals
========================== */

body.modal-open {
    overflow: hidden;
}

.flight-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

.flight-modal[hidden] {
    display: none;
}

.flight-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
}

.flight-modal-dialog {
    position: relative;
    z-index: 1;

    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;

    padding: 28px;

    border: 1px solid var(--border);
    border-radius: 22px;

    background: #ffffff;
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.35);
}

.flight-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    margin-bottom: 24px;
    padding-bottom: 18px;

    border-bottom: 1px solid var(--border);
}

.flight-modal-header h2 {
    margin: 6px 0 0;
}

.flight-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;

    border: 1px solid #bfdbfe;
    border-radius: 50%;

    background: #ffffff;
    color: #1d4ed8;

    font-size: 1.7rem;
    line-height: 1;
}

.flight-modal-close:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

.flight-form {
    display: grid;
    gap: 22px;
}

.flight-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.flight-form-field {
    display: grid;
    gap: 7px;

    color: #374151;
    font-weight: 700;
}

.flight-form-field > span {
    font-size: 0.88rem;
}

.flight-form-field input,
.flight-form-field select,
.flight-form-field textarea {
    width: 100%;
    min-height: 44px;

    padding: 10px 12px;

    border: 1px solid #cbd5e1;
    border-radius: 10px;

    background: #ffffff;
    color: #111827;

    font: inherit;
}

.flight-form-field textarea {
    min-height: 100px;
    resize: vertical;
}

.flight-form-field input:focus,
.flight-form-field select:focus,
.flight-form-field textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.flight-form-field small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 500;
}

.flight-form-field-wide {
    grid-column: 1 / -1;
}

.flight-form-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;

    padding-top: 18px;
    border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
    .flight-modal {
        padding: 12px;
    }

    .flight-modal-dialog {
        max-height: calc(100vh - 24px);
        padding: 20px;
        border-radius: 18px;
    }

    .flight-form-grid {
        grid-template-columns: 1fr;
    }

    .flight-form-field-wide {
        grid-column: auto;
    }

    .flight-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .flight-form-actions button {
        width: 100%;
    }
}

/* ==========================
   Budget Split Modal
========================== */

#budgetSplitForm .flight-form-field {
    gap: 12px;
}

#budgetSplitForm .flight-form-field > label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    cursor: pointer;
}

#budgetSplitForm input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
    margin: 0;
    accent-color: var(--primary);
    box-shadow: none;
}

#budgetSplitTravellerList {
    display: grid;
    gap: 14px;
}

.budget-split-equal-message {
    padding: 18px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #f8fbff;
    color: #374151;
    font-weight: 700;
}

.budget-split-person-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;

    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: #ffffff;
}

.budget-split-person-name {
    color: #111827;
    font-weight: 800;
}

.budget-split-input-wrap {
    display: flex;
    align-items: center;

    width: min(220px, 100%);

    border: 1px solid #cbd5e1;
    border-radius: 10px;

    background: #ffffff;
    overflow: hidden;
}

.budget-split-value-input {
    width: 100%;
    min-height: 44px;

    padding: 10px 12px;

    border: 0;
    border-radius: 0;

    font: inherit;
    text-align: right;
}

.budget-split-value-input:focus {
    outline: none;
    box-shadow: none;
}

.budget-split-prefix,
.budget-split-suffix {
    padding: 0 12px;
    color: var(--muted);
    font-weight: 800;
}

.budget-split-prefix {
    border-right: 1px solid var(--border);
}

.budget-split-suffix {
    border-left: 1px solid var(--border);
}

#budgetSplitSummary[data-valid="true"] {
    border-color: #86efac;
    background: #dcfce7;
    color: #166534;
}

#budgetSplitSummary[data-valid="false"] {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

@media (max-width: 600px) {
    .budget-split-person-row {
        align-items: stretch;
        flex-direction: column;
    }

    .budget-split-input-wrap {
        width: 100%;
    }
}

.budget-section-description {
    max-width: 460px;
    color: var(--muted);
    font-size: 0.9rem;
}

.spending-money-list {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(320px, 1fr)
    );
    gap: 18px;
}

.spending-money-card {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #ffffff;
}

.spending-money-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;

    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.spending-money-card-header h3 {
    margin: 4px 0 0;
}

.spending-money-stat-grid {
    display: grid;
    grid-template-columns: repeat(
        3,
        minmax(0, 1fr)
    );
    gap: 12px;
    margin-top: 18px;
}

.spending-money-stat {
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #f8fbff;
}

.spending-money-stat span {
    display: block;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.spending-money-stat strong {
    display: block;
    margin-top: 5px;
    color: #111827;
    font-size: 1.1rem;
}

.spending-money-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;

    margin-top: 18px;
    padding-top: 16px;

    border-top: 1px solid var(--border);
}

.spending-money-transaction-count {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.spending-money-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.set-spending-target-button,
.add-spending-saving-button {
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
}

.set-spending-target-button {
    background: #ffffff;
    color: var(--primary);
}

.set-spending-target-button:hover {
    background: var(--primary-light);
    color: #1d4ed8;
}

.add-spending-saving-button {
    background: var(--primary);
    color: #ffffff;
}

.add-spending-saving-button:hover {
    background: #1d4ed8;
}

@media (max-width: 700px) {
    .spending-money-stat-grid {
        grid-template-columns: 1fr;
    }

    .spending-money-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .spending-money-actions {
        width: 100%;
    }

    .spending-money-actions button {
        flex: 1;
    }
}

.spending-saving-history {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.spending-saving-history-header {
    margin-bottom: 12px;
}

.spending-saving-history-list {
    display: grid;
    gap: 12px;
}

.spending-saving-history-row {
    padding: 14px 16px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #f8fbff;
}

.spending-saving-history-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.spending-saving-history-main > div {
    display: grid;
    gap: 4px;
}

.spending-saving-history-amount {
    color: #166534;
    font-size: 1.05rem;
}

.spending-saving-history-date,
.spending-saving-history-method {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.spending-saving-history-method {
    text-align: right;
}

.spending-saving-history-notes {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.88rem;
}

.spending-saving-history-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dbeafe;
}

.delete-spending-saving-button {
    padding: 8px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #ffffff;
    color: var(--primary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.delete-spending-saving-button:hover {
    border-color: #93c5fd;
    background: var(--primary-light);
    color: #1d4ed8;
}

.spending-saving-empty {
    margin: 0;
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 600px) {
    .spending-saving-history-main {
        flex-direction: column;
    }

    .spending-saving-history-method {
        text-align: left;
    }
}


/* ==========================
   Login Page
========================== */

.login-body {
    min-height: 100vh;
    padding: 0;
    background: #eef4fb;
}

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns:
        minmax(420px, 1.05fr)
        minmax(420px, 0.95fr);
}

.login-visual {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 34px 42px;
    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(8, 20, 42, 0.28),
            rgba(8, 20, 42, 0.66)
        ),
        url(
            "adventure-planner-home-assets/adventure-hero.jpg"
        )
        center / cover no-repeat;
}

.login-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(255, 255, 255, 0.16),
            transparent 28%
        );
    pointer-events: none;
}

.login-brand,
.login-visual-content,
.login-back-link {
    position: relative;
    z-index: 1;
}

.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;

    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.035em;
    text-decoration: none;
}

.login-brand-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(12px);
}

.login-brand-mark svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-visual-content {
    width: min(620px, 100%);
    margin: auto 0;
    padding: 70px 0;
}

.login-visual-eyebrow {
    margin-bottom: 14px;

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.login-visual-content h1 {
    margin: 0;

    font-size: clamp(3rem, 5vw, 5.5rem);
    line-height: 0.98;
    letter-spacing: -0.06em;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.34);
}

.login-visual-content p:last-child {
    max-width: 580px;
    margin: 24px 0 0;

    color: rgba(255, 255, 255, 0.88);
    font-size: 1.08rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.login-back-link {
    display: inline-flex;
    width: fit-content;

    color: rgba(255, 255, 255, 0.84);
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

.login-back-link:hover {
    color: #ffffff;
}

.login-panel {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 48px;
    background:
        radial-gradient(
            circle at top right,
            rgba(37, 99, 235, 0.10),
            transparent 30%
        ),
        #f8fbff;
}

.login-card {
    width: min(470px, 100%);
    padding: 38px;

    border: 1px solid #dbe4f0;
    border-radius: 24px;

    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 24px 70px rgba(30, 64, 116, 0.14);
}

.login-card-heading {
    margin-bottom: 28px;
}

.login-card-heading .eyebrow {
    margin-bottom: 7px;
}

.login-card-heading h2 {
    margin: 0;

    color: #111827;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.login-card-heading > p:last-child {
    margin-top: 12px;
    color: var(--muted);
}

#loginForm {
    display: grid;
    gap: 18px;
}

.login-field {
    display: grid;
    gap: 8px;
}

.login-field > span {
    color: #374151;
    font-size: 0.88rem;
    font-weight: 800;
}

.login-field input {
    width: 100%;
    min-height: 50px;

    padding: 12px 14px;

    border: 1px solid #cbd5e1;
    border-radius: 12px;

    background: #ffffff;
    color: #111827;

    font: inherit;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.login-field input::placeholder {
    color: #9ca3af;
}

.login-field input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.12);
}

.login-submit-button {
    min-height: 50px;
    margin-top: 4px;

    border-radius: 12px;

    font-size: 0.98rem;
    font-weight: 850;
    box-shadow:
        0 12px 26px rgba(37, 99, 235, 0.22);
}

.login-submit-button:disabled {
    cursor: wait;
    opacity: 0.68;
}

.login-message {
    min-height: 24px;
    margin: 0;

    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
}

.login-message[data-state="success"] {
    color: #166534;
}

.login-message[data-state="error"] {
    color: #b91c1c;
}

.login-security-note {
    margin: 24px 0 0;
    padding-top: 20px;

    border-top: 1px solid var(--border);

    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
}

@media (max-width: 900px) {
    .login-page {
        grid-template-columns: 1fr;
    }

    .login-visual {
        min-height: 420px;
        padding: 24px;
    }

    .login-visual-content {
        padding: 54px 0;
    }

    .login-visual-content h1 {
        max-width: 680px;
    }

    .login-panel {
        min-height: auto;
        padding: 42px 20px 60px;
    }
}

@media (max-width: 560px) {
    .login-visual {
        min-height: 360px;
        padding: 18px;
    }

    .login-brand-mark {
        width: 40px;
        height: 40px;
    }

    .login-visual-content {
        padding: 40px 0;
    }

    .login-visual-content h1 {
        font-size: clamp(2.5rem, 13vw, 4rem);
    }

    .login-visual-content p:last-child {
        font-size: 0.96rem;
    }

    .login-panel {
        padding: 26px 12px 42px;
    }

    .login-card {
        padding: 26px 20px;
        border-radius: 20px;
    }
}

/* ==========================
   Dynamic Overview Page
========================== */

.overview-page {
    display: grid;
    gap: 28px;
}

.overview-site-header {
    position: relative;
}

.overview-all-trips-link {
    position: absolute;
    top: 24px;
    left: 34px;

    display: inline-flex;
    align-items: center;

    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
}

.overview-all-trips-link:hover {
    color: #1d4ed8;
}

.overview-dashboard-hero {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, 300px);
    gap: 26px;
    align-items: center;

    padding: 34px;

    border: 1px solid var(--border);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at top right,
            rgba(37, 99, 235, 0.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #eff6ff
        );

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.05);
}

.overview-dashboard-hero h2 {
    margin: 4px 0 10px;

    color: #111827;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.overview-countdown-card {
    min-height: 190px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;

    padding: 24px;

    border: 1px solid #bfdbfe;
    border-radius: 20px;

    background: #ffffff;
    text-align: center;

    box-shadow:
        0 10px 28px rgba(37, 99, 235, 0.10);
}

.overview-countdown-card > span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.overview-countdown-card strong {
    color: var(--primary);
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1;
    letter-spacing: -0.06em;
}

.overview-countdown-card small {
    color: var(--muted);
    font-weight: 750;
}

.overview-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap: 16px;
}

.overview-summary-grid .summary-card {
    min-height: 126px;
    display: grid;
    align-content: center;
}

.overview-section {
    padding: 28px;

    border: 1px solid var(--border);
    border-radius: 20px;

    background: #ffffff;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.04);
}

.overview-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;

    margin-bottom: 22px;
}

.overview-section-heading h2 {
    margin: 4px 0 0;
}

.overview-route-list {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.overview-route-stop {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 15px;

    border: 1px solid #bfdbfe;
    border-radius: 14px;

    background: #f8fbff;
}

.overview-route-number {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--primary);
    color: #ffffff;

    font-size: 0.78rem;
    font-weight: 900;
}

.overview-route-stop strong {
    color: #111827;
}

.overview-route-arrow {
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 900;
}

.overview-travellers-list {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );
    gap: 14px;
}

.overview-traveller-card {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 16px;

    border: 1px solid #dbeafe;
    border-radius: 16px;

    background: #f8fbff;
}

.overview-traveller-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--primary);
    color: #ffffff;

    font-size: 1.1rem;
    font-weight: 900;
}

.overview-traveller-card strong {
    display: block;
    color: #111827;
    font-size: 1.05rem;
}

.overview-empty-state,
.overview-loading-message {
    width: 100%;
    margin: 0;
    padding: 24px;

    border: 1px dashed #bfdbfe;
    border-radius: 16px;

    background: #f8fbff;
    color: var(--muted);
    text-align: center;
}

.overview-empty-state h3 {
    margin-bottom: 7px;
}

.overview-empty-state p {
    margin: 0 0 16px;
}

.overview-database-status {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
}

.overview-database-status[data-state="success"] {
    color: var(--primary);
}

.overview-database-status[data-state="error"] {
    color: #b91c1c;
}

@media (max-width: 900px) {
    .overview-dashboard-hero {
        grid-template-columns: 1fr;
    }

    .overview-countdown-card {
        min-height: 160px;
    }

    .overview-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 640px) {
    .overview-all-trips-link {
        position: static;
        justify-content: center;
        margin-bottom: 18px;
    }

    .overview-dashboard-hero,
    .overview-section {
        padding: 22px;
    }

    .overview-summary-grid {
        grid-template-columns: 1fr;
    }

    .overview-route-list {
        align-items: stretch;
        flex-direction: column;
    }

    .overview-route-stop {
        width: 100%;
    }

    .overview-route-arrow {
        transform: rotate(90deg);
        text-align: center;
    }
}

.overview-site-header h1 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.overview-site-header .trip-info {
    max-width: 920px;
    margin: 18px auto 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.8;
}

.overview-site-header .trip-subtitle {
    margin-top: 6px;
    font-size: 1rem;
    font-weight: 700;
}

.overview-section-description {
    max-width: 620px;
    margin-top: 8px;
    color: var(--muted);
}

.overview-route-section {
    background:
        radial-gradient(
            circle at top right,
            rgba(37, 99, 235, 0.09),
            transparent 34%
        ),
        #ffffff;
}

.overview-route-list {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px, 1fr)
        );
    gap: 14px;
}

.overview-route-stop {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 110px;
    padding: 18px 14px;
    text-align: center;
}

.overview-route-number {
    width: 34px;
    height: 34px;
}

.overview-route-stop strong {
    font-size: 1rem;
}

.overview-route-arrow {
    display: none;
}

/* Upcoming */

.overview-upcoming-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 18px;
}

.overview-upcoming-card {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    padding: 22px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbff
        );

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.05);
}

.overview-upcoming-card::after {
    content: "";
    position: absolute;
    top: -55px;
    right: -55px;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background:
        rgba(37, 99, 235, 0.06);

    pointer-events: none;
}

.overview-upcoming-card-header {
    position: relative;
    z-index: 1;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 22px;
}

.overview-upcoming-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;

    border-radius: 15px;

    background: var(--primary-light);
    color: var(--primary);

    font-size: 1.35rem;
}

.overview-upcoming-type {
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.overview-upcoming-card h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 8px;

    color: #111827;
    font-size: 1.3rem;
    line-height: 1.2;
}

.overview-upcoming-route,
.overview-upcoming-location {
    position: relative;
    z-index: 1;

    margin: 0;

    color: var(--muted);
    font-weight: 700;
}

.overview-upcoming-meta {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 10px;

    margin-top: 20px;
}

.overview-upcoming-meta div {
    padding: 11px;

    border: 1px solid #dbeafe;
    border-radius: 12px;

    background: #ffffff;
}

.overview-upcoming-meta span {
    display: block;

    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.overview-upcoming-meta strong {
    display: block;
    margin-top: 3px;

    color: #111827;
    font-size: 0.92rem;
}

.overview-upcoming-link {
    position: relative;
    z-index: 1;

    width: fit-content;
    margin-top: auto;
    padding-top: 20px;

    color: var(--primary);
    font-size: 0.86rem;
    font-weight: 850;
    text-decoration: none;
}

.overview-upcoming-link:hover {
    color: #1d4ed8;
}

.overview-upcoming-empty {
    justify-content: center;
    text-align: center;
}

.overview-upcoming-empty h3 {
    margin-top: 14px;
}

.overview-upcoming-empty p {
    color: var(--muted);
}

@media (max-width: 900px) {
    .overview-upcoming-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .overview-upcoming-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .overview-upcoming-grid {
        grid-template-columns: 1fr;
    }

    .overview-upcoming-card:last-child {
        grid-column: auto;
    }

    .overview-upcoming-card {
        min-height: 230px;
    }

    .overview-route-list {
        grid-template-columns: 1fr;
    }
}

/* ==========================
   Overview Planning Progress
========================== */

.overview-planning-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 18px;
}

.overview-planning-card {
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: 22px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbff
        );

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.05);
}

.overview-planning-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 18px;
}

.overview-planning-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;

    border-radius: 15px;

    background: var(--primary-light);
    color: var(--primary);

    font-size: 1.35rem;
}

.overview-planning-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 10px;

    border: 1px solid #bfdbfe;
    border-radius: 999px;

    background: #eff6ff;
    color: #1d4ed8;

    font-size: 0.74rem;
    font-weight: 850;
}

.overview-planning-status.is-complete {
    border-color: #86efac;
    background: #dcfce7;
    color: #166534;
}

.overview-planning-status.is-started {
    border-color: #bfdbfe;
    background: #dbeafe;
    color: #1d4ed8;
}

.overview-planning-status.is-empty {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #64748b;
}

.overview-planning-card h3 {
    margin: 0 0 8px;

    color: #111827;
    font-size: 1.25rem;
}

.overview-planning-main-value {
    display: block;

    color: var(--primary);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.overview-planning-description {
    margin: 6px 0 0;
    color: var(--muted);
}

.overview-planning-progress {
    height: 11px;
    margin-top: 18px;
    overflow: hidden;

    border: 1px solid #bfdbfe;
    border-radius: 999px;

    background: #eff6ff;
}

.overview-planning-progress-bar {
    height: 100%;
    border-radius: inherit;

    background: var(--primary);

    transition: width 0.3s ease;
}

.overview-planning-progress-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;

    margin-top: 8px;

    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.overview-planning-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 10px;

    margin-top: 16px;
}

.overview-planning-detail {
    padding: 10px;

    border: 1px solid #dbeafe;
    border-radius: 12px;

    background: #ffffff;
}

.overview-planning-detail span {
    display: block;

    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.overview-planning-detail strong {
    display: block;
    margin-top: 3px;

    color: #111827;
    font-size: 0.9rem;
}

.overview-planning-link {
    width: fit-content;
    margin-top: auto;
    padding-top: 20px;

    color: var(--primary);
    font-size: 0.86rem;
    font-weight: 850;
    text-decoration: none;
}

.overview-planning-link:hover {
    color: #1d4ed8;
}

@media (max-width: 900px) {
    .overview-planning-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 640px) {
    .overview-planning-grid {
        grid-template-columns: 1fr;
    }

    .overview-planning-card {
        min-height: 230px;
    }
}

/* ==========================
   Overview Today Mode
========================== */

.overview-today-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at top right,
            rgba(37, 99, 235, 0.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f5f9ff
        );
}

.overview-today-section::after {
    content: "";
    position: absolute;
    right: -95px;
    bottom: -120px;

    width: 280px;
    height: 280px;

    border: 48px solid
        rgba(37, 99, 235, 0.04);

    border-radius: 50%;
    pointer-events: none;
}

.overview-today-content {
    position: relative;
    z-index: 1;
}

.overview-today-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(260px, 0.65fr);
    gap: 18px;
}

.overview-today-card {
    padding: 24px;

    border: 1px solid #bfdbfe;
    border-radius: 18px;

    background: #ffffff;
    box-shadow:
        0 8px 24px rgba(37, 99, 235, 0.08);
}

.overview-today-card-primary {
    position: relative;
    overflow: hidden;
}

.overview-today-card-primary::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;

    width: 5px;
    background: var(--primary);
}

.overview-today-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;

    margin-bottom: 20px;
}

.overview-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 12px;

    border: 1px solid #bfdbfe;
    border-radius: 999px;

    background: var(--primary-light);
    color: var(--primary);

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.overview-today-date {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 750;
}

.overview-today-card h3 {
    margin: 0;

    color: #111827;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.overview-today-summary {
    margin: 12px 0 0;

    color: var(--muted);
    font-size: 1rem;
}

.overview-today-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 20px;
}

.overview-today-meta span {
    display: inline-flex;
    align-items: center;

    padding: 8px 12px;

    border: 1px solid #dbeafe;
    border-radius: 999px;

    background: #f8fbff;
    color: #374151;

    font-size: 0.84rem;
    font-weight: 750;
}

.overview-tomorrow-label {
    display: block;
    margin-bottom: 12px;

    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.overview-tomorrow-card h3 {
    font-size: 1.3rem;
}

.overview-tomorrow-card .overview-today-summary {
    font-size: 0.92rem;
}

.overview-today-empty {
    padding: 28px;

    border: 1px dashed #bfdbfe;
    border-radius: 18px;

    background: #ffffff;
    text-align: center;
}

.overview-today-empty-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;

    margin: 0 auto 14px;

    border-radius: 18px;

    background: var(--primary-light);
    font-size: 1.55rem;
}

.overview-today-empty h3 {
    margin-bottom: 8px;
}

.overview-today-empty p {
    max-width: 620px;
    margin: 0 auto 18px;
    color: var(--muted);
}

@media (max-width: 800px) {
    .overview-today-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================
   Today Mode Timeline
========================== */

.overview-live-status {
    margin-top: 22px;
    padding: 17px 18px;

    border: 1px solid #93c5fd;
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #ffffff
        );
}

.overview-live-label,
.overview-highlights-label {
    display: block;

    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.overview-live-status strong {
    display: block;
    margin-top: 4px;

    color: #111827;
    font-size: 1.05rem;
}

.overview-live-status p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.overview-live-status-finished {
    border-color: #dbeafe;
}

.overview-day-timeline {
    display: grid;
    gap: 0;

    margin-top: 22px;

    border-top: 1px solid #dbeafe;
}

.overview-timeline-row {
    display: grid;
    grid-template-columns:
        minmax(92px, 120px)
        minmax(0, 1fr);
    gap: 16px;

    padding: 16px 0;

    border-bottom: 1px solid #e5edf7;
}

.overview-timeline-row time {
    color: var(--primary);
    font-size: 0.86rem;
    font-weight: 900;
}

.overview-timeline-row strong {
    display: block;
    color: #111827;
}

.overview-timeline-row p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.overview-timeline-empty {
    margin: 20px 0 0;
    padding: 14px;

    border: 1px dashed #bfdbfe;
    border-radius: 12px;

    color: var(--muted);
    font-size: 0.88rem;
    text-align: center;
}

.overview-day-highlights {
    margin-top: 22px;
}

.overview-highlights-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 10px;
}

.overview-highlights-list span {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 8px 11px;

    border: 1px solid #dbeafe;
    border-radius: 999px;

    background: #f8fbff;
    color: #374151;

    font-size: 0.82rem;
    font-weight: 750;
}

.overview-tomorrow-preview {
    display: grid;
    gap: 10px;

    margin-top: 20px;
}

.overview-tomorrow-preview > div {
    display: grid;
    grid-template-columns:
        80px
        minmax(0, 1fr);
    gap: 10px;

    padding: 11px 0;

    border-bottom: 1px solid #e5edf7;
}

.overview-tomorrow-preview time {
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 900;
}

.overview-tomorrow-preview span {
    color: #111827;
    font-size: 0.88rem;
    font-weight: 750;
}

@media (max-width: 560px) {
    .overview-timeline-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .overview-tomorrow-preview > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

/* ==========================
   Overview Holiday Mode
========================== */

.overview-hero-date {
    margin: 14px 0 0;

    color: var(--muted);
    font-size: 1rem;
    font-weight: 750;
}

.overview-hero-location {
    width: fit-content;
    margin: 12px 0 0;
    padding: 8px 12px;

    border: 1px solid #bfdbfe;
    border-radius: 999px;

    background: #ffffff;
    color: var(--primary);

    font-size: 0.88rem;
    font-weight: 850;
}

.overview-dashboard-hero.is-holiday-mode {
    color: #ffffff;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, 0.16),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #2563eb,
            #173f91
        );

    border-color: #2563eb;
}

.overview-dashboard-hero.is-holiday-mode .eyebrow,
.overview-dashboard-hero.is-holiday-mode h2,
.overview-dashboard-hero.is-holiday-mode .page-intro,
.overview-dashboard-hero.is-holiday-mode .overview-hero-date {
    color: #ffffff;
}

.overview-dashboard-hero.is-holiday-mode .overview-hero-location {
    border-color:
        rgba(255, 255, 255, 0.42);

    background:
        rgba(255, 255, 255, 0.13);

    color: #ffffff;
}

.overview-dashboard-hero.is-holiday-mode .overview-countdown-card {
    border-color:
        rgba(255, 255, 255, 0.38);

    background:
        rgba(255, 255, 255, 0.13);

    backdrop-filter: blur(12px);
}

.overview-dashboard-hero.is-holiday-mode .overview-countdown-card span,
.overview-dashboard-hero.is-holiday-mode .overview-countdown-card strong,
.overview-dashboard-hero.is-holiday-mode .overview-countdown-card small {
    color: #ffffff;
}

/* ==========================
   Shared Dynamic Trip Header
========================== */

.trip-page-header {
    position: relative;
}

.trip-page-header h1 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;

    font-size: clamp(
        2.8rem,
        6vw,
        5rem
    );

    line-height: 1;
    letter-spacing: -0.055em;
}

.trip-page-header .trip-info {
    max-width: 920px;
    margin: 18px auto 0;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.8;
}

.trip-page-header .trip-subtitle {
    margin-top: 6px;

    font-size: 1rem;
    font-weight: 700;
}

.trip-page-header .overview-all-trips-link {
    position: absolute;
    top: 24px;
    left: 34px;

    display: inline-flex;
    align-items: center;

    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
}

.trip-page-header .overview-all-trips-link:hover {
    color: #1d4ed8;
}

@media (max-width: 640px) {
    .trip-page-header .overview-all-trips-link {
        position: static;
        justify-content: center;
        margin-bottom: 18px;
    }
}

/* ==========================
   Dynamic Outfit Planner
========================== */

.outfit-page {
    display: grid;
    gap: 28px;
}

.outfit-page-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;

    margin-top: 24px;
}

.outfit-traveller-field {
    display: grid;
    gap: 8px;
    min-width: min(320px, 100%);
}

.outfit-traveller-field > span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.outfit-traveller-field select {
    min-height: 46px;
    padding: 10px 13px;

    border: 1px solid #cbd5e1;
    border-radius: 12px;

    background: #ffffff;
    color: #111827;

    font: inherit;
    font-weight: 750;
}

.outfit-database-status {
    margin: 0;

    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 750;
}

.outfit-database-status[data-state="success"] {
    color: var(--primary);
}

.outfit-database-status[data-state="error"] {
    color: #b91c1c;
}

.outfit-day-card-empty {
    min-height: 270px;
}

.outfit-empty-plan {
    display: grid;
    justify-items: center;

    padding: 36px 22px;

    border: 1px dashed #bfdbfe;
    border-radius: 16px;

    background: #f8fbff;
    text-align: center;
}

.outfit-empty-plan-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;

    margin-bottom: 12px;

    border-radius: 18px;

    background: var(--primary-light);
    font-size: 1.5rem;
}

.outfit-empty-plan h4 {
    margin: 0;
}

.outfit-empty-plan p {
    max-width: 560px;
    margin: 8px 0 18px;

    color: var(--muted);
}

.outfit-slot-empty {
    display: grid;
    place-items: center;
    min-height: 160px;
    padding: 24px;

    border: 1px dashed #bfdbfe;
    border-radius: 14px;

    background: #f8fbff;
    color: var(--muted);
    text-align: center;
}

.outfit-plan-no-slots {
    min-height: 120px;
}

.outfit-empty-photo-placeholder {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;

    background: #eff6ff;
    color: var(--primary);
}

.outfit-empty-photo-placeholder span {
    font-size: 1.7rem;
    font-weight: 800;
}

.outfit-empty-photo-placeholder small {
    color: var(--muted);
}

.status-complete {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-packed {
    background: #e0f2fe;
    color: #075985;
}

.status-worn {
    background: #e2e8f0;
    color: #334155;
}

@media (max-width: 640px) {
    .outfit-page-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .outfit-traveller-field {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================
   Shared CRUD Modal
========================== */

.crud-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

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

.crud-modal[aria-hidden="true"] {
    display: none;
}

.crud-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(7px);
}

.crud-modal-dialog {
    position: relative;
    z-index: 1;

    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;

    padding: 28px;

    border: 1px solid var(--border);
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 28px 90px rgba(15, 23, 42, 0.38);
}

.crud-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    margin-bottom: 24px;
    padding-bottom: 18px;

    border-bottom: 1px solid var(--border);
}

.crud-modal-header h2 {
    margin: 5px 0 0;
}

.crud-modal-subtitle {
    margin-top: 7px;

    color: var(--muted);
    font-weight: 700;
}

.crud-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;
    padding: 0;

    border: 1px solid #bfdbfe;
    border-radius: 50%;

    background: #ffffff;
    color: var(--primary);

    cursor: pointer;

    font-size: 1.7rem;
    line-height: 1;
}

.crud-modal-close:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

.crud-modal-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 24px;
    padding-top: 18px;

    border-top: 1px solid var(--border);
}

.primary-action-button {
    padding: 10px 16px;

    border: 1px solid var(--primary);
    border-radius: 10px;

    background: var(--primary);
    color: #ffffff;

    cursor: pointer;

    font: inherit;
    font-weight: 800;
}

.primary-action-button:hover {
    background: #1d4ed8;
}

@media (max-width: 700px) {
    .crud-modal {
        padding: 12px;
    }

    .crud-modal-dialog {
        max-height: calc(100vh - 24px);
        padding: 20px;
        border-radius: 18px;
    }

    .crud-modal-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .crud-modal-actions button {
        width: 100%;
    }
}

/* ==========================
   Outfit Plan Editor
========================== */

.outfit-day-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 18px;
}

.outfit-plan-modal-dialog {
    width: min(820px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.outfit-plan-form-grid {
    display: grid;
    grid-template-columns:
        minmax(180px, 0.35fr)
        minmax(0, 0.65fr);
    gap: 18px;

    margin-top: 20px;
}

.outfit-plan-form-grid .form-field {
    display: grid;
    gap: 8px;
}

.outfit-plan-form-grid .form-field > span {
    color: #374151;
    font-size: 0.82rem;
    font-weight: 850;
}

.outfit-plan-form-grid select,
.outfit-plan-form-grid textarea,
.outfit-slot-editor select,
.outfit-slot-editor input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;

    border: 1px solid #cbd5e1;
    border-radius: 11px;

    background: #ffffff;
    color: #111827;

    font: inherit;
}

.outfit-plan-form-grid textarea {
    resize: vertical;
}

.outfit-plan-slots-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;

    margin: 28px 0 14px;
}

.outfit-plan-slots-heading h3 {
    margin: 4px 0 0;
}

.outfit-plan-slots-editor {
    display: grid;
    gap: 14px;
}

.outfit-slot-editor {
    display: grid;
    grid-template-columns:
        minmax(135px, 0.3fr)
        minmax(150px, 0.3fr)
        minmax(0, 1fr)
        auto;
    gap: 12px;
    align-items: end;

    padding: 16px;

    border: 1px solid #dbeafe;
    border-radius: 15px;

    background: #f8fbff;
}

.outfit-slot-editor-field {
    display: grid;
    gap: 7px;
}

.outfit-slot-editor-field > span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.remove-outfit-slot-button {
    min-height: 44px;
    padding: 9px 12px;

    border: 1px solid #fecaca;
    border-radius: 10px;

    background: #fff;
    color: #b91c1c;

    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 850;
}

.remove-outfit-slot-button:hover {
    background: #fef2f2;
}

.outfit-slot-editor-empty {
    padding: 24px;

    border: 1px dashed #bfdbfe;
    border-radius: 14px;

    background: #f8fbff;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 700px) {
    .outfit-plan-form-grid {
        grid-template-columns: 1fr;
    }

    .outfit-slot-editor {
        grid-template-columns: 1fr;
    }

    .remove-outfit-slot-button {
        width: 100%;
    }
}

/* ==========================
   Private Outfit Uploads
========================== */

.outfit-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.outfit-slot-heading-copy {
    display: grid;
    gap: 8px;
}

.outfit-slot-heading-copy h4 {
    margin: 0;
}

.upload-outfit-image-button {
    flex: 0 0 auto;
}

@media (max-width: 560px) {
    .upload-outfit-image-button {
        width: 100%;
    }
}

/* ==========================
   Outfit Image Deletion
========================== */

.outfit-photo-image-wrap {
    position: relative;
}

.outfit-photo-image-wrap img {
    display: block;
    width: 100%;
}

.delete-outfit-image-button {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;

    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.92);
    color: #991b1b;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.16);

    cursor: pointer;
    font-size: 0.95rem;
}

.delete-outfit-image-button:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.outfit-photo:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ==========================
   Outfit Caption Editing
========================== */

.outfit-photo:not(.empty-photo) {
    display: flex;
    flex-direction: column;

    height: auto;
    aspect-ratio: auto;
    overflow: hidden;

    border: 1px solid #dbeafe;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 5px 16px rgba(15, 23, 42, 0.06);
}

.outfit-photo-image-wrap {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;

    width: 100%;
    aspect-ratio: 4 / 5;

    background: #f8fafc;
}

.outfit-photo-image-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.outfit-caption-display {
    display: grid;
    gap: 7px;

    padding: 12px 14px 14px;
}

.outfit-caption-display[hidden] {
    display: none;
}

/*
 * This overrides the older:
 * .outfit-photo figcaption
 * rule higher up in style.css.
 */
.outfit-caption-display figcaption {
    position: static;

    left: auto;
    right: auto;
    bottom: auto;

    display: block;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: #111827;

    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
}

.edit-outfit-caption-button {
    width: fit-content;
    padding: 0;

    border: 0;
    background: transparent;
    color: var(--primary);

    cursor: pointer;

    font: inherit;
    font-size: 0.76rem;
    font-weight: 850;
    text-align: left;
}

.edit-outfit-caption-button:hover {
    background: transparent;
    color: #1d4ed8;
    text-decoration: underline;
}

.outfit-caption-edit-form {
    display: grid;
    gap: 10px;

    padding: 12px 14px 14px;

    border-top: 1px solid #e5e7eb;

    background: #f8fbff;
}

.outfit-caption-edit-form[hidden] {
    display: none;
}

.outfit-caption-edit-form label {
    display: block;
}

.outfit-caption-input {
    width: 100%;
    min-width: 0;
    min-height: 42px;

    padding: 9px 11px;

    border: 1px solid #93c5fd;
    border-radius: 10px;

    background: #ffffff;
    color: #111827;

    font: inherit;
}

.outfit-caption-input:focus {
    border-color: var(--primary);
    outline: none;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.14);
}

.outfit-caption-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.save-outfit-caption-button,
.cancel-outfit-caption-button {
    padding: 8px 11px;

    border-radius: 9px;

    cursor: pointer;

    font: inherit;
    font-size: 0.78rem;
    font-weight: 850;
}

.save-outfit-caption-button {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.save-outfit-caption-button:hover {
    background: #1d4ed8;
}

.cancel-outfit-caption-button {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
}

.cancel-outfit-caption-button:hover {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #334155;
}

/* ==========================
   Outfit Image Reordering — SortableJS
========================== */

.outfit-drag-handle {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 3;

    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);
    color: #334155;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.16);

    cursor: grab;
    touch-action: none;
    user-select: none;

    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.18em;
}

.outfit-drag-handle:hover {
    background: #ffffff;
    color: var(--primary);
}

.outfit-drag-handle:active {
    cursor: grabbing;
}

.outfit-sortable-chosen {
    border-color: var(--primary) !important;

    box-shadow:
        0 10px 28px rgba(37, 99, 235, 0.18) !important;
}

.outfit-sortable-ghost {
    opacity: 0.28;

    border: 2px dashed var(--primary) !important;
    background: #eff6ff !important;
}

.outfit-sortable-drag {
    opacity: 0.96;
    transform: rotate(1deg);

    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.24) !important;
}

/* Prevent accidental image selection while dragging. */
.outfit-photo-grid,
.outfit-photo,
.outfit-photo img {
    -webkit-user-select: none;
    user-select: none;
}

@media (max-width: 560px) {
    .outfit-drag-handle {
        width: 40px;
        height: 40px;
    }
}