/* === modules/viaggi/viaggi.css — stili del modulo Viaggi ====================
 *
 * TUTTO è sotto .trv-app (convenzione dei moduli: CSS scoped, nessun effetto
 * sul calendario). Solo classi, niente stili inline nei componenti: il mobile
 * (≤768px, stesso breakpoint di useIsMobile) si adatta lavorando qui.
 * Palette e tipografia dal mockup di riferimento (carta calda, accento
 * petrolio, titoli serif); corpo in DM Sans come il resto dell'app.
 * ========================================================================== */

.trv-app {
    --trv-bg: #F4F1EA;
    --trv-surface: #FFFFFF;
    --trv-panel: #FBFAF6;
    --trv-line: #DDD7CB;
    --trv-line-strong: #CFC8BA;
    --trv-ink: #1E2528;
    --trv-ink-2: #3E4649;
    --trv-muted: #5E6569;
    --trv-accent: #1F5560;
    --trv-accent-hover: #163F47;
    --trv-accent-soft: #E3EDEE;
    --trv-input: #FDFCF9;
    --trv-danger: #9C3318;
    --trv-warn-bd: #E6B596;
    --trv-warn-bg: #FDF3EC;
    --trv-warn-fg: #9A3A0E;
    --trv-ok: #4E7F4B;
    --trv-serif: 'Source Serif 4', Georgia, 'Noto Serif', serif;
    /* Tipi di annotazione (sempre con simbolo, mai solo colore) */
    --trv-pro: #1D5FA8;
    --trv-pro-tint: #F1F6FC;
    --trv-contro: #B4410F;
    --trv-contro-tint: #FDF3EC;
    --trv-info: #4F585C;
    --trv-info-tint: #FDFCF9;
    --trv-sosp: #6B45A3;
    --trv-sosp-tint: #F5F0FB;
    --trv-sosp-line: #D6CBE6;

    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--trv-bg);
    color: var(--trv-ink);
    font-size: 15px;
    line-height: 1.45;
}

/* :where() = specificità zero, così le classi dei componenti (es. il serif
 * di .trv-brand) vincono su questo reset. */
:where(.trv-app) :where(button, input, select, textarea) { font-family: inherit; }
.trv-app :focus-visible { outline: 2px solid var(--trv-accent); outline-offset: 2px; }

/* === Header ================================================================ */
.trv-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    padding: 8px 24px;
    background: var(--trv-panel);
    border-bottom: 1px solid var(--trv-line);
}
.trv-header-left, .trv-header-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trv-header-left { flex: 1 1 auto; }
.trv-header-right { flex-shrink: 0; }
.trv-brand {
    min-height: 44px;
    border: none;
    background: transparent;
    padding: 4px 2px;
    font-family: var(--trv-serif);
    font-size: 21px;
    font-weight: 600;
    color: var(--trv-ink);
    cursor: pointer;
    white-space: nowrap;
}
.trv-crumbs {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 0;
    font-size: 14px;
    color: var(--trv-muted);
}
.trv-crumb { display: inline-flex; align-items: baseline; gap: 6px; }
.trv-crumb-sep { margin: 0 4px 0 2px; color: #9A9F9C; }
.trv-crumb-link {
    border: none;
    background: transparent;
    padding: 2px 0;
    font-size: 14px;
    color: var(--trv-muted);
    cursor: pointer;
}
.trv-crumb-link:hover { color: var(--trv-accent); text-decoration: underline; }
.trv-crumb-current { color: var(--trv-ink); font-weight: 500; }

/* Il selettore di modulo (style.css) prende qui i toni del modulo. */
.trv-header .module-switcher-btn {
    height: 44px;
    border-color: var(--trv-line-strong);
    background: var(--trv-surface);
}

.trv-icon-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--trv-line-strong);
    border-radius: 8px;
    background: var(--trv-surface);
    color: var(--trv-ink-2);
    font-size: 18px;
    cursor: pointer;
}
.trv-icon-btn:hover { background: #F2EFE8; }

.trv-menu-wrap { position: relative; }
.trv-backdrop { position: fixed; inset: 0; z-index: 60; }
.trv-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 61;
    min-width: 210px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    background: var(--trv-surface);
    border: 1px solid var(--trv-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(30, 37, 40, 0.14);
}
.trv-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 15px;
    color: var(--trv-ink);
    text-align: left;
    cursor: pointer;
}
.trv-menu-item:hover:not(:disabled) { background: #F2EFE8; }
.trv-menu-item:disabled { color: #9A9F9C; cursor: default; }
.trv-menu-icon { width: 22px; text-align: center; }

.trv-offline-strip {
    padding: 6px 24px;
    background: var(--trv-warn-bg);
    border-bottom: 1px solid var(--trv-warn-bd);
    color: var(--trv-warn-fg);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

/* === Contenuto ============================================================= */
.trv-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 32px 48px;
}
.trv-h1 {
    margin: 0 0 4px;
    font-family: var(--trv-serif);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}
.trv-h2 {
    margin: 0;
    font-family: var(--trv-serif);
    font-size: 20px;
    font-weight: 600;
}
.trv-muted { color: var(--trv-muted); }
.trv-empty { margin: 8px 0 0; color: var(--trv-muted); }
.trv-error { color: var(--trv-danger); font-size: 14px; font-weight: 500; }

.trv-state {
    padding: 48px 16px;
    text-align: center;
    color: var(--trv-muted);
}
.trv-state-error p { margin: 0 0 16px; color: var(--trv-danger); }

.trv-card {
    background: var(--trv-surface);
    border: 1px solid var(--trv-line);
    border-radius: 12px;
    padding: 20px 24px;
}
.trv-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* === Controlli ============================================================= */
.trv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--trv-line-strong);
    border-radius: 8px;
    background: var(--trv-surface);
    color: var(--trv-ink);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.trv-btn:hover:not(:disabled) { background: #F2EFE8; }
.trv-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.trv-btn-primary {
    border-color: var(--trv-accent);
    background: var(--trv-accent);
    color: #fff;
    font-weight: 600;
}
.trv-btn-primary:hover:not(:disabled) { background: var(--trv-accent-hover); }
.trv-btn-danger { color: var(--trv-danger); border-color: #E2B8AC; }
.trv-btn-danger:hover:not(:disabled) { background: #FBEDE8; }
.trv-btn-quiet { border-color: transparent; background: transparent; color: var(--trv-accent); }
.trv-btn-quiet:hover:not(:disabled) { background: var(--trv-accent-soft); }

.trv-input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--trv-line-strong);
    border-radius: 8px;
    background: var(--trv-input);
    color: var(--trv-ink);
    font-size: 16px;
}
.trv-input:focus { outline: none; border-color: var(--trv-accent); box-shadow: 0 0 0 2px rgba(31, 85, 96, 0.18); }
.trv-textarea { padding: 10px 12px; resize: vertical; line-height: 1.5; }
.trv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trv-field > label, .trv-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--trv-ink-2);
}

/* === Home ================================================================== */
.trv-home { display: flex; flex-direction: column; gap: 20px; }
.trv-search-input {
    min-height: 52px;
    padding: 0 16px;
    background: var(--trv-surface);
    font-size: 17px;
}
.trv-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.trv-home-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.trv-trip-todo { color: var(--trv-warn-fg); }
.trv-home-zones .trv-hint { margin: 0 0 10px; }
.trv-roots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.trv-root-count { color: var(--trv-muted); font-weight: 400; }
.trv-pend-group + .trv-pend-group { margin-top: 16px; }
.trv-pend-group .trv-h3 { margin-bottom: 6px; }
.trv-pend-root {
    font-family: var(--trv-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--trv-ink);
    text-decoration: none;
}
.trv-pend-root:hover { color: var(--trv-accent); text-decoration: underline; }

/* Risultati della ricerca */
.trv-result-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trv-result {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--trv-line);
    border-radius: 10px;
    background: var(--trv-panel);
    color: var(--trv-ink);
    text-align: left;
    cursor: pointer;
}
.trv-result:hover { border-color: var(--trv-line-strong); background: #F7F4EE; }
.trv-result-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.trv-result-name { font-family: var(--trv-serif); font-size: 17px; font-weight: 600; }
.trv-result-where { font-size: 13px; color: var(--trv-muted); }
.trv-snippet { display: flex; gap: 6px; font-size: 14px; color: var(--trv-ink-2); }
.trv-snippet-kind { color: var(--trv-muted); white-space: nowrap; }
.trv-snippet.done { color: var(--trv-muted); }
.trv-snippet.trv-t-pro .trv-note-sym { color: var(--trv-pro); }
.trv-snippet.trv-t-contro .trv-note-sym { color: var(--trv-contro); }
.trv-snippet.trv-t-info .trv-note-sym { color: var(--trv-info); }
.trv-app mark { padding: 0 1px; border-radius: 2px; background: #F6E3A8; color: inherit; }

/* === Import da testo ======================================================= */
.trv-imp-restored { margin: -8px 0 12px; }
.trv-import-body {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.trv-import-text {
    position: sticky;
    top: 76px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.trv-imp-textarea {
    min-height: calc(100vh - 280px);
    min-height: calc(100dvh - 280px);
    background: var(--trv-surface);
    font-family: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
    font-size: 13.5px;
    line-height: 1.6;
}
.trv-imp-stale { margin: 0; }
.trv-import-preview { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.trv-import-preview .trv-section-head { margin-bottom: 0; }
.trv-imp-list { display: flex; flex-direction: column; gap: 10px; }
.trv-imp-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: calc(var(--depth, 0) * 36px);
    padding: 14px 16px;
    background: var(--trv-surface);
    border: 1px solid var(--trv-line);
    border-radius: 12px;
}
.trv-imp-card.collapsed { gap: 4px; }
.trv-imp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.trv-app .trv-imp-name {
    flex: 0 1 260px;
    min-height: 40px;
    padding: 0 8px;
    border-color: transparent;
    background: transparent;
    font-family: var(--trv-serif);
    font-size: 17px;
    font-weight: 600;
}
.trv-app .trv-imp-name:hover, .trv-app .trv-imp-name:focus { border-color: var(--trv-line-strong); background: var(--trv-input); }
.trv-app .trv-imp-name.missing { border-color: var(--trv-warn-bd); background: var(--trv-warn-bg); }
.trv-app .trv-imp-name:disabled { color: var(--trv-ink); opacity: 1; }
.trv-imp-spacer { flex: 1 1 auto; }
.trv-imp-ctl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 4px 0 10px;
    border: 1px solid var(--trv-line-strong);
    border-radius: 8px;
    background: var(--trv-surface);
    color: var(--trv-ink-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.trv-imp-ctl.missing { border-color: var(--trv-warn-bd); background: var(--trv-warn-bg); color: var(--trv-warn-fg); }
.trv-imp-select {
    min-height: 38px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.trv-imp-ctl-btn { padding-right: 10px; }
.trv-imp-val { font-weight: 600; }
.trv-imp-parent { position: relative; }
.trv-imp-match { display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--trv-muted); }
.trv-imp-todo { color: var(--trv-warn-fg); font-size: 14px; font-weight: 500; }
/* Popover "Dentro a" dell'anteprima */
.trv-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 61;
    width: 360px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: var(--trv-surface);
    border: 1px solid var(--trv-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(30, 37, 40, 0.18);
}
.trv-pop-section { display: flex; flex-direction: column; gap: 6px; }
.trv-pop-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

/* === Riepilogo del viaggio ================================================ */
.trv-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}
.trv-summary-todo { margin: 0; color: var(--trv-warn-fg); font-weight: 500; }
.trv-summary-ok { margin: 0; color: var(--trv-ok); font-weight: 500; }
.trv-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.trv-check input { width: 20px; height: 20px; accent-color: var(--trv-accent); }
.trv-sum-list { list-style: none; margin: 0; padding: 0; }
.trv-sum-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
    padding: 8px 8px 8px calc(8px + var(--depth, 0) * 22px);
    border-bottom: 1px solid var(--trv-line);
}
.trv-sum-row:last-child { border-bottom: none; }
.trv-sum-row.todo { background: #FFFBF6; }
.trv-sum-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.trv-sum-name { font-weight: 600; overflow-wrap: anywhere; }
.trv-sum-row.ghost .trv-sum-name { color: #7D8386; font-weight: 500; }
.trv-sum-cat, .trv-sum-counts { font-size: 13px; color: var(--trv-muted); }
.trv-sum-cond { grid-column: 1; font-size: 13px; font-style: italic; color: var(--trv-ink-2); }
.trv-sum-open { grid-column: 2; grid-row: 1 / span 2; min-height: 40px; }

/* === Scheda luogo / zona ================================================== */
.trv-sheet { display: flex; flex-direction: column; gap: 16px; }
.trv-sheet-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.trv-sheet-path { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: 14px; }
.trv-sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.trv-placeform {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}
.trv-pcard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: calc(var(--depth, 0) * 24px);
    padding: 16px 20px;
    background: var(--trv-surface);
    border: 1px solid var(--trv-line);
    border-radius: 12px;
}
.trv-pcard.root { padding: 20px 24px; }
.trv-pcard-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.trv-pcard-head .trv-h1 { margin: 0; }
.trv-pcard-cat { font-size: 13px; color: var(--trv-muted); }
.trv-pcard-cond { margin: 0; font-style: italic; color: var(--trv-ink-2); }
.trv-pcard-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--trv-ink-2); }
.trv-pcard-meta a { color: var(--trv-accent); }
/* Un clic seleziona tutte le coordinate: si copiano al volo per il navigatore. */
.trv-coords { font-variant-numeric: tabular-nums; user-select: all; }
.trv-pcard-link {
    font-family: var(--trv-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--trv-ink);
    text-decoration: none;
}
.trv-pcard-link:hover { color: var(--trv-accent); text-decoration: underline; }
.trv-pcard-last { display: flex; flex-direction: column; gap: 2px; }
.trv-hist-item { display: flex; flex-direction: column; align-items: flex-start; }
.trv-hist-item .trv-vsum { align-self: stretch; }
.trv-hist-open { min-height: 36px; margin-top: 2px; }
.trv-sheet-sub { display: flex; flex-direction: column; gap: 12px; }
.trv-sheet-subhead { margin-top: 8px; }

/* === Finestra modale (Categorie) ========================================== */
.trv-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(30, 37, 40, 0.35);
}
.trv-modal {
    width: 760px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px;
    background: var(--trv-surface);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(30, 37, 40, 0.25);
}
.trv-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trv-modal .trv-hint { margin: 0; }
.trv-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.trv-cat-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) 72px 44px 44px 44px;
    align-items: center;
    gap: 6px;
}
.trv-cat-count { font-size: 13px; color: var(--trv-muted); text-align: right; }
.trv-icon-sm { font-size: 15px; }
.trv-icon-danger { color: var(--trv-danger); }
.trv-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.trv-cat-add {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--trv-line);
}

.trv-tripform {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 14px;
    align-items: end;
    padding: 16px;
    margin-bottom: 14px;
    background: var(--trv-panel);
    border: 1px solid var(--trv-line);
    border-radius: 10px;
}
.trv-field-full { grid-column: 1 / -1; }
.trv-tripform-actions { display: flex; justify-content: flex-end; gap: 10px; }

.trv-trip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.trv-trip-item {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--trv-line);
    border-radius: 10px;
    background: var(--trv-panel);
    color: var(--trv-ink);
    text-align: left;
    cursor: pointer;
}
.trv-trip-item:hover { border-color: var(--trv-line-strong); background: #F7F4EE; }
.trv-trip-title { font-family: var(--trv-serif); font-size: 17px; font-weight: 600; }
.trv-trip-meta { font-size: 13px; color: var(--trv-muted); white-space: nowrap; }

.trv-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.trv-hint { font-size: 13px; color: var(--trv-muted); }
.trv-h3 {
    margin: 0;
    font-family: var(--trv-serif);
    font-size: 17px;
    font-weight: 600;
}
.trv-link {
    border: none;
    background: none;
    padding: 0;
    color: var(--trv-accent);
    font-size: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.trv-link:hover { color: var(--trv-accent-hover); }
.trv-btn-dashed {
    width: 100%;
    margin-top: 10px;
    border-style: dashed;
    border-color: #B9B1A2;
    background: transparent;
    color: var(--trv-accent);
}
.trv-select { padding-right: 8px; }
.trv-select-sm { min-height: 36px; font-size: 14px; margin-top: 6px; }
.trv-warn {
    margin: 10px 0 0;
    padding: 8px 12px;
    border: 1px solid var(--trv-warn-bd);
    border-radius: 8px;
    background: var(--trv-warn-bg);
    color: var(--trv-warn-fg);
    font-size: 14px;
}

/* === Verdetti: colore + etichetta ========================================= */
.trv-app .trv-v-assolutamente { --v: #1F6B47; --v-tint: #E6F1EA; }
.trv-app .trv-v-se_in_zona    { --v: #44743F; --v-tint: #ECF2E8; }
.trv-app .trv-v-indifferente  { --v: #5F6569; --v-tint: #EEEFEF; }
.trv-app .trv-v-non_apposta   { --v: #8F5214; --v-tint: #F6EDE2; }
.trv-app .trv-v-evitare       { --v: #9C3318; --v-tint: #F8E9E4; }
.trv-vchip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 99px;
    background: var(--v-tint);
    color: var(--v);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.trv-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.trv-tag-warn { background: var(--trv-warn-bg); color: var(--trv-warn-fg); border: 1px solid var(--trv-warn-bd); }
.trv-tag-pend { background: var(--trv-sosp-tint); color: var(--trv-sosp); }
.trv-tag-active { background: var(--trv-surface); color: var(--trv-accent); border: 1px solid var(--trv-accent); }
.trv-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 99px;
    background: var(--trv-accent-soft);
    color: var(--trv-accent);
    font-size: 12px;
    font-weight: 600;
}
.trv-badge-known { background: #EFEAE0; color: var(--trv-ink-2); }

/* === Viaggio: testata ===================================================== */
.trv-trip-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.trv-trip-notes { margin: 8px 0 0; max-width: 70ch; color: var(--trv-ink-2); white-space: pre-wrap; }
.trv-trip-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.trv-trip > .trv-tripform { margin-bottom: 20px; }

/* === Viaggio: albero + form ================================================ */
.trv-trip-body {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.trv-tree-col {
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    padding: 16px 12px;
    background: var(--trv-panel);
    border: 1px solid var(--trv-line);
    border-radius: 12px;
}
.trv-tree-toggle { display: none; }
.trv-tree-head { padding: 0 6px 10px; }
.trv-tree-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.trv-node { display: flex; align-items: stretch; border-radius: 8px; }
.trv-node.active { background: var(--trv-accent-soft); }
.trv-node-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px 8px;
    padding: 5px 6px 5px calc(8px + var(--depth, 0) * 18px);
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--trv-ink);
    text-align: left;
    cursor: pointer;
}
.trv-node:not(.active) .trv-node-main:hover { background: #F0ECE3; }
.trv-node-text { display: flex; flex-direction: column; min-width: 0; }
/* Se nome ed etichetta non stanno su una riga, va a capo l'etichetta. */
.trv-node-name { font-size: 15px; font-weight: 500; overflow-wrap: break-word; }
.trv-node.active .trv-node-name { font-weight: 600; }
.trv-node.ghost .trv-node-name { color: #7D8386; }
.trv-node-cat { font-size: 12px; color: var(--trv-muted); }
.trv-node-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
.trv-node-add {
    flex-shrink: 0;
    width: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--trv-accent);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
}
.trv-node:hover .trv-node-add, .trv-node-add:focus-visible { opacity: 1; }
.trv-node-add:hover { background: #F0ECE3; }
@media (hover: none) { .trv-node-add { opacity: 1; } }

.trv-form-col { min-width: 0; display: flex; flex-direction: column; }
.trv-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.trv-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 14px;
}

/* --- Card Luogo --- */
.trv-place-card { display: flex; flex-direction: column; gap: 18px; }
.trv-place-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.trv-input-big {
    min-height: 48px;
    font-family: var(--trv-serif);
    font-size: 18px;
    font-weight: 600;
}
.trv-field-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    font-size: 13px;
    color: var(--trv-muted);
}
.trv-field-hint.trv-coords-bad { color: var(--trv-danger); }
.trv-similar { color: var(--trv-warn-fg); display: inline-flex; flex-wrap: wrap; gap: 4px 8px; }
.trv-similar .trv-link { color: var(--trv-warn-fg); }
.trv-static {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px dashed var(--trv-line-strong);
    border-radius: 8px;
    background: var(--trv-panel);
    color: var(--trv-ink-2);
}
.trv-label-note { font-weight: 400; color: var(--trv-muted); }

/* --- Combobox --- */
.trv-combo { position: relative; }
.trv-combo-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    list-style: none;
    margin: 0;
    padding: 4px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--trv-surface);
    border: 1px solid var(--trv-line);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(30, 37, 40, 0.16);
}
.trv-combo-opt {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.trv-combo-opt.hi { background: var(--trv-accent-soft); }
.trv-combo-name { font-weight: 500; color: var(--trv-ink); }
.trv-combo-meta { font-size: 12px; color: var(--trv-muted); }
.trv-combo-opt.create { margin-top: 2px; border-top: 1px solid var(--trv-line); border-radius: 0 0 6px 6px; }
.trv-combo-opt.create .trv-combo-name { color: var(--trv-accent); font-weight: 600; }

/* --- Categorie --- */
.trv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.trv-chip {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--trv-line-strong);
    border-radius: 99px;
    background: var(--trv-surface);
    color: var(--trv-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.trv-chip:hover:not(:disabled) { background: #F2EFE8; }
.trv-chip.on { border-color: var(--trv-accent); background: var(--trv-accent); color: #fff; }
.trv-chip-add { border-style: dashed; color: var(--trv-accent); }
.trv-chip:disabled { opacity: 0.55; cursor: not-allowed; }
.trv-newcat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.trv-newcat .trv-input { flex: 1 1 180px; width: auto; }

/* --- Annotazioni --- */
.trv-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--trv-muted); }
.trv-fg-pro { color: var(--trv-pro); }
.trv-fg-contro { color: var(--trv-contro); }
.trv-fg-sospeso { color: var(--trv-sosp); }
.trv-notelist { display: flex; flex-direction: column; gap: 8px; }
.trv-row { display: flex; flex-direction: column; gap: 6px; }
.trv-row-main { display: flex; align-items: center; gap: 12px; }
.trv-typesel { display: flex; gap: 4px; flex-shrink: 0; }
.trv-type {
    width: 44px;
    height: 44px;
    border: 1px solid var(--trv-line);
    border-radius: 8px;
    background: var(--trv-surface);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.trv-type-pro { color: var(--trv-pro); }
.trv-type-contro { color: var(--trv-contro); }
.trv-type-info { color: var(--trv-info); }
.trv-type-sospeso { color: var(--trv-sosp); }
.trv-type.on { color: #fff; }
.trv-type-pro.on { background: var(--trv-pro); border-color: var(--trv-pro); }
.trv-type-contro.on { background: var(--trv-contro); border-color: var(--trv-contro); }
.trv-type-info.on { background: var(--trv-info); border-color: var(--trv-info); }
.trv-type-sospeso.on { background: var(--trv-sosp); border-color: var(--trv-sosp); }
.trv-row-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--trv-line);
    border-radius: 8px;
    background: var(--trv-info-tint);
    color: var(--trv-ink);
    font-size: 16px;
}
.trv-t-pro .trv-row-input { background: var(--trv-pro-tint); }
.trv-t-contro .trv-row-input { background: var(--trv-contro-tint); }
.trv-t-sospeso .trv-row-input { background: var(--trv-sosp-tint); }
.trv-row-input:focus { outline: none; border-color: var(--trv-accent); box-shadow: 0 0 0 2px rgba(31, 85, 96, 0.18); }
.trv-row-input::placeholder { color: #7A8084; }
.trv-row-bad .trv-row-input { border-color: var(--trv-danger); }
.trv-row-cond, .trv-row-err { padding-left: 200px; }
.trv-row-cond { display: flex; align-items: center; gap: 10px; }
.trv-row-cond label { font-size: 13px; font-weight: 600; color: var(--trv-sosp); white-space: nowrap; }
.trv-app .trv-cond-input { min-height: 40px; border-color: var(--trv-sosp-line); background: var(--trv-sosp-tint); font-size: 15px; }
.trv-row-err { color: var(--trv-danger); font-size: 13px; }
.trv-row-action {
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 10px;
    border: 1px dashed var(--trv-accent);
    border-radius: 8px;
    background: transparent;
    color: var(--trv-accent);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
}
/* In evidenza sulle righe tipo "Nome, nota"; sulle altre compare solo
 * passandoci sopra o col focus nella riga (sempre visibile al tocco). */
.trv-row-action.strong,
.trv-row:hover .trv-row-action,
.trv-row:focus-within .trv-row-action { opacity: 1; }
@media (hover: none) { .trv-row-action { opacity: 1; } }

/* --- Verdetto --- */
.trv-verdicts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.trv-vbtn {
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    border: 1.5px solid var(--trv-line);
    border-radius: 10px;
    background: var(--trv-surface);
    color: var(--v);
    cursor: pointer;
}
.trv-vbtn:hover:not(:disabled) { border-color: var(--v); }
.trv-vbtn.on { background: var(--v); border-color: var(--v); color: #fff; }
.trv-vbtn-label { font-size: 15px; font-weight: 600; }
.trv-vbtn-sub { font-size: 12px; opacity: 0.9; }
.trv-inline-field { display: flex; align-items: center; gap: 12px; }
.trv-inline-field label { font-size: 13px; font-weight: 600; color: var(--trv-ink-2); white-space: nowrap; }

/* --- Storico del luogo (nel form) --- */
.trv-history { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; border-top: 1px solid var(--trv-line); }
.trv-history-none { padding-top: 12px; border-top: 1px solid var(--trv-line); margin: 0; }
.trv-history-block .trv-h3 { margin-bottom: 8px; }
.trv-details > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--trv-ink-2);
    cursor: pointer;
}
.trv-vsum { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--trv-panel); border: 1px solid var(--trv-line); }
.trv-vsum-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.trv-vsum-trip { font-weight: 600; }
.trv-vsum-when { font-size: 13px; color: var(--trv-muted); }
.trv-vsum-cond { margin-top: 4px; font-size: 14px; color: var(--trv-ink-2); font-style: italic; }
.trv-notes-ro { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.trv-note-ro { display: flex; gap: 8px; font-size: 14px; }
.trv-note-sym { flex-shrink: 0; width: 18px; text-align: center; font-weight: 700; }
.trv-note-ro.trv-t-pro .trv-note-sym { color: var(--trv-pro); }
.trv-note-ro.trv-t-contro .trv-note-sym { color: var(--trv-contro); }
.trv-note-ro.trv-t-info .trv-note-sym { color: var(--trv-info); }
.trv-pend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trv-pend {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--trv-sosp-tint);
}
.trv-pend-box { flex-shrink: 0; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--trv-sosp); cursor: pointer; }
.trv-pend-body { min-width: 0; }
.trv-pend-desc { font-weight: 500; cursor: pointer; }
.trv-pend-flag { font-size: 12px; font-weight: 400; color: var(--trv-muted); }
.trv-pend-cond { color: var(--trv-sosp); font-size: 14px; font-weight: 500; }
.trv-pend-where, .trv-pend-when { font-size: 13px; color: var(--trv-muted); }
.trv-pend.done .trv-pend-desc { color: var(--trv-muted); text-decoration: line-through; }

/* --- Barra di salvataggio (resta visibile in fondo) --- */
.trv-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 12px;
    padding: 12px 0;
    background: var(--trv-bg);
    border-top: 1px solid var(--trv-line);
}
.trv-savebar-status { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; color: var(--trv-muted); }
.trv-draft-ok { color: var(--trv-ok); }
.trv-offline-note { color: var(--trv-warn-fg); font-weight: 500; }
.trv-savebar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.trv-btn-save { min-height: 48px; gap: 10px; }
.trv-kbd {
    padding: 2px 6px;
    border-radius: 4px;
    background: #2E6A76;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
}

/* Finestre desktop strette (portatile piccolo, tablet in orizzontale): il
 * Luogo prende tutta la riga, i verdetti vanno su più righe. */
@media (max-width: 1100px) {
    .trv-main { padding-left: 20px; padding-right: 20px; }
    .trv-trip-body { grid-template-columns: 260px minmax(0, 1fr); gap: 20px; }
    .trv-place-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trv-place-row .trv-f-place { grid-column: 1 / -1; }
    .trv-verdicts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .trv-import-body { grid-template-columns: 320px minmax(0, 1fr); gap: 20px; }
    .trv-row-cond, .trv-row-err { padding-left: 0; }
}

/* ==========================================================================
   Mobile (≤768px, lo stesso breakpoint di useIsMobile) — solo "usabile"
   --------------------------------------------------------------------------
   Il desktop resta l'interfaccia principale. Qui niente layout dedicati:
   colonna singola, l'albero del viaggio dietro il pulsante "Luoghi del
   viaggio", niente scroll orizzontale, bersagli touch ≥44px, verdetti che
   vanno a capo. Tutto con le stesse classi del desktop.
   ========================================================================== */
@media (max-width: 768px) {
    .trv-app { font-size: 15px; }

    /* Header: il percorso va su una seconda riga */
    .trv-header { padding: 6px 10px; gap: 8px; min-height: 56px; }
    .trv-header-left { flex-wrap: wrap; row-gap: 0; gap: 0 8px; }
    .trv-brand { font-size: 18px; }
    .trv-crumbs { flex: 1 1 100%; order: 3; padding: 0 2px 2px; font-size: 13px; }
    .trv-crumb-link { min-height: 32px; font-size: 13px; }
    .trv-offline-strip { padding: 6px 12px; }

    .trv-main { padding: 14px 12px 32px; }
    .trv-h1 { font-size: 23px; }
    .trv-h2 { font-size: 18px; }
    .trv-card { padding: 16px 14px; }
    .trv-card-head { flex-wrap: wrap; }

    /* Pulsanti delle testate a tutta larghezza, a capo se serve */
    .trv-trip-head { margin-bottom: 14px; }
    .trv-trip-actions, .trv-sheet-actions { width: 100%; }
    .trv-trip-actions .trv-btn, .trv-sheet-actions .trv-btn { flex: 1 1 auto; }

    /* Form viaggio */
    .trv-tripform { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
    .trv-tripform .trv-field-grow { grid-column: 1 / -1; }
    .trv-tripform-actions .trv-btn { flex: 1 1 auto; }

    /* Home */
    .trv-search-input { font-size: 16px; }
    .trv-home-grid { grid-template-columns: minmax(0, 1fr); }
    .trv-trip-item { flex-direction: column; align-items: flex-start; gap: 2px; }
    .trv-trip-meta { white-space: normal; }

    /* Viaggio: albero sopra il form, dietro un pulsante */
    .trv-trip-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .trv-tree-col {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0;
        background: none;
        border: none;
    }
    .trv-tree-toggle {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        border: 1px solid var(--trv-line);
        border-radius: 12px;
        background: var(--trv-panel);
        color: var(--trv-ink);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    .trv-tree-wrap {
        display: none;
        margin-top: 8px;
        padding: 12px 10px;
        background: var(--trv-panel);
        border: 1px solid var(--trv-line);
        border-radius: 12px;
    }
    .trv-tree-col.open .trv-tree-wrap { display: block; }
    .trv-node-add { width: 44px; opacity: 1; }

    /* Form: campi uno sotto l'altro */
    .trv-place-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    /* Riga annotazione: testo a tutta larghezza, tipi (44x44) sotto */
    .trv-row-main { flex-wrap: wrap; gap: 6px; }
    .trv-row-input { flex: 1 1 100%; order: -1; }
    .trv-row-action { margin-left: auto; min-height: 44px; }
    .trv-row-cond, .trv-row-err { padding-left: 0; }
    .trv-row-cond { flex-wrap: wrap; gap: 4px 10px; }
    .trv-app .trv-cond-input { flex: 1 1 100%; min-height: 44px; }
    /* Verdetti: a capo */
    .trv-verdicts { display: flex; flex-wrap: wrap; }
    .trv-vbtn { flex: 1 1 30%; min-width: 96px; }
    .trv-inline-field { flex-direction: column; align-items: stretch; gap: 6px; }
    .trv-newcat .trv-btn { flex: 1 1 auto; }
    /* Barra di salvataggio: pulsanti larghi, niente scorciatoia da tastiera */
    .trv-savebar { padding: 10px 0; }
    .trv-savebar-actions { width: 100%; }
    .trv-savebar-actions .trv-btn { flex: 1 1 auto; white-space: normal; text-align: center; }
    .trv-kbd { display: none; }

    /* Import */
    .trv-import-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .trv-import-text { position: static; }
    .trv-imp-textarea { min-height: 220px; }
    .trv-imp-card { margin-left: calc(var(--depth, 0) * 14px); padding: 12px; }
    .trv-app .trv-imp-name { flex: 1 1 100%; min-height: 44px; }
    .trv-imp-spacer { display: none; }
    .trv-imp-ctl { min-height: 44px; }
    .trv-imp-select { min-height: 44px; }
    .trv-popover {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-height: 75vh;
        overflow-y: auto;
    }

    /* Riepilogo e scheda luogo */
    .trv-sum-row { padding-left: calc(8px + var(--depth, 0) * 12px); }
    .trv-sum-open, .trv-hist-open { min-height: 44px; }
    .trv-pcard { margin-left: calc(var(--depth, 0) * 10px); padding: 14px; }
    .trv-pcard.root { padding: 16px 14px; }
    .trv-placeform { grid-template-columns: minmax(0, 1fr); }

    /* Categorie: nome e frecce su una riga, modalità sotto */
    .trv-modal { padding: 16px 14px; max-height: 92vh; }
    .trv-cat-row { display: flex; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--trv-line); }
    .trv-cat-row > .trv-input:first-child { flex: 1 1 0; min-width: 0; }
    .trv-cat-row > .trv-select { flex: 1 1 100%; order: 5; }
    .trv-cat-count { display: none; }
    .trv-cat-add { grid-template-columns: minmax(0, 1fr); }
}