/* ═══════════════════════════════════════════════════════
   TRAVEL PLANNER DETAIL — V2 OVERLAY
   Mobile-first responsive override.
   Loaded AFTER travel-planner-detail.css.

   LAYOUT CONCEPT:
   ┌─────────────── HEADER (full width, fixed top) ──────────────┐
   │  logo  │   trip name / dest / dates (centered)   │  btns M  │
   └─────────────────────────────────────────────────────────────┘
   ┌──────┬──────────────────────────────────────────────────────┐
   │ SIDE │                                                      │
   │ BAR  │   CONTENT AREA (daily cards)                         │
   │      │                                                      │
   │      │                                                      │
   │      │                                                      │
   └──────┴──────────────────────────────────────────────────────┘
   Sidebar starts BELOW header. Panels start BELOW header.
   ═══════════════════════════════════════════════════════ */

/* ─── DESIGN SYSTEM ──────────────────────────────────── */
:root {
    --bg:        #FDF3D7;
    --text:      #003E54;
    --accent:    #F9CD2D;
    --accent-lt: rgba(249,205,45,0.15);
    --white:     #ffffff;
    --muted:     #666666;
    --brand-cream-soft: #FBF6E7;   /* itinerary column bg in Vista B (center-split) */
    --teal:      #003E54;
    --teal-dark: #003E54;    --text-xs:   0.85rem;
    --text-sm:   1rem;
    --text-md:   1.2rem;
    --text-lg:   2rem;
    --text-xl:   3.5rem;
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  2rem;
    --space-lg:  4rem;
    --space-xl:  6rem;
    --max-w:     1100px;
    --pad-x:     5rem;
    --radius:    1rem;
    --radius-lg: 1.5rem;
    --sidebar-w: 11rem;        /* ≈143px @13px root — rail expanded (icon + name) */
    --panel-w: 30rem;
    --header-h:  4.25rem;     /* desktop default — snug around the single-row bar */
}

/* ─── DESIGN SYSTEM — MOBILE BREAKPOINT ──────────────── */
@media (max-width: 767px) {
    :root {
        --text-xs:   0.7rem;
        --text-sm:   0.85rem;
        --text-md:   1rem;
        --text-lg:   1.4rem;
        --text-xl:   2rem;
        --space-xs:  0.25rem;
        --space-sm:  0.5rem;
        --space-md:  1rem;
        --space-lg:  2rem;
        --space-xl:  3rem;
        --pad-x:     1rem;
        --sidebar-w: 4.5rem;
    }
}

/* The redesigned header is two rows below 1024px (mobile + tablet);
   --header-h is sized to the actual rendered content (two 38px+
   rows + row-gap + 0.5rem outer top/bottom padding) so the sidebar,
   panels and content-area (which all anchor against this var)
   don't leave a chunk of empty teal at the bottom of the bar. */
@media (max-width: 1023px) {
    :root {
        --header-h: 7.25rem;
    }
}

/* ─── GLOBAL OVERRIDE ────────────────────────────────── */
html { font-size: 13px; }
body {
    font-family: var(--font);
    background-color: var(--bg);
    color: var(--text);
}
input, select, textarea, button {
    font-family: var(--font) !important;
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════
   1. HEADER — full width, fixed top
   ═══════════════════════════════════════════════════════ */
.fixed-header {
    position: fixed;
    top: 0 !important; left: 0 !important; right: 0 !important;
    background: var(--teal-dark);
    color: var(--white);
    height: var(--header-h);
    padding: 0 var(--space-md) 0 var(--space-xs);
    z-index: 1100 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    transition: padding 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
.fixed-header.compressed {
    padding: 0 var(--space-md) 0 var(--space-xs);
    height: var(--header-h);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: var(--space-md);
    position: relative;
}

/* Header left — logo */
.header-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.logo {
    height: 3.4375rem;
    width: auto !important;
    max-width: none !important;
    /* Intrinsic Logobiancolp.png is 2607x1113. Anything else stretches
       the artwork; reserved aspect ratio matches the image so the
       browser doesn't shift layout after decoding. */
    aspect-ratio: 2607 / 1113;
    cursor: pointer;
    display: block !important;
    object-fit: contain;
}
.logo-mobile { display: none !important; }

/* Header center — trip info (absolute center) */
.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: 50%;
}
.trip-title {
    font-size: var(--text-md);
    font-weight: 800;
    margin-bottom: 1px;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: none;
    line-height: 1.2;
}
.trip-route {
    font-size: var(--text-xs);
    font-weight: 500;
    margin-bottom: 0;
    transition: none;
    display: inline-flex;
    gap: var(--space-xs);
    align-items: center;
    justify-content: center;
}
.trip-dates {
    font-size: var(--text-xs);
    opacity: 0.8;
    font-weight: 400;
    transition: none;
    margin-top: 2px;
}

/* Compressed state */
.fixed-header.compressed .trip-title { font-size: var(--text-md); }
.fixed-header.compressed .trip-route { font-size: var(--text-xs); }
.fixed-header.compressed .trip-dates { font-size: var(--text-xs); }

/* Header right — square buttons + avatar */
.header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}
.header-actions {
    display: flex;
    flex-direction: row;
    gap: var(--space-xs);
    align-items: center;
}

/* Invite button — regular .header-btn */
#header-invite-btn {
    font-size: 0;
    padding: 0;
    width: 2.875rem;
    height: 2.875rem;
}
#header-invite-btn svg {
    width: 20px;
    height: 20px;
}

/* Header action buttons — SQUARE with SVG */
.header-btn {
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    color: var(--white);
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius);
    transition: all 0.2s ease;
    width: 2.875rem;
    height: 2.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-size: initial;
    background-position: initial;
    background-image: none !important;
}
.header-btn:hover {
    background: var(--accent);
    color: var(--text);
    border-color: var(--accent);
    transform: none;
}
.header-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tooltip on hover — Menevo style */
.header-btn {
    position: relative;
}
.header-btn::after {
    content: attr(title);
    position: absolute;
    bottom: calc(-100% - var(--space-xs));
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.3em 0.8em;
    border-radius: 50px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
}
.header-btn:hover::after {
    opacity: 1;
}
.btn-tooltip { display: none; }

/* User avatar — same height as buttons, wider, yellow */
.user-menu {
    position: relative;
}
.header-right .user-menu .user-menu-button {
    font-family: var(--font);
    font-size: var(--text-xs);
    color: var(--text) !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #F9CD2D !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-radius: 16px !important;
    width: 6rem;
    height: 2.875rem;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all 0.2s;
}
.header-right .user-menu .user-menu-button:hover {
    background: #e6b800 !important;
}
#user-greeting { display: none !important; }
.header-right .user-menu .user-menu-button .user-btn-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent !important;
    color: #003E54 !important;
    font-weight: 700;
    font-size: 14px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: none !important;
}
.header-right .user-menu .user-menu-button .user-btn-avatar svg {
    stroke: #003E54 !important;
    width: 22px;
    height: 22px;
}

/* User dropdown */
.user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--bg);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 2000;
    padding: var(--space-xs) 0;
    margin-top: var(--space-xs);
    border: 2px solid var(--text);
}
.user-dropdown.active {
    display: block;
}
.user-info-section {
    text-align: center;
    padding: var(--space-sm);
}
.user-info-avatar { display: none; }
.dd-user-name {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
    font-family: var(--font);
}
.user-email {
    font-size: var(--text-xs);
    color: var(--muted);
    font-family: var(--font);
}
.menu-divider {
    height: 1px;
    background: rgba(0,62,84,0.1);
    margin: var(--space-xs) 0;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text);
    padding: var(--space-xs) var(--space-sm);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    transition: background 0.15s;
}
.menu-item:hover {
    background: rgba(0,62,84,0.06);
}
.menu-item.logout { color: #994652; }
.menu-item-icon {
    display: flex;
    align-items: center;
    color: inherit;
}
.menu-item-icon svg { width: 16px; height: 16px; }
.language-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
}
.language-selector-menu {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text);
    font-family: var(--font);
}
.language-options {
    display: flex;
    gap: 4px;
}
.lang-option {
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(0,62,84,0.15);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
}
.lang-option:hover, .lang-option.active {
    background: var(--text);
    color: var(--bg);
}

/* ═══════════════════════════════════════════════════════
   1b. HEADER REDESIGN — pill bar + breadcrumb + 2-row mobile
   The `.tp-header` modifier scopes overrides on top of the
   existing `.fixed-header` rules (which kept other places
   that still depend on the class working). Old descendant
   classes (.header-content/.header-left/.header-center/
   .header-right/.header-btn) are simply not used by the new
   markup, so their existing rules become dead-but-harmless.
   ═══════════════════════════════════════════════════════ */

/* Override height/padding of .fixed-header when the redesign
   opt-in class is present. The bar is edge-to-edge teal — no
   rounded corners, no floating-pill inset. The .tp-header-bar
   inner wrapper is kept for DOM/structure but is neutralised
   so the bar shell is the actual header. */
.fixed-header.tp-header {
    background: var(--teal-dark) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    height: auto !important;
    min-height: var(--header-h);
    padding: 0.5rem 1rem !important;
    /* Notched phones (viewport-fit=cover): push the bar below the status
       bar / Dynamic Island. env()=0 elsewhere, so desktop is unchanged.
       The header ResizeObserver re-measures offsetHeight and keeps
       --header-h (and thus the content offset) in lockstep. */
    padding-top: max(0.5rem, env(safe-area-inset-top)) !important;
    border-radius: 0 !important;
    display: block !important;
    align-items: initial !important;
    transition: none !important;
}

/* Default (mobile + tablet, <=1023): a single flex container that
   wraps row 1 (brand + name + actions) above row 2 (breadcrumb).
   Order:
     order 0 -> brand, divider (hidden on mobile), name
     order 1 -> actions (margin-left:auto pushes them to the edge)
     order 2 -> breadcrumb (flex-basis 100% forces it onto a new row)
   The breadcrumb's flex-basis 100% + min-width 0 + overflow-x auto
   are what guarantees the side-scroll on row 2: previous iteration
   used a 3-column grid spanning the breadcrumb, but the grid
   tracks could be coaxed to grow to fit the breadcrumb's content
   even with min-width:0, killing the overflow. */
.tp-header-bar {
    background: transparent;
    color: var(--white);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    row-gap: 0.375rem;
    min-width: 0;
}
.tp-brand      { order: 0; flex-shrink: 0; }
.tp-divider    { order: 0; flex-shrink: 0; }
.tp-chip--name { order: 0; flex: 0 1 auto; min-width: 0; }
.tp-actions    { order: 1; flex-shrink: 0; margin-left: auto; }
.tp-breadcrumb {
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
}

/* — BRAND (left) ————————————————————————————————————— */
.tp-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    padding: 0.125rem 0.25rem;
    cursor: pointer;
    border-radius: 0.5rem;
}
.tp-brand:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.tp-brand-mark {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    border-radius: 0.5rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.125rem;
}
.tp-brand-wordmark {
    display: none; /* hidden on mobile/tablet; revealed ≥1024 */
    height: 1.625rem;
    width: auto;
    aspect-ratio: 2607 / 1113;
    object-fit: contain;
}

/* — DIVIDER between brand and breadcrumb (desktop only) — */
.tp-divider {
    display: none;
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.15);
    margin: 0.375rem 0.25rem;
    flex-shrink: 0;
}

/* — CHIP base ———————————————————————————————————————
   Chips are flat: no background pill, no hover pill — they read
   as breadcrumb items, not as discrete cards. Hover/focus shifts
   the accent colour on text+icon so the affordance is still
   visible without re-introducing the boxed look. */
.tp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.3125rem 0.4375rem;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--white);
    border: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    min-height: 38px;
    text-align: left;
}
button.tp-chip,
.tp-chip[onclick] {
    cursor: pointer;
    transition: color 0.15s ease;
}
button.tp-chip:hover,
.tp-chip[onclick]:hover {
    color: var(--accent);
}
button.tp-chip:hover .tp-chip-icon,
.tp-chip[onclick]:hover .tp-chip-icon {
    opacity: 1;
}
button.tp-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.tp-chip-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    opacity: 0.85;
}
.tp-chip-text {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14ch;
}
button.tp-chip-text--name {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    text-align: left;
    line-height: 1.15;
    /* Never truncate the trip name. Allow it to wrap onto a
       second line rather than ellipsing — even at 30+ char
       names the row still reads as "trip name" in full. */
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}
button.tp-chip-text--name:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 0.25rem;
}
.tp-chip--name {
    flex-shrink: 1;
    min-width: 0;
}

/* — Country chip flags ——————————————————————————————
   updateTripFlags() now writes the chip content as an inline
   sequence of flag+name pairs into #tripRoute. The legacy
   #tripFlags container is left in the markup for backward
   compatibility but is no longer used — hide it so the chip
   doesn't carry a phantom gap from the parent's flex layout. */
#tripFlags.tp-chip-flags { display: none; }
.tp-chip--country #tripRoute .tp-route-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    white-space: nowrap;
}
.tp-chip--country #tripRoute .tp-route-item + .tp-route-item {
    margin-left: 0.3125rem;
}
.tp-chip--country #tripRoute .tp-route-flag {
    width: 1.125rem;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    flex-shrink: 0;
}
.tp-chip--country #tripRoute .tp-route-name {
    color: inherit;
    font-weight: 600;
}
/* Country chip text is never truncated — the visit countries
   list ("Italia, Francia, Spagna" etc.) must always read in full
   at every breakpoint. Wins over the 14ch base cap and over the
   22ch / 24ch caps in the tablet / desktop blocks by specificity
   (.tp-chip--country .tp-chip-text = 0,2,0 vs .tp-chip-text alone
   = 0,1,0). On mobile the row already scrolls horizontally so a
   wider chip just means more strip to swipe; on desktop the
   breadcrumb stretches to fit. */
.tp-chip--country .tp-chip-text {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}
/* Dates chip: never truncated below the desktop breakpoint
   (the 24ch desktop cap stays — review confirmed desktop is OK
   for the current 3-case date format). The cross-year format
   "25 dic '26 – 08 gen '27" is 22 chars and just clipped by
   the 14ch mobile base cap, so on mobile/tablet we lift it. */
@media (max-width: 1023px) {
    .tp-chip--dates .tp-chip-text {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }
}

/* — Collab chip — avatars + invite "+" — */
.tp-chip--collab {
    padding: 0.25rem 0.25rem 0.25rem 0.4375rem;
    gap: 0.4375rem;
    cursor: default;
    background: transparent;
}
.tp-collab-avatars {
    display: inline-flex;
    align-items: center;
}
/* Header member stack is clickable → opens the members list modal. */
.tp-collab-avatars .menevo-collab-avatar { cursor: pointer; }
/* ID is repeated to win against the legacy mobile rule
   `#header-invite-btn { width:36px; height:36px }` further down
   in this file (specificity 1,0,0). Touch target stays >=44px on
   mobile and 36px-ish on desktop where pointer is precise. */
#header-invite-btn.tp-invite-plus {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin-left: 0.25rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#header-invite-btn.tp-invite-plus:hover,
#header-invite-btn.tp-invite-plus:focus-visible {
    background: var(--accent);
    color: var(--text);
    border-color: var(--accent);
    outline: none;
}
#header-invite-btn.tp-invite-plus svg {
    width: 1rem;
    height: 1rem;
}
/* On desktop the bar is denser; the invite button can shrink a bit. */
@media (min-width: 1024px) {
    #header-invite-btn.tp-invite-plus {
        width: 1.75rem;
        height: 1.75rem;
        min-width: 1.75rem;
    }
    #header-invite-btn.tp-invite-plus svg {
        width: 0.875rem;
        height: 0.875rem;
    }
}

/* — Breadcrumb container ———————————————————————————
   On mobile/tablet the breadcrumb sits on row 2 (forced by the
   flex-basis:100% on .tp-breadcrumb above) and scrolls
   horizontally so country + dates + collab chips never wrap to a
   third row. Desktop switches it to nowrap-flex (no scroll, full
   inline) in the >=1024 block. */
.tp-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    gap: 0.375rem 0.4375rem;
    padding-right: 1.25rem;        /* tail breathing room so the last chip isn't flush against the viewport edge */
    min-width: 0;
    max-width: 100%;
}
.tp-breadcrumb::-webkit-scrollbar { display: none; }
.tp-breadcrumb > * { flex-shrink: 0; }
.tp-chevron {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.45;
    flex-shrink: 0;
    display: none; /* mobile/tablet: chips are space-separated, no chevrons */
}

/* — ACTIONS (right) ———————————————————————————————— */
.tp-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    margin-left: auto;
}

.tp-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border: none;
    border-radius: 999px;
    padding: 0 0.875rem;
    height: 2.75rem;
    min-width: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font: inherit;
    font-weight: 600;
    font-size: 0.875rem;
}
.tp-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}
.tp-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.tp-btn-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}
.tp-btn-label {
    display: none; /* shown ≥1024 */
}

.tp-btn--export {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 0 0.875rem;
}
.tp-btn--export:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--white);
}
.tp-btn--export:active {
    background: rgba(255, 255, 255, 0.18);
}
.tp-btn--export .tp-btn-icon {
    color: var(--white);
}
.tp-btn--save {
    background: var(--accent);
    color: var(--text);
    width: 2.75rem;
    padding: 0;
}
.tp-btn--save:hover {
    background: #e6b800;
}
.tp-btn--save svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* — User menu pill — */
.fixed-header.tp-header .user-menu .user-menu-button.tp-user-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0.1875rem 0.625rem 0.1875rem 0.1875rem !important;
    height: 2.75rem !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4375rem !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}
.fixed-header.tp-header .user-menu .user-menu-button.tp-user-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}
.fixed-header.tp-header .user-menu .user-menu-button.tp-user-btn:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}
.fixed-header.tp-header .tp-user-avatar.user-btn-avatar {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.25) !important;
    color: var(--white) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
.fixed-header.tp-header .tp-user-avatar svg {
    stroke: var(--white) !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
}
/* #user-greeting has a legacy `display:none !important` global rule
   (ID specificity 1,0,0); we re-chain the ID here to win without
   touching unrelated pages that still rely on that hide. The
   greeting is also kept full-length on desktop — no max-width cap
   so names like "Hi Matteo Guida" aren't ellipsed mid-word. */
.fixed-header.tp-header #user-greeting.tp-user-name {
    display: none !important; /* shown >=1024 (set in the desktop block below) */
    color: var(--white) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    white-space: nowrap;
    overflow: visible;
}
.fixed-header.tp-header .tp-user-chevron {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.7;
    display: none; /* shown ≥768 */
    color: var(--white);
}

/* Inline rename input — emitted by editTripTitle() with the
   #tripTitle <button> set to display:none, so the input
   becomes the chip's flex content and grows with the typed text.
   font-size pinned to 16px (real px) to keep iOS Safari from
   auto-zooming on focus. With chip's min-height 38px and the
   input's intrinsic height (~22px at 16px + 1 line-height + tiny
   padding) the chip never grows vertically during edit. */
.tp-header-name-input {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--accent);
    border-radius: 0.375rem;
    padding: 0.125rem 0.4375rem;
    margin: 0;
    outline: none;
    line-height: 1;
    box-sizing: border-box;
    flex: 0 1 auto;
    width: auto;
    field-sizing: content;
    min-width: 6ch;
    max-width: 100%;
    min-height: 0;
}

/* ═══════════════════════════════════════════════════════
   HEADER EDITORS — country modal + dates inline popover
   editTripRoute() and editTripDates() are still built in JS,
   but the inline cssText scaffolding has been replaced by
   these classes so the modal/popover follow the Menevo
   palette and shrink to a more reasonable footprint.
   ═══════════════════════════════════════════════════════ */

/* Shared overlay used by editTripRoute. The dates editor opens
   as an inline popover instead — see .tp-popover below. */
.tp-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
    animation: tp-edit-fade-in 0.15s ease;
}
@keyframes tp-edit-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.tp-edit-card {
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(0, 62, 84, 0.15);
    border-radius: 0.875rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    padding: 1.25rem;
    width: min(360px, 100%);
    max-height: min(82vh, 600px);
    overflow-y: auto;
    font-family: var(--font);
}
.tp-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}
.tp-edit-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}
.tp-edit-close {
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s, background 0.15s;
}
.tp-edit-close:hover {
    opacity: 1;
    background: rgba(0, 62, 84, 0.08);
}
.tp-edit-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.625rem;
}
.tp-edit-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    opacity: 0.75;
    letter-spacing: 0.01em;
}
.tp-edit-input,
.tp-edit-select {
    font-family: var(--font);
    /* 16px absolute — see note on .tp-header-name-input. Below that
       iOS Safari auto-zooms the page on focus, which reflows the
       layout under us; the popover then shifts mid-interaction. */
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    background: var(--white);
    border: 1px solid rgba(0, 62, 84, 0.2);
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    outline: none;
    width: 100%;
    line-height: 1.2;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tp-edit-input:focus,
.tp-edit-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249, 205, 45, 0.25);
}
/* Native date inputs — neutralise webkit inner padding so the
   chip-side popover feels balanced. The browser still owns the
   actual calendar popup on tap/focus. */
.tp-edit-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
}

.tp-edit-destinations {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    margin: 0 0 0.625rem;
}
.tp-edit-destination-row {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
}
.tp-edit-destination-row .tp-edit-select {
    flex: 1;
    min-width: 0;
}
.tp-edit-row-remove {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 62, 84, 0.15);
    background: var(--white);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.tp-edit-row-remove:hover {
    opacity: 1;
    background: #ffe1e1;
    color: #c0392b;
    border-color: #f5b1b1;
}
.tp-edit-row-remove svg { width: 0.875rem; height: 0.875rem; }

.tp-edit-add {
    align-self: flex-start;
    background: transparent;
    color: var(--text);
    border: 1px dashed rgba(0, 62, 84, 0.3);
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 0.875rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tp-edit-add:hover {
    background: var(--accent);
    color: var(--text);
    border-color: var(--accent);
}

.tp-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.tp-edit-btn {
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1;
    min-height: 38px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tp-edit-btn--primary {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}
.tp-edit-btn--primary:hover {
    background: var(--accent);
    color: var(--text);
    border-color: var(--accent);
}
.tp-edit-btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: rgba(0, 62, 84, 0.2);
}
.tp-edit-btn--ghost:hover {
    background: rgba(0, 62, 84, 0.06);
}

/* ── DATES popover — inline calendar, anchored to the chip ── */
.tp-popover {
    position: fixed;
    z-index: 10000;
    width: min(280px, calc(100vw - 1rem));
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(0, 62, 84, 0.15);
    border-radius: 0.875rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    padding: 0.875rem;
    font-family: var(--font);
    animation: tp-popover-in 0.12s ease;
}
@keyframes tp-popover-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tp-popover .tp-edit-head { margin-bottom: 0.625rem; }
.tp-popover .tp-edit-title { font-size: 0.875rem; }
.tp-popover .tp-edit-field { margin-bottom: 0.5rem; }
.tp-popover .tp-edit-actions { margin-top: 0.5rem; }

/* Real DOM backdrop injected by editTripDates() on mobile only
   (a previous ::before-based attempt landed inside the popover's
   own stacking context and ended up tinting the popover surface
   instead of dimming the page behind it). */
.tp-popover-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;          /* one below .tp-popover's 10000 */
    animation: tp-popover-backdrop-in 0.12s ease;
}
@keyframes tp-popover-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Mobile: the chip-anchored popover collides with row 2's
   horizontal scroll (the chip may be off-screen at open time) and
   the 280px width leaves the form cramped. Below 768px the
   popover behaves as a centred sheet — bigger, predictable, with
   touch-friendly hit areas. The "important"s win over the inline
   `top`/`left` set by JS positionPopover(); we keep that JS call
   for the >=768 path where the anchor works well. */
@media (max-width: 767px) {
    .tp-popover {
        left: 0.75rem !important;
        right: 0.75rem !important;
        top: 50% !important;
        width: auto;
        max-width: 360px;
        margin: 0 auto;
        transform: translateY(-50%);
        animation: tp-popover-in-mobile 0.16s ease;
        padding: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
    @keyframes tp-popover-in-mobile {
        from { opacity: 0; transform: translateY(calc(-50% + 6px)); }
        to   { opacity: 1; transform: translateY(-50%); }
    }
    .tp-popover .tp-edit-head { margin-bottom: 0.75rem; }
    .tp-popover .tp-edit-title { font-size: 1rem; }

    /* Stack the Start + End fields horizontally on mobile so each
       input takes ~half the popover width — keeps the centred sheet
       short and stops the inputs from feeling like huge stretched
       boxes. The two fields are direct children of the same parent
       (.tp-popover), so we can target them with a side-by-side row
       wrapper... but to avoid touching the JS markup we use
       :nth-of-type and a tiny flex helper on each .tp-edit-field. */
    .tp-popover .tp-edit-field {
        display: inline-flex;
        flex-direction: column;
        vertical-align: top;
        width: calc(50% - 0.3125rem);
        margin-bottom: 0.5rem;
        gap: 0.25rem;
    }
    .tp-popover .tp-edit-field + .tp-edit-field {
        margin-left: 0.625rem;
    }
    .tp-popover .tp-edit-label {
        font-size: 0.75rem;
        opacity: 0.8;
    }

    /* iOS Safari renders <input type="date"> with its own internal
       padding + centred date glyph, which made the inputs look
       massive even with our padding tame. Reset -webkit-appearance,
       left-align the displayed date, and tighten padding. font-size
       stays at 16px (set on the base rule) so iOS doesn't auto-zoom. */
    .tp-popover .tp-edit-input {
        -webkit-appearance: none;
        appearance: none;
        padding: 0.4375rem 0.625rem;
        min-height: 0;
        height: 40px;
        text-align: left;
    }
    .tp-popover .tp-edit-input[type="date"]::-webkit-date-and-time-value {
        text-align: left;
        margin: 0;
        padding: 0;
    }
    .tp-popover .tp-edit-input[type="date"]::-webkit-calendar-picker-indicator {
        margin-left: 0.25rem;
        opacity: 0.55;
    }

    .tp-popover .tp-edit-actions {
        margin-top: 0.75rem;
        gap: 0.5rem;
    }
    .tp-popover .tp-edit-btn {
        min-height: 42px;
        padding: 0.5rem 1rem;
        flex: 1 1 0;     /* equal-width Cancel + Save */
    }
    .tp-popover .tp-edit-close {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* ═══════ Tablet (768–1023) — still mobile-style 2 rows ═══════
   Tablet keeps the mobile pattern (user button is the ghost-outline
   circle below); we only widen the chip text caps so destination and
   trip names breathe. The user-name + chevron stay hidden — they
   reappear only on >=1024 where the row is single. */
@media (min-width: 768px) and (max-width: 1023px) {
    /* name chip explicitly stays uncapped (see base rule) so a
       long trip name never gets ellipsed — only generic chip
       text (country, dates) has a tablet cap. */
    .tp-chip-text       { max-width: 22ch; }
}

/* ═══════ Mobile + tablet (<=1023) — row 2 chips become dark pills ═══════
   On the side-scrolling second row the chips need a visible affordance
   so they read as discrete tappable cards (and so the user can see
   that the row scrolls). They get a subtle darker pill background,
   full pill radius and a more generous horizontal padding. Row 1
   (the name chip) intentionally stays flat — the trip name should
   read as a title, not a chip. Desktop chips also stay flat (see the
   >=1024 block below where the dark-pill override is reset). */
@media (max-width: 1023px) {
    .tp-breadcrumb .tp-chip {
        background: rgba(0, 0, 0, 0.22);
        border-radius: 999px;
        padding: 0.5rem 0.875rem;
    }
    .tp-breadcrumb button.tp-chip:hover,
    .tp-breadcrumb .tp-chip[onclick]:hover {
        background: rgba(0, 0, 0, 0.3);
        color: var(--white);
    }
    .tp-breadcrumb button.tp-chip:hover .tp-chip-icon,
    .tp-breadcrumb .tp-chip[onclick]:hover .tp-chip-icon {
        opacity: 1;
    }
    /* The collab chip stays a pill but its inner "+" stays as the
       dashed outline circle defined elsewhere; no chip-level hover
       since the chip itself isn't a button. */
    .tp-breadcrumb .tp-chip--collab {
        padding: 0.25rem 0.4375rem 0.25rem 0.625rem;
    }
}

/* On desktop the dark pill returns to a flat chip — the breadcrumb
   sits inline with the rest of the bar and looks cleaner without
   per-item backgrounds. */
@media (min-width: 1024px) {
    .tp-breadcrumb .tp-chip {
        background: transparent;
        border-radius: 0.5rem;
        padding: 0.3125rem 0.4375rem;
    }
    .tp-breadcrumb button.tp-chip:hover,
    .tp-breadcrumb .tp-chip[onclick]:hover {
        background: transparent;
        color: var(--accent);
    }
}

/* ═══════ Mobile + tablet (<=1023) — user button matches Save/Export ═══════
   The user-menu pill becomes a 2.75rem ghost-outline circle that
   mirrors the Save and Export shape so the three action slots feel
   like one group. Avatar bg is dropped so the inner SVG sits cleanly
   on the white outline. */
@media (max-width: 1023px) {
    .fixed-header.tp-header .user-menu .user-menu-button.tp-user-btn {
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem !important;
        padding: 0 !important;
        gap: 0 !important;
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        border-radius: 50% !important;
        justify-content: center !important;
    }
    .fixed-header.tp-header .user-menu .user-menu-button.tp-user-btn:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: var(--white) !important;
    }
    .fixed-header.tp-header .tp-user-avatar.user-btn-avatar {
        background: transparent !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        border-radius: 0 !important;
    }
}

/* ═══════ Mobile/tablet: header SEMPRE su due righe ═══════
   La riga 1 (brand + nome + azioni) non va MAI a capo: il nome del
   viaggio scorre in orizzontale dentro la sua chip quando è lungo
   (come già fa la riga 2 del breadcrumb). Vince sul wrap del nome
   dichiarato nel blocco base di button.tp-chip-text--name. */
@media (max-width: 1023px) {
    .tp-chip--name {
        flex: 1 1 0;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x;
    }
    .tp-chip--name::-webkit-scrollbar { display: none; }
    button.tp-chip-text--name {
        white-space: nowrap;
        word-break: normal;
        overflow: visible;
        max-width: none;
    }
}

/* ═══════ Desktop (≥1024) — single row, breadcrumb visible ═══════ */
@media (min-width: 1024px) {
    .tp-header-bar {
        flex-wrap: nowrap;
        gap: 0.5rem 0.625rem;
    }
    /* Reset the order hierarchy used on mobile so the desktop row
       reads in DOM order: brand | divider | name | breadcrumb | actions
       with `margin-left:auto` on .tp-actions pushing them to the
       right edge. .tp-chip--name no longer grows (otherwise it
       would absorb the breadcrumb's space). */
    .tp-brand,
    .tp-divider,
    .tp-chip--name,
    .tp-breadcrumb,
    .tp-actions               { order: 0; }
    .tp-chip--name {
        flex: 0 0 auto;
    }
    /* Per follow-up review: keep the favicon mark in the top-left of
       the header even on >=1024 — the wordmark is no longer revealed
       here. .tp-brand-mark stays visible (default), wordmark stays
       hidden (default). The divider next to the brand still shows. */
    .tp-divider               { display: block; }
    .tp-breadcrumb {
        flex: 0 1 auto;
        flex-basis: auto;
        width: auto;
        max-width: none;
        padding-right: 0;
        flex-wrap: nowrap;
        overflow: visible;                 /* no horizontal scroll on desktop */
        touch-action: auto;
        gap: 0.25rem 0.375rem;
    }
    .tp-chevron               { display: inline-block; }
    .tp-btn-label             { display: inline; }
    .fixed-header.tp-header #user-greeting.tp-user-name { display: inline !important; }
    .fixed-header.tp-header .tp-user-chevron { display: inline !important; }
    .tp-chip-text             { max-width: 24ch; }
    /* name chip stays uncapped on desktop too; the row has more
       than enough horizontal room and a wrap-to-2-lines fallback. */
}

/* ═══════════════════════════════════════════════════════
   2. SIDEBAR — fixed left, below header
   ═══════════════════════════════════════════════════════ */
.sidebar {
    width: var(--sidebar-w);
    background: var(--text);
    padding: var(--space-sm) 0;
    gap: var(--space-xs);
    position: fixed;
    left: 0;
    top: var(--header-h);
    bottom: 0;
    z-index: 1051;
    display: none;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar-item {
    width: calc(var(--sidebar-w) - 10px);
    font-size: var(--text-xs);
    padding: var(--space-xs);
    border-radius: var(--radius);
    color: var(--bg);
    opacity: 0.6;
    transition: all 0.15s;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    flex-shrink: 0;
}
.sidebar-item:hover {
    background: var(--accent);
    color: var(--text);
    opacity: 1;
}
.sidebar-item.active {
    background: var(--accent);
    color: var(--text);
    opacity: 1;
}
.sidebar-photo {
    width: 2.25rem;
    height: 2.25rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.sidebar-photo-svg {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-photo-svg svg {
    width: 30px;
    height: 30px;
}
.sidebar-label {
    font-size: var(--text-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
    margin-top: 2px;
}
/* Tooltip on hover */
.sidebar-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + var(--space-xs));
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.3em 0.8em;
    border-radius: 50px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 1200;
}
.sidebar-item:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   2b. SIDEBAR REDESIGN — rail (desktop + tablet) + bottom nav + chat FAB
   The rail has two states: expanded (icon + name, ~210px) at rest
   and collapsed (icon only, ~64px) when a panel is open. The
   collapse is driven by `body.tp-panel-open` which retargets
   --sidebar-w globally so the panel and content-area follow
   automatically. Local CSS tokens keep the new palette scoped to
   the rail/nav so the rest of the page is untouched.
   ═══════════════════════════════════════════════════════ */
.tp-sidebar,
.tp-bottom-nav,
.tp-chat-fab {
    --rail-bg:           #103A4C;
    --rail-text:         #fefaee;       /* solid bright cream — was rgba(.78) which looked muted */
    --rail-text-hover:   #ffffff;
    --rail-active-bg:    #F2C84B;
    --rail-active-text:  #0D3B4D;
    --rail-text-dim:     rgba(254, 250, 238, 0.62);    /* used only for the heading + small secondary copy */
}

/* Collapse the rail when a panel is open. Body class is toggled in
   togglePanel(). Mobile keeps its own --sidebar-w (4.5rem from the
   mobile :root media query) — the rail is `display: none` there
   anyway so the value only matters for fall-through layout maths.
   Collapsed width matches the pre-redesign sidebar value (5.625rem
   ≈ 73px) per follow-up feedback. */
body.tp-panel-open {
    --sidebar-w: 5.625rem;
}

.sidebar.tp-sidebar {
    width: var(--sidebar-w);
    background: var(--rail-bg);
    /* Tighter horizontal padding so the active-pill background of
       each rail item reaches closer to the right edge of the rail
       (the previous 0.75rem felt like wasted dead space on the right). */
    padding: 1rem 0.375rem;
    gap: 0.25rem;
    align-items: stretch;
    /* overflow visible so the collapsed-state tooltip can escape
       below each rail item. Item list is short (7 entries) — it
       fits on any reasonable viewport without needing scroll. */
    overflow: visible;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tp-rail-heading {
    color: var(--rail-text-dim);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 0.75rem;
    margin: 0 0 0.625rem;
    white-space: nowrap;
    transition: opacity 0.15s ease, max-height 0.2s ease, margin 0.2s ease;
    overflow: hidden;
    max-height: 1.5rem;
}
body.tp-panel-open .tp-rail-heading {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    pointer-events: none;
}

/* Each rail item is a row: [icon][label] (with optional badge).
   Old .sidebar-item styles are explicitly overridden via !important
   because the legacy rule lives at the same specificity but earlier
   in the file. */
.sidebar.tp-sidebar .tp-rail-item {
    /* override legacy .sidebar-item */
    width: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem !important;
    color: var(--rail-text) !important;
    background: transparent !important;
    border: none;
    border-radius: 0.625rem !important;
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 1 !important;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
    min-height: 40px;
}
.sidebar.tp-sidebar .tp-rail-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--rail-text-hover) !important;
}
.sidebar.tp-sidebar .tp-rail-item.active {
    background: var(--rail-active-bg) !important;
    color: var(--rail-active-text) !important;
}
.sidebar.tp-sidebar .tp-rail-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Unread-chat dot — a yellow blip on the Chat rail item when a new message
   arrives while the chat panel is closed (uses ::before; ::after is the tooltip). */
.sidebar.tp-sidebar .tp-rail-item.has-unread::before,
.tp-bottom-tab.has-unread::before {
    content: '';
    position: absolute;
    top: 6px; right: 8px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--accent, #F9CD2D);
    box-shadow: 0 0 0 2px var(--brand-navy, #003E54);
    z-index: 4;
    pointer-events: none;
}
.tp-bottom-tab { position: relative; }

.tp-rail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: inherit;
}
/* Icon glyph at 22px (the 30x30 from the pre-redesign sidebar felt
   too chunky in the new rail per follow-up review). */
.tp-rail-icon svg { width: 22px; height: 22px; color: inherit; stroke: currentColor; }

.sidebar.tp-sidebar .tp-rail-label {
    flex: 1;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: none !important;
    margin: 0 !important;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: 1.2;
}

/* Collapsed-state visibility for label + heading. Visually-hidden
   pattern (clip-path) keeps the text exposed to screen readers. */
body.tp-panel-open .sidebar.tp-sidebar .tp-rail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
}
body.tp-panel-open .sidebar.tp-sidebar .tp-rail-item {
    justify-content: center !important;
    padding: 0.625rem 0 !important;
    gap: 0;
}

.tp-rail-badge {
    background: var(--accent);
    color: var(--text);
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    min-width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
    text-align: center;
    margin-left: auto;
    flex-shrink: 0;
}
body.tp-panel-open .sidebar.tp-sidebar .tp-rail-badge {
    position: absolute;
    top: 0.1875rem;
    right: 0.1875rem;
    margin: 0;
}

/* ─── WELCOME TOUR — tool mini-steps ─────────────────────────────────
   During the Part 3 tool mini-steps welcome-tour.js sets body.tour-tools.
   Force the rail EXPANDED with visible NAMES (not just icons), even if a
   panel happens to be open (which would otherwise collapse it). Only
   applies where the desktop rail is shown; on mobile (≤767px) the rail is
   display:none and the tour highlights the bottom-nav tab instead, so
   these rules are inert there and the mobile layout is untouched. */
body.tour-tools .sidebar.tp-sidebar {
    width: 11rem !important;
}
body.tour-tools .sidebar.tp-sidebar .tp-rail-item {
    justify-content: flex-start !important;
    padding: 0.5rem 0.625rem !important;
    gap: 0.5rem !important;
}
body.tour-tools .sidebar.tp-sidebar .tp-rail-label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    border: 0 !important;
}
body.tour-tools .tp-rail-heading {
    opacity: 1 !important;
    max-height: 1.5rem !important;
    margin-bottom: 0.625rem !important;
    pointer-events: auto !important;
}

/* Tooltip on collapsed-state rail. Reuses .sidebar-item::after's
   data-tooltip attribute (set on the markup). At rest the label
   is right there next to the icon, so we suppress the tooltip;
   collapsed state shows it on hover. */
body:not(.tp-panel-open) .sidebar.tp-sidebar .tp-rail-item::after {
    display: none !important;
}
body.tp-panel-open .sidebar.tp-sidebar .tp-rail-item::after {
    content: attr(data-tooltip);
    position: absolute;
    /* Tooltip drops BELOW the item (not to the right of it) per
       follow-up review — the right-side position used to crash into
       the panel chrome opened next to the rail. */
    top: calc(100% + 0.375rem);
    left: 50%;
    transform: translateX(-50%);
    /* Neutral dark surface (no accent yellow) — the active-pill
       yellow read as "this item is now active" instead of "this is
       a hover label". */
    background: #0D3B4D;
    color: #fefaee;
    border-radius: 0.5rem;
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1200;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
body.tp-panel-open .sidebar.tp-sidebar .tp-rail-item:hover::after,
body.tp-panel-open .sidebar.tp-sidebar .tp-rail-item:focus-visible::after {
    opacity: 1;
}

/* Open-panel header: hovering the title icon shows the tool's DESCRIPTION
   in a Menevo-styled tooltip (replaces the native dark `title`). */
.tp-panel-icon[data-tip] { position: relative; cursor: help; }
.tp-panel-icon[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 0.5rem);   /* ABOVE the icon, not over the panel body */
    left: 0;
    background: var(--brand-navy, #003E54);
    color: var(--brand-cream-soft, #fdf6e6);
    border-radius: 11px;
    padding: 0.5rem 0.72rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    width: max-content; max-width: 240px; white-space: normal; text-align: left;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 1300;
    box-shadow: 0 8px 24px rgba(0, 62, 84, 0.3);
}
.tp-panel-icon[data-tip]:hover::after,
.tp-panel-icon[data-tip]:focus-visible::after {
    opacity: 1; transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════
   2c. STANDARD PANEL HEADER (icon + title + actions)
   ═══════════════════════════════════════════════════════ */
.sidebar-panel.open {
    display: flex;
    flex-direction: column;
}
.tp-panel-drag-handle {
    display: none;       /* shown only on mobile sheet */
}
.tp-panel-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid rgba(0, 62, 84, 0.12);
    flex-shrink: 0;
    /* Light surface (white) as requested in follow-up. Border-bottom
       separates header from the panel body. */
    background: #ffffff;
    color: var(--text);
    position: sticky;
    top: 0;
    z-index: 5;
}
.tp-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: rgba(249, 205, 45, 0.22);
    color: var(--text);
    flex-shrink: 0;
}
.tp-panel-icon svg { width: 20px; height: 20px; stroke: currentColor; }
.tp-panel-title-wrap { flex: 1; min-width: 0; }
.tp-panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-panel-subtitle {
    display: block;
    font-size: 0.8125rem;
    color: var(--muted);
    font-weight: 500;
    margin-top: 0.125rem;
}
.tp-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

/* Both expand + close are square pills inside the white header. */
.tp-panel-header .tp-panel-expand,
.tp-panel-header .tp-panel-close,
.tp-panel-header .panel-close-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 50% !important;
    border: none;
    background: rgba(0, 62, 84, 0.08);
    color: var(--text);
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0;
    transition: background 0.15s ease;
    float: none !important;
    font-size: 0;
}
.tp-panel-header .tp-panel-expand {
    background: var(--accent);
    color: var(--text);
}
.tp-panel-header .tp-panel-expand:hover  { background: #e6b800; }
.tp-panel-header .tp-panel-close:hover,
.tp-panel-header .panel-close-btn:hover  { background: rgba(0, 62, 84, 0.18); }

/* "Aggiorna itinerario" ghost pill — only present in the Vista B top
   bar (revealed by the .tp-center-split rule further below). */
.tp-panel-header .tp-panel-refresh {
    display: none;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 62, 84, 0.18);
    background: var(--white);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tp-panel-header .tp-panel-refresh:hover { background: #fffaf0; border-color: var(--text); }
.tp-panel-header .tp-panel-refresh svg   { display: block; }

/* Panel content fills remaining height inside the flex column;
   override the legacy `height: 100%` which would otherwise overflow
   under the new header. */
.sidebar-panel.open > .panel-content {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    overflow-y: auto;
}

/* Espandi parked on tablet + desktop (rail design, panel already
   has plenty of room). Chat sheet never gets Espandi at any BP. */
@media (min-width: 768px) {
    .tp-panel-expand { display: none !important; }
}
.sidebar-panel[data-section="chat"] .tp-panel-expand {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════
   2d. MOBILE BOTTOM NAV + CHAT FAB + SHEET
   ═══════════════════════════════════════════════════════ */
/* Floating chat button — visible on EVERY screen (chat left the sidebar). */
.tp-chat-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3.5rem; height: 3.5rem;
    border-radius: 50%;
    background: var(--text, #003E54); color: var(--white, #fff);
    border: none;
    box-shadow: 0 10px 26px rgba(0, 62, 84, 0.32);
    cursor: grab;                 /* the FAB is the chat's drag handle */
    touch-action: none;
    z-index: 1455;
    transition: transform 0.15s ease, background 0.2s ease;
}
.tp-chat-fab:hover { background: #00516e; transform: translateY(-2px); }
.tp-chat-fab.is-dragging { cursor: grabbing; transform: none; }
.tp-chat-fab svg { width: 24px; height: 24px; stroke: currentColor; fill: none; }
.tp-chat-fab.is-open { background: var(--accent, #F9CD2D); color: var(--text, #003E54); }
/* Unread dot (yellow) on the button. */
.tp-chat-fab-badge {
    position: absolute; top: 2px; right: 2px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--accent, #F9CD2D);
    box-shadow: 0 0 0 2px var(--text, #003E54);
    padding: 0; min-width: 0;
}
.tp-chat-fab-badge[hidden] { display: none; }

/* Floating chat dock — corner popup, independent of the panel system. */
.tp-chat-dock {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.5rem + 3.5rem + 0.75rem);   /* above the FAB */
    width: min(380px, calc(100vw - 2rem));
    height: min(68vh, 560px);
    background: var(--white, #fff);
    border: 1px solid rgba(0, 62, 84, 0.10);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 62, 84, 0.28);
    display: flex; flex-direction: column;
    overflow: hidden;
    z-index: 1450;
}
.tp-chat-dock[hidden] { display: none; }
.tp-chat-dock-head {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--text, #003E54); color: #fff;
    padding: 0.7rem 1rem; flex-shrink: 0;
    -webkit-user-select: none; user-select: none;
}
.tp-chat-dock-title { font-weight: 700; font-size: 1rem; }
.tp-chat-dock-actions { display: inline-flex; align-items: center; gap: 6px; }
.tp-chat-dock-btn {
    background: rgba(255, 255, 255, 0.14); border: none; color: #fff;
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.tp-chat-dock-btn:hover { background: rgba(255, 255, 255, 0.26); }
.tp-chat-dock-btn svg { width: 15px; height: 15px; }
/* snap-preset icon row + active state */
.tp-chat-dock-snaps { display: inline-flex; align-items: center; gap: 2px; margin-right: 2px; }
.tp-chat-dock-snaps .tp-chat-dock-btn { width: 26px; height: 26px; }
.tp-chat-dock-snaps .tp-chat-dock-btn svg { width: 17px; height: 17px; }
.tp-chat-dock-btn.active { background: var(--accent, #F9CD2D); color: var(--text, #003E54); }
.tp-chat-dock-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Resize grip — top-left corner (the dock is anchored bottom-right, so it grows
   up/left). Sits above the header's left edge. */
.tp-chat-dock-resize {
    position: absolute; top: 0; left: 0;
    width: 18px; height: 18px;
    cursor: nwse-resize; z-index: 2; touch-action: none;
    background:
        linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,0.55) 6px 8px, transparent 8px 10px, rgba(255,255,255,0.55) 10px 12px, transparent 12px);
}
.tp-chat-dock-title { padding-left: 12px; }   /* clear the grip */
/* Snap presets (override the inline float pos/size; restoring to 'float' brings
   back the dragged/resized corner box). */
.tp-chat-dock.snap-right,
.tp-chat-dock.snap-half-left,
.tp-chat-dock.snap-half-right,
.tp-chat-dock.snap-full { border-radius: 0; }

/* ── Chat dock: region modes (desktop ≥1024) — feature/chat-dock-regions ── */
:root { --chat-dock-w: min(440px, 34vw); }
.tp-chat-dock-divider { display: none; }
@media (max-width: 1023px) {
    .tp-chat-dock [data-dock-btn="sidebar"], .tp-chat-dock [data-dock-btn="content"] { display: none; }
}
@media (min-width: 1024px) {
    .tp-chat-dock.dock-sidebar,
    .tp-chat-dock.dock-content { border-radius: 0 !important; z-index: 1040 !important; border: 0 !important; box-shadow: none !important; }
    .tp-chat-dock.dock-sidebar { border-right: 1px solid rgba(0,62,84,0.10) !important; }
    .tp-chat-dock.dock-sidebar {
        top: var(--header-h) !important; left: var(--sidebar-w) !important; bottom: 0 !important; right: auto !important;
        width: var(--chat-dock-w) !important; height: auto !important;
    }
    .tp-chat-dock.dock-content {
        top: var(--header-h) !important; right: 0 !important; bottom: 0 !important;
        left: var(--sidebar-w) !important; width: auto !important; height: auto !important;
    }
    body.chat-dock-sidebar .content-area { margin-left: calc(var(--sidebar-w) + var(--chat-dock-w)) !important; }
    body.chat-dock-content.tp-panel-open .tp-chat-dock.dock-content { left: calc(var(--sidebar-w) + var(--panel-w)) !important; }
    body.chat-dock-content .content-area { overflow: hidden !important; }
    .tp-chat-dock.dock-sidebar .tp-chat-dock-divider {
        display: block; position: absolute; top: 0; bottom: 0; right: -3px; width: 8px;
        cursor: ew-resize; z-index: 4; touch-action: none;
    }
    .tp-chat-dock.dock-sidebar .tp-chat-dock-divider:hover { background: rgba(249,205,45,.55); }
    .tp-chat-dock.dock-sidebar .tp-chat-dock-resize,
    .tp-chat-dock.dock-content .tp-chat-dock-resize { display: none; }
}
.tp-chat-dock.snap-right      { top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(420px, 92vw) !important; height: auto !important; }
.tp-chat-dock.snap-half-right { top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 50vw !important; height: auto !important; }
.tp-chat-dock.snap-half-left  { top: 0 !important; left: 0 !important; bottom: 0 !important; right: auto !important; width: 50vw !important; height: auto !important; }
.tp-chat-dock.snap-full       { inset: 0 !important; width: auto !important; height: auto !important; }
/* When snapped, the corner resize grip is meaningless. */
.tp-chat-dock[data-snap]:not([data-snap="float"]) .tp-chat-dock-resize { display: none; }
/* Mobile: dock becomes a bottom sheet (drag/resize disabled in JS). */
@media (max-width: 600px) {
    .tp-chat-dock {
        right: 0; left: 0; bottom: 0;
        width: 100%; height: 82vh;
        border-radius: 18px 18px 0 0;
    }
    .tp-chat-dock-resize { display: none; }
    .tp-chat-dock-snaps { display: none; }   /* no snap presets on mobile */
    .tp-chat-dock-head { cursor: default; }
}

@media (max-width: 767px) {
    /* The hamburger overlay (#hamOverlay) and its trigger were already
       neutralised in the header redesign. Bottom nav is the only
       persistent on-screen navigation chrome on mobile. */
    .bottom-nav.tp-bottom-nav {
        display: flex !important;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        background: var(--rail-bg);
        z-index: 1051;
        padding: 0.25rem 0.25rem;
        padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
        gap: 0;
        /* Override legacy `.bottom-nav { transform: translateY(100%) }`
           that hid the bar off-screen until the `.open` class was added
           by the now-removed hamburger toggle. Bar is permanent now. */
        transform: none !important;
        transition: none !important;
        flex-wrap: nowrap;
        justify-content: stretch;
        align-items: stretch;
    }
    /* #3: while the on-screen keyboard is open the fixed bottom nav would float up
       above it (it's pinned to the visual viewport) — hide it until the keyboard
       closes. Body class toggled by _tpKeyboardNavGuard (visualViewport). */
    body.tp-keyboard-open .bottom-nav.tp-bottom-nav { display: none !important; }
    /* Bulletproof: while typing IN AN OPEN OVERLAY (sheet / chat dock), the keyboard
       can pull/float the fixed sheet so the daily cards behind it peek out no matter
       how we position the sheet. Hide the background content-area for the duration —
       it's covered by the sheet + scrim anyway, so this is invisible in normal use.
       Gated on `tp-keyboard-cover` (set by _tpKeyboardNavGuard only when an overlay
       is open) — NOT plain `tp-keyboard-open`: inline daily-card inputs live inside
       .content-area, and hiding it while editing a card blurred the field and bounced
       the keyboard open→close (impossible to type on mobile). */
    body.tp-keyboard-cover .content-area { visibility: hidden !important; }
    .tp-bottom-tab {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        padding: 0.3rem 0.25rem;
        min-height: 44px;
        background: transparent;
        border: none;
        color: rgba(254, 250, 238, 0.7);
        cursor: pointer;
        font-family: var(--font);
        font-size: 0.625rem;
        font-weight: 600;
        position: relative;
        transition: color 0.15s ease;
    }
    .tp-bottom-tab.active { color: var(--accent); }
    /* tab condizionali (es. «Da decidere»): [hidden] (0,2,0) vince su .tp-bottom-tab display:flex (0,1,0) */
    .tp-bottom-tab[hidden] { display: none; }
    .tp-bottom-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
    }
    .tp-bottom-icon svg { width: 20px; height: 20px; stroke: currentColor; }
    .tp-bottom-label {
        white-space: nowrap;
        font-size: 0.625rem;
        line-height: 1;
        font-weight: 600;
    }
    .tp-bottom-badge {
        position: absolute;
        top: 0.1875rem;
        left: 50%;
        margin-left: 0.25rem;
        background: var(--accent);
        color: var(--text);
        font-size: 0.5625rem;
        font-weight: 700;
        padding: 0.0625rem 0.3125rem;
        border-radius: 999px;
        min-width: 1.125rem;
        text-align: center;
        line-height: 1.2;
    }

    /* Chat FAB — bottom-right, above the bottom nav. The legacy
       bottom-nav-toggle button was removed from the markup; the FAB
       takes its visual slot. */
    .tp-chat-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 1rem;
        bottom: calc(56px + max(0.75rem, env(safe-area-inset-bottom)));
        width: 3.25rem;
        height: 3.25rem;
        min-width: 44px;
        border-radius: 50%;
        background: var(--text);
        color: var(--white);
        border: none;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
        cursor: pointer;
        z-index: 1052;
    }
    .tp-chat-fab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
    .tp-chat-fab-badge {
        position: absolute;
        top: -0.25rem;
        right: -0.25rem;
        background: var(--accent);
        color: var(--text);
        font-size: 0.6875rem;
        font-weight: 700;
        padding: 0.125rem 0.4375rem;
        border-radius: 999px;
        min-width: 1.25rem;
        text-align: center;
        line-height: 1.2;
        border: 2px solid var(--rail-bg);
    }

    /* Mobile bottom-sheet panel. Inherits position/transform from
       the existing .sidebar-panel mobile block; we add the drag-
       handle visibility and the fullscreen variant on top. */
    .tp-panel-drag-handle {
        display: block;
        width: 2.5rem;
        height: 0.25rem;
        background: rgba(0, 62, 84, 0.18);
        border-radius: 999px;
        margin: 0.5rem auto 0;
        flex-shrink: 0;
    }
    .sidebar-panel.tp-fullscreen {
        height: 100vh !important;
        border-radius: 0 !important;
    }
    /* Content-area gets a bottom safe space so the daily card last
       item isn't covered by the bottom nav. */
    .content-area {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
    /* #7: the panel bottom-sheet scrolls under the fixed bottom-nav — pad the
       bottom so the last item can scroll clear of it and stays tappable. */
    .sidebar-panel.open > .panel-content {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
    /* #6: content sits right under the sticky header (Bagagli/Checklist/
       Documenti) — kill the top gap on the panel body's first child. */
    .sidebar-panel.open > .panel-content > :first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    /* On mobile the rail label "Strumenti viaggio" never shows
       because the sidebar is hidden — but the heading element still
       exists in the markup; CSS hide is enough. */
}

/* Backdrop — only visible on mobile */
.panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.2);
    z-index: 1049;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    display: none;
}

/* Panel */
.sidebar-panel {
    position: fixed;
    left: var(--sidebar-w);
    top: var(--header-h);
    bottom: 0;
    width: var(--panel-w);
    min-width: var(--panel-min, 280px);
    background: var(--white);
    z-index: 1050;
    box-shadow: 4px 0 20px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    overflow: hidden;
}
.sidebar-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* Resize handle */
.sidebar-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 0.3125rem;
    cursor: col-resize;
    background: transparent;
    z-index: 1060;
    transition: background 0.15s;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
    background: var(--accent);
}

/* Content area: shifts when panel is open (desktop only) */

/* Panel content */
.panel-content {
    padding: var(--space-sm);
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    height: 100%;
    position: relative;
}
.panel-content * {
    box-sizing: border-box;
}

/* Close button */
.panel-close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: none;
    background: rgba(0,62,84,0.1);
    color: var(--text);
    font-size: var(--text-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.15s;
}
.panel-close-btn:hover {
    background: var(--accent);
    color: var(--text);
}

/* Panel interactive elements: hover yellow */
.panel-content button:hover,
.panel-content a:hover {
    color: var(--text);
}

/* ═══════════════════════════════════════════════════════
   4. MAIN LAYOUT
   ═══════════════════════════════════════════════════════ */
.main-container {
    display: flex;
    margin-top: var(--header-h);
    min-height: calc(100vh - var(--header-h));
}

/* Content area */
.content-area {
    background-color: var(--bg);
    flex: 1;
    margin-left: 0; /* mobile default */
    padding: var(--space-xs) var(--space-md);
    overflow-y: auto;
    transition: margin-left 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    container-type: inline-size;
}

/* ── Container queries: day cards adapt to available space ── */
@container (max-width: 750px) {
    #daysContainer .day-card { padding: 0.4rem; }
    #daysContainer .day-title { font-size: var(--text-xs); }
    #daysContainer .day-date { font-size: var(--text-xs, 0.625rem); }
    .new-section-header { font-size: 0.625rem; padding: 0.15em 0.5em; }
    .new-section { padding: 0.5rem 0.4rem 0.2rem 0.4rem; margin-top: 0.3rem; }
    .new-form-label { font-size: 0.6875rem; }
    .new-form-input, .new-form-select { font-size: 0.6875rem; padding: 0.25rem 0.4rem; height: 1.7rem; }
    .new-form-row { gap: 0.4rem; }
    .group-time { flex: 0 0 100px; min-width: 90px; }
    .group-activity-type { flex: 0 0 140px; min-width: 120px; }
    .group-transport { flex: 0 1 240px; max-width: 300px; }
    .group-cost { flex: 0 1 8rem; min-width: 7rem; }
}

/* When the cards' available width is tight (e.g. desktop with a wide side
   panel open), use the compact date so it never spills out of the card. */
@container (max-width: 620px) {
    .ddate-full { display: none; }
    .ddate-compact { display: inline; }
}

@container (max-width: 550px) {
    #daysContainer .day-card { padding: 0.3rem; }
    #daysContainer .day-title { font-size: 0.75rem; }
    .new-form-label { font-size: 0.625rem; }
    .new-form-input, .new-form-select { font-size: 0.625rem; padding: 0.2rem 0.3rem; height: 1.5rem; }
    .new-form-row { gap: 0.3rem; flex-direction: column; }
    .group-time, .group-activity-type, .group-transport, .group-cost { flex: 1 1 auto; min-width: 0; }
}

/* Section divider — the "Pianificatore giornaliero" heading sits in
   a centred flex row alongside the two collapse-/expand-all SVG
   toggles. Layout flips from the legacy text-align center to a
   real flex layout so the buttons sit cleanly to the right of the
   h2 without inheriting its block-line metrics. */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin: 0;
    padding: 1rem 1.1rem 0.15rem;
    background: transparent;
    position: relative;
}
/* corpo su cui poggiano le card: butter yellow chiaro (manopola qui) */
.content-area { background: #FBF4DB; }
.section-divider h2 {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--teal);
    background: var(--bg);
    padding: 0 var(--space-sm);
    margin: 0;
    position: relative;
    z-index: 2;
}
.section-divider::before { content: none; }

.tp-planner-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #243B5E;
    margin: 0 0.55rem;
    white-space: nowrap;
}
.tp-day-toggle-all-group {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    padding: 0;
    position: relative;
    z-index: 2;
}
.tp-day-toggle-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #243B5E;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
}
.tp-day-toggle-all:hover {
    background: rgba(239, 208, 106, 0.2);
}
/* label hover: laterale, esce verso destra dal tasto, due righe, non grassetto
   (width max-content: il containing block è il tasto da 30px — senza, ogni
   parola andava a capo da sola) */
.tp-day-toggle-all::after {
    content: attr(data-lbl);
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    transform: translateY(-50%);
    width: max-content;
    white-space: pre-line;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.3;
    color: #243B5E;
    background: #fff;
    border: 1px solid rgba(36, 59, 94, 0.15);
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    box-shadow: 0 6px 18px rgba(36, 59, 94, 0.10);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 6;
}
.tp-day-toggle-all:hover::after { opacity: 1; }
/* Su touch l'hover non esiste e la label (absolute, width:max-content) sfora
   il viewport gonfiando lo scrollWidth di .content-area → era la causa del
   pan orizzontale residuo su mobile (scanner 1 ago: +83px). */
@media (max-width: 767px) {
    .tp-day-toggle-all::after { display: none; }
}
.tp-day-toggle-all:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.tp-day-toggle-all svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Progress section — poca aria verso le card (richiamo Matteo 29 lug) */
.progress-section {
    margin: 0 0 0.35rem;
    padding: 0.9rem 0 0.35rem;
    background: transparent;
}
.daily-planner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.daily-planner-container::-webkit-scrollbar { display: none; }

.control-group {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    flex-shrink: 0;
}

/* Day nav buttons */
.day-nav-btn {
    width: 1.7rem;
    height: 1.7rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.day-nav-btn > * { pointer-events: none; }
.day-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.day-nav-btn.add { color: #243B5E; }
.day-nav-btn.add:hover:not(:disabled) { background: rgba(239, 208, 106, 0.25); }
.day-nav-btn.remove { color: #5E1737; }
.day-nav-btn.remove:hover:not(:disabled) { background: rgba(94, 23, 55, 0.08); }

/* Progress bar — day squares */
.progress-bar {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    /* max 3 settimane visibili: oltre, scroll laterale */
    max-width: calc(21 * 2.05rem + 20 * var(--space-xs));
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.progress-bar::-webkit-scrollbar { display: none; }

.progress-square {
    width: 2.05rem;
    height: 2.05rem;
    background: #fff;
    border: 1px solid rgba(36, 59, 94, 0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: rgba(36, 59, 94, 0.6);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-size: 0.78rem;
    flex-shrink: 0;
}
/* completed = notte coperta → navy pieno (palette) */
.progress-square.completed {
    background: #243B5E;
    color: #fff;
    border-color: #243B5E;
}
/* active = giorno corrente → gold (come il tile numero della card) */
.progress-square.active {
    background: #EFD06A;
    color: #243B5E;
    border-color: #EFD06A;
}
.progress-square:hover { border-color: rgba(36, 59, 94, 0.45); }

/* ─── DAY CARD ───────────────────────────────────────── */
#daysContainer .day-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 2px solid var(--teal);
    padding: 0.6rem;
    margin-bottom: 0.6rem;
    box-shadow: 0.25rem 0.25rem 0 rgba(0,62,84,0.15);
    transition: background 0.5s ease, border-color 0.5s ease, padding 0.4s ease, box-shadow 0.4s ease, transform 0.2s ease;
    max-width: var(--max-w);
    margin-left: auto;
    margin-right: auto;
}
.content-area.shifted #daysContainer .day-card {
    padding: var(--space-sm) var(--space-xs);
}
#daysContainer .day-card:hover {
    transform: translate(-1px, -1px);
    box-shadow: 0.35rem 0.35rem 0 rgba(0,62,84,0.18);
}

/* Day header */
#daysContainer .day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
}
#daysContainer .day-num {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--teal);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-md);
    flex-shrink: 0;
}
#daysContainer .day-title {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text);
}
/* "Day X" label in yellow */
#daysContainer .day-title > span {
    display: inline;
    color: var(--accent);
    font-weight: 700;
    transition: color 0.5s ease;
}
/* Day number circle: yellow filled with blue border */
#daysContainer .day-number-circle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--teal);
    color: var(--text);
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
}
/* ── Day card collapse/expand ── */
#daysContainer .day-header {
    cursor: pointer;
    user-select: none;
    transition: background 0.5s ease, color 0.5s ease, border-radius 0.3s ease, padding 0.4s ease;
}
#daysContainer .day-collapse-summary {
    display: none;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--white);
}
#daysContainer .day-collapse-summary svg {
    flex-shrink: 0;
    opacity: 0.85;
}
#daysContainer .day-collapse-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease, color 0.5s ease;
    color: var(--muted);
}
#daysContainer .day-card .day-content {
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 1;
}
#daysContainer .day-card.collapsed {
    padding: 0;
    box-shadow: none;
    border-color: var(--teal);
    background: var(--teal);
    overflow: hidden;
}
#daysContainer .day-card.collapsed .day-header {
    background: var(--teal);
    color: var(--white);
    border-radius: 0;
    padding: var(--space-xs) var(--space-sm);
    margin: 0;
}
#daysContainer .day-card.collapsed .day-number-circle {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text);
}
#daysContainer .day-card.collapsed .day-title > span {
    color: var(--white);
}
#daysContainer .day-card.collapsed .day-date {
    color: rgba(255,255,255,0.7);
}
#daysContainer .day-card.collapsed .day-content {
    max-height: 0 !important;
    opacity: 0;
    padding: 0;
    margin: 0;
}
#daysContainer .day-card.collapsed .day-collapse-summary {
    display: flex;
}
#daysContainer .day-card.collapsed .day-collapse-arrow {
    transform: rotate(-90deg);
    color: var(--white);
}
#daysContainer .day-card.collapsed:hover {
    transform: none;
    box-shadow: none;
}

/* Day buttons (hidden by default) */
#daysContainer .day-buttons {
    display: none;
}
/* Date right-aligned */
#daysContainer .day-date {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
    margin-left: auto;
    transition: color 0.5s ease;
}
/* Compact date ("8 ago '26") shows on mobile; the full weekday date shows
   otherwise. (We intentionally do NOT swap on body.tp-panel-open: toggling
   the date across every card the instant a side panel opens forced a global
   reflow during the panel slide → janky open/close + resize on desktop.) */
.ddate-compact { display: none; }
@media (max-width: 767px) {
    .ddate-full { display: none; }
    .ddate-compact { display: inline; }
}
#daysContainer .day-info {
    font-size: var(--text-xs);
    color: var(--muted);
    margin-left: auto;
}

/* Travelling/arrival indicators */
.travelling-indicator,
.arrival-indicator,
.timezone-indicator {
    background: rgba(0,62,84,0.06);
    color: var(--teal);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-style: italic;
    margin-bottom: var(--space-xs);
    font-size: var(--text-xs);
}

/* ─── FORM INPUTS INSIDE DAY CARDS ────────────────────── */
.new-section {
    position: relative;
    border: 1.5px solid rgba(0,62,84,0.12);
    border-radius: 0.6rem;
    margin-top: 0.4rem;
    padding: 0.7rem 0.5rem 0.3rem 0.5rem;
    background: rgba(0,62,84,0.02);
}
.new-section-header {
    position: absolute;
    top: -0.6rem;
    left: 0.75rem;
    background: var(--teal);
    color: var(--bg);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.2em 0.6em;
    border-radius: 0.5rem;
    z-index: 1;
}
.new-form-row {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: 0.2rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.new-form-group { flex: 1 1 0; min-width: 0; }
.new-form-group.group-small { flex: 0 1 70px; min-width: 30px; }
.new-form-group.group-medium { flex: 0 1 140px; min-width: 60px; }
.new-form-group.group-cost { flex: 0 1 90px; min-width: 40px; }
.new-form-label {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.2em;
    font-size: var(--text-xs);
}
.new-form-input,
.new-form-select {
    width: 100%;
    padding: var(--space-xs);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-family: var(--font);
    background: var(--white);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}
.new-form-input:focus,
.new-form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249,205,45,0.35);
}

/* Compact inputs */
.compact-row {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    flex-wrap: wrap;
}
.compact-input {
    padding: var(--space-xs);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}
.compact-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249,205,45,0.35);
}

/* Overview textarea */
/* Day overview / Good Morning - inline label */
#daysContainer .day-overview-inline {
    position: relative;
    margin-top: 0.6rem;
}
#daysContainer .day-overview-label {
    position: absolute;
    top: -0.6rem;
    left: 0.75rem;
    background: var(--text);
    color: var(--bg);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.2em 0.6em;
    border-radius: 0.5rem;
    z-index: 1;
}
.overview-textarea {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid rgba(0,62,84,0.12);
    border-radius: 0.6rem;
    font-size: var(--text-xs);
    font-family: var(--font);
    background: var(--white);
    color: #1a1a1a;
    resize: vertical;
    min-height: 2.4em;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.overview-textarea:hover { border-color: var(--text); }
.overview-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(249,205,45,0.35); }
.morning-inline {
    position: relative;
    margin-top: 0.6rem;
    padding: 1.2rem 0.6rem 0.6rem 0.6rem;
    border: 1.5px solid rgba(0,62,84,0.12);
    border-radius: 0.6rem;
    background: var(--white);
    font-size: var(--text-sm);
    color: var(--muted);
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
}
.overview-textarea:focus { border-color: var(--accent); }

/* Attachment buttons & docs */
.attachment-btn {
    padding: var(--space-xs) var(--space-sm);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: var(--radius);
    background: rgba(0,62,84,0.06);
    font-size: var(--text-xs);
    font-family: var(--font);
    cursor: pointer;
    color: var(--text);
    transition: border-color 0.2s;
}
.attachment-btn:hover { border-color: var(--teal); }

.add-btn-container {
    display: flex;
    gap: var(--space-xs);
    margin: var(--space-sm) 0;
    justify-content: center;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════
   DESIGN COHERENCE — remap old colors/fonts/sizes
   to match index2.html design system
   ═══════════════════════════════════════════════════════ */

/* Global font override for all panel content */
.panel-content,
.panel-content *,
#daysContainer .day-card,
#daysContainer .day-card * {
    font-family: var(--font);
}

/* ── Color remapping ── */
/* Old teal #5a9a9c, #408f8e, #3c8b89, #4a7c7a → var(--text) #003E54 */
/* Old cream #fefaee, #faf7f0 → var(--bg) #FDF3D7 */
/* Old light green #e4f1e8, #e8f0ef, #e0efec → rgba(0,62,84,0.06) */

/* ── BUDGET PANEL — complete (structure + design system) ── */
.budget-container-wrapper {
    position: relative;
    margin-top: var(--space-md);
    font-family: var(--font);
}
.budget-container-shadow { display: none; }
.budget-container {
    position: relative;
    z-index: 1;
    padding: var(--space-xs) var(--space-md);
    color: var(--text);
    font-family: var(--font);
}
.budget-title {
    font-size: var(--text-lg);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--space-sm);
    color: var(--text);
    font-family: var(--font);
}
.budget-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    position: relative;
}
.budget-info-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}
.budget-info-label {
    font-size: var(--text-xs);
    color: var(--text);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.3;
    text-align: center;
    font-family: var(--font);
}
.budget-info-value {
    background: rgba(0,62,84,0.08);
    border-radius: var(--radius);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
    border: 1px solid rgba(0,62,84,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: var(--font);
}
.budget-info-value:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 rgba(0,62,84,0.1);
}
.budget-calc-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}
.budget-calc-box {
    background: var(--text);
    border-radius: var(--radius);
    padding: var(--space-sm);
    color: var(--bg);
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(0,62,84,0.12);
    box-shadow: 3px 3px 0 rgba(0,62,84,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font);
}
.budget-calc-box:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0,62,84,0.15);
}
.budget-calc-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    width: 100%;
    margin-bottom: var(--space-sm);
}
.budget-calc-icon {
    width: 2.8125rem;
    height: 2.8125rem;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.budget-calc-icon.total { background-image: url('../images/box1.png'); }
.budget-calc-icon.perday { background-image: url('../images/box2.png'); }
.budget-calc-icon.perperson { background-image: url('../images/box3.png'); }
.budget-calc-label {
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    flex: 1;
    font-family: var(--font);
}
.budget-calc-value {
    font-size: var(--text-md);
    font-weight: 700;
    text-align: center;
    width: 100%;
    font-family: var(--font);
}
.cost-category-box {
    background: var(--text);
    border-radius: var(--radius);
    padding: var(--space-sm);
    color: var(--bg);
    margin-bottom: var(--space-sm);
    border: 2px solid rgba(0,62,84,0.12);
    box-shadow: 3px 3px 0 rgba(0,62,84,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: var(--font);
}
.cost-category-box:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0,62,84,0.15);
}
.cost-category-title {
    font-size: var(--text-md);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--space-sm);
    color: var(--bg);
    font-family: var(--font);
}
.cost-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    font-family: var(--font);
}
.cost-category-label {
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: var(--font);
}
.cost-category-value {
    font-size: var(--text-md);
    font-weight: 700;
    font-family: var(--font);
}
.money-exchange-wrapper { margin-top: var(--space-sm); }
.money-exchange {
    background: var(--text);
    border-radius: var(--radius);
    padding: var(--space-xs) var(--space-sm);
    text-align: center;
    color: var(--bg);
    border: 2px solid rgba(0,62,84,0.12);
    box-shadow: 3px 3px 0 rgba(0,62,84,0.12);
    font-family: var(--font);
}
.money-exchange-title {
    font-size: var(--text-xs);
    font-weight: 600;
    margin-bottom: var(--space-xs);
    font-family: var(--font);
}
.exchange-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}
.money-exchange .exchange-group {
    display: flex;
    align-items: center;
    gap: 3px;
}
.exchange-input {
    background: var(--white);
    border-radius: 0.375rem;
    padding: 0.1875rem 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.125rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text);
    border: 1px solid rgba(0,62,84,0.12);
    font-family: var(--font);
}
.exchange-input input {
    border: none;
    font-size: var(--text-xs);
    font-weight: 700;
    width: 2.25rem;
    text-align: center;
    color: var(--text);
    background: transparent;
    font-family: var(--font);
    outline: none;
}
.exchange-result {
    font-size: var(--text-lg);
    font-weight: 700;
}
.people-counter { display: inline-block; }
.people-btn { display: none; }
#numPeople {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
    font-family: var(--font);
}
#toAmount { width: 96px; }
#exchangeAmount { width: 70px; }
.budget-input {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: var(--text-sm);
    width: 56px;
    text-align: center;
    font-weight: 700;
    font-family: var(--font);
}
.budget-select {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 700;
    font-family: var(--font);
    padding: 0;
    text-align: center;
}
.budget-select:focus,
.budget-input:focus {
    outline: none;
}

/* ── CHECKLIST PANEL — complete (structure + design system) ── */

/* cl-* shorthand classes (used in checklist compact view) */
.cl-wrapper { color: var(--text); font-family: var(--font); }
.cl-title { color: var(--text); font-family: var(--font); font-size: var(--text-lg); font-weight: 800; text-align: center; margin: 0 0 var(--space-md); }
.cl-section { border-radius: var(--radius); overflow: hidden; margin: var(--space-sm) 0 var(--space-md); }
.cl-section-head { background: var(--text); color: var(--bg); font-weight: 700; padding: var(--space-sm); display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); font-family: var(--font); }
.cl-section-body { background: var(--bg); }
.cl-row { display: grid; grid-template-columns: 72px 1fr 44px; align-items: stretch; border-bottom: 1px solid rgba(0,62,84,0.1); }
.cl-day { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,62,84,0.08); color: var(--text); font-weight: 700; }
.cl-day .d { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--text-xs); }
.cl-day .dt { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--text-xs); opacity: 0.8; }
.cl-text { padding: var(--space-sm); font-size: var(--text-xs); font-weight: 700; color: var(--text); display: flex; align-items: center; font-family: var(--font); }
.cl-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); }
.cl-icon { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--text-xs); }
.cl-icon.delete { border-color: #c46b6b; color: #c46b6b; }
.cl-row.done { opacity: 0.5; filter: saturate(0.6); }
.cl-add { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); color: var(--text); font-weight: 700; cursor: pointer; font-family: var(--font); }
.cl-editable { outline: none; }
.cl-transport-card { width: 100%; max-width: 100%; background: var(--bg); border-radius: var(--radius-lg); overflow: hidden; border: 3px solid var(--text); box-shadow: 6px 6px 0 rgba(0,62,84,0.15); font-family: var(--font); }
.cl-transport-head { display: grid; grid-template-columns: 120px 1fr 60px; background: var(--text); color: var(--bg); }
.cl-transport-title { grid-column: 1 / span 2; padding: var(--space-sm); font-weight: 700; font-size: var(--text-sm); }
.cl-transport-body { background: var(--bg); }
.cl-transport-body .cl-row { grid-template-columns: 120px 1fr 60px; }
.cl-transport-body .cl-text { font-size: var(--text-sm); padding: var(--space-sm); }

/* checklist-* classes (main checklist panel) */
.checklist-container {
    padding: var(--space-xs) var(--space-md) var(--space-md);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    font-family: var(--font);
    box-sizing: border-box;
}
.checklist-container .checklist-title {
    font-size: var(--text-md);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--space-sm);
    color: var(--text);
    font-family: var(--font);
}
.checklist-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.checklist-section {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.checklist-header {
    background: var(--text);
    color: var(--bg);
    padding: var(--space-sm) var(--space-md);
    font-weight: 500;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s ease;
    font-family: var(--font);
    border-radius: var(--radius) var(--radius) 0 0;
}
.checklist-header:hover { background: #00516e; }
.collapse-arrow {
    font-size: var(--text-xs);
    transition: transform 0.2s ease;
    color: var(--bg);
}
.checklist-section.collapsed .collapse-arrow { transform: rotate(-90deg); }
.checklist-section.collapsed .checklist-items,
.checklist-section.collapsed .add-item-control { display: none; }
.checklist-items.collapsed { display: none; }
.add-item-control.collapsed { display: none; }
.checklist-items { padding: 0; }
/* voce seminata dalla lettura documenti (import): pallino giallo piccolo */
.cl-imp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #F2C230; margin-right: 6px; vertical-align: 1px; flex: 0 0 auto; }
.checklist-item {
    display: flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid rgba(0,62,84,0.06);
    transition: all 0.2s ease;
    gap: var(--space-xs);
    font-family: var(--font);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item.completed { opacity: 0.6; background: rgba(0,62,84,0.03); }
.item-day-info {
    width: 80px;
    margin-right: var(--space-sm);
    text-align: left;
}
.day-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.checklist-item .day-date { font-size: var(--text-xs); color: var(--muted); }
.item-content {
    flex: 1;
    padding: 0 var(--space-sm);
    min-width: 0;
    overflow: hidden;
}
.checklist-item .item-content { padding-left: 0; }
.checklist-section:last-child .checklist-item .item-content { padding-left: 0; }
.checklist-section:last-child .checklist-item .item-day-info { display: none; }
.item-label {
    font-size: var(--text-sm);
    color: var(--text);
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    font-family: var(--font);
}
.item-label[contenteditable="true"]:focus {
    outline: none;
    background: rgba(0,62,84,0.04);
    padding: 2px 4px;
    border-radius: 4px;
}
.item-label.placeholder { font-style: italic; color: var(--muted); }
.item-actions {
    min-width: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}
.remove-icon {
    color: #e74c3c;
    cursor: pointer;
    font-size: var(--text-md);
    font-weight: 700;
    margin-right: var(--space-xs);
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0 var(--space-xs);
    display: inline-block;
    line-height: 1;
    opacity: 0.8;
}
.remove-icon:hover { transform: scale(1.2); color: #c0392b; opacity: 1; }
.remove-icon-placeholder {
    width: 20px; height: 20px;
    margin-right: var(--space-xs);
    flex-shrink: 0;
    padding: 0 var(--space-xs);
    display: inline-block;
}
.completion-tick {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid rgba(36,59,94,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: bold;
    color: var(--white);
    transition: all 0.2s ease;
    background: var(--white);
}
.completion-tick.completed {
    background: #243B5E;
    border-color: #243B5E;
    color: #fff;
}
.completion-tick.disabled { cursor: not-allowed !important; opacity: 0.5 !important; }
.completion-tick:hover { border-color: var(--text); transform: scale(1.1); }
.add-item-control {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: rgba(0,62,84,0.03);
    border-top: 1px solid rgba(0,62,84,0.08);
    cursor: pointer;
    transition: background 0.2s ease;
    font-family: var(--font);
}
.add-item-control:hover { background: rgba(0,62,84,0.06); }
.add-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-sm);
    font-size: var(--text-xs);
    font-weight: bold;
    transition: all 0.2s ease;
}
.add-item-control:hover .add-icon { background: #00516e; transform: scale(1.1); }
.add-item-control span { font-size: var(--text-sm); color: var(--muted); }
.checklist-message {
    padding: var(--space-md);
    text-align: center;
    color: var(--muted);
    font-style: italic;
    background: rgba(0,62,84,0.03);
    font-family: var(--font);
}
.checklist-add-button {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    color: var(--text);
    font-weight: 500;
    cursor: pointer;
    font-size: var(--text-sm);
    margin-top: var(--space-sm);
    border: 1px solid var(--text);
    border-radius: var(--radius);
    transition: all 0.2s;
    font-family: var(--font);
}
.checklist-add-button:hover { background: var(--text); color: var(--bg); }
.checklist-add-icon { font-size: var(--text-sm); }

/* ══ Checklist — Itinerario timeline redesign ══════════════════════ */
.checklist-container { --cl-accent: var(--text); background: var(--bg); }
/* checklist panel: cream fills the whole content area, no white gutters; sticky strip flush to header */
.sidebar-panel[data-section="checklist"] > .panel-content,
.sidebar-panel[data-section="pack"] > .panel-content { background: var(--bg); padding: 0; }
/* «Da decidere»: body cream come i fratelli così le card bianche .imp-item risaltano */
.sidebar-panel[data-section="importpoints"] > .panel-content { background: var(--bg); }
/* global progress strip */
.cl-progress { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-sm); margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-md)) var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--white); border-bottom: 1px solid rgba(0,62,84,0.10); }
.cl-progress-txt { font-size: var(--text-xs); font-weight: 600; color: var(--text); white-space: nowrap; }
.cl-progress-txt b { font-weight: 800; }
.cl-progress-bar { flex: 1 1 auto; height: 7px; border-radius: 999px; background: rgba(0,62,84,0.1); overflow: hidden; }
.cl-progress-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--text); width: 0; transition: width 0.3s ease; }
.cl-progress-pct { font-size: var(--text-xs); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
/* Bagagli + Checklist % display: full "X di Y …" strip on desktop; on mobile the
   strip is dropped and just the % rides in the panel-header subtitle (set by
   pack-panel.js / checklist-panel.js). Removes the sub-header row on phones — and
   the header/strip gap with it. */
@media (min-width: 768px) {
    /* desktop keeps the full bar → the header % badge would be redundant */
    .sidebar-panel[data-section="pack"] .tp-panel-subtitle,
    .sidebar-panel[data-section="checklist"] .tp-panel-subtitle { display: none; }
}
@media (max-width: 767px) {
    .sidebar-panel[data-section="pack"] .cl-progress,
    .sidebar-panel[data-section="checklist"] .cl-progress { display: none; }
    .sidebar-panel[data-section="pack"] .tp-panel-subtitle,
    .sidebar-panel[data-section="checklist"] .tp-panel-subtitle {
        display: inline-block; margin-top: 3px;
        padding: 1px 9px; border-radius: 999px;
        background: rgba(0, 62, 84, 0.08);
        color: var(--text); font-weight: 800; font-size: 0.78rem;
        font-variant-numeric: tabular-nums;
    }
}
/* "Added by" avatar on shared custom checklist rows */
.cl-author { display: inline-flex; align-items: center; margin-right: 2px; }
.cl-author .menevo-collab-avatar { width: 20px; height: 20px; font-size: 9px; border-width: 1.5px; }
/* Briefly highlight a just-added / just-moved checklist row */
.checklist-item.cl-justadded { background: rgba(249, 205, 45, 0.18); border-radius: 8px; transition: background 0.5s ease; }
/* "Added by" avatar in the documents rows */
.doc-by { display: inline-flex; align-items: center; }
.doc-by .menevo-collab-avatar { width: 18px; height: 18px; font-size: 8px; border-width: 1.5px; }
/* "Only you can see this" tag on private (non-shared) documents */
.doc-private { font-size: var(--text-xs); font-weight: 600; color: var(--muted); background: rgba(0,62,84,0.05); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
/* "Shared by you / Shared by …" tag on shared documents */
.doc-shared { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; color: rgba(36,59,94,0.65); background: transparent; border-radius: 0; padding: 0; white-space: nowrap; }
.doc-share-ic { flex: 0 0 auto; }

/* section card: airy white, hairline, left accent border per category */
.checklist-section { background: var(--white); border: 1px solid rgba(36,59,94,0.14); border-radius: 12px; box-shadow: none; overflow: hidden; }
.checklist-section[data-section-id="transport"]      { --cl-accent: #243B5E; }
.checklist-section[data-section-id="accommodations"] { --cl-accent: #243B5E; }
.checklist-section[data-section-id="activities"]     { --cl-accent: #243B5E; }
.checklist-section[data-section-id="documents"]      { --cl-accent: #243B5E; }

/* header: light, accent icon, count badge */
.checklist-section .checklist-header { background: var(--white); color: var(--text); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid color-mix(in srgb, var(--cl-accent) 55%, transparent); }
.checklist-section .checklist-header:hover { background: rgba(0,62,84,0.03); }
.checklist-section.collapsed .checklist-header { border-bottom-color: transparent; }
.checklist-section .header-content > span { font-weight: 700; font-size: var(--text-sm); color: var(--text); }
.checklist-section .header-content svg { color: var(--cl-accent); }
.cl-sec-count { margin-left: auto; margin-right: var(--space-xs); font-size: var(--text-xs); font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.checklist-section .collapse-arrow { color: var(--muted); }

/* timeline: vertical thread + node ticks pulled to the left */
.checklist-items { position: relative; }
/* timeline thread drawn as SEGMENTS between circles (never behind them):
   each item paints a stub above and below its node, with a gap around the
   node so the line can't show through/under the circle (filled or empty). */
.checklist-item::before, .checklist-item::after { content: ''; position: absolute; left: 26px; width: 2px; background: color-mix(in srgb, var(--cl-accent) 45%, transparent); z-index: 0; }
.checklist-item::before { top: 0; height: calc(50% - 14px); }
.checklist-item::after { top: calc(50% + 14px); bottom: 0; }
.checklist-item:first-of-type::before { content: none; }
.checklist-item:last-of-type::after { content: none; }
.checklist-item { position: relative; z-index: 1; padding: 8px var(--space-sm) 8px 44px; border-bottom: 1px dashed rgba(0,62,84,0.08); }
.checklist-item .completion-tick { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); margin: 0; background: var(--white); border-color: rgba(36,59,94,0.4); z-index: 2; }
.checklist-item .completion-tick.completed { background: var(--cl-accent); border-color: var(--cl-accent); color: #fff; }
.checklist-item.completed { opacity: 0.6; background: transparent; border-bottom-color: transparent; }
.checklist-item.completed .item-label { text-decoration: line-through; text-decoration-thickness: 1px; }
/* compact date (hide "Day N", keep the date bold) */
.checklist-item .item-day-info { width: auto; min-width: 3.2rem; margin-right: var(--space-xs); }
.checklist-item .day-label { display: none; }
.checklist-item .day-date { font-weight: 800; color: var(--text); }
/* remove: hover-reveal on desktop */
.checklist-item .item-actions { min-width: 0; }
.checklist-item .remove-icon { opacity: 0; transition: opacity 0.12s; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); padding: 0 var(--space-xs); }
.checklist-item .remove-icon:hover { color: #c0392b; transform: none; }
.checklist-item:hover .remove-icon { opacity: 0.7; }

/* "+ Aggiungi" as a dashed node on the thread */
.add-item-control { background: transparent; border-top: none; position: relative; z-index: 1; padding: var(--space-sm) var(--space-md) var(--space-sm) 44px; }
.add-item-control .add-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); margin: 0; width: 22px; height: 22px; background: transparent; border: none; color: var(--cl-accent); font-size: 1.4rem; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; }
.add-item-control:hover .add-icon { background: transparent; transform: translateY(-50%) scale(1.15); }
.add-item-control span { color: var(--cl-accent); font-weight: 700; }

/* Documents — optional price chip per item + header total → Budget */
.cl-price { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; cursor: pointer; padding: 2px 8px; border-radius: 999px; background: rgba(0,62,84,0.06); white-space: nowrap; }
.cl-price:hover { background: rgba(0,62,84,0.1); }
.cl-price--empty { color: var(--muted); background: none; border: 1px dashed rgba(0,62,84,0.3); font-weight: 700; }
.cl-price-input { width: 4.5rem; border: 1px solid var(--text); border-radius: 8px; padding: 2px 6px; font-family: var(--font); font-size: var(--text-xs); font-weight: 700; color: var(--text); outline: none; }
.cl-doc-total { margin-left: auto; font-size: var(--text-xs); font-weight: 800; color: #408F8E; font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 4px; }
.cl-doc-total:empty { display: none; }
.cl-doc-budget { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.62rem; }
.checklist-section[data-section-id="documents"] .cl-sec-count { margin-left: var(--space-xs); }

/* Mobile: trash always visible (dimmed); slightly denser rows. */
@media (max-width: 767px) {
    .checklist-item .remove-icon { opacity: 0.5; }
    .checklist-item:hover .remove-icon { opacity: 0.9; }
    .checklist-item { padding-top: 6px; padding-bottom: 6px; }
}
.checklist-status.pending { background: rgba(0,62,84,0.06); color: var(--muted); }
.transport-reminder-control {
    margin-top: var(--space-sm);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.transport-reminder-control:hover { opacity: 1; }
.transport-reminder-control span { font-size: var(--text-xs) !important; color: var(--text); margin-right: var(--space-xs) !important; }
.transport-reminder-control button { background: rgba(0,62,84,0.3) !important; }
.transport-reminder-control button:hover { background: var(--text) !important; }

/* Other Todos section */
.other-todos-section {
    background: var(--bg);
    border-radius: var(--radius);
    border: 2px solid var(--text);
    overflow: hidden;
    margin-top: var(--space-lg);
    width: 100%;
    font-family: var(--font);
}
.other-todos-header {
    background: var(--text);
    color: var(--bg);
    padding: var(--space-sm) var(--space-md);
    font-weight: 600;
    font-size: var(--text-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s ease;
    font-family: var(--font);
}
.other-todos-header:hover { background: #00516e; }
.other-todos-body { padding: var(--space-sm); }
.todo-item {
    display: grid;
    grid-template-columns: 1fr 60px;
    align-items: center;
    padding: var(--space-sm);
    background: var(--bg);
    border-bottom: 1px solid rgba(0,62,84,0.08);
    transition: background 0.2s ease;
    font-family: var(--font);
}
.todo-item:hover { background: rgba(0,62,84,0.03); }
.todo-item:last-child { border-bottom: none; }
.todo-item-content { display: flex; align-items: center; gap: var(--space-sm); flex: 1; }
.todo-text {
    font-size: var(--text-sm);
    color: var(--text);
    font-weight: 400;
    transition: all 0.2s ease;
    font-family: var(--font);
}
.todo-text.completed { text-decoration: line-through; color: var(--muted); }
.todo-actions { display: flex; align-items: center; gap: var(--space-sm); }
.todo-checkbox {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(0,62,84,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--text-sm);
    color: var(--text);
    background: var(--white);
}
.todo-checkbox:hover { border-color: var(--text); background: rgba(0,62,84,0.04); }
.todo-checkbox.checked { background: var(--text); color: var(--bg); border-color: var(--text); }
.add-todo-btn {
    background: transparent;
    color: var(--text);
    border: 2px dashed var(--text);
    padding: var(--space-sm) var(--space-lg);
    border-radius: 50px;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: var(--space-sm);
    width: calc(100% - var(--space-md) * 2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-family: var(--font);
}
.add-todo-btn:hover { background: var(--text); color: var(--bg); border-style: solid; }
.add-todo-btn span { font-size: var(--text-md); font-weight: 400; }

/* ── PACKING LIST PANEL — complete (structure + design system) ── */
.pack-container {
    padding: var(--space-md);
    width: 100%;
    max-width: 100%;
    font-family: var(--font);
    box-sizing: border-box;
}
.pack-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-sm);
    text-align: center;
    font-family: var(--font);
    display: inline;
}
.pack-categories {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.pack-category {
    background: var(--white);
    border: 1px solid rgba(36,59,94,0.16);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
    transition: all 0.2s ease;
}
.pack-category-header {
    background: var(--white);
    color: #243B5E;
    border-bottom: 1px solid rgba(36,59,94,0.12);
    padding: var(--space-sm) var(--space-md);
    font-weight: 500;
    font-size: var(--text-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s ease;
    font-family: var(--font);
}
.pack-category-header:hover { background: #FBF3C6; }
.pack-category-header .header-content { display: flex; align-items: center; gap: var(--space-sm); flex: 1; }
.pack-category-content {
    max-height: 10000px;
    overflow: hidden;
    transition: max-height 0.2s ease;
    padding: var(--space-md);
}
.pack-category-content.collapsed { max-height: 0; padding: 0 var(--space-md); }
.pack-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.pack-empty-state {
    text-align: center;
    color: var(--muted);
    font-style: italic;
    padding: var(--space-md);
    font-family: var(--font);
}
.pack-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm);
    background: var(--white);
    border: 1px solid rgba(36,59,94,0.14);
    border-radius: 10px;
    transition: all 0.2s ease;
    font-family: var(--font);
}
.pack-item:hover { background: rgba(36,59,94,0.03); border-color: rgba(36,59,94,0.35); }
.pack-item.packed { opacity: 0.7; background: rgba(0,62,84,0.04); }
.pack-item-left { display: flex; align-items: center; gap: var(--space-sm); flex: 1; }
.pack-item-right { display: flex; align-items: center; gap: var(--space-sm); }
.category-name-input {
    background: transparent;
    border: none;
    color: #243B5E !important;
    font-size: inherit;
    font-weight: inherit;
    font-family: var(--font);
    padding: var(--space-xs);
    flex: 1;
    max-width: none;
    cursor: text;
}
.category-name-input::placeholder {
    color: rgba(36, 59, 94, 0.35);
}
.category-name-input:focus { outline: none; background: rgba(36,59,94,0.05); border-radius: 6px; }
.category-name-input:hover { background: rgba(36,59,94,0.04); border-radius: 6px; }
.delete-category-btn {
    background: transparent;
    border: none;
    color: var(--bg);
    font-size: var(--text-lg);
    font-weight: 700;
    cursor: pointer;
    padding: 0 var(--space-sm);
    opacity: 0.7;
    transition: all 0.2s ease;
}
.delete-category-btn:hover { opacity: 1; transform: scale(1.2); }
.add-category-btn {
    background: var(--text);
    color: var(--bg);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: 50px;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    margin-top: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--font);
}
.add-category-btn:hover { background: #00516e; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,62,84,0.2); }
.add-category-btn span { font-size: var(--text-lg); font-weight: 400; }
.pack-checkbox {
    width: 20px;
    height: 20px;
    border: 1.5px solid rgba(36,59,94,0.4);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    color: var(--text);
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.pack-checkbox:hover { background: #FBF3C6; border-color: #EFD06A; }
.pack-checkbox.checked { background: #243B5E; color: #fff; border-color: #243B5E; }
.pack-item-name {
    border: none;
    background: transparent;
    color: var(--text);
    font-size: var(--text-sm);
    flex: 1;
    padding: var(--space-xs);
    font-family: var(--font);
    font-weight: 400;
    transition: all 0.2s ease;
}
.pack-item-name:focus { outline: none; background: var(--white); border: 1px solid var(--text); border-radius: 4px; }
.pack-item-name.packed-text { text-decoration: line-through; color: var(--muted); }
.quantity-control {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: rgba(0,62,84,0.04);
    border-radius: 50px;
    padding: 2px;
}
.quantity-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: var(--text);
    color: var(--bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.quantity-btn:hover { background: #00516e; transform: scale(1.1); }
.quantity-value {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
    color: var(--text);
    font-size: var(--text-sm);
}
.remove-pack-btn {
    color: #e74c3c;
    cursor: pointer;
    font-size: var(--text-md);
    font-weight: 700;
    background: none;
    border: none;
    padding: 0 var(--space-xs);
    transition: all 0.2s ease;
    opacity: 0.8;
}
.remove-pack-btn:hover { transform: scale(1.2); color: #c0392b; opacity: 1; }
.add-pack-item-btn {
    background: transparent;
    color: var(--text);
    border: 2px dashed var(--text);
    padding: var(--space-sm) var(--space-lg);
    border-radius: 50px;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-family: var(--font);
}
.add-pack-item-btn:hover { background: var(--text); color: var(--bg); border-style: solid; }
.add-pack-item-btn span { font-size: var(--text-md); font-weight: 400; }
/* Clothes subcategories */
.clothes-subcategory {
    background: rgba(0,62,84,0.03);
    border: 1px solid rgba(0,62,84,0.1);
    border-radius: var(--radius);
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.clothes-subcategory .subcategory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid rgba(0,62,84,0.08);
    background: transparent;
}
.subcategory-name {
    border: none;
    background: transparent;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    flex: 1;
    padding: var(--space-xs);
    font-family: var(--font);
}
.subcategory-name:focus { outline: none; background: var(--white); border: 1px solid var(--text); border-radius: 4px; }
.remove-subcategory-btn {
    color: #e74c3c;
    cursor: pointer;
    font-size: var(--text-lg);
    font-weight: 700;
    background: none;
    border: none;
    padding: 0 var(--space-sm);
    transition: all 0.2s ease;
}
.remove-subcategory-btn:hover { transform: scale(1.2); color: #c0392b; }
.subcategory-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.subcategory-item { background: var(--white); margin-left: var(--space-md); }
.add-subcategory-item-btn {
    background: rgba(0,62,84,0.06);
    color: var(--text);
    border: 1px dashed var(--text);
    padding: var(--space-xs) var(--space-md);
    border-radius: 50px;
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font);
}
.add-subcategory-item-btn:hover { background: rgba(0,62,84,0.12); border-style: solid; }
.add-subcategory-item-btn span { font-size: var(--text-sm); }

/* Custom Prompt Modal (used by packing + other panels) */
.custom-prompt-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    animation: fadeIn 0.2s ease;
}
.custom-prompt-content {
    background: var(--bg);
    border-radius: var(--radius-lg);
    border: 2px solid var(--text);
    padding: var(--space-lg);
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.18);
    animation: slideUp 0.2s ease;
    font-family: var(--font);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.custom-prompt-title {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-md);
    text-align: center;
    font-family: var(--font);
}
.custom-prompt-message {
    font-size: var(--text-sm);
    color: var(--muted);
    margin-bottom: var(--space-md);
    text-align: center;
    font-family: var(--font);
}
.custom-prompt-input {
    width: 100%;
    padding: var(--space-sm);
    border: 2px solid rgba(0,62,84,0.15);
    border-radius: var(--radius);
    background: var(--white);
    font-size: var(--text-sm);
    font-family: var(--font);
    transition: all 0.2s ease;
    margin-bottom: var(--space-md);
    box-sizing: border-box;
    color: var(--text);
}
.custom-prompt-input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(0,62,84,0.1); }
.custom-prompt-buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
}
.custom-prompt-btn {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font);
}
.custom-prompt-btn-primary { background: var(--text); color: var(--bg); border: none; }
.custom-prompt-btn-primary:hover { background: #00516e; transform: translateY(-1px); }
.custom-prompt-btn-secondary { background: var(--white); color: var(--muted); border: 2px solid rgba(0,62,84,0.15); }
.custom-prompt-btn-secondary:hover { background: rgba(0,62,84,0.04); color: var(--text); }

/* ── DOCUMENTS PANEL — complete (structure + design system) ── */
.requirements-container { padding: var(--space-sm); font-family: var(--font); }
.requirements-title { font-size: var(--text-md); color: var(--text); font-weight: 600; margin-bottom: var(--space-sm); text-align: center; font-family: var(--font); }
.save-document-btn {
    background: var(--text); color: var(--bg); border: none;
    padding: var(--space-xs) var(--space-md); border-radius: 50px;
    font-size: var(--text-sm); font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; display: block; margin: 0 auto var(--space-sm);
    font-family: var(--font);
}
.save-document-btn:hover { background: #00516e; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,62,84,0.2); }
.doc-search-box {
    display: flex; align-items: center; background: var(--white);
    border: 2px solid var(--text); border-radius: 50px;
    padding: var(--space-xs) var(--space-md); margin-bottom: var(--space-sm); gap: var(--space-sm);
    position: relative;
}
.doc-search-icon { color: var(--text); font-size: var(--text-sm); }
.doc-search-input { border: none; outline: none; font-size: var(--text-sm); flex: 1; background: transparent; color: var(--text); font-family: var(--font); }
.documents-container { padding: var(--space-md); width: 100%; max-width: 100%; font-family: var(--font); box-sizing: border-box; }
.documents-title { font-size: var(--text-md); font-weight: 600; color: var(--text); margin-bottom: var(--space-sm); text-align: center; font-family: var(--font); }
.doc-categories { display: flex; flex-direction: column; gap: var(--space-sm); }
.doc-category { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.2s ease; }
.doc-category-header {
    background: var(--text); color: var(--bg);
    padding: var(--space-sm) var(--space-md);
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; transition: background 0.2s ease; font-family: var(--font);
}
.doc-category-header:hover { background: #00516e; }
.doc-category-content { overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: var(--space-xs); max-height: 500px; }
.doc-category-content.collapsed { max-height: 0; padding: 0 var(--space-sm); }
.empty-docs { padding: 8px; text-align: center; }
.empty-docs-icon svg { width: 20px; height: 20px; }
.empty-docs-text { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
/* When content only has empty-docs, limit height */
.doc-category-content:only-child .empty-docs,
.doc-category-content > .empty-docs:only-child { margin: 0; }
.doc-category-content:has(> .empty-docs:only-child) { max-height: 70px; padding: 4px; }
.doc-category-content.collapsed { max-height: 0; padding: 0 var(--space-md); }
.doc-category-grid { display: none; }
.doc-category-title { display: none; }
.doc-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.doc-item {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm); background: rgba(0,62,84,0.03);
    border-radius: var(--radius); cursor: pointer; transition: all 0.2s ease; font-family: var(--font);
}
.doc-item:hover { background: rgba(0,62,84,0.08); transform: translateX(4px); }
.doc-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-md); font-weight: bold;
    background: var(--white); border-radius: var(--radius);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08); color: var(--white);
}
.doc-icon.doc { background: #2563eb; }
.doc-icon.jpg, .doc-icon.jpeg, .doc-icon.png { background: #16a34a; }
.doc-icon.pdf { background: #dc2626; }
.doc-icon.other { background: #7c3aed; }
.doc-info { flex: 1; }
.doc-name { font-weight: 500; color: var(--text); font-size: var(--text-sm); font-family: var(--font); }
.doc-type { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
.doc-actions { display: flex; gap: var(--space-sm); }
.doc-action-btn { background: none; border: none; cursor: pointer; padding: var(--space-xs); border-radius: var(--radius); transition: all 0.2s ease; color: var(--muted); }
.doc-action-btn:hover { background: rgba(0,62,84,0.08); color: var(--text); }
.empty-docs { text-align: center; padding: var(--space-sm); color: var(--muted); font-family: var(--font); }
.empty-docs-icon { font-size: var(--text-xxl); margin-bottom: var(--space-sm); opacity: 0.5; }
.empty-docs-text { font-size: var(--text-sm); }

/* Upload modal */
.upload-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 10000; }
.upload-modal.active { display: flex; }
.upload-modal-content {
    background: var(--white); border-radius: var(--radius-lg); padding: var(--space-md);
    max-width: 380px; width: 90%; max-height: 80vh; overflow-y: auto;
    animation: modalSlideIn 0.2s ease; font-family: var(--font);
}
@keyframes modalSlideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.upload-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
.upload-modal-title { font-size: var(--text-lg); font-weight: 600; color: var(--text); font-family: var(--font); }
.upload-modal-close {
    background: none; border: none; font-size: var(--text-lg); cursor: pointer; color: var(--muted);
    padding: 0; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s;
}
.upload-modal-close:hover { background: rgba(0,62,84,0.06); color: var(--text); }
.upload-form { display: flex; flex-direction: column; gap: var(--space-md); }
.form-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-label { font-weight: 500; color: var(--text); font-size: var(--text-sm); font-family: var(--font); }
.form-input, .form-select {
    padding: var(--space-sm); border: 2px solid rgba(0,62,84,0.12); border-radius: var(--radius);
    font-size: var(--text-sm); transition: all 0.2s ease; background: var(--white); font-family: var(--font); color: var(--text);
}
.form-input:focus, .form-select:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(0,62,84,0.1); }
.file-upload-area {
    border: 2px dashed rgba(0,62,84,0.2); border-radius: var(--radius);
    padding: var(--space-lg); text-align: center; cursor: pointer;
    transition: all 0.2s ease; background: rgba(0,62,84,0.02);
}
.file-upload-area:hover { background: rgba(0,62,84,0.06); border-color: var(--text); }
.file-upload-icon { font-size: var(--text-xxl); color: var(--text); margin-bottom: var(--space-sm); }
.file-upload-text { color: var(--muted); font-size: var(--text-sm); font-family: var(--font); }
.file-input { display: none !important; }
.form-buttons { display: flex; gap: var(--space-sm); }
.form-btn { padding: var(--space-sm) var(--space-md); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: var(--font); border: none; }
.form-btn-primary { background: var(--text); color: var(--bg); }
.form-btn-primary:hover { background: #00516e; }
.form-btn-secondary { background: var(--bg); color: var(--text); border: 2px solid rgba(0,62,84,0.15); }
.form-btn-secondary:hover { background: rgba(0,62,84,0.04); }

/* Accommodation conflict modal */
.accommodation-conflict-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; z-index: 10000; backdrop-filter: blur(4px); }
.accommodation-conflict-modal.active { display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease; }
.conflict-modal-content { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-lg); max-width: 500px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.25); animation: slideUp 0.2s ease; font-family: var(--font); }
.conflict-modal-icon { text-align: center; margin-bottom: var(--space-md); }
.conflict-modal-icon .warning-icon { font-size: var(--text-xxl); color: #f39c12; }
.conflict-modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text); text-align: center; margin-bottom: var(--space-md); font-family: var(--font); }
.conflict-list { background: rgba(0,62,84,0.03); border: 2px solid rgba(0,62,84,0.1); border-radius: var(--radius); padding: var(--space-md); margin-bottom: var(--space-lg); }
.conflict-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid rgba(0,62,84,0.08); font-family: var(--font); }
.conflict-item:last-child { border-bottom: none; }
.conflict-day-badge { background: var(--text); color: var(--bg); border-radius: 50px; padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); font-weight: 600; min-width: 60px; text-align: center; }
.conflict-details { flex: 1; }
.conflict-hotel { font-weight: 600; color: var(--text); font-size: var(--text-sm); }
.conflict-location { color: var(--muted); font-size: var(--text-xs); margin-top: 2px; }
.conflict-modal-buttons { display: flex; gap: var(--space-sm); justify-content: center; }
.conflict-btn { padding: var(--space-sm) var(--space-lg); border-radius: 50px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: all 0.2s ease; border: none; font-family: var(--font); }
.conflict-btn-cancel { background: var(--bg); color: var(--muted); border: 2px solid rgba(0,62,84,0.12); }
.conflict-btn-cancel:hover { background: rgba(0,62,84,0.06); transform: translateY(-2px); }
.conflict-btn-proceed { background: var(--text); color: var(--bg); }
.conflict-btn-proceed:hover { background: #00516e; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,62,84,0.2); }

/* Search results dropdown */
.doc-search-results {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border: 2px solid var(--text); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius); max-height: 300px;
    overflow-y: auto; display: none; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.doc-search-results.active { display: block; }
.search-result-item {
    padding: var(--space-sm) var(--space-md); cursor: pointer;
    transition: background 0.2s ease; border-bottom: 1px solid rgba(0,62,84,0.06);
    display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font);
}
.search-result-item:hover { background: rgba(0,62,84,0.06); }
.search-result-item:last-child { border-bottom: none; }
.search-result-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: var(--text-md); background: rgba(0,62,84,0.04); border-radius: var(--radius); }
.search-result-info { flex: 1; }
.search-result-name { font-weight: 500; color: var(--text); font-size: var(--text-xs); }
.search-result-category { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }

/* ── MEMO PANEL — complete (structure + design system) ── */
/* Sidebar expansion for memo */
.sidebar-panel.memo-expanded .panel-content { width: 100%; padding: var(--space-xl) 0 0 0; overflow: hidden; box-sizing: border-box; }
.sidebar-panel.memo-expanded.open { overflow: hidden; }
.content-area.memo-shifted { /* margin managed by overlay system */ }

/* Memo structure */
.memo-container { display: flex; flex-direction: column; height: 100%; overflow: auto; font-family: var(--font); color: var(--text); }
.memo-header { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); flex-shrink: 0; border-bottom: 1px solid rgba(0,62,84,0.06); flex-wrap: nowrap; }
.memo-add-btn { background: var(--text); color: var(--bg); border: none; border-radius: var(--radius); padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); font-weight: 600; display: flex; align-items: center; gap: var(--space-xs); cursor: pointer; transition: background 0.15s; white-space: nowrap; font-family: var(--font); }
.memo-add-btn:hover { background: #00516e; }
.memo-group-btn { display: flex; align-items: center; gap: var(--space-xs); background: transparent; border: 1px solid rgba(0,62,84,0.1); border-radius: var(--radius); padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); color: var(--muted); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; font-family: inherit; }
.memo-group-btn:hover { background: rgba(0,62,84,0.04); }
.memo-group-btn.active { background: rgba(0,62,84,0.04); border-color: var(--text); color: var(--text); font-weight: 600; }
.memo-filter-select { border: 1px solid rgba(0,62,84,0.1); border-radius: var(--radius); padding: var(--space-xs); font-size: var(--text-xs); color: var(--muted); background: rgba(0,62,84,0.02); outline: none; cursor: pointer; transition: border-color 0.15s; font-family: var(--font); }
.memo-filter-select:focus { border-color: var(--text); }
.memo-search-wrap { position: relative; display: flex; align-items: center; flex: 1 1 auto; flex-basis: auto; min-width: 0; margin-left: 0; }
.memo-search { width: 100%; }
.memo-search-icon { position: absolute; left: var(--space-xs); color: var(--muted); pointer-events: none; }
.memo-search { border: 1px solid rgba(0,62,84,0.1); border-radius: var(--radius); padding: var(--space-xs) var(--space-xs) var(--space-xs) calc(var(--space-md) + 4px); font-size: var(--text-xs); width: 150px; background: var(--white); outline: none; transition: border-color 0.15s, background 0.15s; color: var(--text); font-family: var(--font); }
.memo-search:focus { border-color: var(--text); background: var(--white); }
/* Mobile: a single slider button opens a combined Raggruppa+Filtra sheet;
   the separate desktop buttons are hidden. */
.memo-header .memo-slider-btn { display: none; }   /* mobile-only; specificity beats .memo-ctrl-btn */
.memo-tools-divider { height: 1px; background: rgba(0,62,84,0.1); margin: var(--space-sm) 0; }
/* "Azzera tutto" — visible only when there are active filters/grouping/search */
.memo-clear-btn { display: none; color: #b91c1c; border-color: rgba(185,28,28,0.28); }
.memo-clear-btn:hover { background: rgba(185,28,28,0.06); border-color: #b91c1c; }
.memo-clear-btn svg { width: 12px; height: 12px; }
@media (max-width: 767px) {
    /* Memo controls sit ON the panel header's first line:
       icon · Memo · + Aggiungi · Filtra · Raggruppa · (Azzera) · ⤢ ✕,
       with the search on a full-width second line. The relocated .memo-header
       dissolves (display:contents) so its children join the header flex row;
       `order` sequences them. Scoped to memo → other panels untouched. */
    .sidebar-panel[data-section="memo"] .tp-panel-header { flex-wrap: wrap; align-items: center; column-gap: var(--space-xs); row-gap: var(--space-xs); }
    .sidebar-panel[data-section="memo"] .tp-panel-title-wrap { flex: 0 1 auto; min-width: 0; }
    .tp-panel-header .memo-header { display: contents; }
    /* The toolbar is lifted into the panel header on mobile. If any copy is left
       inside the body (memo-container) — e.g. after a re-render — hide it so it
       doesn't sit as a redundant fixed-looking sub-header band under the header. */
    .sidebar-panel[data-section="memo"] .memo-container > .memo-header { display: none !important; }
    /* Pull the first card up under the header — no cream band on top. */
    .sidebar-panel[data-section="memo"] #memoTableWrap { padding-top: 0; }
    .sidebar-panel[data-section="memo"] .memo-cards { padding-top: 2px; }
    /* The empty band under the header is the panel-content's own top space: the
       memo body (memo-container) doesn't reach the top — content sits bottom-anchored
       so a gap opens above it, and the sheet's white surface shows through. Force the
       body to fill from the top (kill any padding/margin/justify offset) AND paint the
       whole sheet body cream so no seam can ever read as a white strip. */
    .sidebar-panel[data-section="memo"] .tp-panel-header { padding-bottom: 2px; }
    .sidebar-panel[data-section="memo"].tp-sheet { background: var(--bg); }
    .sidebar-panel[data-section="memo"].tp-sheet > .panel-content {
        background: var(--bg) !important;
        padding-top: 0 !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }
    .sidebar-panel[data-section="memo"] .memo-container {
        margin: 0 !important;
        flex: 1 1 auto !important;
        align-self: stretch !important;
    }
    .sidebar-panel[data-section="memo"] .memo-container,
    .sidebar-panel[data-section="memo"] .memo-workspace,
    .sidebar-panel[data-section="memo"] .memo-main { background: var(--bg) !important; }
    .tp-panel-header .memo-add-btn     { order: 1; height: 2rem; padding: 0 var(--space-sm); font-size: var(--text-xs); margin-left: auto; }
    .tp-panel-header .memo-ctrl-group  { order: 2; }
    .tp-panel-header .memo-clear-btn   { order: 3; }
    .tp-panel-header .tp-panel-actions { order: 4; margin-left: auto; }
    .tp-panel-header .memo-search-wrap { order: 5; flex: 1 1 100%; min-width: 0; }
    .tp-panel-header .memo-ctrl-btn { flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0; gap: 0; font-size: 0; justify-content: center; }
    .memo-search { width: 100%; height: 2rem; box-sizing: border-box; padding-left: 1.9rem; }
    .memo-search-icon { left: 0.6rem; }
}
.memo-loading { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--muted); font-size: var(--text-xs); }
.memo-empty { display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); color: var(--muted); font-size: var(--text-sm); padding: var(--space-xl); }
.memo-empty p { margin: 0; font-weight: 600; color: var(--muted); }
.memo-empty span { font-size: var(--text-xs); }

/* Memo table */
#memoTableWrap { flex: 1; overflow-y: auto; overflow-x: auto; padding: var(--space-sm) var(--space-md); min-height: 150px; }
.memo-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-xs); border: 1.5px solid var(--text); border-radius: var(--radius); font-family: var(--font); }
.memo-table thead th { background: var(--text); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; color: var(--bg); padding: var(--space-sm) var(--space-xs); text-align: center; box-shadow: 0 2px 0 #00516e; white-space: nowrap; position: sticky; top: 0; z-index: 1; letter-spacing: 0.05em; }
.memo-table tbody tr { border-bottom: 1.5px solid rgba(0,62,84,0.1); background: var(--white); }
.memo-table tbody tr:last-child { border-bottom: none; }
.memo-table tbody tr:hover td { background: rgba(0,62,84,0.04) !important; }
.memo-table td { padding: var(--space-xs); vertical-align: middle; color: var(--text); text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 0; font-family: var(--font); }
.memo-status-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; cursor: pointer; flex-shrink: 0; transition: transform 0.15s, opacity 0.1s; }
.memo-status-dot:hover { transform: scale(1.3); }
.memo-status-dot.booked { background: var(--text); }
.memo-status-dot.pending { background: var(--accent); }
.memo-cat-icon { display: inline-flex; align-items: center; justify-content: center; }
.memo-status-pill { display: inline-flex; align-items: center; padding: 3px var(--space-sm); border-radius: 50px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-xs); font-weight: 500; cursor: pointer; white-space: nowrap; user-select: none; transition: opacity 0.1s; }
.memo-status-pill:hover { opacity: 0.8; }
.memo-row--scartato { opacity: 0.6; }
.memo-row--scartato td { color: var(--muted); }
.memo-row--scartato .memo-name-text { text-decoration: line-through; }
.memo-cat-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px var(--space-xs); max-width: 100%; overflow: hidden; border-radius: var(--radius); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.memo-table td:nth-child(2), .memo-table td:nth-child(3) { overflow: visible; position: relative; }
.memo-cat-dot-wrap, .memo-status-dot-wrap { display: inline-flex; align-items: center; justify-content: center; position: relative; cursor: pointer; width: 100%; }
.memo-sdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; transition: transform 0.15s; }
.memo-status-dot-wrap:hover .memo-sdot { transform: scale(1.3); }
.memo-cat-icon-only { display: inline-flex; align-items: center; flex-shrink: 0; }
.memo-slabel, .memo-clabel { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); font-size: var(--text-xs); font-weight: 600; padding: 3px 7px; border-radius: var(--radius); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 20; }
.memo-table td:nth-child(2):hover .memo-clabel, .memo-table td:nth-child(3):hover .memo-slabel { opacity: 1; }
.memo-table th:nth-child(1) { background: var(--white); }
.memo-table td:nth-child(1) { overflow: visible; position: relative; padding: 2px 1px !important; text-align: center; white-space: nowrap; }
.memo-row-link-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text); vertical-align: middle; transition: color 0.12s, transform 0.1s; }
.memo-row-link-icon:hover { color: var(--text); transform: scale(1.15); }
.memo-note-cell { cursor: pointer; color: var(--muted); font-size: var(--text-xs); }
.memo-note-cell:not(.memo-cell-empty):hover { color: var(--text); text-decoration: underline dotted; }
.memo-row { cursor: default; }
.memo-row--dragging { opacity: 0.4; }
.memo-row--drag-over td { border-top: 2px solid var(--text) !important; }
.memo-drag-handle { position: absolute; left: -18px; top: 50%; transform: translateY(-50%); font-size: var(--text-xs); color: rgba(0,0,0,0.25); cursor: grab; user-select: none; line-height: 1; padding: 2px 3px; border-radius: 3px; transition: color 0.12s, background 0.12s; }
.memo-drag-handle:hover { color: rgba(0,0,0,0.55); background: rgba(0,0,0,0.06); }
.memo-row--dragging .memo-drag-handle { cursor: grabbing; }
.memo-note-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 10000; }
.memo-note-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--white); border-radius: var(--radius); padding: var(--space-md); width: 380px; max-width: 92vw; box-shadow: 0 8px 32px rgba(0,0,0,0.18); z-index: 10001; font-family: var(--font); }
.memo-note-modal-title { font-size: var(--text-sm); font-weight: 700; margin: 0 0 var(--space-sm); color: var(--text); }
.memo-note-modal-body { font-size: var(--text-xs); color: var(--muted); line-height: 1.7; white-space: pre-wrap; max-height: 300px; overflow-y: auto; }
.memo-note-modal-close { margin-top: var(--space-md); width: 100%; background: rgba(0,62,84,0.04); border: none; border-radius: var(--radius); padding: var(--space-xs); font-size: var(--text-xs); cursor: pointer; font-family: var(--font); color: var(--muted); }
.memo-note-modal-close:hover { background: rgba(0,62,84,0.08); }
.memo-name-text { cursor: pointer; font-weight: 500; color: var(--text); }
.memo-name-text:hover { text-decoration: underline; text-decoration-style: dotted; }
.memo-cell-click { cursor: pointer; color: var(--text); }
.memo-cell-click:hover { text-decoration: underline; text-decoration-style: dotted; }
.memo-cell-empty { color: rgba(0,62,84,0.2); }
.memo-inline-input { border: 1px solid var(--text); border-radius: 4px; padding: 3px 6px; font-size: var(--text-xs); width: 100%; outline: none; font-family: var(--font); box-sizing: border-box; color: var(--text); }
.memo-inline-textarea { resize: vertical; min-height: 52px; line-height: 1.4; }
.memo-inline-select { border: 1px solid rgba(0,62,84,0.1); border-radius: 4px; padding: 3px 5px; font-size: var(--text-xs); background: var(--white); outline: none; cursor: pointer; color: var(--text); font-family: var(--font); }
.memo-link-icon { color: var(--text); opacity: 0.7; cursor: pointer; display: inline-flex; align-items: center; transition: opacity 0.12s; }
.memo-link-icon:hover { opacity: 1; }
.memo-link-add { background: none; border: none; cursor: pointer; color: rgba(0,62,84,0.2); padding: 0; display: inline-flex; align-items: center; transition: color 0.12s; }
.memo-link-add:hover { color: var(--text); }
.memo-del-btn { background: none; border: none; cursor: pointer; color: #e74c3c; padding: 2px; display: inline-flex; align-items: center; border-radius: 4px; transition: color 0.12s, background 0.12s; }
.memo-del-btn:hover { color: #c0392b; background: rgba(231,76,60,0.08); }
.memo-th-resizer { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 1; }
.memo-th-resizer:hover, .memo-th-resizer.active { background: rgba(255,255,255,0.35); }
.memo-resize-handle { height: 14px; margin: 0; cursor: ns-resize; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-top: 2px solid rgba(0,0,0,0.45); }
.memo-resize-handle::after { content: ''; display: block; width: 36px; height: 3px; border-radius: 2px; background: rgba(0,0,0,0.3); transition: background 0.15s; }
.memo-resize-handle:hover::after { background: rgba(0,0,0,0.55); }
.memo-divider { border: none; border-top: 1px solid rgba(0,62,84,0.06); margin: 0; flex-shrink: 0; }
.memo-group-hdr td { padding: var(--space-xs) var(--space-sm); background: rgba(0,62,84,0.03); border-bottom: 1px solid rgba(0,62,84,0.06); font-size: var(--text-xs); font-weight: 600; display: flex; align-items: center; gap: var(--space-xs); }
.memo-group-hdr--day td { background: rgba(0,62,84,0.02); padding-left: var(--space-md); }
.memo-group-count { font-size: var(--text-xs); font-weight: 400; color: var(--muted); background: rgba(0,62,84,0.06); border-radius: 10px; padding: 1px 7px; }
.memo-group-hdr-label { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }

/* ── Memo table — redesign reskin (Vista 1/2): airy white surface,
      hairline rows, light sticky uppercase header. Overrides the legacy
      dark-framed table without touching the markup machinery. ───────── */
.memo-container { --memo-teal: #5A9A9C; }   /* brand teal (documented token); centralised, no scattered hex */
/* cream backdrop behind the table (matches checklist): table reads as a card on cream */
.sidebar-panel[data-section="memo"] > .panel-content { background: var(--bg); }
.memo-container, .memo-workspace, .memo-main { background: var(--bg); }
#memoTableWrap { background: var(--bg); }
.memo-table { box-shadow: 0 1px 0 rgba(0,62,84,0.06); }
/* Columns size to their content (auto layout, no forced crush) so headers
   and values show in full; the table scrolls horizontally (#memoTableWrap)
   when wider than its area — docked sidebar and narrowed extended split. */
.memo-table { border: none; border-radius: 0; min-width: 46rem; table-layout: auto; }
.memo-table th, .memo-table td { max-width: none; }
/* Free-text columns stay capped (ellipsis) so they can't blow up the width. */
.memo-name-text { display: inline-block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.memo-comment-cell { display: inline-block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.memo-table thead th {
    background: var(--white); color: var(--muted);
    box-shadow: none; text-align: center; letter-spacing: 0.07em;
    border-bottom: 1px solid rgba(0,62,84,0.12);
    padding: var(--space-sm) var(--space-xs);
}
.memo-table tbody tr { border-bottom: 1px solid rgba(0,62,84,0.07); }
.memo-table td { text-align: center; }

/* category = rounded colored square */
.memo-cat-sq { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 8px; flex-shrink: 0; }

/* status = dot + visible label (click cycles) */
.memo-status-cell { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; max-width: 100%; }
.memo-status-cell .memo-sdot { width: 0.5rem; height: 0.5rem; }
.memo-status-txt { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; }

/* cost = centered tabular figures */
.memo-cost-val { font-weight: 800; font-variant-numeric: tabular-nums; }

.memo-comment-cell { color: var(--text); }

/* link = teal "Apri" pill (protagonist) or dashed "+ Link" */
.memo-apri-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--memo-teal); color: var(--white); border-radius: 999px; padding: 3px var(--space-sm); font-size: var(--text-xs); font-weight: 700; text-decoration: none; white-space: nowrap; transition: filter 0.12s; }
.memo-apri-pill:hover { filter: brightness(0.92); }
.memo-apri-add { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px dashed rgba(0,62,84,0.25); color: var(--muted); border-radius: 999px; padding: 3px var(--space-sm); font-size: var(--text-xs); font-weight: 600; cursor: pointer; font-family: var(--font); transition: border-color 0.12s, color 0.12s; }
.memo-apri-add:hover { border-color: var(--text); color: var(--text); }

/* condiviso da = colored initials pill + name */
.memo-share { display: inline-flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.memo-share--empty { color: rgba(0,62,84,0.2); }
.memo-share-av { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: var(--white); font-size: 0.625rem; font-weight: 800; flex-shrink: 0; }
.memo-share-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }

/* row actions (pencil + trash) revealed on hover */
.memo-row-actions { display: inline-flex; align-items: center; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.memo-row:hover .memo-row-actions { opacity: 1; }
.memo-td-actions { text-align: center; }
.memo-edit-btn { background: none; border: none; cursor: pointer; color: var(--muted); padding: 3px; border-radius: 5px; display: inline-flex; align-items: center; transition: background 0.12s, color 0.12s; }
.memo-edit-btn:hover { background: rgba(0,62,84,0.08); color: var(--text); }

/* Yellow expand/contract toggle in the Memo panel header (the one colored
   action — "il giallo per la cosa da cliccare"). */
.sidebar-panel[data-section="memo"] .tp-panel-expand,
.sidebar-panel[data-section="checklist"] .tp-panel-expand,
.sidebar-panel[data-section="pack"] .tp-panel-expand { background: var(--accent); color: var(--text); border-radius: 50%; }
.sidebar-panel[data-section="memo"] .tp-panel-expand:hover,
.sidebar-panel[data-section="checklist"] .tp-panel-expand:hover,
.sidebar-panel[data-section="pack"] .tp-panel-expand:hover { filter: brightness(0.94); }
.sidebar-panel[data-section="memo"].tp-center-split .tp-panel-expand svg,
.sidebar-panel[data-section="checklist"].tp-center-split .tp-panel-expand svg,
.sidebar-panel[data-section="pack"].tp-center-split .tp-panel-expand svg { transform: rotate(180deg); transition: transform 0.18s; }

/* Checklist extended (center-split): sections flow into two columns. */
@media (min-width: 768px) {
    .sidebar-panel[data-section="checklist"].tp-center-split .checklist-sections { display: block; column-count: 2; column-gap: var(--space-md); }
    .sidebar-panel[data-section="checklist"].tp-center-split .checklist-section { break-inside: avoid; margin: 0 0 var(--space-sm); }
    .sidebar-panel[data-section="checklist"].tp-center-split .checklist-section[data-section-id="accommodations"] { break-after: column; }
    .sidebar-panel[data-section="checklist"].tp-center-split .checklist-container { padding: var(--space-xs) var(--space-md) var(--space-md); }
    /* Pack extended: same two-column flow as checklist (balanced columns). */
    .sidebar-panel[data-section="pack"].tp-center-split .checklist-sections { display: block; column-count: 2; column-gap: var(--space-md); }
    .sidebar-panel[data-section="pack"].tp-center-split .checklist-section { break-inside: avoid; margin: 0 0 var(--space-sm); }
    .sidebar-panel[data-section="pack"].tp-center-split .checklist-container { padding: var(--space-xs) var(--space-md) var(--space-md); }
    .sidebar-panel[data-section="pack"].tp-center-split .pack-toolbar { column-span: all; }
}

/* Grouped table: single shared header, group rows live in the tbody. */
.memo-grouprow td { background: rgba(0,62,84,0.04); border-bottom: 1px solid rgba(0,62,84,0.08); padding: 0; text-align: left; max-width: none; white-space: normal; overflow: visible; }
.memo-grouprow-inner { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm); min-height: 2.5rem; }
.memo-grouprow-bar { width: 4px; align-self: stretch; min-height: 1.1rem; border-radius: 2px; flex-shrink: 0; }
.memo-grouprow-label { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-xs); }
.memo-grouprow-label svg { width: 14px; height: 14px; }
.memo-grouprow-sq { width: 1.6rem; height: 1.6rem; border-radius: 7px; }
.memo-grouprow--d1 td { padding-left: var(--space-md); }

/* Memo modal (add/edit) */
.memo-modal--wide { width: 680px; }
.memo-modal-body-wrap { display: flex; gap: 0; }
.memo-modal-photo-col { width: 210px; flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; border-right: 1px solid rgba(0,62,84,0.06); padding: 0 var(--space-md) var(--space-md) 0; }
.memo-photo-wrap { position: relative; width: 100%; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; background: rgba(0,62,84,0.04); flex-shrink: 0; }
.memo-photo-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; display: block; aspect-ratio: 3 / 4; }
.memo-photo-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,62,84,0.04); }
.memo-photo-error .memo-photo-img { display: none; }
.memo-photo-error .memo-photo-spinner { display: flex !important; }
.memo-photo-refresh { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); background: none; border: 1px solid rgba(0,62,84,0.1); border-radius: var(--radius); padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); color: var(--muted); cursor: pointer; margin-top: var(--space-xs); font-family: var(--font); transition: background 0.12s, color 0.12s; }
.memo-photo-refresh:hover { background: rgba(0,62,84,0.04); color: var(--text); }
.memo-modal-form-col { flex: 1; min-width: 0; padding-left: var(--space-md); }
@media (max-width: 720px) {
    .memo-modal--wide { width: 95vw; }
    .memo-modal-body-wrap { flex-direction: column; }
    .memo-modal-photo-col { width: 100%; border-right: none; border-bottom: 1px solid rgba(0,62,84,0.06); padding: 0 0 var(--space-md) 0; flex-direction: row; align-items: flex-start; gap: var(--space-sm); }
    .memo-photo-wrap { width: 120px; aspect-ratio: 1; }
    .memo-modal-form-col { padding-left: 0; padding-top: var(--space-sm); }
}

/* Memo notes section */
.memo-notes-section { flex-shrink: 0; padding: var(--space-sm) var(--space-md); background: rgba(255,255,255,0.25); }
.memo-notes-title { font-size: var(--text-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-xs); }
.memo-notes-toolbar { display: flex; gap: 4px; margin-bottom: var(--space-xs); }
.memo-notes-tool { -webkit-appearance: none; appearance: none; background: var(--white); border: 1px solid rgba(0,62,84,0.1); border-radius: 4px; padding: 4px var(--space-sm); font-size: var(--text-xs); color: var(--muted); cursor: pointer; transition: background 0.12s; font-family: var(--font); }
.memo-notes-tool:hover { background: rgba(0,62,84,0.04); }
.memo-notes-editor { min-height: 80px; overflow-y: auto; resize: vertical; border: 1px solid rgba(0,62,84,0.1); border-radius: var(--radius); padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); line-height: 1.6; color: var(--text); background: var(--white); outline: none; transition: border-color 0.15s; font-family: var(--font); }
.memo-notes-editor:focus { border-color: var(--text); }
.memo-notes-editor ul, .memo-notes-editor ol { padding-left: var(--space-md); margin: 4px 0; }
.memo-notes-editor li { margin: 2px 0; color: var(--text); }

/* ── Layout: docked sidebar = table fills, notes pinned at the FOOT;
      extended (center-split) = table | resize handle | notes, side by
      side and width-adjustable. ─────────────────────────────────────── */
.memo-container { overflow: hidden; }
.memo-workspace { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.memo-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.memo-main #memoTableWrap { min-height: 0; }

/* Free notes — clearly separated zone (cream + yellow edge). Docked: a
   block pinned at the bottom (foot); editor resizable (vertical). */
.memo-notes-section {
    flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column;
    background: var(--bg);
    border-top: 1px solid rgba(0,62,84,0.12);
    box-shadow: inset 0 3px 0 var(--accent);      /* yellow top edge = separation */
}
.memo-notes-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-bottom: var(--space-xs); cursor: pointer; user-select: none; }
.memo-notes-head .memo-notes-title { margin-bottom: 0; color: var(--text); }
.memo-notes-collapse { color: var(--muted); display: inline-flex; align-items: center; transition: transform 0.18s; }
.memo-notes-section .memo-notes-editor { flex: 0 0 auto; height: 9rem; min-height: 4rem; max-height: 60vh; resize: vertical; overflow-y: auto; }

/* Collapsed → just the header bar (still at the foot). */
.memo-notes--collapsed .memo-notes-head { margin-bottom: 0; }
.memo-notes--collapsed .memo-notes-collapse { transform: rotate(180deg); }
.memo-notes--collapsed .memo-notes-toolbar,
.memo-notes--collapsed .memo-notes-editor { display: none; }

/* Resize handle — only in the extended split. */
.memo-split-handle { display: none; }

/* Extended (center-split): row layout, resizable split, table scrolls. */
.sidebar-panel.tp-center-split .memo-workspace { flex-direction: row; align-items: stretch; }
.sidebar-panel.tp-center-split .memo-main { flex: 1 1 0; }
.sidebar-panel.tp-center-split .memo-notes-section {
    flex: 0 0 var(--memo-notes-w, 22rem);
    border-top: none; border-left: 1px solid rgba(0,62,84,0.12);
    box-shadow: inset 3px 0 0 var(--accent);      /* yellow left edge */
}
.sidebar-panel.tp-center-split .memo-split-handle {
    display: block; flex: 0 0 7px; align-self: stretch; cursor: col-resize;
    background: rgba(0,62,84,0.06); touch-action: none; transition: background 0.12s;
}
.sidebar-panel.tp-center-split .memo-split-handle:hover { background: var(--accent); }
/* In the split notes always show their editor (no collapse) and fill height. */
.sidebar-panel.tp-center-split .memo-notes-collapse { display: none; }
.sidebar-panel.tp-center-split .memo-notes-section .memo-notes-editor { flex: 1 1 auto; height: auto; max-height: none; resize: none; }
.sidebar-panel.tp-center-split .memo-notes--collapsed .memo-notes-editor { display: block; }
.sidebar-panel.tp-center-split .memo-notes--collapsed .memo-notes-toolbar { display: flex; }

/* Mobile: make the sheet a real flex column so the cards area scrolls and the
   free-notes block is reliably pinned at the foot (above the tab bar, for
   which panel-content already reserves padding-bottom). flex:1 instead of an
   unreliable percentage height. */
@media (max-width: 767px) {
    /* Flex column sheet. The tab-bar clearance is set on memo-container in JS
       (exact measured nav height) — panel-content's own bottom padding is
       forced to 0 so the two don't stack into a white strip. */
    .sidebar-panel[data-section="memo"].tp-sheet > .panel-content { display: flex; flex-direction: column; padding-bottom: 0 !important; }
    .memo-container { overflow: hidden; height: auto; flex: 1 1 auto; min-height: 0; box-sizing: border-box; }
    .memo-workspace { flex: 1 1 auto; min-height: 0; }
    .memo-main { flex: 1 1 auto; min-height: 0; overflow: hidden; }
    .memo-main #memoTableWrap { overflow-y: auto; overflow-x: auto; }
    .memo-notes-section { flex: 0 0 auto; }
}
.memo-notes-editor:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }

/* Memo add/edit modal */
.memo-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 10000; }
.memo-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--white); border-radius: var(--radius); padding: var(--space-md); width: 420px; max-width: 95vw; max-height: 85vh; overflow-y: auto; z-index: 10001; box-shadow: 0 8px 32px rgba(0,0,0,0.18); font-family: var(--font); }
.memo-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.memo-modal-title { font-size: var(--text-sm); font-weight: 700; color: var(--text); margin: 0; }
.memo-modal-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px; display: inline-flex; align-items: center; border-radius: 4px; transition: background 0.12s, color 0.12s; }
.memo-modal-close:hover { background: rgba(0,62,84,0.04); color: var(--text); }
.memo-cat-tabs { display: flex; gap: var(--space-xs); margin-bottom: var(--space-md); flex-wrap: wrap; }
.memo-cat-tab { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius); border: 1px solid rgba(0,62,84,0.1); font-size: var(--text-xs); cursor: pointer; font-weight: 500; display: flex; align-items: center; gap: var(--space-xs); background: var(--white); color: var(--muted); transition: background 0.12s, border-color 0.12s, color 0.12s; font-family: var(--font); }
.memo-modal-field { margin-bottom: var(--space-sm); }
.memo-modal-label { font-size: var(--text-xs); font-weight: 600; color: var(--muted); margin-bottom: 4px; display: block; text-transform: uppercase; letter-spacing: 0.03em; }
.memo-modal-input, .memo-modal-select, .memo-modal-textarea { width: 100%; border: 1px solid rgba(0,62,84,0.1); border-radius: var(--radius); padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); outline: none; box-sizing: border-box; font-family: var(--font); color: var(--text); background: var(--white); transition: border-color 0.15s; }
.memo-modal-input:focus, .memo-modal-select:focus, .memo-modal-textarea:focus { border-color: var(--text); }
.memo-modal-textarea { resize: vertical; min-height: 60px; }
.memo-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.memo-modal-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.memo-modal-field--link { margin-bottom: var(--space-md); }
.memo-modal-footer { display: flex; justify-content: flex-end; gap: var(--space-xs); margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid rgba(0,62,84,0.06); }
.memo-modal-btn-cancel { background: none; border: 1px solid rgba(0,62,84,0.1); border-radius: var(--radius); padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); cursor: pointer; color: var(--muted); transition: background 0.12s; font-family: var(--font); }
.memo-modal-btn-cancel:hover { background: rgba(0,62,84,0.04); }
.memo-modal-btn-save { background: var(--text); color: var(--bg); border: none; border-radius: var(--radius); padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); font-weight: 600; cursor: pointer; transition: background 0.15s; font-family: var(--font); }
.memo-modal-btn-save:hover { background: #00516e; }

/* ── "Modifica opzione" — editor completo della voce memo ──────
   Layout fluido (rem-based, niente breakpoint in px): card cards e
   campi giorno/costo reflowano da soli con auto-fit + minmax. ──── */
.memo-opt-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(12, 21, 32, 0.42);          /* deep ocean scrim (palette v2) */
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-md);
}
/* read-only "Condiviso da" avatar inside the detail modal */
.memo-opt-shared { display: flex; align-items: center; gap: var(--space-xs); }
.memo-opt-shared .memo-share-name { font-size: 0.9rem; }
.memo-opt {
    display: flex; flex-direction: column;
    width: min(30rem, 100%); max-height: 88vh;
    background: #FDF8EF; border-radius: 14px;
    box-shadow: 0 20px 60px rgba(12, 21, 32, 0.22);
    font-family: var(--font); overflow: hidden;
}

/* header */
.memo-opt-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid rgba(36, 59, 94, 0.12); }
.memo-opt-head-ic { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 9px; display: grid; place-items: center; background: #243B5E; color: #fff; }
.memo-opt-head-ic svg { width: 1.25rem; height: 1.25rem; }
.memo-opt-head-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.memo-opt-head-title { font-size: 1rem; font-weight: 800; color: #243B5E; }
.memo-opt-head-sub { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.memo-opt-close { flex: 0 0 auto; width: 2rem; height: 2rem; border: none; border-radius: 8px; background: rgba(36, 59, 94, 0.07); color: #243B5E; cursor: pointer; display: grid; place-items: center; transition: background 0.12s; }
.memo-opt-close:hover { background: #FBF3C6; }

/* scrollable body */
.memo-opt-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.memo-opt-name { width: 100%; border: none; border-bottom: 2px solid rgba(36, 59, 94, 0.15); background: none; font-family: var(--font); font-size: 1.15rem; font-weight: 800; color: #243B5E; padding: 0 0 0.35rem; outline: none; }
.memo-opt-name:focus { border-bottom-color: #243B5E; }
.memo-opt-sec { display: flex; flex-direction: column; gap: 0.5rem; }
.memo-opt-sec[hidden] { display: none !important; }
.memo-opt-eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.memo-opt-eyebrow-accent { color: #243B5E; text-transform: none; letter-spacing: 0; font-weight: 700; }
.memo-opt-eyebrow-hint { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Condiviso da in the header (right-aligned, next to the title) */
.memo-opt-head-shared { flex: 0 0 auto; display: flex; align-items: center; }
.memo-opt-head-shared .memo-share-name { font-size: 0.85rem; }

/* Day picker calendar (single day or range) */
.memo-opt-daygrid { display: flex; flex-direction: column; gap: var(--space-md); }
.memo-opt-daygrid-empty { color: var(--muted); font-size: 0.85rem; }
/* month calendar */
.memo-cal-month { display: flex; flex-direction: column; gap: 0.4rem; }
.memo-cal-title { font-size: 0.85rem; font-weight: 800; color: var(--text); }
.memo-cal-grid { display: grid; grid-template-columns: repeat(7, 1.9rem); gap: 0.25rem; justify-content: center; }
.memo-cal-wd { text-align: center; font-size: 0.62rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; padding-bottom: 2px; }
.memo-cal-blank { aspect-ratio: 1; }
.memo-cal-day { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border: 1px solid rgba(36,59,94,0.18); background: #fff; border-radius: 7px; font-family: var(--font); font-size: 0.7rem; font-weight: 700; color: #243B5E; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.memo-cal-day:hover:not(.is-disabled) { border-color: #243B5E; }
.memo-cal-day.is-disabled { color: rgba(36,59,94,0.25); background: transparent; border-color: transparent; cursor: default; pointer-events: none; }
.memo-cal-day.is-sel { background: #EFD06A; border-color: #EFD06A; color: #243B5E; }
.memo-cal-day.is-mid { background: #FBF3C6; border-color: transparent; color: #243B5E; }
.memo-opt-day-clear { align-self: flex-start; border: 1px dashed rgba(36,59,94,0.3); background: none; border-radius: 8px; padding: 0.3rem 0.8rem; font-family: var(--font); font-size: 0.75rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.memo-opt-day-clear.is-active { border-style: solid; border-color: #243B5E; color: #243B5E; }

/* Hover tooltip (Menevo style) — e.g. the full comment. */
.memo-tip { position: fixed; z-index: 10003; max-width: 22rem; background: var(--white); color: var(--text); border: 1px solid rgba(0,62,84,0.14); font-family: var(--font); font-size: 0.8rem; line-height: 1.5; font-weight: 500; padding: 0.5rem 0.7rem; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,62,84,0.18); pointer-events: none; white-space: normal; }

/* Status dropdown (click the status cell to pick a value). */
.memo-status-menu { background: var(--white); border: 1px solid rgba(0,62,84,0.12); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,62,84,0.18); padding: 4px; display: flex; flex-direction: column; min-width: 12rem; font-family: var(--font); }
.memo-status-opt { display: flex; align-items: center; gap: var(--space-xs); border: none; background: none; padding: 0.5rem 0.6rem; border-radius: 8px; font-family: var(--font); font-size: 0.85rem; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; }
.memo-status-opt:hover { background: rgba(0,62,84,0.06); }
.memo-status-opt .memo-sdot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex-shrink: 0; }
.memo-status-opt-check { margin-left: auto; color: var(--memo-teal, #5A9A9C); display: inline-flex; }

/* Memo is not Maps: the center-split "Aggiorna itinerario" pill is irrelevant here. */
.sidebar-panel[data-section="memo"] .tp-panel-refresh { display: none !important; }

/* link row */
.memo-opt-link-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: stretch; }
.memo-opt-input { flex: 1 1 14rem; min-width: 0; border: 1px solid rgba(36, 59, 94, 0.18); border-radius: 9px; padding: 0.6rem 0.8rem; font-family: var(--font); font-size: 0.92rem; color: #243B5E; background: #fff; outline: none; transition: border-color 0.15s; }
.memo-opt-input:focus { border-color: #243B5E; }
/* Tratta + orari (transport): two input rows, arrow between from/to */
.memo-opt-route { display: flex; align-items: center; gap: var(--space-sm); }
.memo-opt-route + .memo-opt-route { margin-top: var(--space-sm); }
.memo-opt-route-arrow { flex: 0 0 auto; color: var(--muted); font-weight: 800; }
.memo-opt-route--times .memo-opt-time { flex: 1 1 0; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.memo-opt-time > span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.memo-opt-route--times .memo-opt-input { flex: 1 1 auto; }
.memo-opt-open { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid rgba(36,59,94,0.2); border-radius: 9px; background: #fff; color: #243B5E; font-family: var(--font); font-weight: 700; font-size: 0.9rem; padding: 0 1rem; cursor: pointer; transition: background 0.15s, opacity 0.15s; }
.memo-opt-open:hover { background: #FBF3C6; }
.memo-opt-open[disabled] { opacity: 0.4; cursor: default; }

/* category cards */
.memo-opt-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.8rem, 1fr)); gap: 0.5rem; }
.memo-opt-cat { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.5rem 0.35rem; border: 1.5px solid rgba(36, 59, 94, 0.15); border-radius: 10px; background: #fff; cursor: pointer; font-family: var(--font); transition: border-color 0.15s, background 0.15s; }
.memo-opt-cat-ic { width: 1.8rem; height: 1.8rem; border-radius: 8px; display: grid; place-items: center; background: rgba(36, 59, 94, 0.07); color: var(--muted); transition: background 0.15s, color 0.15s; }
.memo-opt-cat-ic svg { width: 1rem; height: 1rem; }
.memo-opt-cat-lb { font-size: 0.76rem; font-weight: 700; color: #243B5E; }
.memo-opt-cat.is-sel { border-color: #243B5E; background: #FBF3C6; }
.memo-opt-cat.is-sel .memo-opt-cat-ic { background: #243B5E; color: #fff; }

/* status pills */
.memo-opt-status { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.memo-opt-st { display: inline-flex; align-items: center; gap: 0.45rem; border: 1.5px solid rgba(36, 59, 94, 0.15); border-radius: 9px; background: #fff; padding: 0.38rem 0.7rem; font-family: var(--font); font-size: 0.82rem; font-weight: 700; color: #243B5E; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.memo-opt-st-dot { flex: 0 0 auto; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--dot, #9CA3AF); }
.memo-opt-st.is-sel { border-color: #243B5E; background: #FBF3C6; }
.memo-opt-st-check { display: inline-flex; color: #243B5E; }
.memo-opt-st-check svg { width: 0.85rem; height: 0.85rem; }

/* day / cost row */
.memo-opt-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--space-sm); }
.memo-opt-field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.memo-opt-select { border: 1px solid rgba(36, 59, 94, 0.18); border-radius: 9px; padding: 0.6rem 0.7rem; font-family: var(--font); font-size: 0.9rem; font-weight: 600; color: #243B5E; background: #fff; outline: none; cursor: pointer; }
.memo-opt-select:focus { border-color: #243B5E; }
.memo-opt-cost { display: flex; align-items: center; gap: 0.4rem; border: 1px solid rgba(36, 59, 94, 0.18); border-radius: 9px; padding: 0 0.7rem; background: #fff; }
.memo-opt-cost:focus-within { border-color: #243B5E; }
.memo-opt-cost-cur { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.memo-opt-cost-input { flex: 1 1 0; min-width: 0; border: none; outline: none; background: none; font-family: var(--font); font-size: 0.9rem; font-weight: 700; color: var(--text); padding: 0.65rem 0; }
/* cost + "Totale / A notte" segmented toggle */
.memo-opt-cost-row { display: flex; gap: var(--space-sm); align-items: stretch; flex-wrap: wrap; }
.memo-opt-cost-row .memo-opt-cost { flex: 1 1 8rem; }
.memo-opt-costtype { display: inline-flex; flex: 0 0 auto; align-items: center; background: rgba(36,59,94,0.08); border-radius: 9px; padding: 3px; gap: 2px; }
.memo-opt-ct { border: none; background: none; font-family: var(--font); font-size: 0.82rem; font-weight: 700; color: var(--muted); padding: 0.4rem 0.75rem; border-radius: 7px; cursor: pointer; transition: background 0.12s, color 0.12s; }
.memo-opt-ct.is-sel { background: #EFD06A; color: #243B5E; box-shadow: none; }
.memo-cost-unit { font-weight: 600; color: var(--muted); font-size: 0.85em; margin-left: 1px; }
.memo-opt-costtype:empty { display: none; }
/* "Giorni" header row with the Noleggio flag (transport) to the right. */
.memo-opt-eyebrow-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.memo-opt-rental { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid rgba(36,59,94,0.2); background: #fff; border-radius: 8px; padding: 0.25rem 0.65rem; font-family: var(--font); font-size: 0.78rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: border-color 0.12s, color 0.12s; }
.memo-opt-rental.is-on { border-color: #243B5E; color: #243B5E; background: #FBF3C6; }
.memo-opt-rental-box { width: 1rem; height: 1rem; border-radius: 5px; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.memo-opt-rental.is-on .memo-opt-rental-box { background: #243B5E; color: #fff; border-color: #243B5E; }
.memo-opt-rental-box svg { width: 0.7rem; height: 0.7rem; }

/* comment */
.memo-opt-textarea { border: 1px solid rgba(36, 59, 94, 0.18); border-radius: 9px; padding: 0.6rem 0.8rem; font-family: var(--font); font-size: 0.92rem; color: #243B5E; background: #fff; outline: none; resize: vertical; min-height: 3.8rem; transition: border-color 0.15s; }
.memo-opt-textarea:focus { border-color: #243B5E; }

/* footer */
.memo-opt-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: rgba(36, 59, 94, 0.04); border-top: 1px solid rgba(36, 59, 94, 0.1); }
.memo-opt-cancel { border: none; background: none; font-family: var(--font); font-size: 0.92rem; font-weight: 700; color: var(--muted); cursor: pointer; padding: 0.55rem 0.9rem; border-radius: 9px; transition: background 0.12s, color 0.12s; }
.memo-opt-cancel:hover { background: #FBF3C6; color: #243B5E; }
.memo-opt-save { border: none; background: #EFD06A; color: #243B5E; font-family: var(--font); font-size: 0.92rem; font-weight: 800; cursor: pointer; padding: 0.6rem 1.3rem; border-radius: 9px; transition: filter 0.15s; }
.memo-opt-save:hover { filter: brightness(1.05); }

/* ── Memo mobile cards (Vista 4) — "accento stato": each option is a
      tappable card with a status-colored left border. Tap → detail sheet. ── */
.memo-cards { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-sm); }
.memo-card { background: var(--white); border-radius: 15px; border-left: 4px solid var(--st, var(--text)); box-shadow: 0 1px 4px rgba(0,62,84,0.08); padding: var(--space-sm) var(--space-md); cursor: pointer; display: flex; flex-direction: column; gap: var(--space-xs); }
.memo-card--scartato { opacity: 0.6; }
.memo-card--scartato .memo-card-name { text-decoration: line-through; }
.memo-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.memo-card-name { font-weight: 800; color: var(--text); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-card-meta { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.memo-card-status { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; font-weight: 700; }
.memo-card-status .memo-sdot { width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.memo-card-day { background: rgba(0,62,84,0.06); color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; font-weight: 600; }
.memo-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); border-top: 1px dashed rgba(0,62,84,0.14); padding-top: var(--space-xs); margin-top: 2px; }
.memo-card-cost { font-size: 1.15rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.memo-share-av--mini { width: 1.6rem; height: 1.6rem; }
.memo-card-cat { width: 1.6rem; height: 1.6rem; border-radius: 7px; flex-shrink: 0; }
.memo-card-comment { font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.memo-card-route { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: #0A3B4D; }
.memo-card-route svg { flex: 0 0 auto; color: #0A3B4D; }
/* Tratta cell (desktop table): route on top, times muted underneath */
.memo-tratta { display: inline-flex; flex-direction: column; gap: 1px; cursor: pointer; line-height: 1.2; }
.memo-tratta-route { font-weight: 600; color: var(--text); }
.memo-tratta-time { font-size: 0.78em; color: var(--muted); font-variant-numeric: tabular-nums; }
.memo-card-top .memo-card-name { flex: 1; min-width: 0; }
.memo-card-grip { flex-shrink: 0; color: rgba(0,62,84,0.3); cursor: grab; font-size: 0.9rem; line-height: 1; letter-spacing: -3px; padding: 2px 4px; touch-action: none; user-select: none; }
.memo-card-grip:active { cursor: grabbing; }
.memo-card--dragging { opacity: 0.5; }
.memo-card--drop { outline: 2px dashed var(--memo-teal, #5A9A9C); outline-offset: -2px; }

/* Mobile: the detail modal rises from the bottom as a sheet. */
@media (max-width: 767px) {
    .memo-opt-overlay { align-items: flex-end; padding: 0; }
    .memo-opt { width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .memo-opt-head-shared .memo-share-name { display: none; }  /* avatar only in tight header */
}

/* Memo toast */
.memo-toast { position: fixed; bottom: var(--space-md); left: 50%; transform: translateX(-50%) translateY(10px); background: var(--text); color: var(--bg); padding: var(--space-xs) var(--space-md); border-radius: var(--radius); font-size: var(--text-xs); opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 9999; pointer-events: none; white-space: nowrap; font-family: var(--font); }
.memo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.memo-toast-error { background: #e74c3c; }

/* Memo controls */
.memo-ctrl-group { display: flex; align-items: center; gap: 4px; }
.memo-ctrl-btn { display: inline-flex; align-items: center; gap: var(--space-xs); background: var(--white); border: 1px solid rgba(0,62,84,0.1); border-radius: var(--radius); padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); color: var(--muted); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; font-family: var(--font); }
.memo-ctrl-btn:hover { background: rgba(0,62,84,0.04); }
.memo-ctrl-btn.active { background: rgba(0,62,84,0.04); border-color: var(--text); color: var(--text); font-weight: 600; }
.memo-ctrl-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--text); color: var(--bg); border-radius: 10px; font-size: var(--text-xs); font-weight: 700; min-width: 17px; height: 17px; padding: 0 4px; line-height: 1; }

/* Memo dropdowns */
.memo-dropdown-wrap { position: relative; }
.memo-dropdown { position: absolute; top: calc(100% + 4px); left: 0; background: var(--white); border: 1px solid rgba(0,62,84,0.1); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.1); min-width: 200px; z-index: 200; padding: var(--space-xs) 0; font-size: var(--text-xs); font-family: var(--font); }
.memo-dd-title { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.memo-dd-item { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); cursor: pointer; color: var(--text); transition: background 0.1s; }
.memo-dd-item:hover { background: rgba(0,62,84,0.04); }
.memo-dd-checkmark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1.5px solid rgba(0,62,84,0.2); border-radius: 3px; flex-shrink: 0; color: var(--bg); transition: background 0.1s, border-color 0.1s; }
.memo-dd-check.active .memo-dd-checkmark { background: var(--text); border-color: var(--text); }
.memo-dd-back { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); color: var(--muted); cursor: pointer; border-bottom: 1px solid rgba(0,62,84,0.06); margin-bottom: 2px; }
.memo-dd-back:hover { color: var(--text); }
.memo-dd-clear { display: block; width: 100%; text-align: left; padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); color: #e74c3c; background: none; border: none; border-top: 1px solid rgba(0,62,84,0.06); margin-top: 4px; cursor: pointer; font-family: var(--font); }
.memo-dd-clear:hover { background: rgba(231,76,60,0.04); }
.memo-dd-sep { height: 1px; background: rgba(0,62,84,0.06); margin: 4px 0; }

/* Filter chips */
.memo-filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.memo-filter-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,62,84,0.08); color: var(--text); border-radius: 50px; padding: 3px var(--space-sm); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.memo-filter-chip button { background: none; border: none; cursor: pointer; color: var(--text); padding: 0; display: inline-flex; align-items: center; opacity: 0.6; font-size: var(--text-xs); line-height: 1; margin-left: 2px; }
.memo-filter-chip button:hover { opacity: 1; }

/* Grouped sections */
.memo-section { background: var(--white); border-radius: var(--radius); margin-bottom: var(--space-sm); box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; }
.memo-section-header { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm); border-bottom: 1px solid rgba(0,0,0,0.06); }
.memo-section-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.memo-section-count { display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.08); color: inherit; border-radius: 10px; font-size: var(--text-xs); font-weight: 700; min-width: 20px; height: 20px; padding: 0 var(--space-xs); }
.memo-section-empty { padding: var(--space-md); color: var(--muted); font-size: var(--text-xs); text-align: center; }
.memo-section--depth1 { margin: var(--space-xs) var(--space-sm); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.memo-section--depth1 .memo-section-header { padding: var(--space-xs) var(--space-sm); }
.memo-section--depth1 .memo-section-label, .memo-section--depth1 .memo-cat-badge { font-size: var(--text-xs); }
/* Group subtotal — pushed to the right edge of the section header (sum of ALL options in the group, scartati included). */
.memo-section-subtotal { margin-left: auto; font-size: var(--text-xs); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; padding-left: var(--space-sm); white-space: nowrap; }

/* Footer — option counts + selected total (sum of "Scelto" only); the bridge to Budget. */
.memo-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-top: 1px solid rgba(0,62,84,0.10); background: rgba(255,255,255,0.4); }
.memo-foot:empty { display: none; }
.memo-foot-counts { font-size: var(--text-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.memo-foot-total { display: inline-flex; align-items: baseline; gap: var(--space-xs); }
.memo-foot-total-lbl { font-size: var(--text-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.memo-foot-total b { font-size: 1.05rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

/* Day picker */
.memo-day-picker { background: var(--white); border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,0.14); padding: var(--space-sm); min-width: 240px; max-width: 310px; font-family: var(--font); }
.memo-dp-header { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em; margin-bottom: var(--space-xs); }
.memo-dp-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.memo-dp-day { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius); border: 1px solid rgba(0,62,84,0.1); background: var(--white); font-size: var(--text-xs); cursor: pointer; color: var(--text); transition: background 0.1s; white-space: nowrap; font-family: var(--font); }
.memo-dp-day:hover { background: rgba(0,62,84,0.04); border-color: var(--text); }
.memo-dp-start, .memo-dp-end { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; font-weight: 600; }
.memo-dp-in-range { background: rgba(0,62,84,0.08); border-color: rgba(0,62,84,0.12); color: var(--text); }
.memo-dp-footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-sm); padding-top: var(--space-xs); border-top: 1px solid rgba(0,62,84,0.06); }
.memo-dp-clear { background: none; border: none; color: #e74c3c; font-size: var(--text-xs); cursor: pointer; font-family: var(--font); padding: 0; }
.memo-dp-clear:hover { text-decoration: underline; }
.memo-dp-confirm { background: var(--text); color: var(--bg); border: none; border-radius: var(--radius); padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); font-weight: 600; cursor: pointer; font-family: var(--font); transition: background 0.15s; }
.memo-dp-confirm:hover { background: #00516e; }

/* Filter modal */
.memo-fm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.25); z-index: 10000; backdrop-filter: blur(2px); animation: memoFmFadeIn 0.15s ease; }
@keyframes memoFmFadeIn { from { opacity: 0; } to { opacity: 1; } }
.memo-fm-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1); background: var(--white); border-radius: var(--radius); box-shadow: 0 8px 40px rgba(0,0,0,0.16); width: 420px; max-width: 92vw; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; z-index: 10001; animation: memoFmSlideIn 0.18s cubic-bezier(0.34,1.56,0.64,1); font-family: var(--font); }
@keyframes memoFmSlideIn { from { opacity: 0; transform: translate(-50%,-50%) scale(0.92); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.memo-fm-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-md) var(--space-sm); border-bottom: 1px solid rgba(0,62,84,0.06); flex-shrink: 0; }
.memo-fm-title { font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.memo-fm-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; border-radius: var(--radius); display: inline-flex; line-height: 1; font-size: var(--text-md); transition: color 0.15s, background 0.15s; }
.memo-fm-close:hover { color: var(--text); background: rgba(0,62,84,0.04); }
.memo-fm-body { padding: var(--space-md); overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--space-md); }
.memo-fm-section-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: var(--space-xs); }
.memo-fm-pills { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.memo-fm-pill { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: 50px; border: 1.5px solid rgba(0,62,84,0.12); background: var(--white); font-size: var(--text-xs); font-weight: 500; color: var(--muted); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s; user-select: none; font-family: var(--font); }
.memo-fm-pill:hover { border-color: var(--text); transform: translateY(-1px); }
.memo-fm-pill.active { border-color: transparent; font-weight: 600; }
.memo-fm-pill-check { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.memo-fm-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); border-top: 1px solid rgba(0,62,84,0.06); flex-shrink: 0; }
.memo-fm-clear { background: none; border: none; cursor: pointer; font-size: var(--text-xs); color: #e74c3c; padding: var(--space-xs); font-family: var(--font); font-weight: 500; }
.memo-fm-clear:hover { text-decoration: underline; }
.memo-fm-apply { background: var(--text); color: var(--bg); border: none; border-radius: var(--radius); padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); font-weight: 600; cursor: pointer; font-family: var(--font); transition: background 0.15s; }
.memo-fm-apply:hover { background: #00516e; }

/* ── CHAT PANEL — complete (structure + design system) ── */
.chat-panel-wrap { display: flex; flex-direction: column; height: 100%; font-family: var(--font); }
.chat-divider { height: 1px; background: rgba(0,62,84,0.08); margin: 0; }
.collab-section { padding: var(--space-sm) var(--space-md); }
.collab-row { display: flex; align-items: center; gap: var(--space-xs); }
.collab-avatars-group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; flex: 1; }
.collab-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--text); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700; flex-shrink: 0; border: 2px solid var(--white); }
.invite-btn { padding: var(--space-xs) var(--space-sm); border-radius: 50px; border: 1.5px solid var(--text); background: transparent; color: var(--text); font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s, color 0.2s; font-family: var(--font); }
.invite-btn:hover { background: var(--text); color: var(--bg); }
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); background: var(--bg); }
.chat-empty { color: var(--muted); font-size: var(--text-xs); text-align: center; padding: var(--space-md) 0; }
.chat-msg-wrap { display: flex; align-items: flex-end; gap: 6px; max-width: 84%; }
.chat-msg-wrap.own { align-self: flex-end; justify-content: flex-end; }
.chat-msg-wrap.other { align-self: flex-start; }
.chat-msg-wrap.grouped { margin-top: calc(-1 * var(--space-xs) + 2px); }   /* same author → tight */
.chat-msg-wrap.other.indent { margin-left: 32px; }                         /* align under the avatar slot */
.chat-msg-av { flex: 0 0 auto; align-self: flex-end; display: inline-flex; }
.chat-msg-av .menevo-collab-avatar { width: 26px; height: 26px; }
.chat-msg-av .menevo-collab-avatar__initials { font-size: 0.58rem; }
.chat-msg { position: relative; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius); font-size: var(--text-sm); line-height: 1.45; word-break: break-word; font-family: var(--font); color: var(--text); }
.chat-msg.own { border-bottom-right-radius: 4px; }
.chat-msg.other { border-bottom-left-radius: 4px; }
.chat-msg-t { font-size: 0.6rem; color: rgba(0,62,84,0.45); margin-left: 8px; float: right; position: relative; top: 5px; }
.chat-date-sep { align-self: center; margin: 8px 0 3px; }
.chat-date-sep span { font-size: 0.66rem; font-weight: 700; color: var(--muted); background: rgba(0,62,84,0.07); padding: 3px 12px; border-radius: 999px; }
.chat-input-row { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-top: 1px solid rgba(0,62,84,0.08); }
@media (max-width: 767px) {
    /* #1 Chat (mobile): keep the composer (.chat-input-row) reliably VISIBLE.
       NB: on mobile the chat renders into the floating .tp-chat-dock, NOT a
       .sidebar-panel — the previous .sidebar-panel[data-section="chat"] rule
       matched nothing (no such element exists; togglePanel('chat') routes to the
       dock), which is why the composer stayed hidden. Root fix, dock-scoped:
       (a) .chat-messages had min-height:auto (flex default), so with real message
           history it refused to shrink, overflowed the dock's overflow:hidden box
           and pushed the composer out of view — pin it with min-height:0;
       (b) keep the composer itself from shrinking. */
    .tp-chat-dock .chat-messages { min-height: 0; }
    .tp-chat-dock .chat-input-row { flex-shrink: 0; }
}
@media (max-width: 600px) {
    /* At ≤600px the dock is a bottom sheet flush to bottom:0, and the always-on
       bottom nav (position:fixed; bottom:0; higher z-index) paints ON TOP of it,
       covering the write/send bar ("non si vede dove scrivere"). Reserve the nav
       height inside the wrap so .chat-input-row sits clearly ABOVE the nav while
       .chat-messages scrolls above it. (Between 601–767px the dock floats as a
       card above the nav, so no clearance is needed there.) */
    .tp-chat-dock .chat-panel-wrap {
        box-sizing: border-box;
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
    /* Keyboard open → the bottom nav is hidden (body.tp-keyboard-open), so drop the
       nav-clearance padding; the composer then sits flush above the keyboard (the
       dock re-anchors via interactive-widget=resizes-content) with no dead gap. */
    body.tp-keyboard-open .tp-chat-dock .chat-panel-wrap { padding-bottom: 0; }
}
.chat-plus-menu { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.32); backdrop-filter: blur(2px); z-index: 10000; }
.chat-plus-menu[hidden] { display: none; }
.chat-plus-cards { display: flex; gap: 16px; width: min(640px, 94vw); }
.chat-plus-opt { flex: 1; min-width: 0; min-height: 168px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; padding: 24px 22px; border: 2px solid rgba(0,62,84,0.12); border-radius: 18px; background: var(--white); color: var(--text); cursor: pointer; font-family: var(--font); box-shadow: 0 24px 64px rgba(0,62,84,0.24); transition: border-color 0.15s, background 0.15s, transform 0.12s; }
.chat-plus-opt:hover { border-color: var(--accent); background: #FFFCF0; transform: translateY(-3px); }
.chat-plus-opt svg { width: 34px; height: 34px; color: var(--text); }
.chat-plus-opt .cpo-title { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.01em; line-height: 1.25; }
.chat-plus-opt .cpo-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.4; font-weight: 500; margin-top: auto; }
@media (max-width: 560px) { .chat-plus-cards { flex-direction: column; width: min(420px, 94vw); } .chat-plus-opt { min-height: 0; } }
.chat-text-input { flex: 1; padding: var(--space-sm); border-radius: 50px; border: 1.5px solid rgba(0,62,84,0.15); font-size: var(--text-sm); outline: none; transition: border-color 0.2s; background: rgba(0,62,84,0.02); font-family: var(--font); color: var(--text); }
.chat-text-input:focus { border-color: var(--text); background: var(--white); }
.chat-send-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--text); color: var(--bg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; }
.chat-send-btn:hover { background: #00516e; }

/* Invite modal */
.invite-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.invite-modal-content { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-lg); width: 90%; max-width: 440px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.18); font-family: var(--font); }
.invite-modal-close { position: absolute; top: var(--space-md); right: var(--space-md); background: none; border: none; font-size: var(--text-sm); cursor: pointer; color: var(--muted); line-height: 1; }
.invite-modal-close:hover { color: var(--text); }
.invite-modal-title { font-size: var(--text-md); font-weight: 700; color: var(--text); margin-bottom: var(--space-md); font-family: var(--font); }
.invite-tabs { display: flex; margin-bottom: var(--space-md); border-radius: var(--radius); overflow: hidden; border: 1.5px solid var(--text); }
.invite-tab-btn { flex: 1; padding: var(--space-xs); background: transparent; border: none; color: var(--text); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s; font-family: var(--font); }
.invite-tab-btn.active { background: var(--text); color: var(--bg); }
.invite-tab-btn:not(.active):hover { background: rgba(0,62,84,0.06); }
.invite-field-row { display: flex; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.invite-input { flex: 1; padding: var(--space-sm); border-radius: var(--radius); border: 1.5px solid rgba(0,62,84,0.15); font-size: var(--text-sm); outline: none; transition: border-color 0.2s; font-family: var(--font); color: var(--text); }
.invite-input:focus { border-color: var(--text); }
.invite-action-btn { padding: var(--space-sm) var(--space-md); border-radius: var(--radius); background: var(--text); color: var(--bg); border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; font-family: var(--font); }
.invite-action-btn:hover:not(:disabled) { background: #00516e; }
.invite-action-btn:disabled { opacity: 0.6; cursor: default; }
.invite-gen-btn { width: 100%; padding: var(--space-sm); border-radius: var(--radius); background: transparent; border: 1.5px solid var(--text); color: var(--text); font-size: var(--text-sm); font-weight: 600; cursor: pointer; margin-bottom: var(--space-sm); transition: background 0.2s, color 0.2s; font-family: var(--font); }
.invite-gen-btn:hover:not(:disabled) { background: var(--text); color: var(--bg); }
.invite-gen-btn:disabled { opacity: 0.6; cursor: default; }
.invite-feedback { font-size: var(--text-xs); min-height: 18px; color: var(--muted); font-family: var(--font); }
.invite-feedback-ok { color: #2d7a4a; }
.invite-feedback-error { color: #c0392b; }

/* ── MAPS PANEL — complete (structure + design system) ──
   Container is a flex column so #leaflet-map can flex-grow in the
   fullscreen variant; the timeline list sits below it.
   Map height uses clamp(min, dvh-based, max) so it follows the
   viewport on mobile (dvh accounts for the iOS URL-bar swing) and
   never grows past a reasonable desktop value. The .tp-fullscreen
   override lets the sheet really fill the screen on mobile. */
.maps-panel-container {
    padding: var(--space-sm);
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.maps-panel-title { font-size: var(--text-md); font-weight: 700; color: var(--text); font-family: var(--font); margin: 0 0 var(--space-sm) 0; }
#leaflet-map {
    width: 100%;
    height: clamp(320px, 55dvh, 540px);
    border-radius: var(--radius);
    z-index: 1;
    margin-bottom: var(--space-md);
    flex: 0 0 auto;
}
/* Fullscreen sheet (mobile-only Espandi toggle) — give the map the
   bulk of the panel's vertical space; the timeline below scrolls
   inside the .panel-content overflow chain. */
.sidebar-panel.tp-fullscreen .maps-panel-container { flex: 1 1 auto; }
.sidebar-panel.tp-fullscreen #leaflet-map {
    height: auto;
    flex: 1 1 auto;
    min-height: 55dvh;
    margin-bottom: var(--space-sm);
}
/* Loading is now a small floating pill OVER the map (it lives inside
   .maps-map-wrap, which is position:relative), so it no longer pushes
   the map down or shrinks it — the map stays put while a playful
   route-drawing glyph signals the refresh. Positioning + animation
   are defined in the redesign section further below. */
.map-loading-state { color: var(--text); font-family: var(--font); }
.map-empty-state { padding: var(--space-lg) var(--space-md); text-align: center; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; font-family: var(--font); }
.map-marker { background: var(--text); color: var(--white); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700; border: 2px solid var(--white); box-shadow: 0 2px 6px rgba(0,0,0,0.3); font-family: var(--font); }
.map-marker--home { background: var(--white); color: var(--text); border-color: var(--text); }
.map-marker--transit { background: var(--accent); color: var(--text); border-color: var(--white); }
.vtl { display: flex; flex-direction: column; padding: var(--space-xs) 0 var(--space-md); }
.vtl-row { display: flex; align-items: center; gap: var(--space-sm); border: 1px solid rgba(0,62,84,0.12); border-radius: var(--radius); padding: var(--space-sm) var(--space-md); background: var(--white); font-family: var(--font); }
.vtl-row--home { background: rgba(0,62,84,0.06); border-color: var(--text); }
.vtl-row--transit { background: rgba(249,205,45,0.1); border-color: var(--accent); }
.vtl-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: 700; flex-shrink: 0; background: var(--text); color: var(--bg); font-family: var(--font); }
.vtl-circle--transit { background: var(--accent); color: var(--text); font-size: var(--text-xs); }
.vtl-rhs { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-width: 0; }
.vtl-city { font-size: var(--text-sm); font-weight: 700; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font); }
.vtl-meta { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.vtl-seg { display: flex; align-items: stretch; min-height: 40px; padding-left: var(--space-md); gap: var(--space-sm); }
.vtl-seg-track { width: 40px; flex-shrink: 0; position: relative; }
.vtl-seg-track::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); width: 0; border-left: 2px dashed var(--text); }
.vtl-seg--gap .vtl-seg-track::after { border-left-color: var(--accent); opacity: 0.7; }
.vtl-seg-info { flex: 1; display: flex; align-items: center; }
.vtl-seg-km { font-size: var(--text-xs); color: var(--text); font-weight: 500; font-family: var(--font); }
.vtl-seg-km--gap { color: var(--accent); }

/* ═══════════════════════════════════════════════════════
   MAPS PANEL — REDESIGN VIEW A (docked panel)
   Shared visual language reused by View B (fullscreen) and
   View C (mobile). The Leaflet engine and module-level state
   (Blocco 1) are untouched: this section restyles the chrome
   around the persistent #leaflet-map and re-skins the markers
   and polylines via L.divIcon HTML + polyline options.
   ═══════════════════════════════════════════════════════ */

/* `[hidden]` defensive rule — author rules below set
   `display: flex/grid/...` on these elements, which tie with the
   UA `[hidden] { display: none }` rule on specificity and win on
   cascade order. Without this override, `el.hidden = true` from
   JS leaves the element visible (this was the bug behind the
   stuck "Costruendo il percorso..." overlay). */
.map-loading-state[hidden],
.map-empty-state[hidden],
.maps-summary[hidden],
.map-stops-list[hidden] { display: none !important; }

/* Container in View A is a vertically stacked column with a
   distinct toolbar at the top, the map and its overlay controls
   in the middle, a stats row, and the new timeline at the bottom. */
.maps-panel-container {
    padding: 0;
    gap: 0;
}
/* Same cream panel surface as the other sidebar tabs (budget/pack/memo/
   requirements) so Maps reads consistently rather than on a bare/white bg. */
.sidebar-panel[data-section="maps"] > .panel-content { background: var(--bg); }
.maps-panel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    /* White header band (matches the target mock) — the cream `--bg`
       band read as a heavy stripe under the title. */
    background: var(--white);
    border-bottom: 1px solid rgba(0, 62, 84, 0.08);
    flex: 0 0 auto;
}
.maps-panel-toolbar-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.maps-panel-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 62, 84, 0.55);
    line-height: 1;
}
.maps-panel-trip-name {
    margin: 0;
    font-family: var(--font);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.maps-panel-refresh-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.7rem;
    background: var(--white);
    color: var(--text);
    border: 1px solid rgba(0, 62, 84, 0.15);
    border-radius: 999px;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.maps-panel-refresh-btn:hover {
    background: #fffefa;
    border-color: var(--text);
    box-shadow: 0 1px 4px rgba(0, 62, 84, 0.08);
}
.maps-panel-refresh-btn:active { transform: translateY(1px); }
.maps-panel-refresh-btn svg { display: block; }

/* Map area: wrap that holds the map, the custom controls pill,
   and a small "Il tuo percorso" badge. The control pill floats
   on top-right, away from the OSM attribution. */
/* The legend IS the filter: a collapsible panel (bottom-left, clear of the
   top-left map-type switcher). Closed by default — only the "Livelli" toggle
   shows; expanding reveals the rows, each a clickable layer toggle that dims
   when off. Overlaid (absolute) so it stays out of the panel flex/grid flow. */
.maps-legend {
    position: absolute;
    left: calc(var(--space-sm) + 10px);
    bottom: 30px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    color: var(--brand-navy, #003E54);
    font-size: 0.74rem;
}
.maps-legend-body {
    display: grid;
    gap: 2px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 62, 84, 0.12);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 2px 10px rgba(0, 62, 84, 0.16);
}
.maps-legend.is-collapsed .maps-legend-body { display: none; }
.maps-legend-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-weight: 700;
    color: var(--brand-navy, #003E54);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 62, 84, 0.12);
    border-radius: 999px;
    padding: 5px 11px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 62, 84, 0.16);
    transition: background 0.15s;
}
.maps-legend-head:hover { background: #fff; }
.maps-legend-row {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font: inherit;
    color: inherit;
    font-weight: 600;
    text-align: left;
    background: none;
    border: none;
    border-radius: 7px;
    padding: 4px 8px 4px 6px;
}
button.maps-legend-row { cursor: pointer; transition: opacity 0.15s, background 0.15s; }
button.maps-legend-row:hover { background: rgba(0, 62, 84, 0.06); }
button.maps-legend-row:not(.is-on) { opacity: 0.4; }
button.maps-legend-row:not(.is-on) .maps-legend-line,
button.maps-legend-row:not(.is-on) .maps-legend-pin { filter: grayscale(1); }
.maps-legend-line { width: 22px; height: 0; flex: 0 0 auto; }
.maps-legend-line--tappa { border-top: 3px solid #003E54; }
.maps-legend-line--leg { border-top: 3px dotted #003E54; }
.maps-legend-line--spost { border-top: 3px dashed #5A9A9C; }
.maps-legend-pin { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50% 50% 50% 0; background: #003E54; transform: rotate(-45deg); }

/* Testa sticky della mappa: su desktop è un wrapper TRASPARENTE (display:contents,
   i figli restano item diretti di flex/grid → layout invariato); su mobile sheet
   diventa un blocco sticky: mappa ferma in alto, le tappe scorrono SOTTO. */
.maps-sticky-head { display: contents; }

/* Filtri categoria SEMPRE VISIBILI sopra la mappa (sostituiscono la legenda
   flottante): 4 quadrati cliccabili, stessa logica on/off dei livelli. */
.maps-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-sm) 0;
    flex: 0 0 auto;
}
.maps-filter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.3rem;
    min-height: 56px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid rgba(0, 62, 84, 0.12);
    box-shadow: 0 1px 3px rgba(0, 62, 84, 0.06);
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    line-height: 1.15;
    transition: opacity 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
.maps-filter:hover { border-color: rgba(0, 62, 84, 0.3); }
.maps-filter:not(.is-on) { opacity: 0.4; background: transparent; box-shadow: none; }
.maps-filter:not(.is-on) .maps-filter-sw { filter: grayscale(1); }
.maps-filter-sw { flex: 0 0 auto; }
.maps-filter-sw--tappe  { width: 13px; height: 13px; border-radius: 50% 50% 50% 0; background: #003E54; transform: rotate(-45deg); }
.maps-filter-sw--tratte { width: 22px; height: 0; border-top: 3px solid #003E54; }
.maps-filter-sw--leg    { width: 22px; height: 0; border-top: 3px dotted #003E54; }
.maps-filter-sw--spost  { width: 22px; height: 0; border-top: 3px dashed #5A9A9C; }

/* Pillola "mezzo + tempo" al centro della tratta (stile Google Maps). Ancorata
   su un marker 0×0 → il translate la centra sul punto qualunque sia la larghezza. */
.map-leg-time {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px 2px 5px;
    background: #fff;
    border: 1px solid rgba(0, 62, 84, 0.18);
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 62, 84, 0.22);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    color: #003E54;
    white-space: nowrap;
    line-height: 1;
}
.map-leg-time svg { width: 13px; height: 13px; flex: 0 0 auto; display: block; }
/* Lettered sequence pins (A, B, C…) on the daily-movement points. */
.map-seq-pin {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: #5A9A9C; color: #fff;
    font-size: 12px; font-weight: 700;
    border: 2px solid #fff; border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 62, 84, 0.35);
    transition: transform 0.12s, box-shadow 0.12s;
}
/* Hover-sync highlight: a movement/leg row ↔ its map pins light together. */
.map-seq-pin.mk-active { transform: scale(1.3); box-shadow: 0 0 0 4px rgba(90, 154, 156, 0.45), 0 1px 5px rgba(0, 62, 84, 0.4); }
.map-pin.mk-active { filter: drop-shadow(0 0 5px rgba(90, 154, 156, 0.95)); }
.map-xfer-badge.mk-active { box-shadow: 0 0 0 3px rgba(90, 154, 156, 0.5); }
#daysContainer .maps-tl-leg.is-active,
.maps-tl-leg.is-active { background: rgba(90, 154, 156, 0.14); border-radius: 8px; }
.maps-map-wrap {
    position: relative;
    padding: var(--space-sm) var(--space-sm) 0;
    flex: 0 0 auto;
}
.maps-map-wrap #leaflet-map {
    width: 100%;
    height: clamp(200px, 34dvh, 320px);
    border-radius: 14px;
    margin: 0;
    /* Light base so any out-of-world / not-yet-tiled area reads as map, not a
       grey void. */
    background: #e7eee9;
    box-shadow: 0 1px 0 rgba(0, 62, 84, 0.08), 0 6px 18px rgba(0, 62, 84, 0.10);
}
.maps-map-wrap .leaflet-container { background: #e7eee9; }
/* Minimal warm basemap: paired with the `light_nolabels` tiles (no
   country / continent / city text), a gentle filter pushes the gray
   CARTO palette toward the brand cream so the map reads as the soft
   illustrated map in the target mock rather than a dense street map.
   Applied to the tile pane (not single tiles) to avoid seam banding.
   Tune the sepia/hue/brightness here to dial the warmth. */
.maps-map-wrap .leaflet-tile-pane {
    filter: sepia(0.16) saturate(1.06) hue-rotate(-8deg) brightness(1.05);
}
.maps-map-controls {
    position: absolute;
    top: calc(var(--space-sm) + 10px);
    right: calc(var(--space-sm) + 10px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.maps-map-ctrl-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(0, 62, 84, 0.15);
    background: var(--white);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 62, 84, 0.12);
    transition: background 0.15s, transform 0.08s;
}
.maps-map-ctrl-btn:hover  { background: #fffefa; }
.maps-map-ctrl-btn:active { transform: translateY(1px); }
.maps-map-ctrl-btn svg    { display: block; }
.maps-map-badge {
    position: absolute;
    left: calc(var(--space-sm) + 10px);
    bottom: 10px;
    z-index: 2;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 3px rgba(0, 62, 84, 0.15);
    pointer-events: none;
}

/* Refresh indicator — a compact floating pill at the top of the map.
   It overlays the tiles (does not reflow them) and carries the
   animated route glyph + a short label. */
.map-loading-state {
    position: absolute;
    top: calc(var(--space-sm) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem 0.3rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 62, 84, 0.12);
    box-shadow: 0 4px 16px rgba(0, 62, 84, 0.18);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    animation: mapsLoadIn 0.2s ease-out;
}
.map-loading-state--error {
    white-space: normal;
    max-width: min(80%, 320px);
    text-align: center;
    line-height: 1.3;
    color: #b3261e;
    border-color: rgba(179, 38, 30, 0.25);
}
.map-loading-anim { display: inline-flex; flex: 0 0 auto; }
.map-loading-anim .ml-svg { display: block; }
.map-loading-anim .ml-route {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
    animation: mlDraw 1.9s ease-in-out infinite;
}
.map-loading-text { line-height: 1; }
@keyframes mlDraw {
    0%   { stroke-dashoffset: 64; }
    55%  { stroke-dashoffset: 0; }
    80%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}
@keyframes mapsLoadIn {
    from { opacity: 0; transform: translate(-50%, -4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .map-loading-anim .ml-route { animation: none; stroke-dashoffset: 0; }
    .map-loading-state { animation: none; }
}

/* Drop pins (numbered, navy teardrop). The shape is the rotated
   pseudo-div; the label is a counter-rotated stack so the number
   stays upright. Active state is reserved for future selection. */
.map-pin {
    position: relative;
    width: 40px;
    height: 50px;
    display: block;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
}
.map-pin-shape {
    position: absolute;
    left: 0; top: 0;
    width: 40px; height: 40px;
    background: var(--text);
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
    border: 2px solid var(--white);
    box-sizing: border-box;
}
.map-pin-label {
    position: absolute;
    left: 0; top: 0;
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--bg);
    pointer-events: none;
}
.map-pin-label svg { width: 19px; height: 19px; }
.map-pin--home    .map-pin-shape { background: var(--white); border-color: var(--text); }
.map-pin--home    .map-pin-label { color: var(--text); }
.map-pin--transit .map-pin-shape { background: var(--accent); border-color: var(--white); }
.map-pin--transit .map-pin-label { color: var(--text); }
/* scalo/cambio along a leg — teal pin (matches the transport accent) */
.map-pin--transfer .map-pin-shape { background: #5A9A9C; border-color: var(--white); }
.map-pin--transfer .map-pin-label { color: var(--white); }
/* internal-transfer midpoint badge — small teal disc with the mode glyph,
   centered on the dashed "aggiungi un trasporto" segment. */
.map-xfer-badge {
    width: 30px; height: 30px; border-radius: 50%;
    background: #5A9A9C; border: 2px solid var(--white);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.map-xfer-badge svg { width: 16px; height: 16px; }
/* Per-leg direction arrow — a navy chevron rotated to the travel bearing,
   with a soft white halo so it reads over any basemap. */
.map-leg-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; color: #003E54;
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95));
}
/* Per-leg mode disc — small white pill carrying the transport glyph, centered
   on a tappa/land leg so the means of travel reads at a glance. */
.map-leg-mode {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--white); border: 2px solid #003E54; color: #003E54;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 62, 84, 0.3);
}
.map-leg-mode svg { width: 13px; height: 13px; }
/* Hover-linked highlight (from a timeline row or the marker itself):
   the pin turns accent and lifts/grows slightly so it pops out of the
   cluster. The shape keeps its -45deg rotation, just scaled up. */
.map-pin { transition: filter 0.15s; }
.map-pin-shape { transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.map-pin.is-active { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.32)); z-index: 1000; }
.map-pin.is-active .map-pin-shape { background: var(--accent); border-color: var(--text); transform: rotate(-45deg) scale(1.18); }
.map-pin.is-active .map-pin-label { color: var(--text); }

/* Stats row — three stat cards across, neutral background.
   Numbers are bold, label is muted. The km stat embeds a small
   "km" unit aligned with the baseline of the digits. */
/* Riepilogo sopra l'itinerario: istruzione (tocca tappe/tratte/spostamenti per
   filtrare) + stat compatte in una riga (tappe · giorni · km · tempo). */
.maps-summary {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: var(--space-sm) var(--space-md) 0;
    flex: 0 0 auto;
}
.maps-summary[hidden] { display: none; }
.maps-summary-hint {
    margin: 0;
    font-family: var(--font);
    font-size: 0.8125rem;
    line-height: 1.35;
    color: rgba(0, 62, 84, 0.72);
}
.maps-summary-hint b { font-weight: 700; }
.maps-summary-hint .mc-tappe,
.maps-summary-hint .mc-tratte { color: #003E54; }
.maps-summary-hint .mc-spost  { color: #4E8E90; }
.maps-summary-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid rgba(0, 62, 84, 0.10);
    box-shadow: 0 1px 3px rgba(0, 62, 84, 0.06);
    font-family: var(--font);
    font-size: 0.8125rem;
    color: rgba(0, 62, 84, 0.62);
    font-variant-numeric: tabular-nums;
}
.maps-summary-stats b { font-weight: 700; color: var(--text); }
.maps-summary-stats > span[aria-hidden="true"],
.maps-summary-sep > span[aria-hidden="true"] { color: rgba(0, 62, 84, 0.28); }

/* New timeline: home + numbered stop nodes interleaved with
   connector chips. Each node is a flex row; the connector sits
   between two nodes and aligns its icon to the column of the
   circles via a left padding equal to circle-width + gap. */
.map-stops-list {
    padding: var(--space-sm) var(--space-md) var(--space-md);
    flex: 1 1 auto;
    min-height: 0;
}
.maps-tl {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* The enclosure ("recinto"): a soft cream box. The white tappa cards float
       INSIDE it and pop against the cream (the old white-on-white was flat). */
    background: var(--brand-cream-soft);
    border: 1px solid rgba(0, 62, 84, 0.08);
    border-radius: 18px;
    box-shadow: none;
    padding: var(--space-md);
}
/* Rows are naked (no card border) — a single continuous dotted rail
   in the circle column ties them together. Each row carries a
   full-height segment of the rail in its .maps-tl-rail cell; stacked
   with zero gap they form one unbroken line. The first/last segments
   are trimmed so the line starts/ends at the circle centers. */
.maps-tl-node,
.maps-tl-conn-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font);
}
.maps-tl-node {
    padding: 0.5rem 0.25rem;
    border-radius: 12px;
    /* Align the number/home circle with the TITLE line (the city name), not the
       vertical centre of the title+subtitle block, so circle and name read on
       one horizontal line. */
    align-items: flex-start;
}
.maps-tl-node > .maps-tl-body { padding-top: 0.45rem; }
.maps-tl-node > .maps-tl-pill,
.maps-tl-node > .maps-tl-eyebrow { margin-top: 0.5rem; }
.maps-tl-rail {
    position: relative;
    flex: 0 0 34px;
    width: 34px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.maps-tl-rail::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    border-left: 2px dotted rgba(0, 62, 84, 0.28);
}
.maps-tl > *:first-child .maps-tl-rail::before { top: 50%; }
.maps-tl > *:last-child  .maps-tl-rail::before { bottom: 50%; }

.maps-tl-circle {
    position: relative;
    z-index: 1;                 /* paint over the rail line */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--text);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    flex: 0 0 auto;
    transition: background 0.15s, color 0.15s, transform 0.12s;
}
.maps-tl-circle--home {
    background: var(--text);
    color: var(--accent);       /* gold house on a navy disc */
    border: none;
}
.maps-tl-circle--home svg { width: 16px; height: 16px; }
.maps-tl-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.maps-tl-title {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s;
}
/* mode glyph in the andata/ritorno meta line */
.maps-tl-subtitle { display: flex; align-items: center; }
.maps-tl-sub-ico { flex: 0 0 auto; display: inline-flex; margin-right: 0.32rem; color: rgba(0, 62, 84, 0.55); }
.maps-tl-sub-ico svg { width: 14px; height: 14px; }
.maps-tl-subtitle {
    font-size: 0.75rem;
    color: rgba(0, 62, 84, 0.6);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s;
}
/* "N notti" pill — warm cream, navy text (matches the stat cards). */
.maps-tl-pill {
    flex: 0 0 auto;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: var(--accent-lt);
    color: var(--text);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
/* VIA / CASA — teal text label, no chip background. */
.maps-tl-eyebrow {
    flex: 0 0 auto;
    padding: 0;
    background: none;
    color: #2f8f86;
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Hover / active: the number turns gold, the text darkens and the row
   gets a soft highlight — mirrored on the map pin (.map-pin.is-active),
   driven from either side by _setStopActive(). */
.maps-tl-node--stop { cursor: pointer; transition: background 0.15s; }
.maps-tl-node--stop:hover,
.maps-tl-node--stop.is-active { background: rgba(0, 62, 84, 0.05); }
.maps-tl-node--stop:hover .maps-tl-circle,
.maps-tl-node--stop.is-active .maps-tl-circle {
    background: var(--accent);
    color: var(--text);
    transform: scale(1.08);
}
.maps-tl-node--stop:hover .maps-tl-subtitle,
.maps-tl-node--stop.is-active .maps-tl-subtitle { color: var(--text); }

/* Transport connector — a light, INDENTED sub-item (not a heavy white
   pill). It hangs off the timeline to the right of the dotted rail so the
   mezzo reads as a connector between tappe rather than a stop itself.
   No border / no shadow: just a faint tint + muted text. */
.maps-tl-conn-row { gap: 0; padding: 0.1rem 0; }
.maps-tl-conn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 30px;
    padding: 0.18rem 0.5rem;
    border-radius: 8px;
    background: rgba(0, 62, 84, 0.05);
    border: none;
    box-shadow: none;
    color: rgba(0, 62, 84, 0.6);
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    width: -moz-fit-content;
    width: fit-content;
}
.maps-tl-conn-icon { display: inline-flex; color: rgba(0, 62, 84, 0.5); }
.maps-tl-conn-icon svg { width: 14px; height: 14px; }
.maps-tl-conn-text { line-height: 1.1; }
/* Mode chosen on the daily card → soft teal hint (matches transport accent). */
.maps-tl-conn--mode { background: rgba(90, 154, 156, 0.12); color: #3f7e7c; }
.maps-tl-conn--mode .maps-tl-conn-icon { color: #5A9A9C; }

/* Indented "N tratte verso X" block — the inter-tappa journey decomposed
   into one row per leg, hanging off the main dotted rail. Route ("from →
   to") is left-aligned; the mode SVG is pushed to the right. No distance. */
.maps-tl-legs-row { display: flex; align-items: stretch; gap: 0; }
.maps-tl-legs {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0.1rem 0 0.4rem;
    padding-left: 14px;
    border-left: 2px solid rgba(0, 62, 84, 0.14);
}
.maps-tl-legs-head {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-navy, #003E54);
    padding: 0.1rem 0 0.3rem;
}
.maps-tl-leg {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0;
    border-top: 1px solid rgba(0, 62, 84, 0.07);
}
.maps-tl-leg:first-of-type { border-top: none; }
.maps-tl-leg-route {
    font-size: 0.85rem;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.maps-tl-leg-route b { font-weight: 700; }
.maps-tl-leg-arr { color: rgba(0, 62, 84, 0.4); font-weight: 600; margin: 0 0.3rem; }
/* Leg / movement rows are clickable (click = isolate that movement on the map). */
.maps-tl-leg { cursor: pointer; }
/* "Mostra tutto" chip — appears top-center while a movement is isolated. */
.maps-focus-clear {
    position: absolute; top: calc(var(--space-sm) + 4px); left: 50%; transform: translateX(-50%);
    z-index: 1000; display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.55rem 0.45rem 0.9rem; border: 1px solid rgba(0, 62, 84, 0.1); border-radius: 999px;
    background: #fff; color: var(--brand-navy, #003E54);
    font-family: var(--font); font-size: 0.82rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 62, 84, 0.16);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.maps-focus-clear span {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    border-radius: 50%; background: rgba(0, 62, 84, 0.08); color: var(--brand-navy, #003E54);
    font-size: 0.62rem; opacity: 1;
}
.maps-focus-clear:hover { background: var(--brand-cream-soft, #fdf6e6); box-shadow: 0 6px 20px rgba(0, 62, 84, 0.22); transform: translateX(-50%) translateY(-1px); }
/* The chip only exists while a movement is isolated — the [hidden] attribute
   must win over the display above (it set inline-flex, which defeats it). */
.maps-focus-clear[hidden] { display: none; }

/* ── Base-map (Mappa / Stradale / Satellite) picker — Menevo skin over Leaflet ── */
.leaflet-control-layers {
    border: 1px solid rgba(0, 62, 84, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 62, 84, 0.15) !important;
    overflow: hidden; background: #fff !important;
}
.leaflet-control-layers-toggle {
    width: 38px !important; height: 38px !important; background-size: 20px 20px !important;
    border-radius: 12px !important;
}
.leaflet-control-layers-expanded {
    padding: 10px 14px 10px 12px !important; font-family: var(--font);
    color: var(--brand-navy, #003E54); min-width: 132px;
}
.leaflet-control-layers-expanded label {
    display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 0.85rem; font-weight: 600;
    color: var(--brand-navy, #003E54); cursor: pointer;
}
.leaflet-control-layers-selector { accent-color: var(--brand-navy, #003E54); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.leaflet-control-layers-separator { border-top-color: rgba(0, 62, 84, 0.1) !important; }
/* Lettered chip prefixed to a daily-movement city — mirrors its map seq-pin
   (A, B, C…) so the row and the map pin read as the same point. */
.maps-tl-letter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; margin-right: 0.28rem; vertical-align: -2px;
    background: #5A9A9C; color: #fff;
    font-size: 9.5px; font-weight: 700; line-height: 1;
    border-radius: 50%;
}
.maps-tl-leg-mode { font-size: 0.8rem; color: rgba(0, 62, 84, 0.42); font-weight: 600; white-space: nowrap; }
.maps-tl-leg-icon { margin-left: auto; flex: 0 0 auto; display: inline-flex; color: var(--text); }
.maps-tl-leg-icon svg { width: 18px; height: 18px; }

/* Day divider inside a legs block — separates movements that happen on
   different days (e.g. day trips from a multi-day base). */
.maps-tl-day-divider {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-navy, #003E54);
    padding: 0.28rem 0.5rem;
    margin: 0.35rem 0 0.25rem;
    background: rgba(249, 205, 45, 0.30);
    border-radius: 6px;
}
.maps-tl-day-divider:first-child { margin-top: 0.1rem; }
/* A whole-chain row (day trip) can be long → let it wrap instead of being
   cut off with an ellipsis; keep the mode/icon top-aligned. */
.maps-tl-leg--chain { align-items: flex-start; }
.maps-tl-leg--chain .maps-tl-leg-route {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
}
.maps-tl-leg--chain .maps-tl-leg-mode,
.maps-tl-leg--chain .maps-tl-leg-icon { margin-top: 0.1rem; }

/* "N giorni da pianificare" — gentle note for empty days before the return. */
.maps-tl-gap-row { display: flex; align-items: center; gap: 0; padding: 0.35rem 0; }
.maps-tl-gap {
    margin-left: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.01em;
    color: rgba(0, 62, 84, 0.4);
}

/* ════════════════════════════════════════════════════════════════
   Itinerary cards (redesign) — each tappa is its own white collapsible
   box hanging off the rail's numbered navy node; the "tratte verso X"
   move between two tappe is a cream collapsible box with a small leg-
   count node. Movements render as a mode header over a VERTICAL list of
   points (filled navy dot = tappa, lettered teal dot = waypoint).
   ════════════════════════════════════════════════════════════════ */
.maps-tl-card { align-items: stretch; }
/* node sits at the TOP of the card (next to the title), not centred on a tall
   expanded card */
.maps-tl-card .maps-tl-rail { align-items: flex-start; }
.maps-tl-card .maps-tl-circle { margin-top: 0.6rem; }
.maps-tl-card--conn .maps-tl-circle { margin-top: 0; }
.maps-tl-cardbody {
    flex: 1 1 auto; min-width: 0;
    background: #fff;
    border: 1px solid rgba(0, 62, 84, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 62, 84, 0.07);
    overflow: hidden;
}
/* Connector: a subtle white→cream panel so it reads as its own box against the
   cream enclosure (not blended into it). */
.maps-tl-card--conn .maps-tl-cardbody {
    background: linear-gradient(180deg, #fff, rgba(253, 243, 215, 0.55));
    border-color: rgba(0, 62, 84, 0.08);
    box-shadow: 0 3px 10px rgba(0, 62, 84, 0.05);
}
.maps-tl-cardhead {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.85rem 1rem;
}
.maps-tl-cardhead[data-tl-toggle], .maps-tl-cardhead[data-tl-focus] { cursor: pointer; }
.maps-tl-cardtitle { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.maps-tl-city { font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1.05; letter-spacing: -0.01em; }
.maps-tl-dates { font-size: 0.95rem; font-weight: 600; color: rgba(0, 62, 84, 0.45); }
.maps-tl-notti {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.32rem;
    padding: 0.32rem 0.7rem; border-radius: 999px;
    background: var(--accent-lt, #FDF3D7); color: var(--text);
    font-weight: 700; font-size: 0.8rem; white-space: nowrap;
}
.maps-tl-notti svg { color: var(--text); }
.maps-tl-chev { flex: 0 0 auto; color: rgba(0, 62, 84, 0.4); display: inline-flex; align-items: center; transition: transform 0.18s; }
/* chevron is a <button> now (collapse) — reset its chrome */
button.maps-tl-chev { border: none; background: none; padding: 3px; border-radius: 8px; cursor: pointer; }
button.maps-tl-chev:hover { background: rgba(0, 62, 84, 0.07); color: var(--text); }
.maps-tl-card.is-open .maps-tl-chev { transform: rotate(180deg); }
.maps-tl-summary { padding: 0 1rem 0.95rem; }
.maps-tl-content { display: none; padding: 0 1rem 0.9rem; }
.maps-tl-card.is-open .maps-tl-summary { display: none; }
.maps-tl-card.is-open .maps-tl-content { display: block; }
.maps-tl-card--conn .maps-tl-content { padding: 0.1rem 1rem 0.7rem; }
.maps-tl-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.maps-tl-chip {
    display: inline-flex; align-items: center;
    padding: 0.35rem 0.75rem; border-radius: 999px;
    background: rgba(0, 62, 84, 0.05); color: rgba(0, 62, 84, 0.65);
    font-weight: 600; font-size: 0.8rem;
}
/* active (hover-synced from the map pin) */
.maps-tl-card--stop.is-active .maps-tl-cardbody { box-shadow: 0 0 0 2px rgba(249, 205, 45, 0.6), 0 1px 4px rgba(0, 62, 84, 0.06); }
.maps-tl-card--stop.is-active .maps-tl-circle { background: var(--accent); color: var(--text); }
/* tappa card / connector card / andata-ritorno node isolated on the map (click)
   — fixed teal ring */
.maps-tl-card--stop.is-focused .maps-tl-cardbody { box-shadow: 0 0 0 2px rgba(90, 154, 156, 0.6), 0 8px 24px rgba(0, 62, 84, 0.07); }
.maps-tl-card--conn.is-focused .maps-tl-cardbody { box-shadow: 0 0 0 2px rgba(90, 154, 156, 0.6), 0 3px 10px rgba(0, 62, 84, 0.05); }
/* the rail node IS the map-isolate trigger now (tappa number / connector dot) */
.maps-tl-circle[data-tl-focus], .maps-tl-cnode[data-tl-focus] { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, background 0.12s; }
.maps-tl-circle[data-tl-focus]:hover, .maps-tl-cnode[data-tl-focus]:hover { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(90, 154, 156, 0.28); }
.maps-tl-node--home { cursor: pointer; border-radius: 12px; transition: background 0.15s; }
.maps-tl-node--home:hover { background: rgba(90, 154, 156, 0.07); }
.maps-tl-node--home.is-focused { background: rgba(90, 154, 156, 0.14); }

/* connector node + header */
/* connector rail node — a small plain hollow teal dot (no number; the leg
   count lives in the header text "N tratte verso X"). */
.maps-tl-cnode {
    position: relative; z-index: 1; margin-top: 0.9rem;
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--white); border: 3px solid #5A9A9C; flex: 0 0 auto;
}
.maps-tl-conntitle { flex: 1 1 auto; min-width: 0; font-size: 1.02rem; font-weight: 600; color: var(--text); }
.maps-tl-conntitle b { font-weight: 800; }
.maps-tl-connmode { flex: 0 0 auto; color: var(--text); display: inline-flex; }
.maps-tl-connmode svg { width: 19px; height: 19px; }

/* movements section inside a stop card */
.maps-tl-movessec-head {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #2f8f86; margin: 0.1rem 0 0.2rem;
}
.maps-tl-content .maps-tl-day-divider {
    display: block; background: var(--accent-lt, #FDF3D7); color: var(--text);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 0.45rem 0.8rem; border-radius: 10px; margin: 0.8rem 0 0.55rem;
}

/* one movement = mode header + vertical points */
.maps-tl-move { padding: 0.15rem 0.35rem; margin: 0 -0.35rem; border-radius: 10px; cursor: pointer; transition: background 0.12s; }
.maps-tl-move:hover, .maps-tl-move.is-active { background: rgba(90, 154, 156, 0.10); }
.maps-tl-move.is-focused { background: rgba(90, 154, 156, 0.16); }
.maps-tl-move + .maps-tl-move { margin-top: 0.55rem; }
.maps-tl-move-head { display: flex; align-items: center; gap: 0.4rem; margin: 0.3rem 0 0.45rem; color: rgba(0, 62, 84, 0.55); }
.maps-tl-move-ico { display: inline-flex; color: var(--text); }
.maps-tl-move-ico svg { width: 18px; height: 18px; }
.maps-tl-move-lbl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; }
.maps-tl-move-loop { display: inline-flex; color: rgba(0, 62, 84, 0.4); }
.maps-tl-pts { display: flex; flex-direction: column; gap: 0.4rem; }
.maps-tl-pt { display: flex; align-items: center; gap: 0.7rem; }
.maps-tl-ptdot {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.66rem; font-weight: 700; box-sizing: border-box;
}
.maps-tl-ptdot.is-wp { background: #5A9A9C; color: #fff; }
.maps-tl-ptdot.is-tappa { width: 15px; height: 15px; margin: 0 3.5px; background: var(--text); }
.maps-tl-ptname { font-size: 0.98rem; font-weight: 600; color: var(--text); }
.maps-tl-ptname.is-tappa { font-weight: 800; letter-spacing: 0.01em; }

/* numbered legs inside a connector card (and the home-node leg block) */
.maps-tl-cleg { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0; cursor: pointer; }
.maps-tl-card--conn .maps-tl-cleg + .maps-tl-cleg { border-top: 1px dashed rgba(0, 62, 84, 0.14); }
.maps-tl-cleg:hover, .maps-tl-cleg.is-active { background: rgba(90, 154, 156, 0.10); }
.maps-tl-cleg.is-focused { background: rgba(90, 154, 156, 0.16); }
.maps-tl-cleg-n { flex: 0 0 auto; width: 1rem; text-align: center; color: rgba(0, 62, 84, 0.4); font-weight: 700; font-size: 0.82rem; }
.maps-tl-cleg-route { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.55rem; font-size: 1rem; color: var(--text); overflow: hidden; }
.maps-tl-cleg-route b { display: inline-flex; align-items: center; }
/* hollow navy waypoint dot inside a leg row (mirrors the map's tappa-leg dots) */
.maps-tl-wpdot { display: inline-block; width: 13px; height: 13px; margin-right: 0.4rem; background: #fff; border: 2.5px solid #003E54; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box; }
.maps-tl-cleg-route b { font-weight: 700; white-space: nowrap; }
.maps-tl-cleg-arr { color: rgba(0, 62, 84, 0.35); }
.maps-tl-cleg-mode { flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; color: rgba(0, 62, 84, 0.5); }
.maps-tl-cleg-ico { flex: 0 0 auto; color: var(--text); display: inline-flex; }
.maps-tl-cleg-ico svg { width: 18px; height: 18px; }

/* Fullscreen variant (Espandi on desktop). When .tp-fullscreen is
   on the side panel, give the map the full vertical height. */
.sidebar-panel.tp-fullscreen .maps-map-wrap { flex: 1 1 auto; min-height: 0; }
.sidebar-panel.tp-fullscreen .maps-map-wrap #leaflet-map {
    height: 100%;
    min-height: 0;
}

/* The "Espandi" toggle in the panel header is mobile-only by
   default in this codebase. For the Maps panel we make it
   available on desktop too — View B (fullscreen) is part of the
   redesign. */
.sidebar-panel[data-section="maps"] .tp-panel-expand {
    display: inline-flex !important;
}

/* Itinerary wrapper is transparent to layout in the docked view
   (stats row + timeline keep flowing in the container's column);
   it only materializes as the right column in Vista B. */
.maps-itinerary { display: contents; }
.maps-itinerary-eyebrow { display: none; }

/* maps-panel.js fills #panelSubtitle for the Vista B top bar and
   clears its `hidden` attribute; keep it out of the DOCKED chrome
   header (the docked toolbar already shows the trip name). */
.sidebar-panel[data-section="maps"]:not(.tp-center-split) .tp-panel-subtitle { display: none; }

/* ═══════════════════════════════════════════════════════
   MAPS PANEL — VISTA B (center-split, tablet/desktop ≥768)
   ⤢ toggles .tp-center-split on #sidebarPanel + .maps-expanded
   on <body>. The panel grows to fill the central workspace (rail
   + app header stay visible); its body becomes a top bar + a
   map|itinerary grid. Reuses every Prompt 1 component (pins,
   polylines, RouteTimeline, stats, map controls) — only the
   chrome around them changes. Mobile keeps the legacy
   .tp-fullscreen sheet (the JS never adds tp-center-split <768).
   ═══════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .sidebar-panel.tp-center-split {
        left: var(--sidebar-w) !important;
        right: 0 !important;
        width: auto !important;            /* beat the inline docked width */
        box-shadow: none;
        border-left: 1px solid rgba(0, 62, 84, 0.08);
        z-index: 1055;
    }
    .sidebar-panel.tp-center-split .sidebar-resize-handle { display: none; }

    /* Top bar reveals the rich subtitle + the Aggiorna itinerario pill. */
    .sidebar-panel.tp-center-split .tp-panel-subtitle { display: block; }
    .sidebar-panel.tp-center-split .tp-panel-refresh   { display: inline-flex; }

    /* Body fills the height; the maps container becomes the split grid. */
    .sidebar-panel.tp-center-split > .panel-content { padding: 0; }
    .sidebar-panel.tp-center-split .maps-panel-container {
        display: grid;
        grid-template-columns: 1.45fr 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        height: 100%;
        min-height: 0;
        gap: 0;
    }
    /* The container's own toolbar is redundant — the top bar took over. */
    .sidebar-panel.tp-center-split .maps-panel-toolbar { display: none; }

    /* Filtri SOLO sopra la mappa (colonna sinistra); l'itinerario tiene la
       colonna destra piena su entrambe le righe. */
    .sidebar-panel.tp-center-split .maps-filters { grid-column: 1; grid-row: 1; padding: 14px 16px 0; }
    .sidebar-panel.tp-center-split .maps-map-wrap { grid-column: 1; grid-row: 2; }
    .sidebar-panel.tp-center-split .maps-itinerary { grid-column: 2; grid-row: 1 / span 2; }
    .sidebar-panel.tp-center-split #mapEmptyState:not([hidden]) { grid-column: 1; grid-row: 2; }

    /* Left: map fills the column height. */
    .sidebar-panel.tp-center-split .maps-map-wrap {
        height: 100%;
        min-height: 0;
        padding: 16px;
        display: flex;
    }
    .sidebar-panel.tp-center-split .maps-map-wrap #leaflet-map {
        height: 100% !important;
        min-height: 0;
        flex: 1 1 auto;
    }

    /* Right: itinerary column on cream-soft with a hairline divider. */
    .sidebar-panel.tp-center-split .maps-itinerary {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
        /* a touch lighter than the cream .maps-tl enclosure so the recinto reads */
        background: #fffdf6;
        border-left: 1px solid rgba(0, 62, 84, 0.08);
        padding: 18px 20px;
        gap: var(--space-sm);
    }
    .sidebar-panel.tp-center-split .maps-itinerary-eyebrow {
        display: block;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(0, 62, 84, 0.55);
        margin-bottom: 0.25rem;
    }
    /* stats + timeline drop their docked horizontal padding (the column
       already pads); keep them flowing top-aligned in the column. */
    .sidebar-panel.tp-center-split .maps-summary { padding: 0; }
    .sidebar-panel.tp-center-split .map-stops-list { padding: 0; flex: 0 0 auto; }

    /* No route yet → the empty-state spans both columns. */
    .sidebar-panel.tp-center-split #mapEmptyState:not([hidden]) { grid-column: 1 / -1; }

    /* Planner behind the split is hidden (the panel covers it anyway,
       this stops any peek/scroll); restored on reduce. Rail + header
       stay crisp by dropping the dim backdrop. */
    body.maps-expanded .content-area  { visibility: hidden; }
    body.maps-expanded #panelBackdrop { display: none !important; }
}

/* Responsive map heights — the new wrap selector has higher
   specificity than `#leaflet-map`, so the legacy media rules
   below the file wouldn't have applied. Restate them here. */
@media (max-width: 767px) {
    .maps-map-wrap #leaflet-map {
        height: clamp(180px, 30dvh, 280px);
    }
    .maps-panel-toolbar { padding: var(--space-xs) var(--space-sm); }
    .maps-panel-trip-name { font-size: 1rem; }
    .maps-panel-refresh-btn { padding: 0.35rem 0.6rem; font-size: 0.75rem; }
    .maps-summary-hint { font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════
   BOTTOM-SHEET PANELS — mobile (≤767): maps + budget
   Generic sheet mechanics live on .tp-sheet (added by togglePanel
   for sheet-enabled sections). Two states: partial (64dvh) +
   extended (97dvh); grip/header drag (JS) animates ONLY `height`.
   The body scrolls; the scrim blurs + absorbs touches behind.
   Maps-specific bits (toolbar hide, map height, leaflet touch)
   stay scoped to [data-section="maps"].
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Sheet sizing + motion. `height` transitions between states; the
       initial rise still uses translateY (inherited from .open). */
    .sidebar-panel.tp-sheet {
        height: 64dvh !important;
        overflow: hidden !important;                 /* grip + header fixed; body scrolls */
        transition: transform 0.28s ease, height 0.28s ease !important;
    }
    .sidebar-panel.tp-sheet.tp-sheet-expanded { height: 100dvh !important; border-radius: 0 !important; }
    .sidebar-panel.tp-sheet.tp-dragging       { transition: none !important; }

    /* Keyboard-open anchor is now handled in JS (_tpKeyboardNavGuard): the open
       sheet / chat dock is fitted to the visualViewport (top + height) while the
       keyboard is up. The old CSS `bottom: --tp-kb-inset` pin was removed — it
       double-offset on browsers that ignore interactive-widget, revealing the
       cards behind. Nothing to declare here; kept as a marker. */

    /* Grip + header own the drag gesture so the browser doesn't
       scroll/zoom mid-drag; buttons still receive taps. */
    .sidebar-panel.tp-sheet .tp-panel-drag-handle,
    .sidebar-panel.tp-sheet .tp-panel-header { touch-action: none; }
    .sidebar-panel.tp-sheet .tp-panel-drag-handle {
        height: 0.3125rem;
        margin: 0.625rem auto 0.25rem;
        cursor: grab;
    }
    .sidebar-panel.tp-sheet.tp-dragging .tp-panel-drag-handle { cursor: grabbing; }

    /* ≥44px touch targets for the header actions. */
    .sidebar-panel.tp-sheet .tp-panel-header .tp-panel-expand,
    .sidebar-panel.tp-sheet .tp-panel-header .tp-panel-close,
    .sidebar-panel.tp-sheet .tp-panel-header .panel-close-btn {
        width: 2.75rem !important;
        height: 2.75rem !important;
    }
    /* Budget gets the ⤢ sheet toggle on mobile (maps already shows it). */
    .sidebar-panel[data-section="budget"] .tp-panel-expand { display: inline-flex; }
    /* «Da decidere»: stesso trattamento sheet dei fratelli — respiro laterale
       (la regola generica .tp-sheet>.panel-content lo azzera) + ⤢ toggle su mobile. */
    .sidebar-panel.tp-sheet[data-section="importpoints"] > .panel-content {
        padding: var(--space-sm) var(--space-md) calc(64px + env(safe-area-inset-bottom));
    }
    .sidebar-panel[data-section="importpoints"] .tp-panel-expand { display: inline-flex; }

    /* Body scrolls in both states; overscroll-behavior:contain keeps the
       scroll inside the sheet. Content clears the raised bottom nav. */
    .sidebar-panel.tp-sheet > .panel-content {
        padding: 0 0 calc(64px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* MAPPA FERMA, TAPPE CHE SCORRONO SOTTO (richiesta Matteo, mobile).
       Non sticky-in-scroll (lasciava una striscia scoperta tra header e
       filtri): qui lo scroll ce l'ha SOLO l'itinerario. La testa (filtri +
       mappa) è un blocco fisso del layout; la lista è clippata esattamente
       al proprio bordo superiore → nessuna striscia possibile. */
    .sidebar-panel.tp-sheet[data-section="maps"] > .panel-content {
        display: flex;
        flex-direction: column;
        overflow: hidden;                       /* lo scroll passa all'itinerario */
        padding-bottom: 0;                      /* il clearance della nav va sulla lista */
    }
    .sidebar-panel.tp-sheet[data-section="maps"] .maps-panel-container {
        flex: 1 1 auto;
        min-height: 0;                          /* container flex column (già base) */
    }
    .sidebar-panel.tp-sheet[data-section="maps"] .maps-sticky-head {
        display: block;
        flex: 0 0 auto;
        background: var(--bg);
        box-shadow: 0 6px 12px -8px rgba(0, 62, 84, 0.25);
        position: relative;
        z-index: 2;
    }
    /* Filtri A FILO dell'header: via il padding-top desktop, quadrati compatti. */
    .sidebar-panel.tp-sheet[data-section="maps"] .maps-filters {
        padding: 0.3rem var(--space-sm) 0;
        gap: 0.25rem;
    }
    .sidebar-panel.tp-sheet[data-section="maps"] .maps-filter {
        min-height: 44px;
        padding: 0.3rem 0.25rem;
        gap: 0.25rem;
        font-size: 0.66rem;
    }
    .sidebar-panel.tp-sheet[data-section="maps"] .maps-itinerary {
        display: flex;                          /* era display:contents nel dock */
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    /* Scrim: brand navy + blur over the planner; absorbs touches so a
       drag on the visible planner area can't scroll it. */
    body.tp-sheet-open #panelBackdrop {
        background: rgba(0, 62, 84, 0.42);
        -webkit-backdrop-filter: blur(2px);
                backdrop-filter: blur(2px);
        touch-action: none;
    }
    body.tp-sheet-open .content-area { overflow: hidden !important; }

    /* Lock the page behind an open sheet so touch only moves the sheet,
       not the planner underneath. */
    body.tp-sheet-open, body.tp-panel-open { overflow: hidden !important; }

    /* Sticky strips: drop the desktop negative gutters on the sheet so the
       top bar sits flush full-width at the top of the scroll area instead
       of floating/overlapping the list. */
    .sidebar-panel.tp-sheet .cl-progress,
    .sidebar-panel.tp-sheet .docs-strip {
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
    }
    /* …and kill the container's top padding too. The rule above zeroes the
       strip's compensating negative top-margin, so the container's space-xs
       top padding would otherwise reopen a cream sliver between the panel
       header and the % bar / Aggiungi-documento strip (Bagagli, Checklist,
       Documenti). Pin the strip flush under the header. */
    .sidebar-panel.tp-sheet .documents-container,
    .sidebar-panel.tp-sheet .checklist-container {
        padding-top: 0;
    }

    /* Bottom nav stays VISIBLE above any open sheet; content clears it. */
    .bottom-nav.tp-bottom-nav { z-index: 2001 !important; }
    body.tp-panel-open .sidebar-panel.open > .panel-content {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    /* ── Maps-specific sheet bits ── */
    .sidebar-panel[data-section="maps"] .maps-panel-toolbar { display: none; }
    .sidebar-panel[data-section="maps"] .maps-map-wrap { padding: 0.25rem var(--space-sm) 0; }
    .sidebar-panel[data-section="maps"] .maps-map-wrap #leaflet-map { height: 166px !important; }
    .sidebar-panel[data-section="maps"].tp-sheet-expanded .maps-map-wrap #leaflet-map { height: 34dvh !important; }
    .sidebar-panel[data-section="maps"] .leaflet-container { touch-action: none; }
}

/* ═══════════════════════════════════════════════════════
   DAILY CARDS — index2.html demo card style
   ═══════════════════════════════════════════════════════ */

/* ── Sections inside day card (Good morning, Plans, Good night) ── */
.new-section {
    position: relative;
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: var(--radius);
    margin-top: var(--space-md);
    background: rgba(0,62,84,0.02);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.new-section:hover {
    border-color: var(--text);
    box-shadow: 0 4px 12px rgba(0,62,84,0.08);
}
.new-section-header {
    position: absolute;
    top: -12px; left: 15px;
    background: var(--text);
    color: var(--bg);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.3em 0.8em;
    border-radius: var(--radius);
    z-index: 1;
    font-family: var(--font);
}
.new-section-content {
    padding: var(--space-md) var(--space-sm) var(--space-sm);
}

/* ── Form rows & groups ── */
.new-form-row {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: 0.2rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.new-form-group { flex: 1 1 0; min-width: 0; }
.new-form-group.group-small { flex: 0 1 90px; min-width: 30px; }
.new-form-group.group-medium { flex: 0 1 160px; min-width: 60px; }
.new-form-group.group-cost { flex: 0 1 100px; min-width: 40px; }
.new-form-label {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.3em;
    font-size: var(--text-xs);
    font-family: var(--font);
}
.new-form-input,
.new-form-select {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-family: var(--font);
    background: var(--white);
    color: var(--text);
    outline: none;
    transition: border-color 0.3s;
}
.new-form-input:focus,
.new-form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249,205,45,0.35);
}
.new-currency-symbol {
    display: none;
}

/* ── Compact rows (accommodation/location) ── */
.compact-row {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    align-items: center;
}
.compact-row.secondary {
    margin-top: var(--space-sm);
    padding: 0 var(--space-sm);
}
.compact-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    font-family: var(--font);
}
.compact-input {
    padding: var(--space-xs) var(--space-sm);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: border-color 0.3s;
}
.compact-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249,205,45,0.35);
}
.compact-input[readonly] {
    background: var(--bg);
    cursor: default;
}

/* ── Add buttons (activity/transport) ── */
.add-buttons-container,
.add-section-buttons {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}
.add-section-btn {
    background: var(--text);
    color: var(--bg);
    padding: var(--space-xs) var(--space-md);
    border-radius: 50px;
    font-size: var(--text-xs);
    font-weight: 600;
    font-family: var(--font);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: background 0.2s;
}
.add-section-btn:hover { background: #00516e; }

/* ── Activity items ── */
.activity-compact,
.new-activity-item {
    background: var(--bg);
    border: 1.5px solid rgba(0,62,84,0.12);
    border-radius: 10px;
    padding: var(--space-xs);
    margin-bottom: 6px;
    font-family: var(--font);
}
.activity-type-select {
    background: var(--bg);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: var(--radius);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    font-family: var(--font);
    color: var(--text);
}
.activity-type-select:focus {
    border-color: var(--text);
}

/* ── Transport items ── */
.transport-compact {
    background: var(--bg);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: var(--radius);
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-family: var(--font);
}
.transport-title-input,
.transport-input {
    background: var(--bg);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: var(--radius);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    font-family: var(--font);
    color: var(--text);
}
.transport-title-input:focus,
.transport-input:focus {
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(0,62,84,0.1);
}
.transport-description {
    background: var(--bg);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: var(--radius);
    padding: var(--space-sm);
    font-size: var(--text-xs);
    font-family: var(--font);
    color: var(--text);
    resize: vertical;
}

/* ── Delete / add secondary buttons ── */
.new-delete-btn,
.add-secondary-btn {
    background: var(--text);
    color: var(--bg);
    border-radius: 50%;
    font-family: var(--font);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.new-delete-btn:hover,
.add-secondary-btn:hover {
    background: #00516e;
    transform: scale(1.1);
}

/* ── Attachments ── */
.new-attachment-btn {
    background: rgba(0,62,84,0.06);
    border: 1px solid rgba(0,62,84,0.15);
    border-radius: var(--radius);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    color: var(--text);
    font-family: var(--font);
    transition: background 0.2s;
}
.new-attachment-btn:hover {
    background: rgba(0,62,84,0.12);
}
.new-attachment-btn.filled {
    background: var(--text);
    color: var(--bg);
}
.attachment-plus-btn {
    background: var(--text);
    color: var(--bg);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}
.attachment-document {
    background: rgba(0,62,84,0.06);
    border: 1px solid rgba(0,62,84,0.15);
    border-radius: var(--radius);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    color: var(--text);
    font-family: var(--font);
}
.attachment-document-name {
    color: var(--text);
}
.attachment-document-name:hover {
    color: #00516e;
}
.attachment-indicator.empty {
    background: #994652;
    border-color: #994652;
    color: var(--bg);
}
.attachment-indicator.filled {
    background: #365e37;
    border-color: #365e37;
    color: var(--bg);
}

/* ── Overview textarea ── */

/* ── Wake up / Good night sections ── */
.wake-up-section,
.good-night-section {
    border-radius: var(--radius);
    padding: var(--space-md);
    border: 2px solid rgba(0,62,84,0.12);
    background: rgba(0,62,84,0.03);
}
.wake-up-section {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.good-night-section {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ── Accommodation display ── */
.accommodation-display {
    padding: var(--space-md);
    background: var(--bg);
    border-radius: var(--radius);
    border: 2px solid rgba(0,62,84,0.12);
    margin: var(--space-sm) 0;
}
.accommodation-text {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text);
    font-family: var(--font);
}

/* ═══════════════════════════════════════════════════════
   DAY CARD INTERNALS — structure from old CSS, converted
   ═══════════════════════════════════════════════════════ */

/* Rimuovere i commenti-placeholder vuoti */


/* New Day Content Styles — overrides use rem for scalability */
.new-day-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.new-section {
    background: rgba(0,62,84,0.02);
    border: 1.5px solid rgba(0,62,84,0.1);
    border-radius: 0.6rem;
    position: relative;
    transition: all 0.2s ease;
    margin-top: 0.6rem;
}

.new-section:hover {
    border-color: var(--text);
    box-shadow: 0 0.125rem 0.5rem rgba(0,62,84,0.08);
}

.new-section-header {
    position: absolute;
    top: -0.6rem;
    left: 0.75rem;
    background: var(--text);
    color: var(--bg);
    padding: 0.2em 0.6em;
    font-weight: 600;
    font-size: var(--text-xs);
    border-radius: 0.5rem;
    margin: 0;
    z-index: 1;
}

.new-section-content {
    padding: 0.4rem 0.5rem 0.25rem 0.5rem;
    background: transparent;
}

/* Improved Form Elements Styling */
.new-form-row {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: 0.2rem;
    flex-wrap: wrap;
}

.new-form-group {
    flex: 1 1 11.25rem;
    min-width: 7.5rem;
}

.new-currency-group { flex: 1 1 10rem; min-width: 7.5rem; }
.new-currency-group .new-form-label { display: block; margin-bottom: 0.2rem; }
.row-inline { flex-wrap: wrap; align-items: flex-end; }
.group-small { flex: 0 0 6.25rem; }
.group-medium { flex: 1 1 12.5rem; }
.attachment-inline { display: flex; align-items: flex-end; flex: 0 0 auto; margin-left: auto; min-width: 8.75rem; flex-shrink: 0; }
.currency-input-row { display: flex; align-items: center; }
.currency-input-row .new-form-input { width: 100%; }
.group-flex-2 { flex: 2 1 20rem; }
.group-flex-1 { flex: 1 1 13.75rem; }
.row-tight { gap: var(--space-sm); }
.group-cost { flex: 0 1 12rem; min-width: 5rem; margin-right: 1rem; padding-right: 0.5rem; }
.currency-input-row select { min-width: 4.5rem; margin-right: 0.75rem; }

.group-time { flex: 0 1 7.5rem; min-width: 4rem; }
.group-activity-type { flex: 0 1 12.5rem; min-width: 5rem; }
.group-transport { flex: 0 1 22.5rem; min-width: 8rem; max-width: 26.25rem; }

.new-form-label {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.2rem;
    font-size: var(--text-xs);
}

.new-form-input, .new-form-select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid rgba(0,62,84,0.12);
    border-radius: 0.5rem;
    font-size: var(--text-xs);
    transition: border-color 0.2s;
    background: white;
    height: 2.25rem;
}
.currency-input-row {
    height: 2.25rem;
}
.currency-input-row .new-form-input {
    height: 2.25rem;
}

.new-form-input:focus, .new-form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 0.125rem rgba(249,205,45,0.35);
}

.datetime-group {
    display: flex;
    gap: 0.5rem;
}

.datetime-group .new-form-input {
    flex: 1;
}

.new-currency-group {
    display: block;
}

.new-currency-group .new-form-input {
    flex: 1;
}

.new-currency-symbol {
    display: none;
}

/* Smaller Attachment Buttons */
.new-attachment-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(90, 154, 156, 0.08);
    border: 1px solid rgba(90, 154, 156, 0.3);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--text);
    font-weight: 500;
    transition: all 0.3s ease;
    max-width: 12.5rem;
    margin: 0.125rem 0;
}

.new-attachment-btn:hover {
    background: rgba(90, 154, 156, 0.15);
    border-color: rgba(90, 154, 156, 0.5);
    transform: translateY(-1px);
}

.new-attachment-btn.filled {
    background: var(--text);
    color: white;
    border-style: solid;
}

.attachment-plus-btn {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--text);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: bold;
    flex-shrink: 0;
}

.attachment-text {
    white-space: nowrap;
}

.attachment-document {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(90, 154, 156, 0.08);
    border: 1px solid rgba(90, 154, 156, 0.3);
    border-radius: 0.375rem;
    padding: 0.375rem 0.625rem;
    margin: 0.125rem 0;
    font-size: var(--text-xs);
    color: var(--text);
    transition: all 0.3s ease;
}

.attachment-document:hover {
    background: rgba(90, 154, 156, 0.12);
    border-color: rgba(90, 154, 156, 0.5);
}

.attachment-document-name {
    cursor: pointer;
    text-decoration: none;
    flex: 1;
    color: var(--text);
    transition: color 0.3s ease;
}

.attachment-document-name:hover {
    color: var(--text);
    text-decoration: underline;
}

/* Overview textarea duplicates removed — see main definition above */

/* Add Buttons Container */
.add-buttons-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.25rem !important;
    flex-wrap: wrap;
    justify-content: center;
}

.add-section-btn {
    background: var(--text);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 1.25rem;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.add-section-btn:hover {
    background: #00516e;
    transform: translateY(-1px);
}

.add-section-btn span {
    font-size: var(--text-sm);
    font-weight: 700;
}

/* Day Content */
.middle-day-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wake-up-section, .good-night-section {
    border-radius: 1.25rem;
    padding: 1.25rem;
    position: relative;
    border: 2px solid var(--text);
}

.wake-up-section {
    background:rgba(0,62,84,0.04);
    border-color: var(--text);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 1.5rem;
}

.good-night-section {
    background:rgba(0,62,84,0.04);
    border-color: var(--text);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: 1.5rem;
}

.compact-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}
.compact-row.secondary {
    margin-top: 1rem;
    padding: 0 1.25rem;
}

/* Adjust compact inputs when shifted */
.content-area.shifted .compact-row {
    gap: 0.625rem;
}

.content-area.shifted .compact-input {
    font-size: var(--text-xs);
    padding: 0.5rem 0.75rem;
}

.compact-label {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 8.75rem;
}

.content-area.shifted .compact-label {
    font-size: var(--text-sm);
    min-width: 7.5rem;
}

.location-icon {
    font-size: 1.5rem;
}

.compact-inputs {
    display: flex;
    gap: 0.625rem;
    flex: 1;
    align-items: center;
    flex-wrap: wrap;
}

.compact-input {
    background: var(--bg);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: 0.75rem;
    padding: 0.625rem 1rem;
    font-size: var(--text-sm);
    transition: all 0.3s ease;
    flex: 1;
    font-weight: 500;
}

.compact-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249,205,45,0.35);
}

.compact-input[readonly] {
    background: var(--bg);
    border-color: rgba(0,62,84,0.12);
    cursor: not-allowed;
    color: black;
    font-weight: 500;
}

.compact-input.readonly-accommodation {
    background: var(--bg);
    border-color: rgba(0,62,84,0.12);
    color: #666;
    opacity: 0.9;
    cursor: not-allowed;
}

.compact-cost {
    max-width: 7.5rem;
}

/* Cost type dropdown styling */
select[data-field*="accommodationCostType"] {
    min-width: 6.25rem;
    max-width: 7.5rem;
    width: 7.5rem;
    flex-shrink: 0;
    font-size: var(--text-xs);
    padding: 0.5rem 0.625rem;
}

/* Ensure cost inputs have proper width and alignment */
input[type="number"][data-field*="cost"],
input[type="number"].transport-cost,
input[type="number"].activity-cost,
input[type="number"].compact-cost {
    font-size: var(--text-md) !important;
    font-weight: 600 !important;
    width: 6rem;
    min-width: 6rem;
    max-width: 7.5rem;
    padding: 0.375rem 0.5rem;
}

.attachment-indicator {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.attachment-indicator.empty {
    background: #994652;
    border: 2px solid #994652;
    color: var(--bg);
}

.attachment-indicator.filled {
    background: #365e37;
    border: 2px solid #365e37;
    color: var(--bg);
}

.attachment-indicator:hover {
    transform: scale(1.1);
}

.activities-section {
    min-height: 5rem;
    padding: 1.25rem;
    background: var(--bg);
    position: relative;
    margin: 0;
}

.activities-container {
    position: relative;
    min-height: 2.5rem;
}
/* Plans (activities + spostamenti) now share the activities container; the old
   transport container is consolidated into it and left empty — hide it so it
   adds no gap. */
.transport-items-container:empty { display: none; }

.activities-container:empty::after {
    content: 'Fill up your daily card for an amazing travel';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: var(--text-sm);
    font-style: italic;
    text-align: center;
    width: 100%;
    padding: 1.25rem;
    font-weight: 400;
}

.activity-compact {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    background: var(--bg);
    padding: 0.5rem;
    border-radius: 0.75rem;
    border: 2px solid var(--text);
    position: relative;
    flex-wrap: wrap;
}

.new-activity-item {
    display: block;
    margin-bottom: 0.25rem;
    background: white;
    border-radius: 0.625rem;
    border: 1.5px solid rgba(0,62,84,0.12);
    position: relative;
    padding: 0.2rem 0.4rem;
    overflow: visible;
    transition: border-color 0.25s ease;
}
.new-activity-item:hover {
    border-color: var(--accent);
}

.new-transport-item {
    display: block;
    margin-bottom: 0.25rem;
    background: white;
    border-radius: 0.625rem;
    border: 1.5px solid rgba(0,62,84,0.12);
    position: relative;
    padding: 0.2rem 0.4rem;
    overflow: visible;
    transition: border-color 0.25s ease;
}
.new-transport-item:hover {
    border-color: var(--accent);
}

/* Unified inner container for activity/transport rows */
.entry-inner {
    margin: 0;
    padding: 0.15rem 0.4rem;
    position: relative;
}

/* Delete button */
.new-delete-btn {
    position: absolute;
    left: -1.25rem;
    top: -0.65rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: none;
    background: var(--text);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.1);
    cursor: pointer;
    font-size: var(--text-xs, 0.7rem);
    z-index: 2;
}

.new-delete-btn:hover { background: #00516e; }

.activity-time {
    min-width: 120px;
    max-width: 120px;
    flex-shrink: 0;
}

.activity-type-select {
    min-width: 8.75rem;
    max-width: 8.75rem;
    background: var(--bg);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: var(--text-xs);
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
    font-weight: 500;
}

.activity-type-select:focus {
    outline: none;
    border-color: var(--text);
    background: var(--bg);
}

.activity-title {
    min-width: 200px;
    font-weight: 600;
}

.activity-desc {
    flex: 1;
}

.activity-cost { width: 96px; min-width: 96px; }

.delete-btn {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background: #994652;
    color: var(--bg);
    border: none;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.delete-btn:hover {
    transform: scale(1.1);
    background: #994652;
}

.transport-compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
    background: var(--bg);
    padding: 12px;
    border-radius: 12px;
    border: 2px solid var(--text);
    position: relative;
}

.transport-compact.departure-transport {
    border-color: var(--text);
    background: var(--bg);
}
.transport-compact.return-transport {
    border-color: var(--text);
    background: var(--bg);
    margin-top: 10px;
}
.transport-main-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.transport-title-input {
    flex: 1;
    background: var(--bg);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all 0.3s ease;
}
.transport-input {
    background: var(--bg);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: var(--text-xs);
    transition: all 0.3s ease;
    font-weight: 500;
}

.transport-input:focus {
    outline: none;
    border-color: var(--text);
    background: var(--bg);
}

.transport-time {
    width: 100px;
    flex-shrink: 0;
}

.transport-location {
    flex: 1;
    min-width: 100px;
}
.transport-type {
    width: 170px;
    flex-shrink: 0;
}
.transport-cost { width: 72px; min-width: 72px; flex-shrink: 0; }
.transport-description {
    width: 100%;
    background: rgba(0,62,84,0.03);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--text-xs);
    min-height: 2.5rem;
    resize: vertical;
    transition: all 0.3s ease;
    font-weight: 400;
}
.add-secondary-btn {
    background: var(--text);
    border: none;
    color: white;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--text-md);
    font-weight: 700;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-secondary-btn:hover {
    background: #00516e;
    transform: scale(1.1);
}

.separator {
    color: var(--text);
    font-weight: 700;
    flex-shrink: 0;
}

.transport-secondary-section {
    display: none;
    align-items: center;
    gap: 8px;
}

.transport-secondary-section.active {
    display: flex;
}

/* First/Last Day Sections */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-label {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#daysContainer .day-input {
    background: var(--bg);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: 0.9375rem;
    padding: 0.9375rem;
    font-size: var(--text-sm);
    transition: all 0.3s ease;
    width: 100%;
    font-weight: 500;
}

#daysContainer .day-input:focus {
    outline: none;
    border-color: var(--text);
    background: var(--bg);
}

.input-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.input-row > * {
    flex: 1;
}

.cost-input {
    max-width: 150px;
}

.add-activity-btn {
    background: var(--text);
    border: none;
    color: var(--bg);
    padding: 0.625rem 1.25rem;
    border-radius: 1.5625rem;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all 0.3s ease;
    align-self: flex-start;
    margin-top: 0.625rem;
}

.add-activity-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.description-input {
    background: var(--bg);
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: 0.9375rem;
    padding: 0.9375rem;
    font-size: var(--text-sm);
    min-height: 6.25rem;
    resize: vertical;
    transition: all 0.3s ease;
    width: 100%;
    font-weight: 400;
}

.description-input:focus {
    outline: none;
    border-color: var(--text);
    background: var(--bg);
}



/* ═══════════════════════════════════════════════════════
   MODALS — coherent with design system
   ═══════════════════════════════════════════════════════ */

/* Custom prompt modal */
.custom-prompt-content {
    background: var(--bg);
    border: 2px solid var(--text);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    font-family: var(--font);
}
.custom-prompt-title {
    font-size: var(--text-lg);
    color: var(--text);
    font-family: var(--font);
}
.custom-prompt-message {
    font-size: var(--text-sm);
    color: var(--muted);
    font-family: var(--font);
}
.custom-prompt-input {
    border: 2px solid rgba(0,62,84,0.15);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--text-sm);
    padding: var(--space-sm);
    background: var(--white);
    color: var(--text);
}
.custom-prompt-input:focus {
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(0,62,84,0.1);
}
.custom-prompt-btn {
    font-family: var(--font);
    font-size: var(--text-sm);
    border-radius: var(--radius);
    padding: var(--space-sm) var(--space-md);
}
.custom-prompt-btn-primary {
    background: var(--text);
    color: var(--bg);
}
.custom-prompt-btn-primary:hover { background: #00516e; }
.custom-prompt-btn-secondary {
    background: var(--white);
    color: var(--text);
    border: 2px solid rgba(0,62,84,0.15);
}

/* Upload modal */
.upload-modal-content {
    background: var(--white);
    border-radius: var(--radius-lg);
    font-family: var(--font);
    padding: var(--space-md);
}
.upload-modal-title {
    font-size: var(--text-lg);
    color: var(--text);
    font-family: var(--font);
}
.upload-modal-close {
    color: var(--muted);
    font-size: var(--text-lg);
}
.upload-modal-close:hover { color: var(--text); }
.form-label {
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: 600;
}
.form-input, .form-select {
    border: 2px solid rgba(0,62,84,0.12);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--text-sm);
    padding: var(--space-sm);
    color: var(--text);
}
.form-input:focus, .form-select:focus {
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(0,62,84,0.1);
}
.file-upload-area {
    border: 2px dashed rgba(0,62,84,0.2);
    border-radius: var(--radius);
    padding: var(--space-lg);
    color: var(--muted);
    font-family: var(--font);
    cursor: pointer;
    transition: border-color 0.2s;
}
.file-upload-area:hover { border-color: var(--text); }
.form-btn-primary {
    background: var(--text);
    color: var(--bg);
    font-family: var(--font);
    border-radius: var(--radius);
    padding: var(--space-sm) var(--space-md);
    border: none;
    cursor: pointer;
    font-weight: 600;
}
.form-btn-primary:hover { background: #00516e; }
.form-btn-secondary {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    border-radius: var(--radius);
    padding: var(--space-sm) var(--space-md);
    border: 2px solid rgba(0,62,84,0.15);
    cursor: pointer;
}

/* Conflict modal */
.conflict-modal-content {
    background: var(--white);
    border-radius: var(--radius-lg);
    font-family: var(--font);
    padding: var(--space-lg);
}
.conflict-modal-title {
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-lg);
}
.conflict-day-badge {
    background: var(--text);
    color: var(--bg);
    border-radius: 50px;
    font-family: var(--font);
    font-size: var(--text-xs);
}
.conflict-btn-cancel {
    background: var(--bg);
    color: var(--text);
    border: 2px solid rgba(0,62,84,0.15);
    border-radius: var(--radius);
    font-family: var(--font);
    padding: var(--space-sm) var(--space-md);
}
.conflict-btn-proceed {
    background: var(--text);
    color: var(--bg);
    border-radius: var(--radius);
    font-family: var(--font);
    padding: var(--space-sm) var(--space-md);
    border: none;
    box-shadow: 0 4px 12px rgba(0,62,84,0.2);
}
.conflict-btn-proceed:hover { background: #00516e; }

/* Document preview modal */
.preview-modal-content {
    background: var(--white);
    border-radius: var(--radius-lg);
    font-family: var(--font);
}
.preview-modal-title {
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-md);
}
.preview-modal-close {
    color: var(--muted);
}
.preview-modal-close:hover { color: var(--text); }
.preview-modal-body {
    background: var(--bg);
    padding: var(--space-md);
}

/* Invite modal */
.invite-modal-content {
    background: var(--white);
    border-radius: var(--radius-lg);
    font-family: var(--font);
    padding: var(--space-lg);
}
.invite-modal-title {
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-md);
}
.invite-modal-close {
    color: var(--muted);
}
.invite-modal-close:hover { color: var(--text); }
.invite-tabs {
    border-color: var(--text);
    border-radius: var(--radius);
}
.invite-tab-btn {
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-xs);
}
.invite-tab-btn.active {
    background: var(--text);
    color: var(--bg);
}
.invite-input {
    border-color: rgba(0,62,84,0.15);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--text-xs);
}
.invite-input:focus {
    border-color: var(--text);
}
.invite-action-btn {
    background: var(--text);
    color: var(--bg);
    font-family: var(--font);
    border-radius: var(--radius);
    font-size: var(--text-xs);
}
.invite-action-btn:hover { background: #00516e; }
.invite-gen-btn {
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-xs);
}

/* ── MISC — search, attachments, preview, morning location, form groups ── */
.search-result-day { font-size: var(--text-xs); color: var(--text); font-weight: 500; }
.search-highlight { background: rgba(249,205,45,0.3); font-weight: 600; padding: 0 2px; border-radius: 2px; }
.doc-item.highlighted { background: rgba(249,205,45,0.2) !important; animation: pulse 0.5s ease-in-out; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
.attachment-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius); font-size: var(--text-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; margin-bottom: var(--space-xs); }
.attachment-indicator:hover .attachment-tooltip { opacity: 1; }
.attachment-indicator { width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; background: rgba(0,62,84,0.04); border: 2px solid rgba(0,62,84,0.12); border-radius: var(--radius); transition: all 0.2s ease; position: relative; overflow: hidden; }
.attachment-indicator:hover { background: rgba(0,62,84,0.08); border-color: var(--text); }
.attachment-indicator.filled { background: var(--text); border-color: var(--text); color: var(--bg); }
.attachment-icon { font-size: var(--text-sm); pointer-events: none; z-index: 1; }
input[type="time"] { cursor: text; -webkit-appearance: none; -moz-appearance: textfield; }
input[type="time"]::-webkit-inner-spin-button, input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }
input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.morning-location-display { padding: 1.2rem 0.6rem 0.6rem 0.6rem; background: rgba(0,62,84,0.03); border-radius: 0.6rem; border: 1.5px solid rgba(0,62,84,0.12); margin: 0.6rem 0 0 0; display: flex; align-items: center; justify-content: center; min-height: 3rem; }
.goodnight-display { background: var(--bg); }
.morning-location-text { font-size: var(--text-sm); font-weight: 600; color: var(--text); line-height: 1.3; font-family: var(--font); text-align: center; }
.morning-location-placeholder { font-size: var(--text-sm); text-align: center; }
.morning-location-placeholder { color: var(--muted); font-style: italic; }
.accommodation-placeholder { color: var(--muted); font-style: italic; }
.auto-name-preview { font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-xs); font-style: italic; }

/* Document preview modal */
.document-preview-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 10001; animation: fadeIn 0.2s ease; }
.preview-modal-content { background: var(--white); border-radius: var(--radius-lg); width: 90%; max-width: 900px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.25); font-family: var(--font); }
.preview-modal-header { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid rgba(0,62,84,0.1); display: flex; justify-content: space-between; align-items: center; }
.preview-modal-title { font-size: var(--text-md); font-weight: 600; color: var(--text); margin: 0; font-family: var(--font); }
.preview-modal-close { background: none; border: none; font-size: var(--text-lg); cursor: pointer; color: var(--muted); padding: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; }
.preview-modal-close:hover { background: rgba(0,62,84,0.06); color: var(--text); }
.preview-modal-body { flex: 1; overflow: auto; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: var(--space-md); }
.preview-iframe { width: 100%; height: 100%; min-height: 600px; border: none; background: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.preview-image { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.preview-placeholder { text-align: center; padding: var(--space-xl); color: var(--muted); font-family: var(--font); }
.preview-icon { font-size: var(--text-xxl); margin-bottom: var(--space-md); opacity: 0.5; }
.preview-info { font-size: var(--text-xs); color: var(--muted); margin: var(--space-xs) 0; }
.preview-modal-footer { padding: var(--space-sm) var(--space-lg); border-top: 1px solid rgba(0,62,84,0.1); display: flex; justify-content: flex-end; gap: var(--space-sm); }
.preview-btn { padding: var(--space-sm) var(--space-md); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: all 0.2s ease; border: none; display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font); }
.preview-btn:first-child { background: var(--text); color: var(--bg); }
.preview-btn:first-child:hover { background: #00516e; }
.preview-btn:last-child { background: rgba(0,62,84,0.06); color: var(--muted); }
.preview-btn:last-child:hover { background: rgba(0,62,84,0.1); color: var(--text); }

/* ── Good Night In 2-row grid layout ── */
/* Row 1: Accom name | Address | City          */
/* Row 2: Nights | Cost € | Type | Attachment  */
.goodnight-grid {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    gap: 0.15rem 1.5rem;
    align-items: end;
}
.gn-col-name    { grid-column: 1 / 2; grid-row: 1; min-width: 0; }
.gn-col-address { grid-column: 2 / 3; grid-row: 1; min-width: 0; }
.gn-col-city    { grid-column: 3 / 5; grid-row: 1; min-width: 0; }
.gn-col-nights  { grid-column: 1 / 2; grid-row: 2; min-width: 0; }
.gn-col-cost    { grid-column: 2 / 3; grid-row: 2; min-width: 0; }
.gn-col-costtype { grid-column: 3 / 4; grid-row: 2; min-width: 0; }
.gn-col-attach  {
    grid-column: 4 / 5; grid-row: 2;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
@media (max-width: 767px) {
    /* #4 Mobile Good Night In → 3 rows: name (r1), city (r2), and cost/night +
       nights stepper + attachment all together on r3. Address is collapsed on
       mobile to keep the card compact (matches the mobile design). */
    .goodnight-grid {
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        gap: 0.45rem 0.4rem;
        align-items: center;
    }
    .gn-col-address { display: none; }
    .gn-col-name    { grid-column: 1 / -1; grid-row: 1; }
    .gn-col-city    { grid-column: 1 / -1; grid-row: 2; }
    .gn-col-cost     { grid-column: 1 / 2; grid-row: 3; }
    .gn-col-costtype { grid-column: 2 / 3; grid-row: 3; }
    .gn-col-nights   { grid-column: 3 / 4; grid-row: 3; }
    .gn-col-attach   { grid-column: 4 / 5; grid-row: 3; }
}

/* ── Activity single-row grid layout ── */
.activity-grid-content {
    display: grid;
    grid-template-columns: 1fr 3fr 1.5fr 1fr 1fr;
    gap: 0.15rem 1.5rem;
    align-items: end;
}
.activity-col-time   { min-width: 0; }
.activity-col-name   { min-width: 0; }
.activity-col-type   { min-width: 0; }
.activity-col-cost   { min-width: 0; }
.activity-col-attach {
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}
.activity-col-attach .new-attachment-btn {
    font-size: var(--text-xs);
    padding: 0.3rem 0.4rem;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}
/* Hide attachment text on activity row, show icon only */
.activity-col-attach .attachment-text {
    display: none;
}
@media (max-width: 480px) {
    .activity-grid-content {
        grid-template-columns: 1fr 1fr;
    }
    .activity-col-name { grid-column: span 2; }
    .activity-col-attach { grid-column: span 2; }
    .activity-col-attach .attachment-text { display: inline; }
}

/* ── Outbound travel 2-row grid layout ── */
.outbound-section .new-section-content {
    display: grid;
    grid-template-columns: 3fr 2fr 1fr 2fr 1fr;
    gap: 0.15rem 1.5rem;
    padding: var(--space-xs) var(--space-sm) var(--space-xs);
}
.outbound-row {
    display: contents;
}
.outbound-city  { min-width: 0; }
.outbound-date  { min-width: 0; }
.outbound-time  { min-width: 0; }
.outbound-transport { min-width: 0; }
.outbound-cost  { min-width: 0; }
/* Attachment spans transport+cost columns in row 2 */
.outbound-attach {
    grid-column: span 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}
.outbound-attach .new-attachment-btn {
    flex: 0;
    max-width: none;
    justify-content: center;
    font-size: var(--text-xs);
    padding: 0.35rem 0.6rem;
}

@media (max-width: 480px) {
    .outbound-section .new-section-content {
        grid-template-columns: 1fr 1fr;
    }
    .outbound-city { grid-column: span 2; }
    .outbound-attach {
        grid-column: span 2;
    }
}

/* Day content wrapper */
.new-day-content { display: flex; flex-direction: column; gap: 0.25rem; }
#daysContainer .day-overview-section { background: var(--white); border-color: rgba(0,62,84,0.1); }
#daysContainer .day-overview-section .new-section-header { background: var(--text); }

/* Form group modifiers */
.new-currency-group { flex: 1 1 13.75rem; min-width: 9.375rem; }
.new-currency-group .new-form-label { display: block; margin-bottom: 0.2rem; }
.row-inline { flex-wrap: wrap; align-items: flex-end; }
.group-small { flex: 0 1 7.5rem; min-width: 3rem; }
.group-medium { flex: 1 1 18.75rem; }
.attachment-inline { display: flex; align-items: flex-end; flex: 0 0 auto; margin-left: auto; min-width: 8.75rem; flex-shrink: 0; }
.currency-input-row { display: flex; align-items: center; }
.currency-input-row .new-form-input { width: 100%; }
.group-flex-2 { flex: 2 1 20rem; }
.group-flex-1 { flex: 1 1 13.75rem; }
.row-tight { gap: var(--space-sm); }
.group-cost { flex: 0 1 12rem; min-width: 5rem; }
.currency-input-row select { min-width: 72px; }
.group-time { flex: 0 1 130px; min-width: 100px; }
.group-time .new-form-input { font-size: var(--text-sm); }
.group-activity-type { flex: 0 1 200px; min-width: 130px; }
.group-transport { flex: 0 1 360px; min-width: 140px; max-width: 420px; }
.new-section-content { padding: var(--space-xs) var(--space-sm) var(--space-xs); background: transparent; }

/* ── Global input coherence ── */
.panel-content input,
.panel-content select,
.panel-content textarea,
#daysContainer .day-card input,
#daysContainer .day-card select,
#daysContainer .day-card textarea {
    font-family: var(--font);
    border-color: rgba(0,62,84,0.12);
    color: var(--text);
    border-radius: 0.5rem;
}
.panel-content input:focus,
.panel-content select:focus,
.panel-content textarea:focus,
#daysContainer .day-card input:focus,
#daysContainer .day-card select:focus,
#daysContainer .day-card textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249,205,45,0.35);
    outline: none;
}

/* ─── COLLAB BANNER ──────────────────────────────────── */
#collab-banner {
    font-size: var(--text-xs);
    font-family: var(--font);
}

/* ─── SYNC STATUS ────────────────────────────────────── */
#sync-status {
    font-size: var(--text-xs);
    font-family: var(--font);
    border-radius: 25px;
}

/* ─── MOBILE HAMBURGER MENU ───────────────────────────── */
.hamburger-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: var(--white);
    font-size: var(--text-lg);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hamburger-overlay {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 320px;
    background: var(--text);
    z-index: 2000;
    padding: var(--space-lg) var(--space-md);
    flex-direction: column;
    gap: var(--space-sm);
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    display: flex;
    visibility: hidden;
    overflow-y: auto;
}
.hamburger-overlay.open {
    transform: translateX(0);
    visibility: visible;
}
.hamburger-close {
    align-self: flex-end;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: var(--bg);
    font-size: var(--text-lg);
    cursor: pointer;
    margin-bottom: var(--space-md);
}
.hamburger-overlay .ham-action {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: 50px;
    background: var(--accent);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}
.hamburger-overlay .ham-action:hover {
    background: #e6b800;
}
.hamburger-overlay .ham-action svg {
    width: 22px;
    height: 22px;
    stroke: var(--text);
    fill: none;
    stroke-width: 2;
}
.ham-divider {
    height: 1px;
    background: rgba(253,243,215,0.2);
    margin: var(--space-sm) 0;
}
.ham-action.ham-panel {
    background: rgba(253,243,215,0.15);
    color: var(--bg);
    border: 1px solid rgba(253,243,215,0.3);
}
.ham-action.ham-panel svg {
    stroke: var(--bg);
}
.ham-action.ham-panel:hover {
    background: rgba(253,243,215,0.3);
}
.hamburger-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1999;
}
.hamburger-backdrop.open { display: block; }

/* ─── DAY SWIPE INDICATOR ────────────────────────────── */
.day-indicator {
    display: none;
    text-align: center;
    padding: var(--space-xs) 0;
    font-family: var(--font);
}
#daysContainer .day-dots {
    display: flex;
    gap: 0.375rem;
    justify-content: center;
    overflow-x: auto;
    padding: var(--space-xs) 0;
    scrollbar-width: none;
}
#daysContainer .day-dots::-webkit-scrollbar { display: none; }
#daysContainer .day-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 0.1875rem;
    background: rgba(0,62,84,0.15);
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
#daysContainer .day-dot.active {
    background: var(--teal);
    transform: scale(1.3);
}
.day-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text);
}

/* ═══════════════════════════════════════════════════════
   DAILY CARDS — vertical stack at ALL widths (mobile = desktop)
   The feed used to be a one-card-per-screen HORIZONTAL swipe on
   mobile; it now stacks vertically everywhere, exactly like desktop.
   ═══════════════════════════════════════════════════════ */
.days-container {
    display: block;
    scrollbar-width: none;
    padding-bottom: var(--space-lg);
}
.days-container::-webkit-scrollbar { display: none; }
#daysContainer .day-card {
    margin-bottom: var(--space-md);
    /* jumped-to cards (scrollToDay / focus helpers) clear the fixed header */
    scroll-margin-top: calc(var(--header-h) + var(--space-sm));
}

/* Empty / invalid-dates state for the Daily Planner.
   Kept self-contained so it stays responsive at all three breakpoints
   without depending on yet-to-be-introduced layout primitives. */
#daysContainer .day-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-sm);
    margin: var(--space-lg) auto;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    max-width: min(560px, 92vw);
    color: var(--text);
    background: rgba(255, 255, 255, 0.55);
    border: 1px dashed rgba(0, 62, 84, 0.25);
    border-radius: 1rem;
}
#daysContainer .day-empty-state__title {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 700;
    margin: 0;
}
#daysContainer .day-empty-state__msg {
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.4;
    margin: 0;
    opacity: 0.85;
}
#daysContainer .day-empty-state__cta {
    display: inline-block;
    margin-top: var(--space-xs);
    padding: 0.625rem 1rem;
    min-height: 44px;
    border: 1px solid var(--teal, #003E54);
    border-radius: 0.625rem;
    background: transparent;
    color: var(--teal, #003E54);
    font-size: clamp(0.875rem, 2vw, 1rem);
    font-weight: 600;
    cursor: pointer;
}
#daysContainer .day-empty-state__cta:hover,
#daysContainer .day-empty-state__cta:focus-visible {
    background: var(--teal, #003E54);
    color: #fff;
    outline: none;
}

/* Bottom nav toggle */
.bottom-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: var(--space-md);
    right: var(--space-md);
    width: 48px;
    height: 48px;
    background: var(--teal-dark);
    color: var(--white);
    border: none;
    border-radius: 50%;
    font-size: var(--text-md);
    cursor: pointer;
    z-index: 400;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Bottom nav bar */
.bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--teal-dark);
    padding: var(--space-sm) var(--space-xs);
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 350;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-xs);
}
.bottom-nav.open { transform: translateY(0); }

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--bg);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius);
    transition: background 0.2s;
    min-width: 64px;
    text-align: center;
    border: none;
    background: transparent;
    font-family: var(--font);
}
.bottom-nav-item:hover,
.bottom-nav-item.active {
    background: rgba(255,255,255,0.25);
}
.bottom-nav-item svg {
    width: 24px;
    height: 24px;
    stroke: var(--bg);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bottom-nav-item span {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--bg);
}

/* ═══════════════════════════════════════════════════════
   TABLET — 768px+
   ═══════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    /* Show sidebar, hide mobile elements */
    .sidebar { display: flex; }
    .hamburger-btn { display: none !important; }
    .day-indicator { display: none !important; }
    .bottom-nav-toggle { display: none; }
    .bottom-nav { display: none !important; }

    /* Content has sidebar margin */
    .content-area { margin-left: var(--sidebar-w); }


    /* Days feed is vertical at all widths now (base rule); no override needed. */

    /* Panel positioning */
    .sidebar-panel {
        left: var(--sidebar-w);
        top: var(--header-h);
        bottom: 0;
        height: auto !important;
        border-radius: 0 !important;
    }

    /* Content shifts when panel is open */
    .content-area.shifted {
        margin-left: calc(var(--sidebar-w) + var(--panel-w));
    }

    /* Show progress section */
    .progress-section { display: block; }

    /* Budget grids: 3 columns */
    .budget-info-row { grid-template-columns: 1fr 1fr 1fr; }
    .budget-calc-row { grid-template-columns: 1fr 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════
   DESKTOP — 768px+
   ═══════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .content-area {
        padding: var(--space-xs) var(--pad-x);
    }
}

/* ═══════════════════════════════════════════════════════
   MOBILE PANEL — slides from bottom
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Hide desktop sidebar — everything goes in hamburger */
    .sidebar { display: none !important; }
    .bottom-nav-toggle { display: none !important; }
    .bottom-nav { display: none !important; }
    .sidebar-item::after { display: none !important; }

    /* Panel: full screen overlay from bottom */
    .sidebar-panel {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 80vh !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
        transition: transform 0.2s ease !important;
        overflow: hidden;
        background: var(--white);
        z-index: 2000;
        transform: translateY(100%);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        visibility: visible !important;
    }
    .sidebar-panel.open {
        transform: translateY(0) !important;
        overflow-y: auto;
        visibility: visible !important;
    }
    .panel-content {
        padding: var(--space-lg) var(--space-md) var(--space-xl);
        font-size: var(--text-sm);
    }
    .panel-close-btn {
        position: sticky;
        top: var(--space-xs);
        float: right;
        z-index: 2001;
        width: 36px;
        height: 36px;
        background: var(--text);
        color: var(--white);
        font-size: var(--text-lg);
        border-radius: 50%;
    }
    .panel-close-btn:hover { background: #00516e; }
    .panel-backdrop {
        display: block;
        z-index: 1999;
    }
    .panel-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Hide resize handle */
    .sidebar-resize-handle { display: none; }

    /* Header: logo (left) | trip name (center) | invite + avatar (right) */
    .fixed-header {
        height: clamp(48px, 7vh, 60px) !important;
        padding: 0 var(--space-sm) !important;
    }
    .header-left {
        display: flex !important;
        align-items: center;
        gap: var(--space-xs);
    }
    .logo { height: 24px !important; }
    .header-center {
        flex: 1;
        min-width: 0;
    }
    .trip-title {
        font-size: var(--text-sm) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .trip-dates { display: none !important; }
    .trip-route { display: none !important; }
    /* Hide all header buttons except invite */
    .header-actions .header-btn { display: none !important; }
    #header-invite-btn { display: flex !important; }
    .header-actions { display: flex !important; gap: var(--space-xs); }
    /* Hamburger visible */
    .hamburger-btn { display: flex !important; }
    /* Avatar smaller + round */
    .header-right .user-menu .user-menu-button {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
    }
    /* Cards stack vertically now (like desktop) — the horizontal-swipe dots
       strip is obsolete; hide it at all widths (desktop already hides it). */
    .day-indicator { display: none !important; }
    .progress-section { display: none; }

    /* Content: no sidebar margin. Bottom padding is governed by the
       earlier .content-area rule (72px + safe-area) so the last day card
       clears the fixed bottom-nav — don't re-set it here. */
    .content-area {
        margin-left: 0 !important;
    }

    /* Budget: fit as many columns as the width allows (3 on wide phones,
       2 on ~360px, 1 on the narrowest) — no fixed breakpoint. */
    .budget-info-row {
        grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    }



    /* ── Panel content styling on mobile ── */
    .panel-content {
        padding: var(--space-xl) var(--space-md) var(--space-xl) !important;
        font-size: var(--text-sm);
    }
    /* Budget panel */
    .budget-container-wrapper {
        margin-top: var(--space-sm) !important;
    }
    .budget-title {
        font-size: var(--text-lg) !important;
        text-align: center;
    }
    /* Checklist */
    .cl-wrapper {
        font-size: var(--text-sm);
    }
    .cl-title {
        font-size: var(--text-lg) !important;
    }
    .cl-section-head {
        font-size: var(--text-sm) !important;
        padding: var(--space-sm) !important;
    }
    .cl-text {
        font-size: var(--text-xs) !important;
        padding: var(--space-xs) var(--space-sm) !important;
    }
    /* Packing list */
    .checklist-header {
        font-size: var(--text-sm) !important;
        padding: var(--space-sm) !important;
    }
    /* Documents */
    .doc-category-header {
        font-size: var(--text-sm) !important;
        padding: var(--space-sm) !important;
    }
    /* Memo */
    .memo-container {
        font-size: var(--text-sm);
    }
    /* General panel elements */
    .panel-content input,
    .panel-content select,
    .panel-content textarea {
        font-size: var(--text-sm) !important;
        padding: var(--space-sm) !important;
        border-radius: var(--radius) !important;
    }
    .panel-content button {
        font-size: var(--text-sm) !important;
    }
    /* Budget grids: fit as many columns as fit (3 on wide phones, 2 on
       ~360px, 1 on the narrowest) so localized labels never clip. */
    .budget-info-row { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)) !important; }
    .budget-calc-row { grid-template-columns: 1fr !important; }
    /* Force all panel children to respect mobile width */
    .panel-content > * {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* Tables scroll horizontally */
    .panel-content table { font-size: var(--text-xs); }
    .memo-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Map height on mobile — dvh keeps the box stable when iOS
       Safari hides/reveals its URL bar mid-scroll. */
    #leaflet-map { height: clamp(260px, 50dvh, 440px) !important; }
    /* Fullscreen sheet at <=767: map fills the sheet beneath the
       standard panel header. The fixed-position rules above the
       sidebar panel are in the .tp-fullscreen block. */
    .sidebar-panel.tp-fullscreen #leaflet-map {
        height: auto !important;
        min-height: 60dvh;
    }
    /* Compact forms on mobile */
    .compact-row { flex-direction: column; gap: var(--space-xs); }
    .compact-label { min-width: auto !important; font-size: var(--text-sm) !important; }
    .activity-compact { flex-direction: column; }
    .transport-compact .transport-main-row { flex-wrap: wrap; }
}


/* ═══════════════════════════════════════════════════════
   DPR-CONSISTENT STEP OVERRIDES — inline clamp(..vw..) fix
   Override minimo a 767px per tutti i clamp viewport-based
   trasformati in valore massimo fisso.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .logo { height:  36px; }
    #header-invite-btn { width:  36px; height:  36px; }
    #header-invite-btn svg { width:  16px; height:  16px; }
    .header-btn { width:  36px; height:  36px; }
    .header-btn svg { width:  16px; height:  16px; }
    .sidebar-photo { width:  28px; height:  28px; }
    .sidebar-photo-svg svg { width:  22px; height:  22px; }
    .panel-close-btn { width:  28px; height:  28px; }
    .day-nav-btn { width:  28px; height:  28px; }
    .progress-square { width:  32px; height:  32px; }
    .new-form-group.group-small { flex:  0 0 60px; }
    .new-form-group.group-medium { flex:  0 0 100px; }
    .new-form-group.group-cost { flex:  0 0 70px; }
    .budget-calc-icon { width:  32px; height:  32px; }
    #toAmount { width:  60px; }
    #exchangeAmount { width:  50px; }
    .budget-input { width:  40px; }
    .cl-row { grid-template-columns:  50px 1fr 36px; }
    .cl-transport-head { grid-template-columns:  80px 1fr 40px; }
    .cl-transport-body .cl-row { grid-template-columns:  80px 1fr 40px; }
    .item-day-info { width:  60px; }
    .item-actions { min-width:  60px; }
    .completion-tick { width:  18px; height:  18px; }
    .add-icon { width:  16px; height:  16px; }
    .todo-item { grid-template-columns:  1fr 40px; }
    .todo-checkbox { width:  24px; height:  24px; }
    .pack-checkbox { width:  20px; height:  20px; }
    .quantity-btn { width:  20px; height:  20px; }
    .quantity-value { min-width:  24px; }
    .doc-icon { width:  32px; height:  32px; }
    .upload-modal-close { width:  28px; height:  28px; }
    .conflict-day-badge { min-width:  40px; }
    .search-result-icon { width:  24px; height:  24px; }
    .memo-search { width:  100px; }
    .memo-note-modal { width:  300px; }
    .memo-modal--wide { width:  400px; }
    .memo-modal-photo-col { width:  140px; }
    .memo-modal { width:  340px; }
    .memo-fm-panel { width:  340px; }
    .collab-avatar { width:  28px; height:  28px; }
    .chat-send-btn { width:  32px; height:  32px; }
    #leaflet-map { height: clamp(240px, 45dvh, 360px); }
    .map-loading-state { height:  120px; }
    .map-marker { width:  26px; height:  26px; }
    .vtl-circle { width:  32px; height:  32px; }
    .vtl-seg { min-height:  30px; }
    .vtl-seg-track { width:  32px; }
    .attachment-indicator { width:  28px !important; height:  28px !important; min-width:  28px !important; }
    .preview-modal-close { width:  30px; height:  30px; }
    .preview-iframe { min-height:  400px; }
    .goodnight-grid { gap:  0.15rem 0.4rem; }
    .activity-grid-content { gap:  0.15rem 0.4rem; }
    .outbound-section .new-section-content { gap:  0.15rem 0.4rem; }
    .group-small { flex:  0 0 5rem; }
    .group-medium { flex:  1 1 12.5rem; }
    .attachment-inline { min-width:  6.25rem; }
    .group-flex-2 { flex:  2 1 10rem; }
    .group-flex-1 { flex:  1 1 8rem; }
    .group-cost { flex:  0 1 7.5rem; min-width:  6.25rem; }
    .currency-input-row select { min-width:  50px; }
    .group-time { flex:  0 0 80px; min-width:  70px; }
    .group-activity-type { flex:  0 0 140px; min-width:  120px; }
    .group-transport { flex:  0 1 240px; max-width:  280px; }
    .hamburger-btn { width:  32px; height:  32px; }
    .hamburger-overlay { width:  260px; }
    .hamburger-close { width:  32px; height:  32px; }
    .hamburger-overlay .ham-action svg { width:  18px; height:  18px; }
    .bottom-nav-toggle { width:  40px; height:  40px; }
    .bottom-nav-item { min-width:  48px; }
    .bottom-nav-item svg { width:  20px; height:  20px; }
}

/* ═══════════════════════════════════════════════════════
   GOOD NIGHT — redesigned single-row layout (>=768)
   ───────────────────────────────────────────────────────
   Replaces the legacy .gn-col-* grid with one flex row:
   [type icon] [name] [city] [price+unit] [× nights] [chevron] [attach]

   Constraint from the brief: NO truncation. We use min-width on
   the shrinkable inputs and flex-wrap so the row breaks into
   multiple lines once a sensible minimum is hit. The price+unit
   and the nights-stepper are wrapped in .gn-cost-bundle so they
   stay glued together when the row wraps.

   The overlay (#gn-overlay-N) is sized + positioned via JS with
   position: fixed so the .day-content overflow: hidden parent
   doesn't clip it. Visible only on >=768.

   The mobile layout (<=767) keeps the legacy two-column stack
   for now (see the @media block at the bottom) — that's a
   separate redesign batch per the brief.
   ═══════════════════════════════════════════════════════ */
.gn-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Match the outbound .dc-travel bar: same white box, hairline border,
       radius and padding so Good Night reads as the same component. */
    gap: 7px;
    background: #fff;
    border: 1px solid var(--dc-hair, #E3E9EC);
    border-radius: 12px;
    padding: 6px;
    position: relative;
}
.gn-row .gn-field {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    flex: 1 1 0;
    min-width: 9rem;        /* shrinks to here, then wraps */
    background: var(--white);
    /* Match the outbound .dc-fld pills (coherent Good Night). */
    border: 1px solid var(--dc-hair, #E3E9EC);
    border-radius: 0.625rem;
    height: 2.5rem;
    padding: 0 0.6875rem;
}
.gn-row .gn-field--name  { flex-grow: 2; min-width: 10rem; }
.gn-row .gn-field--city  { flex-grow: 1.4; min-width: 9rem; }
.gn-row .gn-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    opacity: 0.55;
    flex-shrink: 0;
}
.gn-row .gn-input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    min-width: 0;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
    padding: 0;
    /* No text-overflow: ellipsis here — the brief explicitly bans
       hiding text. Inputs scroll horizontally when content
       exceeds width, which is the native fallback. */
}
.gn-row .gn-input::placeholder { color: rgba(0, 62, 84, 0.45); }

/* Type-icon square at the start of the row */
.gn-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--teal-dark);
    color: var(--white);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.05s ease;
    padding: 0;
}
.gn-type-icon:hover { background: #002f40; }
.gn-type-icon:active { transform: translateY(1px); }
.gn-type-icon:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.gn-type-icon svg { width: 20px; height: 20px; }

/* Cost bundle — price + unit + × + nights, kept glued together */
.gn-cost-bundle {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    flex: 0 0 auto;
}

/* Price + unit fused control */
.gn-price-group {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--white);
    border: 1px solid var(--dc-hair, #E3E9EC);
    border-radius: 0.625rem;
    height: 2.5rem;
    padding: 0 0.6875rem;
    min-width: 10rem;
}
.gn-price-group .gn-currency {
    color: var(--text);
    opacity: 0.7;
    font-weight: 600;
}
.gn-price-group .gn-cost-input {
    width: 4rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.gn-price-divider {
    width: 1px;
    height: 1.25rem;
    background: rgba(0, 62, 84, 0.15);
}
.gn-unit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.125rem 0.375rem;
    border-radius: 0.375rem;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.gn-unit-btn:hover { background: rgba(0, 62, 84, 0.06); }
.gn-unit-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.gn-unit-chevron { opacity: 0.7; }
.gn-costtype-hidden { display: none !important; }

/* Nights stepper — × − N notti + */
.gn-nights-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--white);
    border: 1px solid var(--dc-hair, #E3E9EC);
    border-radius: 0.625rem;
    height: 2.5rem;
    padding: 0 0.4375rem;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.gn-nights-group--dim { opacity: 0.5; }
.gn-nights-group .gn-times {
    color: var(--text);
    opacity: 0.55;
    font-weight: 700;
    margin-right: 0.125rem;
}
.gn-stepper-btn {
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgba(0, 62, 84, 0.2);
    border-radius: 0.3125rem;
    background: var(--white);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.gn-stepper-btn:hover { background: rgba(0, 62, 84, 0.06); }
.gn-stepper-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.gn-nights-display {
    min-width: 1.25rem;
    text-align: center;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.gn-nights-label {
    color: var(--text);
    opacity: 0.75;
    font-size: 0.8125rem;
    font-weight: 600;
}
.gn-nights-hidden { display: none !important; }

/* Chevron — opens the overlay */
.gn-chevron-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(0, 62, 84, 0.18);
    border-radius: 0.5rem;
    background: var(--white);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
    padding: 0;
}
.gn-chevron-btn:hover { background: rgba(0, 62, 84, 0.06); }
.gn-chevron-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.gn-chevron-btn[aria-expanded="true"] {
    background: rgba(0, 62, 84, 0.08);
    border-color: rgba(0, 62, 84, 0.32);
}
.gn-chevron-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Attachment slot */
.gn-attach {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Defensive override: `.gn-row2` and `.gn-type-menu` both ship
   `display: flex`, which under normal CSS cascade beats the UA
   stylesheet's `[hidden] { display: none }` of equal specificity
   (author > user-agent). Without this rule the type-menu would
   stay visible from initial render — the toggle JS would only
   move the `hidden` attribute around but the user would never
   see anything change. */
.gn-row2[hidden],
.gn-type-menu[hidden] { display: none !important; }

/* Second row — appears INLINE under the first row when the chevron
   is clicked. Holds the custom Type dropdown (with SVG icons in
   each option) + the Indirizzo input. Hidden by default via the
   [hidden] attribute. The row's `flex: 1 1 100%` forces it onto a
   new line under the first row, so the first row keeps its compact
   layout above. */
.gn-row2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.625rem;
    padding: 0 0.75rem 0.75rem;
    width: 100%;
    flex: 1 1 100%;
    animation: gn-row2-in 0.12s ease;
}
@keyframes gn-row2-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.gn-row2 .gn-field--address {
    flex: 1 1 14rem;
    min-width: 12rem;
}
.gn-row2 .gn-field--link {
    flex: 1 1 14rem;
    min-width: 12rem;
}

/* Custom Type dropdown — button + floating menu */
.gn-type-dropdown {
    position: relative;
    flex: 0 0 auto;
    min-width: 11rem;
}
.gn-type-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    width: 100%;
    padding: 0.4375rem 0.625rem;
    background: var(--white);
    border: 1px solid rgba(0, 62, 84, 0.18);
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.2;
    text-align: left;
}
.gn-type-dropdown-trigger:hover { border-color: rgba(0, 62, 84, 0.32); }
.gn-type-dropdown-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.gn-type-dropdown-trigger[aria-expanded="true"] {
    border-color: rgba(0, 62, 84, 0.36);
    box-shadow: 0 0 0 3px rgba(0, 62, 84, 0.08);
}
.gn-type-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--text);
    flex-shrink: 0;
}
.gn-type-dropdown-icon svg { width: 18px; height: 18px; }
.gn-type-dropdown-label {
    flex: 1;
    white-space: nowrap;
    overflow: visible;
}
.gn-type-dropdown-chevron {
    flex-shrink: 0;
    opacity: 0.6;
    transition: transform 0.15s ease;
}
.gn-type-dropdown-trigger[aria-expanded="true"] .gn-type-dropdown-chevron {
    transform: rotate(180deg);
}

/* Type menu — position: fixed at runtime so it escapes the
   #daysContainer .day-content { overflow: hidden } that would otherwise clip it. */
/* Uniform with the transport mode picker (.dc-pop / .dc-opt): a white popover
   of icon-over-label chips, navy active, instead of the old text list. */
.gn-type-menu {
    position: fixed;
    z-index: 1000;
    width: max-content;            /* compact, like .dc-pop (not stretched to the row) */
    background: var(--white);
    border: 1px solid #E3E9EC;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(10, 59, 77, 0.18);
    padding: 8px;
    display: grid;
    grid-auto-flow: column;
    gap: 6px;
    animation: gn-row2-in 0.12s ease;
}
.gn-type-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 5px;
    background: #f3f7f9;
    border: none;
    border-radius: 10px;
    color: #0A3B4D;
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.15;
    width: 64px;
}
.gn-type-menu-item:hover { background: rgba(10, 59, 77, 0.08); }
.gn-type-menu-item.is-active {
    background: #0A3B4D;
    color: #fff;
    font-weight: 700;
}
/* mobile: wrap the single row to a 4-column grid (same as the mode picker) */
@media (max-width: 767px) {
    .gn-type-menu {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, 1fr);
        width: auto;
        max-width: calc(100vw - 32px);
    }
    .gn-type-menu-item { width: auto; }
}
.gn-type-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: inherit;
    flex-shrink: 0;
}
.gn-type-menu-icon svg { width: 20px; height: 20px; }

/* Mobile (<=767) — the redesign brief explicitly parks the
   mobile layout. The row still renders, but stacks each pair
   on its own line so we don't ship a half-cooked compact row
   on phones. Mobile redesign comes next. */
@media (max-width: 767px) {
    /* Mirror the outbound leg's box distribution: row 1 = type icon + name +
       chevron (like mode + route + chevron); then city, then price+nights and
       the attachment flow onto the following lines (like .dc-mextra). */
    /* font-size on the whole row so the currency ("USD") + nights ("× 1 notte")
       inherit 0.85rem like the inputs — they had NO explicit size and were
       rendering bigger than the rest of the daily card. */
    .gn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem; font-size: 0.9rem; }
    /* 3-row mobile layout — each row spans the full width:
       Row 1 = type-icon · name · chevron
       Row 2 = city
       Row 3 = price · nights · attachment (attachment pushed to the far right) */
    .gn-type-icon { order: 0; width: 38px; height: 38px; }
    /* basis 0 (not auto) so the name doesn't hog width + push the chevron down. */
    .gn-row .gn-field--name { order: 1; flex: 1 1 0; min-width: 0; }
    /* chevron like the daily-card one (.dc-expand): plain icon — no box, no
       background, no colour change on toggle. */
    .gn-chevron-btn { order: 2; width: 38px; height: 38px; border: none; background: none; border-radius: 0; color: rgba(0, 62, 84, 0.55); }
    .gn-chevron-btn:hover { background: none; }
    .gn-chevron-btn[aria-expanded="true"] { background: none; border-color: transparent; }
    .gn-row .gn-field--city { order: 3; flex: 1 1 100%; min-width: 0; }
    /* Flatten the cost bundle so price / nights / attachment order independently
       on row 3: price on the LEFT, nights + attachment grouped on the RIGHT — the
       gap sits BETWEEN price and nights, not between nights and attachment. */
    .gn-cost-bundle { display: contents; }
    /* price box GROWS to fill the leftover space so there's no white gap; nights
       + attachment stay fixed on the right, adjacent. flex-BASIS 0 (not auto) so
       its content width can't push nights/attachment onto a 4th line — it just
       grows into whatever space is left. */
    .gn-price-group { order: 4; flex: 1 1 0; min-width: 0; }
    .gn-nights-group { order: 5; flex: 0 0 auto; }
    .gn-attach { order: 6; flex: 0 0 auto; }
    /* wider price field: the cost input grows inside the (now-growing) price box. */
    .gn-price-group .gn-cost-input { flex: 1 1 auto; width: auto; min-width: 2.5rem; }
    /* match the spostamento inputs: 0.85rem, NOT bold (was 600). */
    .gn-row .gn-input { font-size: 0.85rem; font-weight: 400; }
    /* smaller currency label */
    .gn-price-group .gn-currency { font-size: 0.72rem; font-weight: 500; }
    .gn-row .gn-field,
    .gn-price-group,
    .gn-nights-group { height: 38px; }
    .gn-row2  { order: 7; }
}

/* ─── Attachment indicator — SVG-only chrome ────────────────────
   The empty button shows a paperclip; the filled button (when a
   wallet doc is linked, paintAttachmentIndicators adds .filled)
   shows a green check on a pale green surface. .attach-icon /
   .attach-check live as siblings in the markup; we swap which is
   visible via display: block/none.
   sr-only keeps the "Allegato" label exposed to assistive tech
   without affecting visual layout. */
.attachment-indicator .attach-icon,
.attachment-indicator .attach-check {
    width: 16px;
    height: 16px;
    display: block;
}
.attachment-indicator .attach-check { display: none; color: #2e8b57; }
.attachment-indicator .attach-icon  { color: var(--text); opacity: 0.75; }
.attachment-indicator:hover .attach-icon { opacity: 1; }

.attachment-indicator.filled {
    /* override the legacy `background: var(--text)` rule with the
       green tick treatment: pale green surface + emerald border */
    background: rgba(46, 139, 87, 0.12) !important;
    border-color: #2e8b57 !important;
    color: #2e8b57 !important;
}
.attachment-indicator.filled .attach-icon  { display: none; }
.attachment-indicator.filled .attach-check { display: block; }

/* Visually-hidden helper for the "Allegato" text label inside the
   indicator (read by screen readers, invisible on screen). */
.attachment-indicator .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   EXPORT PDF — customization modal (pdfx-*)
   ═══════════════════════════════════════════════════════ */
.pdfx-overlay { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: var(--space-md); background: rgba(0,62,84,0.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pdfx-modal { width: min(34rem, 100%); max-height: 90vh; overflow: auto; background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,62,84,0.28); font-family: var(--font); color: var(--text); display: flex; flex-direction: column; }
.pdfx-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-md) var(--space-sm); }
.pdfx-head-ic { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--bg); color: var(--text); flex: 0 0 auto; }
.pdfx-head-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pdfx-title { font-weight: 800; font-size: 1.05rem; }
.pdfx-sub { font-size: 0.8rem; color: var(--muted); }
.pdfx-x { border: none; background: transparent; color: var(--muted); font-size: 1.05rem; cursor: pointer; width: 2rem; height: 2rem; border-radius: 8px; flex: 0 0 auto; }
.pdfx-x:hover { background: rgba(0,62,84,0.06); color: var(--text); }
.pdfx-body { padding: 0 var(--space-md) var(--space-sm); display: flex; flex-direction: column; gap: var(--space-md); }
.pdfx-sec { display: flex; flex-direction: column; gap: var(--space-sm); }
.pdfx-eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pdfx-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
.pdfx-theme { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.6rem 0.3rem; border: 1.5px solid rgba(0,62,84,0.12); border-radius: 12px; background: var(--white); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pdfx-theme.is-sel { border-color: var(--text); box-shadow: 0 0 0 3px rgba(0,62,84,0.10); }
.pdfx-theme-sw { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); }
.pdfx-theme-sw i { width: 0.9rem; height: 1.4rem; display: block; }
.pdfx-theme-nm { font-size: 0.75rem; font-weight: 700; }
.pdfx-pills { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.pdfx-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.8rem; border: 1.5px solid rgba(0,62,84,0.12); border-radius: 999px; background: var(--white); color: var(--muted); font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all .15s; }
.pdfx-pill-check { display: inline-flex; width: 0; overflow: hidden; opacity: 0; transition: all .15s; }
.pdfx-pill.is-on { border-color: var(--text); background: var(--text); color: var(--white); }
.pdfx-pill.is-on .pdfx-pill-check { width: 0.8rem; opacity: 1; }
.pdfx-opts { display: flex; flex-direction: column; gap: var(--space-xs); }
.pdfx-opt { display: flex; align-items: center; gap: var(--space-sm); padding: 0.55rem 0.2rem; border: none; background: transparent; cursor: pointer; text-align: left; border-radius: 10px; font-family: var(--font); }
.pdfx-opt:hover { background: rgba(0,62,84,0.03); }
.pdfx-opt-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pdfx-opt-lb { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.pdfx-opt-sub { font-size: 0.76rem; color: var(--muted); }
.pdfx-switch { flex: 0 0 auto; width: 2.3rem; height: 1.3rem; border-radius: 999px; background: rgba(0,62,84,0.16); position: relative; transition: background .15s; }
.pdfx-switch i { position: absolute; top: 2px; left: 2px; width: calc(1.3rem - 4px); height: calc(1.3rem - 4px); border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.pdfx-opt.is-on .pdfx-switch { background: var(--accent); }
.pdfx-opt.is-on .pdfx-switch i { left: calc(100% - 1.3rem + 2px); }
.pdfx-foot { display: flex; gap: var(--space-sm); justify-content: flex-end; padding: var(--space-sm) var(--space-md) var(--space-md); position: sticky; bottom: 0; background: var(--white); }
.pdfx-cancel { border: 1.5px solid rgba(0,62,84,0.14); background: var(--white); color: var(--text); border-radius: 12px; padding: 0.6rem 1.1rem; font-weight: 700; cursor: pointer; font-family: var(--font); }
.pdfx-cancel:hover { background: rgba(0,62,84,0.04); }
.pdfx-go { display: inline-flex; align-items: center; gap: 0.45rem; border: none; background: var(--accent); color: var(--text); border-radius: 12px; padding: 0.6rem 1.2rem; font-weight: 800; cursor: pointer; font-family: var(--font); }
.pdfx-go:hover { filter: brightness(0.96); }
.pdfx-go:disabled { opacity: 0.7; cursor: default; }
@media (max-width: 560px) {
  .pdfx-themes { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════
   BAGAGLI (pack) — parity with the Checklist tab
   Reuses .checklist-* structure; these rules override the
   legacy dark-header pack styles and add the toolbar +
   subcategory pills + nested thread.
   ═══════════════════════════════════════════════════════ */
/* category name: navy bold text on the white header (was cream) */
.checklist-section .category-name-input {
    color: var(--text) !important;
    font-weight: 700; font-size: var(--text-sm);
    background: transparent; border: none; padding: 0;
    flex: 1 1 auto; min-width: 0; cursor: text;
    text-overflow: ellipsis; font-family: var(--font);
}
.checklist-section .category-name-input::placeholder { color: rgba(0,62,84,0.35); }
.checklist-section .category-name-input:focus { outline: none; background: rgba(0,62,84,0.05); border-radius: 6px; }
.checklist-section .header-content svg { color: var(--cl-accent); flex: 0 0 auto; }

/* category delete (trash) — subtle, red on hover */
.cl-cat-del { border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 0 4px; display: inline-flex; align-items: center; opacity: 0.45; transition: opacity 0.12s, color 0.12s; flex: 0 0 auto; }
.checklist-header:hover .cl-cat-del { opacity: 0.85; }
.cl-cat-del:hover { color: #c0392b; }

/* toolbar: eyebrow + "Aggiungi categoria" */
.pack-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 0 var(--space-md) var(--space-sm); }
.pack-eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pack-addcat-btn { display: inline-flex; align-items: center; gap: 0.4rem; border: none; background: var(--text); color: var(--white); border-radius: 10px; padding: 0.5rem 1rem; font-weight: 700; font-size: 0.85rem; cursor: pointer; font-family: var(--font); white-space: nowrap; }
.pack-addcat-btn:hover { background: #00516e; }

/* quantity control: compact pill with accent +/- (matches mockup) */
.checklist-item .quantity-control { background: rgba(0,62,84,0.05); border-radius: 999px; padding: 2px; gap: 2px; }
.checklist-item .quantity-btn { width: 22px; height: 22px; border: none; background: transparent; color: var(--text); border-radius: 50%; font-size: 1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s; }
.checklist-item .quantity-btn:hover { background: rgba(0,62,84,0.10); transform: none; }
.checklist-item .quantity-value { min-width: 1.4rem; text-align: center; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

/* subcategory: tinted pill + items nested one notch deeper on the thread */
.clothes-subcategory { margin: 0; }
.clothes-subcategory .subcategory-header { display: flex; align-items: center; gap: 0.4rem; width: fit-content; max-width: calc(100% - 44px); margin: 8px 0 2px 44px; padding: 3px 10px; background: color-mix(in srgb, var(--cl-accent) 13%, var(--white)); border-radius: 999px; cursor: pointer; }
.clothes-subcategory .subcategory-header .header-content { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.clothes-subcategory .subcategory-name { background: transparent !important; border: none !important; color: var(--cl-accent) !important; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font); width: auto; max-width: 11rem; padding: 0; }
.clothes-subcategory .subcategory-name:focus { outline: none; }
.pack-subcat-count { flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; color: #243B5E; background: #FBF3C6; border-radius: 6px; min-width: 1.1rem; text-align: center; padding: 0 5px; }
.clothes-subcategory .subcategory-header .collapse-arrow { font-size: 0.7rem; color: var(--cl-accent); }
.clothes-subcategory .subcategory-header .remove-icon { color: var(--cl-accent); opacity: 0; }
.clothes-subcategory .subcategory-header:hover .remove-icon { opacity: 0.7; }
.subcategory-items { margin: 0; }
/* nested items: extra left indent, tick + thread shifted one notch */
.checklist-item.subcategory-item { padding-left: 56px; }
.checklist-item.subcategory-item .completion-tick { left: 28px; }
.checklist-item.subcategory-item::before,
.checklist-item.subcategory-item::after { left: 38px; }

/* ═══ Bagagli — add-category modal (pkc) + icon picker + clickable header icon ═══ */
.pkc-content { max-width: 460px; }
.pkc-label { display: block; text-align: left; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0.7rem 0 0.4rem; }
.pkc-colors { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.pkc-swatch { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--sw); border: 3px solid transparent; cursor: pointer; transition: transform 0.12s, border-color 0.12s; padding: 0; }
.pkc-swatch:hover { transform: scale(1.08); }
.pkc-swatch.is-sel { border-color: var(--text); }
.pkc-icons { display: grid; grid-template-columns: repeat(8, 2rem); justify-content: center; gap: 0.6rem; }
.pkc-icons--lg { grid-template-columns: repeat(6, 2.2rem); gap: 0.7rem; }
.pkc-icon { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(0,62,84,0.12); border-radius: 9px; background: var(--white); color: var(--text); cursor: pointer; transition: all 0.12s; padding: 0; }
.pkc-icon svg { width: 14px; height: 14px; }
.pkc-icon:hover { border-color: var(--text); background: rgba(0,62,84,0.04); }
.pkc-icon.is-sel { border-color: var(--text); background: var(--text); color: var(--white); }

/* clickable category icon in the header (Notion-style) */
.pack-cat-ic { border: none; background: transparent; padding: 2px; margin: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--cl-accent); cursor: pointer; border-radius: 6px; flex: 0 0 auto; transition: background 0.12s; }
.pack-cat-ic:hover { background: color-mix(in srgb, var(--cl-accent) 16%, transparent); }

/* ═══ Bagagli — clearer Clothing subcategories (no filled tint, bigger) ═══ */
/* kill the legacy darker box around subcategories — everything sits clean on the card */
.checklist-section .clothes-subcategory { background: transparent; border: none; border-radius: 0; padding: 0; margin: 4px 0 6px; }
.checklist-section .subcategory-item { margin-left: 0; background: transparent; }
.clothes-subcategory .subcategory-header { display: flex; align-items: center; gap: 0.5rem; width: auto; max-width: none; margin: 12px 0 2px 44px; padding: 3px 0 6px; background: transparent; border-radius: 0; border-bottom: 1.5px solid color-mix(in srgb, var(--cl-accent) 32%, transparent); }
.clothes-subcategory .subcategory-header::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: #243B5E; flex: 0 0 auto; }
.clothes-subcategory .subcategory-header .header-content { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.clothes-subcategory .subcategory-name { background: transparent !important; border: none !important; color: var(--text) !important; font-weight: 700; font-size: 0.88rem; letter-spacing: 0; text-transform: none; width: auto; max-width: 14rem; padding: 0; }
.clothes-subcategory .subcategory-name:focus { outline: none; background: rgba(0,62,84,0.05) !important; border-radius: 5px; }
.pack-subcat-count { flex: 0 0 auto; background: #FBF3C6; color: #243B5E; font-weight: 800; font-size: 0.68rem; border-radius: 6px; min-width: 1.2rem; text-align: center; padding: 1px 6px; }
.clothes-subcategory .subcategory-header .collapse-arrow { margin-left: auto; color: var(--muted); font-size: 0.7rem; }
.clothes-subcategory .subcategory-header .remove-icon { color: var(--muted); opacity: 0; flex: 0 0 auto; }
.clothes-subcategory .subcategory-header:hover .remove-icon { opacity: 0.7; }

/* Tighten the add-category modal: less space between the icon grid and OK/Cancel */
.pkc-content { padding-bottom: var(--space-md); }
.pkc-content .pkc-icons { margin-bottom: 0; }
.pkc-content .custom-prompt-buttons { margin-top: var(--space-md); }
.pkc-content .pkc-label { margin-top: 0.55rem; margin-bottom: 0.35rem; }

/* ═══ Bagagli — Clothing subcategory: clean compact header (final) ═══ */
.checklist-section .clothes-subcategory .subcategory-header {
    display: flex; align-items: center; gap: 0.5rem;
    width: auto; max-width: none;
    margin: 12px 0 2px 44px;
    padding: 2px 8px 6px 0;
    background: transparent; border-radius: 0;
    border-bottom: 1px solid rgba(0,62,84,0.12);
    min-height: 0;
}
.checklist-section .clothes-subcategory .subcategory-header::before {
    content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--cl-accent);
}
.checklist-section .clothes-subcategory .subcategory-header .header-content {
    display: flex; align-items: center; gap: 0.45rem; flex: 1 1 auto; min-width: 0;
}
.checklist-section .clothes-subcategory .subcategory-name {
    background: transparent !important; border: none !important; color: var(--text) !important;
    font-weight: 700; font-size: 0.88rem; letter-spacing: 0; text-transform: none;
    flex: 0 1 auto; min-width: 0; max-width: none; margin-right: auto; padding: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* count: small subtle pill (no big dark circle) */
.checklist-section .clothes-subcategory .pack-subcat-count {
    flex: 0 0 auto; background: color-mix(in srgb, var(--cl-accent) 14%, var(--white));
    color: var(--cl-accent); font-weight: 800; font-size: 0.68rem; line-height: 1.5;
    border-radius: 999px; min-width: auto; padding: 0 7px;
}
.checklist-section .clothes-subcategory .subcategory-header .collapse-arrow {
    flex: 0 0 auto; margin-left: 0; color: var(--muted); font-size: 0.7rem;
}
.checklist-section .clothes-subcategory .subcategory-header .remove-icon {
    flex: 0 0 auto; color: var(--muted); opacity: 0;
}
.checklist-section .clothes-subcategory .subcategory-header:hover .remove-icon { opacity: 0.7; }
/* nested items: consistent height, thread one notch in */
.checklist-section .checklist-item.subcategory-item { padding-top: 8px; padding-bottom: 8px; min-height: 0; margin-left: 0; }

/* add-category modal: "Con sottocategorie" checkbox */
.pkc-flag { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-top: 0.8rem; user-select: none; }
.pkc-flag input { position: absolute; opacity: 0; width: 0; height: 0; }
.pkc-flag-box { width: 1.15rem; height: 1.15rem; border: 2px solid rgba(0,62,84,0.3); border-radius: 6px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s; }
.pkc-flag input:checked + .pkc-flag-box { background: var(--text); border-color: var(--text); }
.pkc-flag input:checked + .pkc-flag-box::after { content: '✓'; color: #fff; font-size: 0.78rem; font-weight: 700; line-height: 1; }
.pkc-flag-txt { font-size: 0.85rem; font-weight: 600; color: var(--text); }

/* ═══ Bagagli — subcategory TREE branch (category │ → ├─ subcategory) ═══ */
.checklist-section .clothes-subcategory { position: relative; margin: 0; padding: 0; }
/* trunk: continuous vertical line down the subcategory area */
.checklist-section .clothes-subcategory::before {
    content: ''; position: absolute; left: 10px; top: 0; height: 100%; width: 2px;
    background: color-mix(in srgb, var(--cl-accent) 30%, transparent);
}
/* elbow: short horizontal connector from the trunk to each subcategory */
.checklist-section .clothes-subcategory::after {
    content: ''; position: absolute; left: 10px; top: 16px; width: 14px; height: 2px;
    background: color-mix(in srgb, var(--cl-accent) 30%, transparent);
}
/* header: starts right of the branch, inset on the right (no full-width row/arrow) */
.checklist-section .clothes-subcategory .subcategory-header {
    display: flex; align-items: center; gap: 0.45rem;
    margin: 8px 18px 2px 26px; padding: 2px 0 6px; width: auto; max-width: none;
    background: transparent; border-radius: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--cl-accent) 22%, transparent);
}
.checklist-section .clothes-subcategory .subcategory-header::before { content: none; }  /* drop the dot — the branch replaces it */
.checklist-section .clothes-subcategory .subcategory-header .header-content { display: flex; align-items: center; gap: 0.45rem; flex: 1 1 auto; min-width: 0; }
.checklist-section .clothes-subcategory .subcategory-name {
    background: transparent !important; border: none !important; color: var(--text) !important;
    font-weight: 700; font-size: 0.88rem; text-transform: none; letter-spacing: 0;
    flex: 0 1 auto; min-width: 0; max-width: none; margin-right: auto; padding: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.checklist-section .clothes-subcategory .pack-subcat-count {
    flex: 0 0 auto; background: color-mix(in srgb, var(--cl-accent) 14%, var(--white));
    color: var(--cl-accent); font-weight: 800; font-size: 0.68rem; line-height: 1.5;
    border-radius: 999px; min-width: auto; padding: 0 7px;
}
.checklist-section .clothes-subcategory .subcategory-header .collapse-arrow { flex: 0 0 auto; margin-left: 0; color: var(--muted); font-size: 0.7rem; }
.checklist-section .clothes-subcategory .subcategory-header .remove-icon { flex: 0 0 auto; color: var(--muted); opacity: 0; }
.checklist-section .clothes-subcategory .subcategory-header:hover .remove-icon { opacity: 0.7; }
/* "Add item" of the subcategory: aligned left with the subcategory name */
.checklist-section .clothes-subcategory .add-item-control { margin: 0 0 4px 26px; padding: 4px 0 4px 22px; }
.checklist-section .clothes-subcategory .add-item-control .add-icon { left: 0; }
/* items hang off the trunk: tick aligned under the name, no extra per-item thread */
.checklist-section .clothes-subcategory .checklist-item.subcategory-item { padding-left: 48px; }
.checklist-section .clothes-subcategory .checklist-item.subcategory-item .completion-tick { left: 26px; }
.checklist-section .clothes-subcategory .checklist-item.subcategory-item::before,
.checklist-section .clothes-subcategory .checklist-item.subcategory-item::after { content: none; }

/* ═══ Bagagli — revert tree lines, keep the dot (final v3) ═══ */
.checklist-section .clothes-subcategory { position: static; }
.checklist-section .clothes-subcategory::before,
.checklist-section .clothes-subcategory::after { content: none; }
.checklist-section .clothes-subcategory .subcategory-header { margin: 10px 18px 2px 44px; }
.checklist-section .clothes-subcategory .subcategory-header::before {
    content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
    background: var(--cl-accent); top: auto;
}
/* "Add item" aligned with the subcategory dot + name */
.checklist-section .clothes-subcategory .add-item-control { margin: 0 0 4px 44px; padding: 4px 0 4px 22px; }
.checklist-section .clothes-subcategory .add-item-control .add-icon { left: 0; }
/* items: restore the per-item thread + tick */
.checklist-section .clothes-subcategory .checklist-item.subcategory-item { padding-left: 56px; }
.checklist-section .clothes-subcategory .checklist-item.subcategory-item .completion-tick { left: 28px; }
.checklist-section .clothes-subcategory .checklist-item.subcategory-item::before { content: ''; left: 38px; }
.checklist-section .clothes-subcategory .checklist-item.subcategory-item::after { content: ''; left: 38px; }

/* subcategory rows: inset on the right so the separator line / hover highlight
   don't reach the main category's right edge */
.checklist-section .clothes-subcategory .checklist-item.subcategory-item { margin-right: 18px; border-radius: 8px; }
.checklist-section .clothes-subcategory .checklist-item.subcategory-item:hover { background: rgba(0,62,84,0.035); }
.checklist-section .clothes-subcategory .add-item-control { margin-right: 18px; border-radius: 8px; }

/* ═══ Bagagli/Checklist — node geometry (icon ↔ item circles ↔ "+") ═══ */
/* top-level: align the category header icon with the item circles / "+" below */
.checklist-section .checklist-header { padding-left: 19px; }
/* subcategory: dot ↔ item circles ↔ "+" on one vertical axis */
.checklist-section .clothes-subcategory .subcategory-header { margin-left: 35px; }
.checklist-section .clothes-subcategory .subcategory-header::before { width: 8px; height: 8px; }
.checklist-section .clothes-subcategory .checklist-item.subcategory-item { padding-left: 56px; }
.checklist-section .clothes-subcategory .checklist-item.subcategory-item .completion-tick { left: 28px; }
.checklist-section .clothes-subcategory .checklist-item.subcategory-item::before,
.checklist-section .clothes-subcategory .checklist-item.subcategory-item::after { content: ''; left: 38px; }
.checklist-section .clothes-subcategory .add-item-control { margin-left: 0; padding-left: 56px; margin-right: 18px; }
.checklist-section .clothes-subcategory .add-item-control .add-icon { left: 28px; }

/* ═══════════════════════════════════════════════════════
   DOCUMENTI (requirements) — Wallet del viaggio
   Same design language as Checklist/Bagagli.
   ═══════════════════════════════════════════════════════ */
.sidebar-panel[data-section="requirements"] > .panel-content { background: var(--bg); padding: 0; }
.documents-container { padding: var(--space-xs) var(--space-md) var(--space-md); background: var(--bg); font-family: var(--font); color: var(--text); }
.documents-container .documents-title { display: none; }

/* sticky strip: add button + count · secure */
.docs-strip { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-md)) var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--white); border-bottom: 1px solid rgba(0,62,84,0.10); }
/* Documents toolbar — search + single filter button (memo-style) */
.docs-tools { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 var(--space-md) var(--space-sm); }
.docs-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: rgba(0,62,84,0.04); border: 1.5px solid rgba(0,62,84,0.12); border-radius: 10px; padding: 7px 11px; color: var(--muted); }
.docs-search:focus-within { border-color: var(--text); background: var(--white); }
.docs-search-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: var(--font); font-size: var(--text-sm); color: var(--text); }

/* Panel-header add-buttons (Documenti: +Documento, Bagagli: +Categoria). Hidden
   everywhere by default (plus the `hidden` attribute) so they never leak onto
   another panel; each is revealed only for its own section on mobile. */
.tp-panel-add {
    display: none;
    height: 2.5rem; flex: 0 0 auto;
    align-items: center; gap: 5px;
    padding: 0 0.8rem;
    border: none; border-radius: 999px; cursor: pointer;
    background: var(--accent); color: var(--text);
    font-family: var(--font); font-weight: 700; font-size: 0.82rem;
    white-space: nowrap;
    transition: filter 0.15s ease;
}
.tp-panel-add svg { flex: 0 0 auto; }
.tp-panel-add:hover { filter: brightness(0.94); }
@media (max-width: 767px) {
    /* Mobile: the add-button rides in the header; the in-body strip/toolbar is
       dropped. Documenti also pins the search bar right under the header. */
    .sidebar-panel[data-section="requirements"] .tp-panel-add--doc { display: inline-flex; }
    .sidebar-panel[data-section="pack"] .tp-panel-add--cat { display: inline-flex; }
    .sidebar-panel[data-section="requirements"] .docs-strip { display: none; }
    .sidebar-panel[data-section="requirements"] .docs-tools { padding-top: var(--space-sm); }
    .sidebar-panel[data-section="pack"] .pack-toolbar { display: none; }
    .sidebar-panel[data-section="pack"] .checklist-sections { padding-top: var(--space-sm); }
}
.docs-filter-btn { position: relative; flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(0,62,84,0.12); background: rgba(0,62,84,0.04); color: var(--text); border-radius: 10px; cursor: pointer; }
.docs-filter-btn:hover { background: rgba(0,62,84,0.08); border-color: var(--text); }
.docs-filter-btn.has-filter { background: var(--text); border-color: var(--text); color: var(--bg); }
.docs-filter-btn.has-filter::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--white); }
.docs-filter-menu { position: absolute; top: calc(100% + 2px); right: var(--space-md); z-index: 30; background: var(--white); border: 1px solid rgba(0,62,84,0.12); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,62,84,0.18); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.docs-filter-menu[hidden] { display: none; }
.docs-filter-opt { text-align: left; border: none; background: transparent; color: var(--text); font-family: var(--font); font-size: var(--text-sm); font-weight: 600; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.docs-filter-opt:hover { background: rgba(0,62,84,0.06); }
.docs-filter-opt.is-active { background: var(--text); color: var(--bg); }
.docs-noresult { padding: var(--space-lg) var(--space-md); text-align: center; color: var(--muted); font-size: var(--text-sm); }
.docs-add-btn { display: inline-flex; align-items: center; gap: 0.45rem; border: none; background: var(--accent); color: var(--text); border-radius: 999px; padding: 0.55rem 1.1rem; font-weight: 800; font-size: 0.9rem; cursor: pointer; font-family: var(--font); white-space: nowrap; }
.docs-add-btn:hover { filter: brightness(0.96); }
.docs-meta { font-size: 0.85rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.docs-meta b { color: var(--text); font-weight: 800; }
.docs-secure { display: inline-flex; align-items: center; gap: 0.3rem; color: #408F8E; font-weight: 700; }

.doc-categories { display: flex; flex-direction: column; gap: var(--space-sm); }
.doc-category { background: var(--white); border: 1px solid rgba(36,59,94,0.16); border-radius: 12px; overflow: hidden; }
.doc-category-header { display: flex; align-items: center; gap: 0.6rem; padding: var(--space-sm) var(--space-md); cursor: pointer; border-bottom: 1px solid rgba(36,59,94,0.12); }
.doc-category.collapsed .doc-category-header { border-bottom-color: transparent; }
.doc-cat-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9px; background: color-mix(in srgb, var(--cl-accent) 16%, var(--white)); color: var(--cl-accent); }
.doc-cat-name { font-weight: 700; font-size: var(--text-sm); color: var(--text); flex: 1 1 auto; min-width: 0; }
.doc-cat-count { flex: 0 0 auto; min-width: 1.45rem; height: 1.45rem; padding: 0 0.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--cl-accent); color: #fff; font-weight: 800; font-size: 0.72rem; }
.doc-category .collapse-arrow { flex: 0 0 auto; color: var(--muted); font-size: 0.8rem; }
.doc-category-content.collapsed { display: none; }
.doc-list { display: flex; flex-direction: column; }

.doc-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem var(--space-md); border-top: 1px solid rgba(0,62,84,0.06); cursor: pointer; }
.doc-item:first-child { border-top: none; }
.doc-item:hover { background: rgba(0,62,84,0.025); }
.doc-ext { flex: 0 0 auto; width: 2.8rem; height: 2.8rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.02em; }
/* miniatura vera per le foto (4 ago): il quadratino diventa l'anteprima */
.doc-ext--thumb { padding: 0; overflow: hidden; background: #fff; border: 1px solid rgba(36, 59, 94, 0.15); }
.doc-ext--thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-ext--pdf   { background: #FDF8EF; color: #243B5E; border: 1px solid rgba(36,59,94,0.18); }
.doc-ext--png   { background: #E6F4EA; color: #2E7D52; }
.doc-ext--jpg   { background: #FDF8EF; color: #243B5E; border: 1px solid rgba(36,59,94,0.18); }
.doc-ext--doc   { background: #FDF8EF; color: #243B5E; border: 1px solid rgba(36,59,94,0.18); }
.doc-ext--other { background: rgba(0,62,84,0.06); color: var(--muted); }
.doc-info { flex: 1 1 auto; min-width: 0; }
.doc-name { font-weight: 600; font-size: 0.86rem; color: #243B5E; display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-size: 0.72rem; color: var(--muted); display: flex; align-items: center; gap: 0.45rem; margin-top: 2px; flex-wrap: wrap; row-gap: 3px; min-width: 0; }
.doc-meta-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.doc-day { flex: 0 0 auto; background: #FBF3C6; color: #243B5E; font-weight: 800; font-size: 0.68rem; border-radius: 6px; padding: 1px 7px; }
.mv-shared-badge { color: #408F8E; flex: 0 0 auto; }
.doc-actions { flex: 0 0 auto; }
.doc-action-btn.wallet-row-kebab { border: none; background: transparent; color: var(--muted); cursor: pointer; width: 1.8rem; height: 1.8rem; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.doc-action-btn.wallet-row-kebab:hover { background: rgba(0,62,84,0.06); color: var(--text); }

.docs-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; padding: var(--space-md); color: var(--muted); }
.docs-empty-ic { color: rgba(0,62,84,0.25); }
.docs-empty-title { font-weight: 700; color: var(--text); font-size: 0.9rem; }
.docs-empty-sub { font-size: 0.8rem; max-width: 22rem; line-height: 1.4; }
.docs-empty-add { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.4rem; border: 1.5px dashed rgba(0,62,84,0.3); background: transparent; color: var(--text); border-radius: 999px; padding: 0.45rem 1rem; font-weight: 700; cursor: pointer; font-family: var(--font); }
.docs-empty-add:hover { background: rgba(0,62,84,0.04); }
.docs-show-hidden-row { padding: 0.4rem var(--space-md) var(--space-sm); }
.docs-show-hidden-btn { border: none; background: transparent; color: var(--cl-accent); font-weight: 700; font-size: 0.8rem; cursor: pointer; }

/* yellow expand + extended 2-column */
.sidebar-panel[data-section="requirements"] .tp-panel-expand { background: var(--accent); color: var(--text); border-radius: 50%; }
.sidebar-panel[data-section="requirements"] .tp-panel-expand:hover { filter: brightness(0.94); }
.sidebar-panel[data-section="requirements"].tp-center-split .tp-panel-expand svg { transform: rotate(180deg); transition: transform 0.18s; }
@media (min-width: 768px) {
    .sidebar-panel[data-section="requirements"].tp-center-split .doc-categories { display: block; column-count: 2; column-gap: var(--space-md); }
    .sidebar-panel[data-section="requirements"].tp-center-split .doc-category { break-inside: avoid; margin: 0 0 var(--space-sm); }
    /* always a balanced 2-2 split, no row gaps (personal+activities | transport+accommodation) */
    .sidebar-panel[data-section="requirements"].tp-center-split .doc-category[data-doc-category-id="activities"] { break-after: column; }
}

/* Documenti — override legacy navy header / clipped content */
.doc-category { box-shadow: none; }
.doc-category-header { background: var(--white) !important; color: var(--text) !important; }
.doc-category-header:hover { background: rgba(0,62,84,0.03) !important; }
.doc-category-content { max-height: none !important; padding: 0 !important; overflow: visible !important; }
.doc-category-content.collapsed { display: none !important; }

/* Documenti — match Checklist/Bagagli header height (inline icon, same left rail) */
.doc-category-header { padding-left: 19px !important; }
.doc-cat-ic { width: auto !important; height: auto !important; background: transparent !important; border-radius: 0 !important; padding: 0; color: var(--cl-accent); }
.doc-cat-ic svg { display: block; }

/* Documenti — lighter / shorter empty state */
.docs-empty { padding: var(--space-sm) var(--space-md); gap: 0.2rem; }
.docs-empty-ic svg { width: 22px; height: 22px; }
.docs-empty-ic { color: rgba(0,62,84,0.18); }
.docs-empty-title { font-size: 0.82rem; font-weight: 600; }
.docs-empty-sub { font-size: 0.72rem; max-width: 20rem; opacity: 0.85; }
.docs-empty-add { margin-top: 0.3rem; padding: 0.35rem 0.85rem; font-size: 0.8rem; font-weight: 600; }

/* Documenti — count badge like Checklist/Bagagli (plain muted text, no filled circle) */
.doc-cat-count { background: transparent !important; color: var(--muted) !important; min-width: 0 !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; font-weight: 800; font-size: var(--text-xs); font-variant-numeric: tabular-nums; margin-right: var(--space-xs); }

/* Documenti — rows flush like checklist items (kill legacy per-row card look) */
.doc-list { gap: 0 !important; }
.doc-item { background: transparent !important; border-radius: 0 !important; margin: 0 !important; transform: none !important; }
.doc-item:hover { background: rgba(0,62,84,0.03) !important; transform: none !important; }

/* subcategory name: never truncate — take the full available width (like the title box) */
.checklist-section .clothes-subcategory .subcategory-name { flex: 1 1 auto; min-width: 0; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: clip; margin-right: 0; }
.checklist-section .clothes-subcategory .subcategory-name:focus { background: rgba(0,62,84,0.05) !important; border-radius: 5px; }

/* uniform font sizes across tabs + documents toggle arrow same as checklist */
.doc-name { font-size: var(--text-sm) !important; }
.doc-meta { font-size: var(--text-xs) !important; }
.checklist-section .clothes-subcategory .subcategory-name { font-size: var(--text-sm) !important; }
.doc-category .collapse-arrow { font-size: var(--text-xs); }

/* Panel title tooltip — Menevo style (light card, navy text) */
.tp-panel-title[data-tip] { position: relative; cursor: help; }
.tp-panel-title[data-tip]::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 9px); left: 0;
    background: var(--white); color: var(--text);
    border: 1px solid rgba(0,62,84,0.12);
    box-shadow: 0 8px 22px rgba(0,62,84,0.16);
    border-radius: 12px; padding: 0.5rem 0.7rem;
    font-size: 0.78rem; font-weight: 600; line-height: 1.35;
    white-space: normal; max-width: 17rem; width: max-content;
    z-index: 60; pointer-events: none;
    opacity: 0; transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.tp-panel-title[data-tip]::before {
    content: ''; position: absolute; top: calc(100% + 3px); left: 14px;
    width: 10px; height: 10px; background: var(--white);
    border-left: 1px solid rgba(0,62,84,0.12); border-top: 1px solid rgba(0,62,84,0.12);
    transform: rotate(45deg); z-index: 61;
    opacity: 0; transition: opacity 0.14s ease;
}
.tp-panel-title[data-tip]:hover::after { opacity: 1; transform: translateY(0); }
.tp-panel-title[data-tip]:hover::before { opacity: 1; }

/* Bagagli item rows: same height/font as Checklist (the quantity control was
   taller than the row content). Trim it to match the tick/label height. */
.checklist-item .quantity-control { padding: 1px; gap: 1px; }
.checklist-item .quantity-btn { width: 20px; height: 20px; font-size: 0.95rem; }
.checklist-item .quantity-value { font-size: var(--text-sm); min-width: 1.3rem; }
.checklist-item .item-label { font-size: var(--text-sm); font-weight: 600; }

/* ═══ i18n size stability: keep single-line controls on ONE line in both IT/EN
   so switching language never changes element heights (no extra wrapping). ═══ */
.tp-panel-title,
.add-item-control span,
.cl-progress-txt,
.pack-eyebrow, .pack-addcat-btn,
.docs-meta, .docs-secure, .docs-add-btn span,
.doc-cat-name,
.checklist-section .header-content > span,
.checklist-section .clothes-subcategory .subcategory-name,
.chat-tab-btn,
.memo-ctrl-btn,
.pdfx-title, .pdfx-eyebrow, .pdfx-pill, .pdfx-opt-lb, .pdfx-cancel, .pdfx-go,
.pkc-cat-pill, .pkc-flag-txt,
.mv-cat-pill, .mv-btn-ghost, .mv-btn-primary { white-space: nowrap; }
/* names that can be long: clip with ellipsis instead of wrapping */
.doc-cat-name,
.checklist-section .header-content > span { overflow: hidden; text-overflow: ellipsis; }

/* menevo pass (4 ago notte, rivisto): i colori di categoria vivono SOLO su icona
   e nome in testata — bordi e box restano neutri (le regole sopra non usano più
   l'accento) */
.doc-cat-name { color: var(--cl-accent, #243B5E); }
/* pillole meta squadrate davvero (il raggio 6 coi padding piccoli sembrava pillola) */
.doc-day { border-radius: 4px !important; }
.doc-shared { background: transparent !important; border-radius: 0 !important; padding: 0 !important; color: rgba(36,59,94,0.6) !important; }