/* Shared styles for the TripSolid web app (trip editor).
   Tokens/components mirror the homepage (../index.html) so the app looks
   like part of the same site, not a separate admin panel. Homepage has no
   dark mode, so the dark override below is this app's own addition,
   mapped to match the mobile app's dark theme (styles/themes.ts) instead. */

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

:root {
    --primary: #ef4444;
    --black: #0f0f0f;
    --black-hover: #2a2a2a;
    --white: #ffffff;
    --bg: #f5f5f4;
    --bg-subtle: #ebebea;
    --text: #0f0f0f;
    --text-secondary: #6b6b6b;
    --border: #e5e5e4;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.1);
    --card-bg: var(--white);
    --card-footer-bg: #f7f7f7;
    --input-bg: var(--white);
    --input-text: var(--black);
    --overlay: rgba(0, 0, 0, 0.5);
    --nav-bg: rgba(245, 245, 244, 0.6);
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    /* A translucent overlay rather than a fixed hex, so hovering always
       reads as a visible shift regardless of what it's painted on top of
       (a white card, a dark dropdown, etc.) - darkens in light mode,
       lightens in dark mode (see the dark overrides below), instead of
       reusing --bg, which happens to sit almost on top of --card-bg in
       dark mode and made hovered rows nearly invisible there. */
    --hover-bg: rgba(0, 0, 0, 0.08);
    /* A nested card sitting on top of an already --card-bg surface (e.g. a
       modal), where --bg itself can't be used for contrast - in dark mode
       --bg is pure black, darker than --card-bg, which made a nested card
       look heavier than its surroundings instead of lighter. This is
       always a small step toward white from --card-bg, in both themes. */
    --card-nested-bg: #fcfcfb;
}

/* System dark preference applies unless the user has explicitly picked
   "light" via the header toggle (data-theme="light" then wins). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --black: #ef4444;
        --black-hover: #f16767;
        --white: #202123;
        --bg: #000000;
        --bg-subtle: #202123;
        --text: #ffffff;
        --text-secondary: #cccccc;
        --border: #4d4d4e;
        --card-bg: #202123;
        --card-footer-bg: #353638;
        --input-bg: #525152;
        --input-text: #ffffff;
        --overlay: rgba(0, 0, 0, 0.8);
        --nav-bg: rgba(0, 0, 0, 0.6);
        --hover-bg: rgba(255, 255, 255, 0.09);
        --card-nested-bg: #2e2f31;
    }
}

/* Explicit dark choice wins regardless of system preference. */
:root[data-theme="dark"] {
    --black: #ef4444;
    --black-hover: #f16767;
    --white: #202123;
    --bg: #000000;
    --bg-subtle: #202123;
    --text: #ffffff;
    --text-secondary: #cccccc;
    --border: #4d4d4e;
    --card-bg: #202123;
    --card-footer-bg: #353638;
    --input-bg: #525152;
    --input-text: #ffffff;
    --overlay: rgba(0, 0, 0, 0.8);
    --nav-bg: rgba(0, 0, 0, 0.6);
    --hover-bg: rgba(255, 255, 255, 0.09);
    --card-nested-bg: #2e2f31;
}

.theme-toggle svg {
    display: block;
}

.pref-select {
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    min-height: 100vh;
}

/* Nav — matches the homepage's fixed, blurred nav bar exactly */

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0.75rem 2rem;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.nav-content {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.02em;
    font-family: 'Roboto', sans-serif;
}

.logo img {
    width: 48px;
    height: 48px;
}

.logo-text {
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
}

.logo-trip {
    font-weight: 300;
    text-transform: uppercase;
}

.logo-dot {
    width: 5px;
    height: 5px;
    background-color: var(--primary);
    border-radius: 50%;
    display: inline-block;
}

.logo-solid {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text);
}

.nav-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-icon-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.user-email {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Layout */

.container {
    max-width: 640px;
    margin: 0 auto;
    padding: 6.5rem 1.5rem 1.5rem;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.nav-breadcrumb-divider {
    color: var(--border);
    font-size: 0.9rem;
}

.nav-breadcrumb {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.nav-breadcrumb:hover {
    color: var(--text);
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    font-family: inherit;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--black);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--black-hover);
}

.btn-secondary {
    background: var(--white);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-subtle);
}

.btn-danger {
    background: var(--white);
    color: var(--danger);
    border: 1px solid var(--danger);
}

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

.btn-small {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

.btn-full {
    width: 100%;
}

/* Cards */

.card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
    overflow: hidden;
}

.card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.card-row:last-child {
    border-bottom: none;
}

.card-row:hover {
    background: var(--hover-bg);
}

.card-row-text {
    flex: 1;
    min-width: 0;
}

.card-row-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.card-row-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.card-row-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.card-row-chevron {
    color: var(--text-secondary);
    flex-shrink: 0;
    display: flex;
}

/* Forms */

.input-group {
    margin-bottom: 1rem;
    text-align: left;
}

.input-group label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* Between field groups in a form - mirrors the app's row dividers in its
   event edit/detail view (UPPERCASE LABEL, value, divider, next label). */
.field-divider {
    height: 1px;
    background: var(--border);
    margin: 1.1rem 0;
}

/* Same uppercase-label convention as .input-group label, usable outside
   a form (e.g. a section heading in the read-only detail popup). */
.section-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* A .section-label that also doubles as a collapse/expand toggle for the
   sibling content block right after it (see toggleModalSection()) - used
   in Share Trip's modal to shorten it without losing anything. */
.collapsible-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    /* Overrides .section-label's small uppercase field-label look (0.7rem,
       muted, letter-spaced) - at that size/weight it read as just another
       input label instead of a section heading, with nothing to tell them
       apart (see chat). This is a group heading, so it gets the same
       size/weight/color as real body text instead. */
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text);
    padding: 0.4rem 0;
}

.collapsible-section-label:hover {
    color: var(--primary);
}

.section-toggle-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform 0.15s;
}

/* Card-style wrapper for the Add/Edit Event modal's collapsible sections
   (Details / Location & Photo / Costs & Notes / Documents & Links / Poll) -
   gives each section its own card, like .days-card's day-groups, instead
   of just a plain divider-separated label + content run together. Lightly
   rounded (matches the input fields' own radius so the card and the
   fields inside it read as one family) and --card-nested-bg for a subtle,
   light fill rather than a heavy contrast block. */
.modal-accordion-card {
    background: var(--card-nested-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.modal-accordion-card:last-child {
    margin-bottom: 0;
}

/* Focus indication for whichever section is currently expanded - the
   accent color rather than a generic blue, to match the rest of the
   app's own focus/active language (buttons, links, the collapsible
   label's own hover color) instead of introducing a one-off color.
   Toggled by toggleModalSection()/resetEventModalSections(). */
.modal-accordion-card.accordion-card-open {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.modal-accordion-card > .collapsible-section-label {
    padding: 0.55rem 0.75rem;
    margin: 0;
    background: var(--card-footer-bg);
}

.modal-accordion-body {
    padding: 0.75rem;
}

/* Floating labels for the Edit Event modal's plain text/number/textarea
   fields - the label sits where a placeholder normally would while the
   field is empty, then shrinks up to the top edge once focused or filled.
   Unlike a bare placeholder (which just disappears once there's a value),
   the label stays visible so it's still clear what each field is when
   editing an event that already has data. The field's own hint text (e.g.
   "e.g. Flight, Hotel, Dinner") is hidden until focus instead of fighting
   the label for the same space. Scoped to .form-field (an .input-group
   modifier) so it only affects the fields opted into it, not every
   .input-group elsewhere in the app. */
.input-group.form-field {
    position: relative;
}

.input-group.form-field label {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-secondary);
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, font-weight 0.15s ease, color 0.15s ease;
}

.input-group.form-field textarea ~ label {
    top: 1.15rem;
    transform: none;
}

.input-group.form-field input:focus ~ label,
.input-group.form-field input:not(:placeholder-shown) ~ label,
.input-group.form-field textarea:focus ~ label,
.input-group.form-field textarea:not(:placeholder-shown) ~ label {
    top: 0.3rem;
    transform: none;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary);
}

.input-group.form-field input,
.input-group.form-field textarea {
    padding-top: 1.15rem;
    padding-bottom: 0.3rem;
}

.input-group.form-field input::placeholder,
.input-group.form-field textarea::placeholder {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.input-group.form-field input:focus::placeholder,
.input-group.form-field textarea:focus::placeholder {
    opacity: 1;
}

.input-group input,
.input-group textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--input-text);
    transition: border-color 0.15s;
    resize: vertical;
}

.input-group input:focus,
.input-group textarea:focus {
    outline: none;
    border-color: var(--black);
}

/* Event photo drop zone - replaces the unstyled native <input type="file">
   that used to sit next to the Paste Image button. Click checks the
   clipboard for an image first (handleEventImageDropZoneClick in
   trip-editor.html) before falling back to the real file input; it also
   accepts a native Ctrl+V paste and drag-and-drop. */
.image-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.image-drop-zone svg {
    flex-shrink: 0;
}

.image-drop-zone span {
    font-size: 0.85rem;
}

.image-drop-zone:hover,
.image-drop-zone:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    outline: none;
}

.image-drop-zone.drag-over {
    border-color: var(--primary);
    background: rgba(239, 68, 68, 0.06);
    color: var(--primary);
}

.input-group select {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--input-text);
    transition: border-color 0.15s;
}

.input-group select:focus {
    outline: none;
    border-color: var(--black);
}

.input-row {
    display: flex;
    gap: 0.75rem;
}

.input-row .input-group {
    flex: 1;
}

.error-message {
    background: #fee2e2;
    color: #b91c1c;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* Login screen */

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-card h1 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.login-card p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Modal — matches the app's shared modal chrome (PDF Export Options / TripModalSharedStyles) */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 200;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

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

/* Floating panels - draggable cards (no backdrop) rather than blocking
   modals, so the day list stays clickable behind them. Each starts pinned
   near a default corner; its drag handle switches it to an explicit
   position once the user drags it. Used by the event detail popup and the
   add/edit event form. */

.floating-panel {
    display: none;
    position: fixed;
    top: 6rem;
    z-index: 200;
}

.floating-panel.active {
    display: block;
}

.floating-panel .modal {
    max-width: calc(100vw - 2rem);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.floating-panel .drag-handle {
    cursor: grab;
    user-select: none;
}

.floating-panel .drag-handle:active {
    cursor: grabbing;
}

#eventDetailModal.floating-panel {
    right: 2rem;
}

#eventDetailModal.floating-panel .modal {
    width: 380px;
}

#eventModal.floating-panel {
    left: 2rem;
}

#eventModal.floating-panel .modal {
    width: 440px;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
}

.lightbox-close:hover {
    background: rgba(0, 0, 0, 0.6);
}

.modal {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
    /* 100vh can be taller than what's actually visible on a mobile browser
       (it includes space the address bar can cover), which clips
       .modal-actions off the bottom of the card with no way to reach it -
       only .modal-body scrolls, not the card as a whole. 100dvh tracks the
       real visible viewport on browsers that support it; the vh line above
       is the fallback for ones that don't. Same fix as the floating-panel
       mobile override below. */
    max-height: 85vh;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    padding: 1.5rem 1.5rem 0;
}

/* Event modal header band - mirrors the app's event header exactly
   (icon + truncated title on a light band across the top of the card). */
.modal-header-band {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--card-footer-bg);
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.modal-header-band svg {
    color: var(--primary);
    flex-shrink: 0;
}

.modal-header-band .modal-header-title {
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Action icon-buttons (Edit/Close/...) at the right edge of a
   .modal-header-band - tighter gap between them than the header's own
   title-to-icon spacing, and pulled in slightly to counteract .icon-btn's
   own internal padding, so the group actually sits at the edge instead of
   just "somewhere on the right". */
.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    margin-right: -0.4rem;
    flex-shrink: 0;
}

.modal-body {
    padding: 0.5rem 1.5rem 1.5rem;
    overflow-y: auto;
    position: relative;
    /* Thin scrollbar instead of the browser's default-width one, for every
       popup that scrolls (plain .modal-overlay ones and floating-panels
       alike, since both share this class). Firefox via scrollbar-width;
       Chrome/Safari/Edge via the ::-webkit-scrollbar rules below. */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.modal-body::-webkit-scrollbar {
    width: 6px;
}

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

.modal-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* A banded header already has its own bottom padding/border, so the body
   needs its full top padding back instead of the small gap a centered
   .modal-title leaves. */
.modal-header-band + .modal-body {
    padding-top: 1.5rem;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
}

.modal-actions .btn {
    flex: 1;
}

/* PDF Export Options modal - mirrors EventsScreen.tsx's pdfOptionsContainer
   option rows (label + description on the left, a toggle on the right). */

.pdf-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
}

.pdf-option-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.pdf-option-row input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.pdf-option-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.pdf-option-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

/* A free-text option row, column layout instead of pdf-option-row's label-
   beside-checkbox row - same label/description look, same input styling
   as .input-group input, used for the public link's "Shared by" field. */
.pdf-option-row-stacked {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
}

.pdf-option-row-stacked .pdf-option-text {
    margin-bottom: 0.5rem;
}

.pdf-option-row-stacked input[type="text"] {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--input-text);
    transition: border-color 0.15s;
}

.pdf-option-row-stacked input[type="text"]:focus {
    outline: none;
    border-color: var(--black);
}

.pdf-watermark-notice {
    background: rgba(102, 126, 234, 0.1);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    margin-top: 0.75rem;
}

/* Trip card — mirrors screens/TripsScreen.tsx's tripCard exactly (radius,
   padding, footer band) so the website's trip list looks like the app's. */

.trip-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.trip-card:hover {
    box-shadow: var(--shadow);
}

.trip-card-content {
    padding: 1.25rem 1.25rem 0.9rem;
}

.trip-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.trip-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.trip-card-subrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.trip-card-subrow .divider-dot {
    width: 1px;
    height: 12px;
    background: var(--border);
}

.trip-card-subrow svg {
    flex-shrink: 0;
}

.trip-card-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.icon-btn:hover {
    background: var(--hover-bg);
    color: var(--text);
}

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

.trip-card-divider {
    height: 1px;
    background: var(--border);
    margin: 1rem 0 0.75rem;
}

.trip-card-stats {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.9rem;
}

.stats-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stats-col-right {
    align-items: flex-end;
}

.stat-chip {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.trip-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--card-footer-bg);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.trip-tag-badge {
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 7px;
}

/* Trip header on the events page — mirrors screens/EventsScreen.tsx's
   centered tripHeader/tripTitle/tripDateRange exactly (no card, no
   border - the mobile screen doesn't have one here either). */

.trip-header {
    position: relative;
    text-align: center;
    padding-top: 1.25rem;
    margin-bottom: 1.5rem;
}

.trip-header-title {
    font-size: 1.375rem;
    font-weight: 700;
}

.trip-header-daterange {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.trip-header-divider {
    height: 1px;
    background: var(--border);
    margin-top: 1.25rem;
}

.trip-header-edit-btn {
    position: absolute;
    top: 1.25rem;
    right: 0;
}

/* Day-grouped events list — mirrors screens/EventsScreen.tsx's collapsible
   per-day accordion (day header band, dashed dividers between events). */

.days-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    /* No overflow:hidden here - it used to clip the per-row kebab dropdown
       whenever it needed to extend past the card's edge. Corners are
       rounded explicitly on the first/last day-header instead (see below),
       since that's the only child whose background differs from the
       card's own. */
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.25rem;
    background: var(--card-footer-bg);
    border-top: 1px solid var(--border);
    cursor: pointer;
}

.day-group:first-child .day-header {
    border-top: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.day-header-rounded-bottom {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

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

.day-header-name {
    font-weight: 600;
    color: var(--primary);
}

.day-header-divider {
    width: 1px;
    height: 14px;
    background: var(--border);
}

.day-header-date {
    color: var(--text-secondary);
}

.day-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.day-header-empty {
    cursor: pointer;
    opacity: 0.7;
}

.day-header-empty-label {
    font-style: normal;
}

.day-events {
    padding: 0.75rem 1.25rem;
}

.day-event {
    cursor: pointer;
    border-radius: 8px;
    padding: 0.3rem 0.4rem;
    transition: background 0.15s;
}

.day-event:hover {
    background: var(--hover-bg);
}

.day-event + .day-event {
    border-top: 1px dashed var(--border);
    margin-top: 0.2rem;
    padding-top: 0.6rem;
}

.day-event-body {
    display: flex;
    gap: 0.75rem;
}

.day-event-text {
    flex: 1;
    min-width: 0;
}

.day-event-side {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    flex-shrink: 0;
}

.day-event-side .row-menu {
    align-self: flex-start;
}

.day-event-title {
    font-weight: 700;
    font-size: 1rem;
}

.day-event-time {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.day-event-meta-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

.day-event-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

/* The event's own short Tag field (separate from Type/Description - see
   migrations/20261005_add_event_tag.sql), shown as a small red pill as
   the first item in .day-event-meta-row (to the left of the description
   and cost), matching the trip list's own tag badges
   (.tagSmall/.tagTextSmall in TripsScreen.tsx) - smaller than .type-badge
   (the event detail popup's own header badge, which shows the same tag at
   a larger size). */
.day-event-tag-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.05rem 0.35rem;
    border-radius: 6px;
    flex-shrink: 0;
}

.day-event-meta-divider {
    font-size: 0.8rem;
    color: var(--border);
}

.day-event-cost {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.day-event-thumb {
    width: 70px;
    height: 100%;
    max-height: 90px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* Event detail popup — mirrors EventDetailsScreen.tsx's read-only view
   (photo, type badge, time/address/cost rows, notes, status). */

.detail-image {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: block;
    margin-bottom: 1rem;
    cursor: pointer;
}

.type-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.detail-divider {
    height: 1px;
    background: var(--border);
    margin: 1rem 0;
}

.detail-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.detail-row svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--text-secondary);
}

.detail-link-icon {
    margin-left: auto;
    color: var(--text-secondary);
    flex-shrink: 0;
    padding-left: 0.5rem;
}

.detail-notes {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Documents & Links */

.doc-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
}

.doc-row + .doc-row {
    border-top: 1px solid var(--border);
}

.doc-row-icon {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.doc-row-name {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-row-name:hover {
    text-decoration: underline;
}

/* Share Trip section (Edit Trip modal) */

.shared-user-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
}

.shared-user-row + .shared-user-row {
    border-top: 1px solid var(--border);
}

.shared-user-email {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shared-user-badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    background: var(--card-footer-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
}

.share-link-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
}

.share-link-box input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: 'SF Mono', Monaco, monospace;
}

.share-link-box input:focus {
    outline: none;
}

/* Event Poll (options) - the app's only polling mechanism now. Options
   are plain text tied directly to one event, not separate real trip
   events. The old multi-event Polls feature (which this replaced) has
   been removed entirely - see
   migrations/20260918_remove_old_polls_and_extend_event_options.sql. */

.poll-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.poll-quick-add-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.poll-quick-add-row input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 0.85rem;
    font-family: inherit;
}

.poll-quick-add-row input:focus {
    outline: none;
    border-color: var(--primary);
}

.event-option-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
}

.event-option-row + .event-option-row {
    border-top: 1px solid var(--border);
}

.event-option-row.winner {
    color: var(--text);
}

.event-option-vote-btn {
    flex-shrink: 0;
    display: inline-flex;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-secondary);
}

.event-option-vote-btn.voted {
    color: var(--primary);
}

.event-option-text {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-option-votes {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

.event-option-votes-clickable {
    cursor: pointer;
}

.event-option-votes-clickable:hover {
    color: var(--text);
}

.event-option-voters {
    padding: 0 0 0.5rem 1.8rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Day-list badge for events with a poll ("N Options" while voting is
   still open, "Decided" once a winning option has been applied). */

.day-event-status-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.day-event-status-badge.options {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
}

.day-event-status-badge.decided {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
}

.doc-option-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    margin-bottom: 0.75rem;
}

.doc-option-btn:hover {
    background: var(--hover-bg);
}

.doc-option-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.doc-option-icon {
    color: var(--primary);
    flex-shrink: 0;
}

.doc-option-text strong {
    display: block;
    font-size: 0.9rem;
}

.doc-option-text span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.doc-option-lock {
    margin-left: auto;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Per-row kebab menu (Edit/Delete tucked behind one button) */

.row-menu {
    position: relative;
}

.row-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    min-width: 140px;
    overflow: hidden;
    z-index: 10;
}

.row-menu-dropdown.active {
    display: block;
}

.row-menu-dropdown button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.row-menu-dropdown button:hover {
    background: var(--hover-bg);
}

.row-menu-dropdown button.danger {
    color: var(--danger);
}

/* Settings menu — nav-header gear icon that tucks the currency/time
   format/theme/show-all-days preferences behind one dropdown instead of
   stacking them all as separate controls. Reuses the .row-menu /
   .row-menu-dropdown open/close mechanics (toggleRowMenu, outside-click
   close) via the dual class names on the markup. */

.settings-dropdown {
    min-width: 230px;
    padding: 0.4rem;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
}

.settings-row-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.settings-dropdown .icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.toggle-label input {
    cursor: pointer;
}

/* Divider between upcoming and past trips - mirrors TripsScreen.tsx's
   dividerContainer/dividerLine/dividerText. */

.trips-divider {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 1.25rem;
}

.trips-divider-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.trips-divider-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Loading / empty states */

.loading,
.no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Responsive */

@media (max-width: 600px) {
    nav {
        padding: 0.6rem 1rem;
    }

    .logo img {
        width: 40px;
        height: 40px;
    }

    .nav-left .logo-text {
        display: none;
    }

    .user-email {
        display: none;
    }

    .container {
        padding: 5.5rem 1rem 1rem;
    }

    .input-row {
        flex-direction: column;
        gap: 0;
    }

    /* Below this width there's no real room to drag a floating panel
       around anyway, so both event popups become full-screen sheets
       instead - easier to read and tap than a small floating card.
       #eventDetailModal/#eventModal are named explicitly here too since
       their own ID-scoped rules (fixed left/right offset, fixed width)
       are more specific than a plain .floating-panel override would be. */
    .floating-panel,
    #eventDetailModal.floating-panel,
    #eventModal.floating-panel {
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: var(--overlay);
        justify-content: center;
        align-items: flex-start;
        padding: 1rem;
    }

    .floating-panel.active {
        display: flex;
    }

    .floating-panel .modal,
    #eventDetailModal.floating-panel .modal,
    #eventModal.floating-panel .modal {
        width: 100%;
        max-width: 100%;
        /* 100vh includes space the mobile browser's address bar can cover,
           so it can be taller than what's actually visible - clipping
           .modal-actions (Save/Cancel) below the fold with no way to reach
           it, since only .modal-body scrolls, not the card as a whole.
           100dvh tracks the real visible viewport instead; the vh line
           above is the fallback for browsers that don't support dvh yet. */
        max-height: calc(100dvh - 2rem);
    }

    .floating-panel .drag-handle {
        cursor: default;
    }
}