/* ============================================================
   daily-cards.css — Daily Cards rebuild · PROMPT 1
   SHELL + HEADER + CONNECTOR reskin only.
   The inner sections (travel / plans / good night / morning /
   overview) are NOT touched here — they keep their current
   markup/styles and will be redone in later prompts. A mixed
   state (new header + old sections inside the card) is expected.

   Everything is scoped under #daysContainer so it wins over the
   legacy .day-card rules in travel-planner-detail.css WITHOUT
   !important (id+class beats the bare class selectors).

   Density: the prototype's data-compact values are the DEFAULT
   (desktop ≥1024 and tablet 768–1023). The prototype .is-mobile
   values live in @media (max-width: 767px).

   Tokens: prototype-local names are aliased to the existing page
   brand tokens (same hex), scoped to #daysContainer so nothing
   leaks to :root. No global token file is loaded.
     --navy   → --text   (#0A3B4D)
     --yellow → --accent (#F9CD2D)
     --page   → --bg     (#FBF1D2)
   ============================================================ */

#daysContainer {
    /* Brand palette (scoped to the daily cards — no :root leak).
       Exact hex per the design system swatch. */
    --brand-navy:   #0A3B4D;   /* text, icons, active borders, filled buttons */
    --brand-yellow: #F9CD2D;   /* primary action, day badge, highlight */
    --brand-cream:  #FBF1D2;   /* brand page cream */
    --dc-navy-55:   #A9BCC4;   /* placeholder / muted small text (--ph) */
    --dc-sec-bg:    #F3F7F9;   /* inner section tint */
    --dc-inp-border: #E3E9EC;  /* field/select/textarea hairline border */
    --dc-time:      #57A6D6;   /* times / time ranges */
    --dc-green:     #3D7D36;   /* confirms / positive */
    --dc-red:       #B23A3A;   /* errors / delete / excess */
}

/* ── SHELL ───────────────────────────────────────────────── */
#daysContainer .day-card {
    background: #fdfefe;                       /* near-white card surface (prototype) */
    border: 2px solid var(--brand-navy);
    border-radius: 16px;
    padding: 14px 16px 16px;
    position: relative;                        /* anchor for the connector ::before */
}

/* ── HEADER ──────────────────────────────────────────────── */
#daysContainer .day-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;              /* override legacy space-between */
    gap: 10px;
    margin-bottom: 10px;
}
#daysContainer .day-title { gap: 8px; }

/* dnum — yellow disc, navy border + text */
#daysContainer .day-number-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand-yellow);
    border: 2px solid var(--brand-navy);
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
/* dtitle — yellow, heavy */
#daysContainer .day-title > span {
    font-size: 21px;
    font-weight: 800;
    color: var(--brand-yellow);
    letter-spacing: -0.01em;
}

/* day-cost pill — cream, navy, pushed right (margin-left:auto
   keeps cost+date+arrow right whether or not the collapse summary
   is present). */
#daysContainer .day-cost {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-left: auto;
    background: var(--brand-cream);
    color: var(--brand-navy);
    font-weight: 800;
    font-size: 15px;
    padding: 4px 12px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}
#daysContainer .day-cost .dc-eur { font-size: 13px; font-weight: 700; }
#daysContainer .day-cost small {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dc-navy-55);
    margin-left: 3px;
}

/* ddate — navy, calendar icon + text */
#daysContainer .day-date {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-navy);
    white-space: nowrap;
    margin-left: 0;                          /* override legacy margin-left:auto */
    /* The date must ALWAYS be visible (compact when space is tight) — it never
       shrinks or gets clipped; the title/badge below yields first. */
    flex-shrink: 0;
}
#daysContainer .day-date .ddate-ic { width: 15px; height: 15px; flex-shrink: 0; }
/* Title (day name + day-type badge) yields/ellipsises so the date keeps its
   place on the row instead of being pushed out and clipped. */
#daysContainer .day-title { flex: 0 1 auto; min-width: 0; overflow: hidden; }

/* collapse affordance kept (Prompt-1 decision: collapse stays) */
#daysContainer .day-collapse-arrow { color: var(--dc-navy-55); }
/* Collapsed day = a single solid navy bar: no white frame, narrow.
   ID-scoped so it beats the base #daysContainer .day-card (white + border). */
#daysContainer .day-card.collapsed {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    padding: 0;
    overflow: hidden;
}
#daysContainer .day-card.collapsed .day-header {
    background: var(--brand-navy);
    margin: 0;
    padding: 10px 16px;
    border-radius: 0;
}
/* ── Collapsed-bar summary chrome (navy background → light, readable) ── */
/* money spent that day: visible on the bar, in a soft pill */
#daysContainer .day-card.collapsed .day-cost {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 3px 11px;
}
#daysContainer .day-card.collapsed .day-cost .dc-eur,
#daysContainer .day-card.collapsed .day-cost .dc-amount { color: #fff; }
#daysContainer .day-card.collapsed .day-cost small { color: rgba(255, 255, 255, 0.6); }
/* date on the right, white */
#daysContainer .day-card.collapsed .day-date { color: #fff; }
#daysContainer .day-card.collapsed .day-date .ddate-ic { color: rgba(255, 255, 255, 0.75); }
/* rental (car/ferry) badge → white icon on the navy bar */
#daysContainer .day-card.collapsed .day-title .dc-rental-badge { color: #fff; }
/* day-type chip: keep yellow (travel) / teal (arrival) which pop on navy, but
   give "Partenza" a light pill (its navy bg would vanish on the navy bar) */
#daysContainer .day-card.collapsed .dc-daytype-badge.is-departure {
    background: rgba(255, 255, 255, 0.18); color: #fff;
}

/* ── CONNECTOR between consecutive cards ─────────────────────
   CSS-only (::before on every card except the first) so it adds
   NO DOM nodes — it cannot disturb the day-dots script or the
   #daysContainer MutationObserver. Shown at ALL widths now that the
   feed is a vertical stack everywhere; never before the first card.
   (Mobile offsets are tuned for the smaller 24px circle below.) */
#daysContainer .day-card + .day-card::before {
    content: "";
    position: absolute;
    left: 30px;
    top: -24px;
    width: 2.5px;
    height: 22px;
    background: repeating-linear-gradient(var(--brand-navy) 0 5px, transparent 5px 11px);
    opacity: 0.35;
    pointer-events: none;
}

/* ── Mobile density (≤767, prototype .is-mobile) ─────────────
   The feed stacks vertically here too (same as desktop); this block
   tunes the shell/header sizing for small phones and re-aligns the
   inter-card connector to the smaller 24px day-number circle. */
@media (max-width: 767px) {
    #daysContainer .day-card {
        border-width: 1.5px;
        border-radius: 15px;
        padding: 11px 11px 12px;
    }
    /* connector meets the 24px mobile circle */
    #daysContainer .day-card + .day-card::before { left: 24px; top: -20px; height: 18px; }
    /* header wraps instead of overflowing on narrow phones */
    #daysContainer .day-header { gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
    #daysContainer .day-number-circle {
        width: 24px;
        height: 24px;
        font-size: 12px;
        border-width: 1.5px;
    }
    #daysContainer .day-title > span { display: none; }   /* dtitle hidden on mobile */
    #daysContainer .day-cost { font-size: 12.5px; padding: 3px 9px; }
    #daysContainer .day-cost .dc-eur { font-size: 10.5px; }
    #daysContainer .day-date { font-size: 12px; gap: 4px; }
    #daysContainer .day-date .ddate-ic { width: 13px; height: 13px; }
}

/* ============================================================
   DAILY CARDS — PROMPT 2 · TRAVEL SECTION (outbound / return)
   Scoped under #daysContainer; reuses the Prompt-1 token aliases
   (--brand-navy / --brand-yellow / --brand-cream). Teal + time are
   kept as local data-viz values (no page token). Default = compact
   density; @media(max-width:767px) = mobile (.dc-m).
   ============================================================ */
#daysContainer .dc-travel-sec,
#daysContainer .dc-plans-sec,
#daysContainer .gm-sec,
#daysContainer .dc-overview-sec {
    --dc-teal: #5A9A9C;
    --dc-time: #57A6D6;
    --dc-hair: #E3E9EC;            /* = input border */
    --dc-muted: #A9BCC4;           /* = placeholder */
}
/* Daily-card sections are flat (no border / no hover outline) on the brand
   section-tint, matching the desiderata + palette (Section tint #F3F7F9). */
#daysContainer .new-section { border: none; background: var(--dc-sec-bg); }
#daysContainer .new-section:hover { border: none; box-shadow: none; }
#daysContainer .dc-sec-eyebrow {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--brand-navy);
    opacity: 0.85;
    margin: 0 0 0.4rem 0.1rem;
}

/* The bar */
#daysContainer .dc-travel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--dc-hair);
    border-radius: 12px;
    padding: 6px;
    position: relative;
    font-family: var(--font);
}

/* mode button (square navy) + popover */
#daysContainer .dc-tp-wrap { position: relative; flex-shrink: 0; display: flex; }
#daysContainer .dc-modebtn {
    width: 34px; height: 34px; flex-shrink: 0;
    border: none; border-radius: 10px;
    background: var(--brand-navy); color: #fff;
    display: grid; place-items: center; cursor: pointer;
}
#daysContainer .dc-modebtn svg { width: 19px; height: 19px; }
#daysContainer .dc-backdrop { position: fixed; inset: 0; z-index: 40; }
#daysContainer .dc-pop {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 41;
    display: grid; gap: 6px; grid-auto-flow: column;
    background: #fff; border: 1px solid var(--dc-hair); border-radius: 14px;
    padding: 8px; width: max-content;
    box-shadow: 0 10px 30px rgba(10, 59, 77, 0.18);
}
#daysContainer .dc-opt {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    width: 64px; padding: 9px 5px; border: none; border-radius: 10px;
    background: #f3f7f9; color: var(--brand-navy); cursor: pointer;
    font-family: var(--font); font-size: 0.65rem; font-weight: 600;
    text-align: center; line-height: 1.15;
}
#daysContainer .dc-opt svg { width: 20px; height: 20px; }
#daysContainer .dc-opt:hover { background: rgba(10, 59, 77, 0.08); }
#daysContainer .dc-opt-static { cursor: default; }
#daysContainer .dc-opt-static:hover { background: none; }
#daysContainer .dc-opt.on { background: var(--brand-navy); color: #fff; }

/* generic field pill */
#daysContainer .dc-fld {
    display: flex; align-items: center; gap: 7px;
    border: 1px solid var(--dc-hair); border-radius: 10px; background: #fff;
    padding: 0 11px; height: 34px;
}
#daysContainer .dc-fld input,
#daysContainer .dc-fld textarea {
    border: none; outline: none; background: none; font-family: var(--font);
    font-size: 0.85rem; color: var(--brand-navy); width: 100%; min-width: 0;
}
#daysContainer .dc-fld input::placeholder,
#daysContainer .dc-fld textarea::placeholder { color: var(--dc-muted); }
/* Comment textareas wrap and grow with their content (JS sizes the height;
   field-sizing is a progressive enhancement for browsers that support it). */
#daysContainer .dc-desc-input {
    resize: none; overflow: hidden;
    line-height: 1.4; min-height: 1.4em;
    white-space: pre-wrap; overflow-wrap: anywhere;
    field-sizing: content;
}
/* The description pill grows vertically instead of clipping to 40px. */
#daysContainer .dc-fld.dc-desc {
    align-items: flex-start; height: auto; min-height: 40px;
    padding-top: 9px; padding-bottom: 9px;
}
#daysContainer .dc-fld > svg { width: 17px; height: 17px; color: var(--brand-navy); flex-shrink: 0; }
/* kill the browser autofill yellow fill on EVERY daily-card input (Safari/
   Chrome) — covers .dc-fld pills, the Good Night .gn-input fields, etc. */
#daysContainer input:-webkit-autofill,
#daysContainer input:-webkit-autofill:hover,
#daysContainer input:-webkit-autofill:focus,
#daysContainer input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 100px #fff inset;
    box-shadow: 0 0 0 100px #fff inset;
    -webkit-text-fill-color: var(--brand-navy);
    caret-color: var(--brand-navy);
}
/* ── Single shell on focus ──────────────────────────────────────
   The OUTER pill / field is the ONLY highlighted shell; the inner input
   never draws its own border or yellow ring (kills the double shell).
   Text is larger + clearer. */
#daysContainer .dc-fld input:focus,
#daysContainer .dc-fld textarea:focus,
#daysContainer .gn-row .gn-input:focus,
#daysContainer .gn-price-group .gn-cost-input:focus {
    box-shadow: none !important;
    border-color: transparent !important;
    outline: none !important;
}
#daysContainer .dc-fld:focus-within,
#daysContainer .gn-row .gn-field:focus-within,
#daysContainer .gn-price-group:focus-within {
    border-color: var(--brand-navy);
    box-shadow: 0 0 0 3px rgba(10, 59, 77, 0.14);
}
/* User-entered DATA fields: BOLD + the cost(€)-box size (1.25rem). */
#daysContainer .dc-fld input,
#daysContainer .gn-row .gn-input,
#daysContainer .gn-price-group .gn-cost-input,
#daysContainer .gn-price-group .gn-currency {
    font-size: 1.25rem;
    font-weight: 700;
}
/* Route (free text like city / airport names) can be long — keep it bold but
   a notch smaller so it isn't clipped inside the field. Numbers stay big. */
#daysContainer .dc-route input { font-size: 1.05rem; }
/* Comments / free notes are NOT bold (higher specificity wins over the rule
   above): route description + the day overview note read as notes, not data. */
#daysContainer .dc-fld input.dc-desc-input,
#daysContainer .dc-desc-input,
#daysContainer .dc-overview textarea,
#daysContainer .overview-textarea {
    font-size: 1.15rem;
    font-weight: 500;
}
/* Placeholders stay lighter + slightly smaller (they're hints, not data). */
#daysContainer .dc-fld input::placeholder,
#daysContainer .gn-row .gn-input::placeholder {
    font-weight: 500;
    font-size: 1.1rem;
}

#daysContainer .dc-route { flex: 1 1 0; min-width: 150px; gap: 7px; position: relative; }
#daysContainer .dc-route input { flex: 1; min-width: 30px; }
#daysContainer .dc-arrow { color: var(--dc-muted); font-weight: 600; flex-shrink: 0; }
/* Passeggiata — the route slot (no Da→A, no box) holds a "Punti di passaggio"
   label, a breadcrumb of chip-inputs that each grow with their content (size
   attr) and WRAP onto new lines as you add more, then a dashed "+". A muted
   hint sits on its own line. The row top-aligns so the wrapping chips never
   overlap the time / clip / × controls on the right. */
/* The walk row is a single flex row that wraps: ⋮ → mode → the "Punti di
   passaggio" chips fill the middle, with the time / clip / × controls pushed
   to the right. The hint and the expanded panel each take a full-width row. */
#daysContainer .dc-travel--walk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#daysContainer .dc-travel--walk .dc-reorder       { order: 0; }
#daysContainer .dc-travel--walk .dc-tp-wrap       { order: 1; margin: 0; }
#daysContainer .dc-travel--walk .dc-walk-route    { order: 2; flex: 1 1 200px; min-width: 0; }
#daysContainer .dc-travel--walk .dc-walk-controls { order: 3; margin-left: auto; display: flex; align-items: center; gap: 7px; }
#daysContainer .dc-travel--walk .dc-walk-hint     { order: 4; flex: 1 1 100%; }
#daysContainer .dc-travel--walk .dc-expand-row    { order: 5; flex: 1 1 100%; }
#daysContainer .dc-walk-route { display: block; border: none; background: none; padding: 0; min-width: 0; }
#daysContainer .dc-walk-lbl { display: inline-flex; align-items: center; height: 36px; margin-right: 4px; color: var(--dc-muted); font-weight: 600; font-size: 0.85rem; vertical-align: middle; }
#daysContainer .dc-walk-pt { display: inline-flex; align-items: center; height: 36px; gap: 2px; margin: 0 5px 0 0; vertical-align: middle; }
#daysContainer .dc-wp-chev { width: 0.8rem; height: 0.8rem; color: var(--dc-muted); opacity: 0.55; flex: 0 0 auto; }
#daysContainer .dc-wp-input { min-width: 0; max-width: 26ch; width: auto; padding: 5px 9px; border: 1px solid var(--dc-hair); border-radius: 9px; background: #fff; font-weight: 600; color: var(--brand-navy); }
#daysContainer .dc-wp-input:focus { outline: none; border-color: var(--brand-navy); }
#daysContainer .dc-wp-x { width: 18px; height: 18px; border: none; background: none; color: var(--dc-muted); font-size: 1rem; line-height: 1; flex: 0 0 auto; cursor: pointer; padding: 0; }
#daysContainer .dc-wp-x:hover { color: var(--brand-navy); }
#daysContainer .dc-wp-add { width: 30px; height: 30px; border-radius: 50%; border: 1px dashed var(--brand-navy); background: rgba(0, 62, 84, 0.06); color: var(--brand-navy); font-size: 1.05rem; font-weight: 600; line-height: 1; cursor: pointer; vertical-align: middle; }
#daysContainer .dc-wp-add:hover { background: var(--brand-navy); color: #fff; }
#daysContainer .dc-walk-hint { clear: both; color: var(--dc-muted); font-size: 0.78rem; padding-top: 3px; }
/* Mobile: one point under the other, as a list. */
@media (max-width: 767px) {
    /* Mobile walk/bike layout (walk & bicycle only):
         Row 1 = ⋮ · mode · time · X · chevron   (time shows only when expanded)
         Row 2 = point chips (h-scroll) · attachment  (attach shows only when expanded)
       walk-controls + mextra go display:contents so their children (time, attach,
       del, chevron) become direct flex items we can order; an ::after with
       flex-basis:100% forces the break so chips + attachment fall onto row 2. */
    #daysContainer .dc-travel--walk { align-items: center; }
    #daysContainer .dc-travel--walk .dc-walk-controls { display: contents; }
    #daysContainer .dc-travel--walk .dc-reorder { order: 0; }
    #daysContainer .dc-travel--walk .dc-tp-wrap { order: 1; }
    #daysContainer .dc-travel--walk .dc-time    { order: 2; flex: 1 1 auto; min-width: 0; justify-content: center; }
    #daysContainer .dc-travel--walk .dc-del     { order: 3; }
    /* The chevron isn't needed (waypoints live in the modal now) → drop it and its
       expand-row, and put the ATTACHMENT in its place at the end of row 1. */
    #daysContainer .dc-travel--walk .dc-expand     { display: none; }
    #daysContainer .dc-travel--walk .dc-expand-row { display: none; }
    #daysContainer .dc-travel--walk .dc-attach-host { order: 4; flex: 0 0 auto; }
    /* time + attachment ALWAYS visible (promote mextra; the more specific
       .dc-expanded rule would otherwise re-wrap it into a flex box). The time
       fills the row-1 gap; the attachment sits at the end where the chevron was. */
    #daysContainer .dc-travel--walk .dc-mextra,
    #daysContainer .dc-travel--walk.dc-expanded .dc-mextra { display: contents; }
    /* inline point boxes + label + hint are handled in the modal → hide on the row */
    #daysContainer .dc-travel--walk .dc-walk-route { display: none; }
    #daysContainer .dc-travel--walk .dc-walk-hint  { display: none; }
    #daysContainer .dc-travel--walk .dc-walk-chips .dc-walk-lbl { display: none; }
    /* row 2: just the point chips (full-width strip, horizontal scroll) */
    #daysContainer .dc-travel--walk .dc-walk-chips { display: block; order: 6; flex: 1 1 100%; min-width: 0; cursor: pointer; }
    #daysContainer .dc-travel--walk .dc-expand-row { order: 8; flex: 1 1 100%; }
    #daysContainer .dc-walk-chiprow { display: flex; align-items: center; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 0 3px; scrollbar-width: none; }
    #daysContainer .dc-walk-chiprow::-webkit-scrollbar { display: none; }
    #daysContainer .dc-walk-chip { flex: 0 0 auto; max-width: 62vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 11px; border-radius: 999px; background: rgba(0,62,84,0.06); border: 1px solid var(--dc-hair); color: var(--brand-navy); font-weight: 600; font-size: 0.82rem; }
    #daysContainer .dc-walk-chips-empty { color: var(--dc-muted); font-size: 0.85rem; font-style: italic; }
    #daysContainer .dc-walk-chip-edit { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px dashed var(--brand-navy); color: var(--brand-navy); background: rgba(0,62,84,0.06); font-weight: 700; font-size: 1rem; }
}
/* Desktop keeps the inline boxes → the mobile chip strip stays hidden. */
#daysContainer .dc-walk-chips { display: none; }

/* ── Waypoints editing modal — reuses the Documents add-modal shell
   (.mv-modal-overlay / .mv-modal-card / .mv-modal-head / .mv-modal-actions,
   already loaded via menevo-wallet.css). Only the point list is bespoke. ─── */
.dc-wpm .mv-modal-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; }
.dc-wpm-hint { color: rgba(0,62,84,0.65); font-size: 0.82rem; margin: 0 0 14px; }
.dc-wpm-list { display: flex; flex-direction: column; gap: 8px; }
.dc-wpm-row { display: flex; align-items: center; gap: 9px; }
.dc-wpm-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #003E54; opacity: 0.5; }
.dc-wpm-input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid rgba(0,62,84,0.15); border-radius: 8px; background: #fff; font-family: inherit; font-weight: 600; font-size: 0.95rem; color: #003E54; }
.dc-wpm-input:focus { outline: none; border-color: #003E54; }
.dc-wpm-del { flex: 0 0 auto; width: 32px; height: 32px; border: none; background: none; color: rgba(0,62,84,0.55); font-size: 1.2rem; line-height: 1; cursor: pointer; border-radius: 8px; }
.dc-wpm-del:hover { color: #C63030; background: rgba(198,48,48,0.08); }
.dc-wpm-add { margin-top: 12px; width: 100%; padding: 10px; border: 1px dashed rgba(0,62,84,0.3); border-radius: 8px; background: rgba(0,62,84,0.04); color: #003E54; font-family: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.dc-wpm-add:hover { background: rgba(0,62,84,0.07); }

/* clickable country flag (Part B) */
/* The flag is an editable country picker — render it as a visible chip
   (border + tint + caret) so it clearly reads as a tappable control. */
#daysContainer .dc-flag {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px;
    border: 1px solid var(--dc-hair); background: #F1F5F7;
    padding: 2px 4px 2px 5px; cursor: pointer;
    font-size: 1.05rem; line-height: 1; border-radius: 7px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#daysContainer .dc-flag::after {
    content: '▾'; font-size: 0.72rem; color: var(--brand-navy); line-height: 1;
}
#daysContainer .dc-flag:hover {
    background: rgba(10, 59, 77, 0.10); border-color: var(--brand-navy);
}
/* country picker = vertical scrollable list */
#daysContainer .dc-pop-country {
    grid-auto-flow: row; gap: 2px; max-height: 240px; overflow-y: auto; min-width: 180px;
}
#daysContainer .dc-pop-country .dc-opt {
    flex-direction: row; width: auto; justify-content: flex-start; gap: 9px;
    padding: 8px 10px; font-size: 0.8125rem; text-align: left;
}
#daysContainer .dc-pop-country .dc-optflag { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }

#daysContainer .dc-time { flex-shrink: 0; gap: 5px; }
#daysContainer .dc-time input[type="time"] { width: 64px; text-align: center; color: var(--dc-time); font-weight: 600; }
/* Click-driven time field: button shows the value, picker handles the input. */
#daysContainer .dc-tf { position: relative; display: inline-flex; }
#daysContainer .dc-timebtn {
    border: none; background: none; cursor: pointer; font-family: var(--font);
    width: 58px; text-align: center; padding: 2px 0;
    color: var(--brand-navy); font-weight: 700; font-size: 1.05rem; line-height: 1.2;
    border-radius: 6px;
}
#daysContainer .dc-timebtn:hover { background: rgba(10, 59, 77, 0.06); }
#daysContainer .dc-timebtn.empty { color: var(--dc-muted); font-weight: 600; }
/* Time popover is portaled to <body> (so card overflow can't clip it), hence
   these rules are GLOBAL — not scoped to #daysContainer — or they'd never match. */
.dc-timepop {
    position: absolute; z-index: 1200; display: flex; flex-direction: column; gap: 8px;
    padding: 8px; background: #fff; border: 1px solid #E3E9EC; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(10, 59, 77, 0.18);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.dc-timepop .dc-tgrid { display: flex; gap: 8px; }
.dc-timepop .dc-tclear {
    border: none; border-top: 1px solid #EEF2F4; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.8rem; font-weight: 700; color: #B23A3A;
    padding: 8px 6px 4px; border-radius: 0 0 8px 8px; text-align: center;
}
.dc-timepop .dc-tclear:hover { background: rgba(178, 58, 58, 0.07); }
.dc-timepop .dc-tcol { display: flex; flex-direction: column; min-width: 58px; }
.dc-timepop .dc-tcolh {
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: #A9BCC4; text-align: center; padding-bottom: 4px;
}
.dc-timepop .dc-tscroll {
    display: flex; flex-direction: column; gap: 2px; max-height: 210px; overflow-y: auto; padding-right: 2px;
}
.dc-timepop .dc-topt {
    border: none; background: none; cursor: pointer; font-family: inherit;
    padding: 7px 16px; border-radius: 7px; font-size: 0.95rem; font-weight: 600;
    color: #0A3B4D; text-align: center;
}
.dc-timepop .dc-topt:hover { background: rgba(10, 59, 77, 0.06); }
.dc-timepop .dc-topt.on { background: #0A3B4D; color: #fff; }
.dc-backdrop.dc-timepop-backdrop { position: fixed; inset: 0; z-index: 1199; }
/* Country/flag picker is also portaled to <body> → global styles. */
.dc-pop-country {
    position: absolute; z-index: 1200; display: grid; grid-auto-flow: row; gap: 3px;
    background: #fff; border: 1px solid #E3E9EC; border-radius: 14px; padding: 8px;
    box-shadow: 0 10px 30px rgba(10, 59, 77, 0.18);
    max-height: 260px; overflow-y: auto; min-width: 210px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.dc-pop-country .dc-opt {
    display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border: none; border-radius: 10px; background: #f3f7f9;
    color: #0A3B4D; cursor: pointer; font-family: inherit; font-size: 0.9rem;
    font-weight: 600; text-align: left;
}
.dc-pop-country .dc-opt:hover { background: rgba(10, 59, 77, 0.08); }
.dc-pop-country .dc-opt.on { background: #0A3B4D; color: #fff; }
.dc-pop-country .dc-opt-static { cursor: default; background: none; }
.dc-pop-country .dc-optflag { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.dc-backdrop.dc-country-backdrop { position: fixed; inset: 0; z-index: 1199; }
/* Mode / activity-type pickers are portaled to <body> too → global styles. */
.dc-pop {
    position: absolute; z-index: 1200; display: grid; grid-auto-flow: column; gap: 6px;
    background: #fff; border: 1px solid #E3E9EC; border-radius: 14px; padding: 8px;
    box-shadow: 0 10px 30px rgba(10, 59, 77, 0.18); width: max-content;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.dc-pop .dc-opt {
    display: flex; flex-direction: column; align-items: center; gap: 5px; width: 64px;
    padding: 9px 5px; border: none; border-radius: 10px; background: #f3f7f9;
    color: #0A3B4D; cursor: pointer; font-family: inherit; font-size: 0.65rem;
    font-weight: 600; text-align: center; line-height: 1.15;
}
.dc-pop .dc-opt svg { width: 20px; height: 20px; }
.dc-pop .dc-opt:hover { background: rgba(10, 59, 77, 0.08); }
.dc-pop .dc-opt.on { background: #0A3B4D; color: #fff; }
.dc-backdrop.dc-pop-backdrop { position: fixed; inset: 0; z-index: 1199; }
@media (max-width: 767px) {
    .dc-pop:not(.dc-pop-country) {
        grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); max-width: calc(100vw - 32px);
    }
}
@media (max-width: 767px) {
    .dc-timepop {
        position: fixed; left: 50% !important; right: auto; top: auto !important;
        bottom: 16px; transform: translateX(-50%) !important; max-width: 92vw; z-index: 1200;
    }
}
/* Hour / minute popover: two scrollable columns of tap targets. */
#daysContainer .dc-timepop {
    grid-auto-flow: column; gap: 8px; padding: 8px;
    left: 50%; transform: translateX(-50%);
}
#daysContainer .dc-tcol { display: flex; flex-direction: column; min-width: 56px; }
#daysContainer .dc-tcolh {
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--dc-muted); text-align: center; padding-bottom: 4px;
}
#daysContainer .dc-tscroll {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 168px; overflow-y: auto; padding-right: 2px;
}
#daysContainer .dc-topt {
    border: none; background: none; cursor: pointer; font-family: var(--font);
    padding: 6px 14px; border-radius: 7px; font-size: 0.95rem; font-weight: 600;
    color: var(--brand-navy); text-align: center;
}
#daysContainer .dc-topt:hover { background: rgba(10, 59, 77, 0.06); }
#daysContainer .dc-topt.on { background: var(--brand-navy); color: #fff; }
#daysContainer .dc-arr-badge {
    flex-shrink: 0; font-size: 0.6875rem; font-weight: 800; color: var(--brand-navy);
    background: var(--brand-yellow); border-radius: 6px; padding: 1px 5px; line-height: 1.3;
}

#daysContainer .dc-cost { flex-shrink: 0; }
/* "Incluso nel noleggio" badge replacing the cost of a car driven on a hire day */
#daysContainer .dc-cost--inhire { flex-shrink: 1; min-width: 0; }
#daysContainer .dc-cost--inhire .dc-inhire {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
    background: rgba(90, 154, 156, 0.14); color: var(--brand-teal, #5A9A9C);
    border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
#daysContainer .dc-cost--inhire .dc-inhire svg { width: 13px; height: 13px; flex: 0 0 auto; }
#daysContainer .dc-cost .dc-eur { color: var(--brand-navy); font-weight: 600; flex-shrink: 0; }
#daysContainer .dc-cost input { width: 52px; font-weight: 700; }
#daysContainer .dc-cost .dc-rate {
    align-self: stretch; display: inline-flex; align-items: center; padding: 0 0 0 10px;
    margin-left: 4px; border-left: 1px solid var(--dc-hair);
    color: var(--dc-muted); font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
/* the cost label is a clickable total ⇄ per-person toggle */
#daysContainer .dc-cost .dc-rate-btn {
    border: none; border-left: 1px solid var(--dc-hair); background: none;
    cursor: pointer; font-family: var(--font);
}
#daysContainer .dc-cost .dc-rate-btn::after {
    content: '▾'; font-size: 0.6rem; margin-left: 3px; color: var(--dc-muted);
}
#daysContainer .dc-cost .dc-rate-btn:hover { color: var(--brand-navy); }

#daysContainer .dc-icn {
    width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--dc-hair);
    border-radius: 10px; background: #fff; color: var(--brand-navy);
    display: grid; place-items: center; cursor: pointer;
}
#daysContainer .dc-icn svg { width: 16px; height: 16px; }
/* expand chevron: a bare icon, NOT a bordered box */
#daysContainer .dc-expand {
    border: none; background: none; width: 28px; height: 34px;
    color: var(--dc-muted);
}
#daysContainer .dc-expand:hover { color: var(--brand-navy); background: none; }
/* clock icon reads in the standard dark, not the light-blue accent */
#daysContainer .dc-time > svg { color: var(--brand-navy); }

/* attachment host → compact square icon button matching the bar density
   (overrides the generic .new-attachment-btn pill from the page CSS) */
#daysContainer .dc-attach-host { flex-shrink: 0; display: inline-flex; }
#daysContainer .dc-attach-host .new-attachment-btn {
    width: 34px; height: 34px; padding: 0; margin: 0; max-width: none; gap: 0;
    border-radius: 10px; justify-content: center;
    background: #fff; border: 1px solid var(--dc-hair); color: var(--brand-navy);
}
#daysContainer .dc-attach-host .new-attachment-btn:hover { transform: none; background: rgba(10, 59, 77, 0.05); }
#daysContainer .dc-attach-host .new-attachment-btn.filled { background: #3D7D36; border-color: #3D7D36; color: #fff; }
#daysContainer .dc-attach-host .attach-icon,
#daysContainer .dc-attach-host .attach-check { width: 16px; height: 16px; }

#daysContainer .dc-expand svg { transition: transform 0.18s ease; }
#daysContainer .dc-travel.dc-expanded .dc-expand svg { transform: rotate(180deg); }

/* mobile-extra wrapper: transparent inline on desktop */
#daysContainer .dc-mextra { display: contents; }

/* expand row (multistop / offset / desc) */
#daysContainer .dc-expand-row { display: none; flex-basis: 100%; flex-direction: column; gap: 10px; padding-top: 2px; }
#daysContainer .dc-travel.dc-expanded .dc-expand-row { display: flex; }
#daysContainer .dc-cols { display: grid; grid-template-columns: 1fr; gap: 10px 22px; }
#daysContainer .dc-cols.two { grid-template-columns: 1fr 1fr; }
#daysContainer .dc-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
#daysContainer .dc-colhead { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }

/* checkbox row */
#daysContainer .dc-check-lbl {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
    border: none; background: none; padding: 0; font-family: var(--font);
    font-size: 0.85rem; font-weight: 500; color: var(--brand-navy); white-space: nowrap;
}
#daysContainer .dc-check {
    width: 20px; height: 20px; border: 1.5px solid var(--dc-hair); border-radius: 6px;
    background: #fff; display: grid; place-items: center; color: #fff; flex-shrink: 0;
}
#daysContainer .dc-check svg { width: 13px; height: 13px; }
#daysContainer .dc-check.on { background: var(--brand-navy); border-color: var(--brand-navy); }

/* First expand column (Scalo / Cambio / Noleggio) is conditionally RENDERED
   per mode, so visibility is handled in JS — here we only draw the dashed
   divider when there are two columns (desktop). */
#daysContainer .dc-cols.two .dc-stopcol,
#daysContainer .dc-cols.two .dc-rentalcol {
    border-right: 1px dashed var(--dc-hair); padding-right: 24px;
}
/* car-rental day range */
#daysContainer .dc-rental-range {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px;
}
#daysContainer .dc-rental-range[hidden] { display: none !important; }
#daysContainer .dc-rental-lbl { font-size: 0.85rem; color: var(--dc-muted); font-weight: 600; }
#daysContainer .dc-rental-from,
#daysContainer .dc-rental-to {
    height: 30px; border: 1px solid var(--dc-hair); border-radius: 8px; background: #fff;
    color: var(--brand-navy); font-family: var(--font); font-weight: 600; font-size: 0.85rem;
    padding: 0 8px; cursor: pointer;
}
/* fixed "from" day for a plans-transport rental (always the row's own day) */
#daysContainer .dc-rental-fixed {
    height: 30px; display: inline-flex; align-items: center; padding: 0 4px;
    color: var(--brand-navy); font-family: var(--font); font-weight: 700; font-size: 0.85rem;
}
/* day-type chip in the header (replaces the old in-content banner) */
#daysContainer .day-title .dc-daytype-badge {
    margin-left: 8px; padding: 2px 9px; border-radius: 999px; flex-shrink: 0;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
}
#daysContainer .dc-daytype-badge.is-departure { background: var(--brand-navy); color: #fff; }
#daysContainer .dc-daytype-badge.is-travel    { background: var(--brand-yellow); color: var(--brand-navy); }
#daysContainer .dc-daytype-badge.is-arrival   { background: #5A9A9C; color: #fff; }
/* Menevo-style "travel day" message for intermediate travelling days */
#daysContainer .dc-travelday {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 15px; border-radius: 12px; background: rgba(90, 154, 156, 0.12);
}
#daysContainer .dc-travelday-ic {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center; background: #5A9A9C; color: #fff;
}
#daysContainer .dc-travelday-ic svg { width: 22px; height: 22px; }
#daysContainer .dc-travelday-title { font-size: 1.1rem; font-weight: 800; color: var(--brand-navy); }
#daysContainer .dc-travelday-sub { font-size: 0.92rem; color: #6B7E86; margin-top: 1px; }
/* car badge next to the day number in the header */
#daysContainer .day-title .dc-rental-badge {
    display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px;
    color: var(--brand-navy); flex-shrink: 0;
}
#daysContainer .day-title .dc-rental-badge svg { width: 17px; height: 17px; }

/* multistop */
#daysContainer .dc-stoprow { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 160px; }
#daysContainer .dc-stopn {
    width: 21px; height: 21px; border-radius: 50%; background: var(--brand-navy); color: #fff;
    font-size: 0.68rem; font-weight: 700; display: grid; place-items: center; flex-shrink: 0;
}
#daysContainer .dc-stoprow .dc-fld { flex: 1 1 auto; min-width: 0; }
#daysContainer .dc-stopbtn {
    width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--dc-hair);
    border-radius: 8px; background: #fff; color: var(--brand-navy); font-size: 1rem;
    line-height: 1; cursor: pointer; display: grid; place-items: center;
}
#daysContainer .dc-stopbtn.add { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); }
/* stop list: flows inline next to the "Scalo multiplo" checkbox, wraps when needed.
   Must be ROW direction — in a column flex container flex-basis becomes height
   (the old 200px → ~200px-tall empty row that caused the big gap). */
#daysContainer .dc-stoplist {
    display: flex; flex-flow: row wrap; align-items: center; gap: 9px;
    flex: 1 1 240px; min-width: 0;
}

/* defensive: author display rules above win over the UA [hidden]{display:none};
   restore hiding for the toggled-off bits so nothing occupies space. */
#daysContainer .dc-stoplist[hidden],
#daysContainer .dc-dayoff[hidden],
#daysContainer .dc-nextday[hidden],
#daysContainer .dc-nextday-fixed[hidden],
#daysContainer .dc-arr-badge[hidden],
#daysContainer .dc-expand-row[hidden] { display: none !important; }
/* plan-transport arrival: fixed "+1 giorno" pill (no stepper) */
#daysContainer .dc-nextday-fixed {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    border: 1px solid var(--dc-hair); background: #fff; color: var(--brand-navy);
    font-weight: 700; font-size: 0.8rem; line-height: 1; padding: 7px 11px; border-radius: 9px;
}

/* arrival offset stepper / mobile badge */
#daysContainer .dc-dayoff {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px;
    width: max-content; border: 1px solid var(--dc-hair); border-radius: 9px; background: #fff;
}
#daysContainer .dc-step {
    width: 26px; height: 26px; border: none; background: none; color: var(--brand-navy);
    font-size: 1.2rem; line-height: 1; cursor: pointer; display: grid; place-items: center; border-radius: 7px;
}
#daysContainer .dc-step:hover { background: rgba(10, 59, 77, 0.06); }
#daysContainer .dc-dayoff .nv { font-size: 0.85rem; color: var(--brand-navy); white-space: nowrap; }
#daysContainer .dc-dayoff .nv b { font-weight: 700; }
#daysContainer .dc-nextday {
    flex: 0 0 auto; border: 1px solid var(--brand-yellow); background: var(--brand-yellow);
    color: var(--brand-navy); font-family: var(--font); font-weight: 800; font-size: 0.75rem;
    line-height: 1; padding: 5px 9px; border-radius: 8px; cursor: pointer; display: none;
}

/* description */
#daysContainer .dc-descwrap { display: flex; flex-direction: column; gap: 6px; }
#daysContainer .dc-desclbl { font-size: 0.75rem; font-weight: 700; color: var(--dc-muted); }
#daysContainer .dc-desc { width: 100%; }

/* ── Mobile (≤767): main row = mode + route + chevron; the rest in expand ── */
@media (max-width: 767px) {
    #daysContainer .dc-travel { gap: 6px; padding: 6px; }
    #daysContainer .dc-modebtn { width: 38px; height: 38px; border-radius: 10px; }
    #daysContainer .dc-modebtn svg { width: 18px; height: 18px; }
    #daysContainer .dc-route { order: 1; height: 38px; min-width: 0; }
    #daysContainer .dc-tp-wrap { order: 0; }
    #daysContainer .dc-expand { order: 2; width: 38px; height: 38px; }
    #daysContainer .dc-mextra { order: 3; }
    #daysContainer .dc-expand-row { order: 4; }
    /* hide inline time/cost/attach until expanded; show them stacked in expand */
    #daysContainer .dc-mextra {
        display: none; flex-basis: 100%; width: 100%;
        align-items: center; gap: 8px; flex-wrap: wrap;
    }
    #daysContainer .dc-travel.dc-expanded .dc-mextra { display: flex; }
    #daysContainer .dc-fld { height: 38px; }
    /* whole day-card inputs bumped +1px (0.85 → 0.9rem) to match Good Night. */
    #daysContainer .dc-fld input { font-size: 0.9rem; }
    /* Good Night In inputs on mobile → 0.85rem/400 like the rest of the card.
       The desktop base rule (#daysContainer .gn-row .gn-input) sets 1.25rem/700,
       and its #daysContainer scope beat the travel-planner-detail override — so
       the fix has to live HERE (same specificity, later file, mobile-only). */
    #daysContainer .gn-row .gn-input,
    #daysContainer .gn-price-group .gn-cost-input { font-size: 0.9rem; font-weight: 600; }
    #daysContainer .gn-price-group .gn-currency { font-size: 0.78rem; font-weight: 600; }
    #daysContainer .dc-icn { width: 38px; height: 38px; }
    /* time + cost + attachment all on ONE row (so the leg is 2 rows, not 3);
       the attachment must sit NEXT TO the cost, never wrap to a 3rd row. The
       time field shrinks first so the trio always stays on one line. */
    #daysContainer .dc-travel.dc-expanded .dc-mextra { flex-wrap: nowrap; }
    #daysContainer .dc-time { flex: 1 1 auto; min-width: 0; justify-content: center; }
    #daysContainer .dc-cost { flex: 0 0 auto; }
    #daysContainer .dc-attach-host { flex: 0 0 auto; }
    #daysContainer .dc-timebtn { width: 50px; font-size: 0.95rem; }
    #daysContainer .dc-rate { display: none; }
    #daysContainer .dc-attach-host .new-attachment-btn { width: 38px; height: 38px; }
    /* time picker popover → centered bottom sheet so it's always visible */
    #daysContainer .dc-timepop {
        position: fixed; left: 50%; right: auto; top: auto; bottom: 16px;
        transform: translateX(-50%); z-index: 1200; max-width: 92vw;
    }
    #daysContainer .dc-cols.two { grid-template-columns: 1fr; }
    /* single column on mobile → drop the vertical divider */
    #daysContainer .dc-cols.two .dc-stopcol,
    #daysContainer .dc-cols.two .dc-rentalcol {
        border-right: none; padding-right: 0;
    }
    /* tighter expand on mobile + let the stop input drop full-width under the checkbox */
    #daysContainer .dc-expand-row { gap: 10px; }
    #daysContainer .dc-cols { gap: 12px; }
    #daysContainer .dc-col { gap: 9px; }
    #daysContainer .dc-stoplist { flex-basis: 100%; }
    #daysContainer .dc-nextday { display: inline-flex; }
    #daysContainer .dc-dayoff { display: none; }
    /* My plans (Prompt 3): compact main row = picker + name/route + del/chevron.
       #2: the name must not reserve a big fixed width or it overflows the row
       and pushes the expand chevron onto a 2nd line by itself. basis 0 lets the
       name share the row so name + × + ∨ all stay on line 1.
       NOTE: the base rule `#daysContainer .dc-plan-name { flex:1 1 200px;
       min-width:120px }` lives LATER in the file (same specificity) and would
       otherwise win here — so scope this to `.dc-plan-act .dc-plan-name`
       (higher specificity) to make the mobile value actually apply. */
    #daysContainer .dc-plan-act .dc-plan-name { order: 1; flex: 1 1 0; min-width: 84px; }
    #daysContainer .dc-del { order: 2; flex: 0 0 auto; }
    #daysContainer .dc-expand { flex: 0 0 auto; }
    /* keep the +/− stop buttons finger-sized on mobile (desktop is smaller) */
    #daysContainer .dc-stopbtn { width: 32px; height: 32px; border-radius: 9px; }
    #daysContainer .plan-btns { flex-wrap: wrap; }
    /* show the short label on mobile (extra .plan-btns specificity beats the
       later base rule that hides .btn-plan-short) */
    #daysContainer .plan-btns .btn-plan .btn-plan-full { display: none; }
    #daysContainer .plan-btns .btn-plan .btn-plan-short { display: inline; }

    /* ── narrow-phone polish (vertical stack) ───────────────── */
    /* cost input shows the full amount (base 52px clipped 4-5 digits) */
    #daysContainer .dc-cost input { width: 4rem; }
    /* multistop rows drop full-width so the stop field stays usable */
    #daysContainer .dc-stoprow { min-width: 0; flex-basis: 100%; }
    /* reorder handle = finger-sized, matching the other 38px controls */
    #daysContainer .dc-reorder { width: 38px; height: 38px; }
    /* day-type badge never busts its (now-wrapping) header line */
    #daysContainer .dc-daytype-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

/* ============================================================
   DAILY CARDS — PROMPT 3 · MY PLANS (activities + transports)
   Reuses the .dc-* travel primitives. Activity & transport rows
   render as .dc-travel.dc-plan bars; section chrome = .plan-list
   + .plan-btns. Scoped under #daysContainer.
   ============================================================ */
/* section: the old .new-activity-item / containers become transparent
   so the .dc-plan bars are the flex items of .plan-list */
#daysContainer .dc-plans-sec .plan-list { display: flex; flex-direction: column; gap: 8px; }
#daysContainer .dc-plans-sec .activities-container,
#daysContainer .dc-plans-sec .transport-items-container,
#daysContainer .dc-plans-sec .new-activity-item,
#daysContainer .dc-plans-sec .new-transport-item { display: contents; }

/* the plan row reuses the .dc-travel bar; nothing extra needed besides
   tweaks below. Activity type button = accent (yellow); transport keeps navy. */
#daysContainer .dc-plan-act .dc-modebtn { background: var(--brand-yellow); color: var(--brand-navy); }
#daysContainer .dc-plan-name { flex: 1 1 200px; min-width: 120px; }
#daysContainer .dc-plan-name input {
    border: none; outline: none; background: none; font-family: var(--font);
    font-size: 0.9rem; font-weight: 600; color: var(--brand-navy); width: 100%; min-width: 0;
}
#daysContainer .dc-plan-name input::placeholder { color: var(--dc-muted); font-weight: 500; }

/* Drag handle (⠿) — grab a plan row to reorder it. Leftmost in the row; arms
   the row as draggable only while held (so inputs stay selectable). */
/* ⋮ reorder button (replaces drag) — click → "Sposta su / Sposta giù" menu. */
#daysContainer .dc-reorder {
    order: -1; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 34px; padding: 0; margin-right: 2px;
    border: none; border-radius: 8px; background: none; color: var(--brand-navy-40, rgba(0,62,84,0.4));
    cursor: pointer; -webkit-user-select: none; user-select: none;
}
#daysContainer .dc-reorder svg { width: 16px; height: 16px; }
#daysContainer .dc-reorder:hover { color: var(--brand-navy); background: rgba(0, 62, 84, 0.06); }
/* A timed row is ordered by its time → the ⋮ is disabled. */
#daysContainer .dc-plan.dc-row--timed .dc-reorder { cursor: not-allowed; opacity: 0.35; }
#daysContainer .dc-plan.dc-row--timed .dc-reorder:hover { background: none; color: var(--brand-navy-40, rgba(0, 62, 84, 0.4)); }
/* the move menu */
.dc-reorder-menu {
    position: fixed; z-index: 10002; min-width: 152px;
    background: #fff; border: 1px solid rgba(0, 62, 84, 0.1); border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 62, 84, 0.18); padding: 6px; font-family: var(--font);
    display: flex; flex-direction: column; gap: 2px;
}
.dc-reorder-menu button {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 11px; border: none; border-radius: 8px; background: none;
    color: var(--brand-navy, #003E54); font-size: 0.85rem; font-weight: 600; cursor: pointer; text-align: left;
}
.dc-reorder-menu button:hover:not([disabled]) { background: rgba(0, 62, 84, 0.06); }
.dc-reorder-menu button[disabled] { opacity: 0.35; cursor: not-allowed; }
.dc-reorder-menu button svg { flex: 0 0 auto; }

/* delete (×) button — like .dc-icn, red affordance on hover */
#daysContainer .dc-del:hover {
    border-color: rgba(178, 58, 58, 0.5); color: #B23A3A; background: rgba(178, 58, 58, 0.08);
}

/* Desktop activity row: type · name · time · cost · attach · × · ⌄ — every item
   explicitly ordered (the known-good config), with time moved AFTER the name so
   it sits on the RIGHT like the spostamento's. expand-row pinned last so its
   default order:0 doesn't render the note above the fields. */
@media (min-width: 768px) {
    #daysContainer .dc-plan-act .dc-tp-wrap     { order: 0; }
    #daysContainer .dc-plan-act .dc-plan-name   { order: 1; }
    #daysContainer .dc-plan-act .dc-time        { order: 2; }
    #daysContainer .dc-plan-act .dc-cost        { order: 3; }
    #daysContainer .dc-plan-act .dc-attach-host { order: 4; }
    #daysContainer .dc-plan-act .dc-del         { order: 5; }
    #daysContainer .dc-plan-act .dc-expand      { order: 6; }
    #daysContainer .dc-plan-act .dc-expand-row  { order: 9; }
}

/* kill the legacy empty-state caption ("Fill up your daily card…") — it was
   absolutely-positioned OVER the add buttons, eating their clicks/hover. */
#daysContainer .dc-plans-sec .activities-container:empty::after,
#daysContainer .dc-plans-sec .activities-container:empty::before,
#daysContainer .dc-plans-sec .transport-items-container:empty::after,
#daysContainer .dc-plans-sec .transport-items-container:empty::before { content: none !important; display: none !important; }

/* add buttons: filled-circle "+" + colored bold label, the WHOLE pill is the
   button (hover covers circle + text). Empty section → centered; with ≥1 row
   → compact, left-aligned. */
#daysContainer .dc-plans-sec .plan-btns {
    display: flex; align-items: center; gap: 8px; justify-content: center; position: relative; z-index: 1;
}
#daysContainer .dc-plans-sec:has(.dc-plan) .plan-btns { justify-content: flex-start; margin-top: 10px; }
#daysContainer .btn-plan {
    display: inline-flex; align-items: center; gap: 10px;
    border: none; background: none; cursor: pointer;
    font-family: var(--font); font-size: 0.95rem; font-weight: 800;
    padding: 6px 16px 6px 6px; border-radius: 999px;
    transition: background 0.15s ease;
}
/* the whole button is the hit/hover target — children never swallow the click */
#daysContainer .btn-plan > * { pointer-events: none; }
#daysContainer .btn-plan:hover { background: rgba(10, 59, 77, 0.06); }
#daysContainer .btn-plan .btn-plan-ic {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center; font-size: 0.95rem; font-weight: 500; line-height: 1;
}
#daysContainer .btn-plan-act { color: #B7791F; }
#daysContainer .btn-plan-act .btn-plan-ic { background: var(--brand-yellow); color: var(--brand-navy); }
#daysContainer .btn-plan-tr { color: var(--dc-teal); }
#daysContainer .btn-plan-tr .btn-plan-ic { background: var(--dc-teal); color: #fff; }
/* #5: smaller +Attività / +Spostamento buttons on mobile (they sit bottom-left
   once a day already has plans and were too big). */
@media (max-width: 767px) {
    #daysContainer .btn-plan { font-size: 0.82rem; padding: 4px 11px 4px 4px; gap: 7px; }
    #daysContainer .btn-plan .btn-plan-ic { width: 22px; height: 22px; font-size: 0.85rem; }
}
#daysContainer .btn-plan .btn-plan-short { display: none; }
/* with rows: slightly smaller circle for a compact footer */
#daysContainer .dc-plans-sec:has(.dc-plan) .btn-plan { font-size: 0.9rem; }
#daysContainer .dc-plans-sec:has(.dc-plan) .btn-plan .btn-plan-ic { width: 26px; height: 26px; font-size: 0.9rem; }
#daysContainer .plan-div { width: 1px; align-self: stretch; min-height: 26px; background: var(--dc-hair); flex: 0 0 1px; }

/* ============================================================
   DAILY CARDS — PROMPT 4 · STAY RECAP (Good Morning / Good Night)
   Light banner inside a .new-section: sun/yellow for morning,
   moon/teal for night; meta pill = check-out / nights-left.
   ============================================================ */
#daysContainer .gm-banner {
    display: flex; align-items: center; gap: 11px;
    border-radius: 12px; padding: 6px 12px;
}
#daysContainer .gm-banner.is-morning { background: rgba(249, 205, 45, 0.16); }
#daysContainer .gm-banner.is-night   { background: rgba(90, 154, 156, 0.13); }
#daysContainer .gm-ic {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center;
}
#daysContainer .gm-ic svg { width: 19px; height: 19px; }
#daysContainer .gm-banner.is-morning .gm-ic { background: var(--brand-yellow); color: var(--brand-navy); }
#daysContainer .gm-banner.is-night   .gm-ic { background: var(--dc-teal); color: #fff; }
#daysContainer .gm-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#daysContainer .gm-title { font-size: 1.15rem; color: var(--brand-navy); font-weight: 600; }
#daysContainer .gm-title b { font-weight: 800; }
#daysContainer .gm-title .gm-dot { color: var(--dc-muted); margin: 0 3px; }
#daysContainer .gm-title .morning-location-placeholder { color: var(--dc-muted); font-weight: 500; }
#daysContainer .gm-addr { display: flex; align-items: center; gap: 5px; color: var(--dc-muted); font-size: 0.92rem; }
#daysContainer .gm-addr svg { flex-shrink: 0; }
#daysContainer .gm-meta {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--dc-hair); border-radius: 999px;
    padding: 5px 11px; font-size: 0.92rem; font-weight: 700; white-space: nowrap;
}
#daysContainer .gm-banner.is-night   .gm-meta { color: var(--dc-teal); }
#daysContainer .gm-banner.is-morning .gm-meta { color: #B7791F; }
#daysContainer .gm-meta svg { flex-shrink: 0; }
/* author display rules above beat UA [hidden] → restore hiding */
#daysContainer .gm-addr[hidden], #daysContainer .gm-meta[hidden] { display: none !important; }

@media (max-width: 767px) {
    /* single line, LEFT-aligned: icon · name (truncates with …) · status pill on
       the right. (The centred look before was just the long name overflowing —
       override the .morning-location-display justify-content:center.) */
    #daysContainer .gm-banner { flex-wrap: nowrap; gap: 8px; justify-content: flex-start; }
    #daysContainer .gm-title { font-size: 1rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #daysContainer .gm-body { max-width: 100%; align-items: flex-start; }
    /* compact status pill: check-out = icon only; nights = moon + number. */
    #daysContainer .gm-meta { margin-left: 0; padding: 4px 10px; font-size: 0.82rem; gap: 4px; }
    #daysContainer .gm-meta--icon { padding: 5px 7px; }

    /* Prompt 5 — mobile: keep the mode/type picker popover inside the viewport.
       The horizontal (grid-auto-flow:column) picker wraps to a grid; the
       country picker (vertical list) is unaffected. */
    #daysContainer .dc-pop:not(.dc-pop-country) {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, 1fr);
        max-width: calc(100vw - 32px);
    }
    #daysContainer .dc-pop { max-width: calc(100vw - 32px); }
}

/* ============================================================
   DAILY CARDS — Collapsible Day Overview
   eyebrow + inline hint + chevron → textarea on expand
   ============================================================ */
/* Tighter Day Overview: smaller top margin, thin bottom line. */
#daysContainer .dc-overview-sec {
    margin-top: 0.2rem;
    padding-top: 0.4rem;
    padding-bottom: 0.15rem;
}
#daysContainer .dc-overview-sec .dc-ov-head {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
}
#daysContainer .dc-overview-sec .dc-ov-head .dc-sec-eyebrow { margin: 0; flex-shrink: 0; }
#daysContainer .dc-overview-sec .dc-ov-hint {
    flex: 1 1 auto; min-width: 0; color: var(--dc-muted); font-size: 0.9rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* when it previews an actual note (not the placeholder) → solid black + bigger */
#daysContainer .dc-overview-sec .dc-ov-hint.is-filled {
    color: #111; font-size: 0.95rem; font-weight: 400;
}
#daysContainer .dc-overview-sec .dc-ov-chev { margin-left: auto; }
#daysContainer .dc-overview-sec .dc-ov-chev svg { transition: transform 0.18s ease; }
#daysContainer .dc-overview-sec:not(.dc-collapsed) .dc-ov-chev svg { transform: rotate(180deg); }
#daysContainer .dc-overview-sec .dc-ov-body { margin-top: 4px; }
/* Day-overview comment text is always solid black, never muted. */
#daysContainer .dc-overview-sec .overview-textarea,
#daysContainer .dc-overview textarea {
    color: #111 !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.4;
}
#daysContainer .dc-overview-sec .overview-textarea::placeholder { color: var(--dc-muted); font-size: 0.95rem; }
#daysContainer .dc-overview-sec.dc-collapsed .dc-ov-body { display: none; }
#daysContainer .dc-overview-sec:not(.dc-collapsed) .dc-ov-hint { display: none; }
#daysContainer .dc-overview-sec .overview-textarea { width: 100%; box-sizing: border-box; }