/* wwmapp — World Wide mApp | Design system v1.1 */
/* Art direction: viaggi, avventura → caldo, terroso, teal accent */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Work+Sans:wght@300..700&display=swap');

/* ── TOKENS ──────────────────────────────────────────────────── */
:root,[data-theme="light"]{
--font-display:'Instrument Serif',Georgia,serif;
--font-body:'Work Sans','Helvetica Neue',sans-serif;
--text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
--text-sm:clamp(.875rem,.8rem + .35vw,1rem);
--text-base:clamp(1rem,.95rem + .25vw,1.125rem);
--text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
--text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
--space-12:3rem;--space-16:4rem;
--color-bg:#f7f6f2;--color-surface:#f9f8f5;--color-surface-2:#fbfbf9;
--color-surface-offset:#f3f0ec;--color-surface-dynamic:#e6e4df;
--color-divider:#dcd9d5;--color-border:#d4d1ca;
--color-text:#28251d;--color-text-muted:#7a7974;--color-text-faint:#bab9b4;
--color-primary:#01696f;--color-primary-hover:#0c4e54;--color-primary-active:#0f3638;
--color-primary-highlight:#cedcd8;
--color-success:#437a22;--color-success-hover:#2e5c10;
--color-success-hl:#d4dfcc;
--color-warning:#964219;--color-warning-hover:#713417;
--color-error:#a12c7b;--color-error-hover:#7d1e5e;
--color-info:#006494;--color-info-hl:#c6d8e4;
--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;
--shadow-sm:0 1px 2px oklch(0.2 0.01 80/0.06);
--shadow-md:0 4px 12px oklch(0.2 0.01 80/0.08);
--shadow-lg:0 12px 32px oklch(0.2 0.01 80/0.12);
--transition:180ms cubic-bezier(.16,1,.3,1);
--content-default:960px;--content-wide:1200px;
}

[data-theme="dark"]{
--color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;
--color-surface-offset:#1d1c1a;--color-surface-dynamic:#2d2c2a;
--color-divider:#262523;--color-border:#393836;
--color-text:#cdccca;--color-text-muted:#797876;--color-text-faint:#5a5957;
--color-primary:#4f98a3;--color-primary-hover:#227f8b;--color-primary-active:#1a626b;
--color-primary-highlight:#313b3b;
--color-success:#6daa45;--color-success-hl:#3a4435;
--color-warning:#bb653b;--color-error:#d163a7;
--color-info:#5591c7;--color-info-hl:#3a4550;
--shadow-sm:0 1px 2px oklch(0 0 0/.2);
--shadow-md:0 4px 12px oklch(0 0 0/.3);
--shadow-lg:0 12px 32px oklch(0 0 0/.4);
}

@media(prefers-color-scheme:dark){:root:not([data-theme]){
--color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;
--color-surface-offset:#1d1c1a;--color-divider:#262523;--color-border:#393836;
--color-text:#cdccca;--color-text-muted:#797876;--color-text-faint:#5a5957;
--color-primary:#4f98a3;--color-primary-highlight:#313b3b;
--color-success:#6daa45;--color-success-hl:#3a4435;
--color-info:#5591c7;--color-info-hl:#3a4550;
--color-warning:#bb653b;--color-error:#d163a7;
}}

/* ── BASE ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* FIX MOBILE: impedisce scroll orizzontale su tutta l'app */
html{
  -webkit-font-smoothing:antialiased;scroll-behavior:smooth;
  scroll-padding-top:var(--space-16);
  overflow-x:hidden; /* ← fix globale scroll orizzontale */
}
body{
  min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);
  color:var(--color-text);background:var(--color-bg);line-height:1.6;
  overflow-x:hidden; /* ← doppia sicurezza */
}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);line-height:1.15;text-wrap:balance}
p,li{text-wrap:pretty;max-width:72ch}
button{cursor:pointer;background:none;border:none}
table{border-collapse:collapse;width:100%}
a,button,[role="button"],input,textarea,select{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
::selection{background:color-mix(in oklch,var(--color-primary) 25%,transparent);color:var(--color-text)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── LAYOUT ──────────────────────────────────────────────────── */
#app{display:flex;flex-direction:column;min-height:100dvh}
main#main-content{flex:1;padding:var(--space-8) 0}
.container{max-width:var(--content-wide);margin:0 auto;padding:0 var(--space-6);width:100%}
.container--narrow{max-width:var(--content-default)}

/* ── NAVBAR ──────────────────────────────────────────────────── */
.navbar{background:var(--color-surface);border-bottom:1px solid var(--color-divider);position:sticky;top:0;z-index:200}
.navbar-inner{max-width:var(--content-wide);margin:0 auto;padding:0 var(--space-6);height:60px;display:flex;align-items:center;gap:var(--space-6)}
.navbar-brand{display:flex;align-items:center;gap:var(--space-2);color:var(--color-primary);text-decoration:none;font-weight:700;font-size:var(--text-base)}
.brand-text{font-family:var(--font-display);font-size:1.1rem}
.nav-links{display:flex;align-items:center;gap:var(--space-1);list-style:none;margin-left:var(--space-4)}
.nav-link{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);text-decoration:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-1)}
.nav-link:hover,.nav-link.is-active{color:var(--color-text);background:var(--color-surface-offset)}
.nav-link.is-active{font-weight:600;color:var(--color-primary)}
.navbar-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-2)}
.btn-icon{width:36px;height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);border:1px solid transparent}
.btn-icon:hover{background:var(--color-surface-offset);color:var(--color-text)}

/* Dropdown nav */
.nav-dropdown{position:relative}
.nav-dropdown-toggle{display:flex;align-items:center;gap:6px}
.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:200px;padding:var(--space-2) 0;list-style:none;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity var(--transition),transform var(--transition);z-index:300}
.dropdown-menu.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
.dropdown-menu a{display:block;padding:var(--space-2) var(--space-4);font-size:var(--text-sm);color:var(--color-text);text-decoration:none}
.dropdown-menu a:hover{background:var(--color-surface-offset)}

/* User avatar */
.user-menu-wrap{position:relative}
.user-avatar-btn{width:34px;height:34px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:var(--text-xs);font-weight:700;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:180px;list-style:none;padding:var(--space-2) 0;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity var(--transition),transform var(--transition);z-index:300}
.user-dropdown.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
.user-dropdown a{display:block;padding:var(--space-2) var(--space-4);font-size:var(--text-sm);color:var(--color-text);text-decoration:none}
.user-dropdown a:hover{background:var(--color-surface-offset)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:var(--space-2);border-radius:var(--radius-md)}
.hamburger span{width:20px;height:2px;background:var(--color-text-muted);border-radius:2px;transition:transform .2s,opacity .2s}
/* Hamburger attivo (X) */
.hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-active span:nth-child(2){opacity:0}
.hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;line-height:1.4}
.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn-ghost{background:transparent;color:var(--color-text-muted);border-color:var(--color-border)}
.btn-ghost:hover{background:var(--color-surface-offset);color:var(--color-text)}
.btn-danger{background:var(--color-error);color:#fff;border-color:var(--color-error)}
.btn-danger:hover{filter:brightness(.9)}
.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}

/* ── CARDS & SECTIONS ────────────────────────────────────────── */
.section-block{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-4)}
/* FIX: section-header va a capo su mobile invece di overflow */
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-5);flex-wrap:wrap;gap:var(--space-3)}
.section-title{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text);font-weight:400}
.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}
.page-title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-text)}
.page-subtitle{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-1)}
.page-subtitle a{color:var(--color-primary);text-decoration:none}
/* FIX: gruppo bottoni header non esce fuori su mobile */
.page-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}

/* ── KPI ─────────────────────────────────────────────────────── */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}
.kpi-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-1)}
.kpi-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}
.kpi-value{font-size:var(--text-xl);font-weight:800;font-family:var(--font-display);color:var(--color-text);font-variant-numeric:tabular-nums;line-height:1.1}

/* ── FORMS ───────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:var(--space-2)}
.form-group label{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.form-group input,.form-group select,.form-group textarea{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-sm);width:100%}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px color-mix(in oklch,var(--color-primary) 15%,transparent)}
.form-group textarea{resize:vertical;min-height:80px}
.form-group small{font-size:var(--text-xs);color:var(--color-text-muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.form-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--color-divider);margin-top:var(--space-2)}
.required{color:var(--color-error)}
.alert--error{background:color-mix(in oklch,var(--color-error) 10%,transparent);border:1px solid color-mix(in oklch,var(--color-error) 30%,transparent);color:var(--color-error);padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--space-4)}
.alert--error ul{padding-left:var(--space-4)}
.alert--success{background:color-mix(in oklch,var(--color-success) 10%,transparent);border:1px solid color-mix(in oklch,var(--color-success) 30%,transparent);color:var(--color-success);padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--space-4)}

/* ── BADGES ──────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;white-space:nowrap}
.badge--info{background:var(--color-info-hl);color:var(--color-info)}
.badge--success{background:var(--color-success-hl);color:var(--color-success)}
.badge--warn{background:color-mix(in oklch,var(--color-warning) 12%,transparent);color:var(--color-warning)}
.badge--error{background:color-mix(in oklch,var(--color-error) 12%,transparent);color:var(--color-error)}
.badge--neutral{background:var(--color-surface-offset);color:var(--color-text-muted)}

/* ── TRAVEL CARDS ────────────────────────────────────────────── */
.travel-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:box-shadow var(--transition),transform var(--transition);display:flex;flex-direction:column}
.travel-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.travel-card-cover{height:70px;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hover));position:relative;overflow:hidden}
.travel-card-cover img{width:100%;height:100%;object-fit:cover}
.travel-card-body{padding:var(--space-5);flex:1;display:flex;flex-direction:column;gap:var(--space-2)}
.travel-card-title{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text);text-decoration:none}
.travel-card-title:hover{color:var(--color-primary)}
.travel-card-dest{font-size:var(--text-xs);color:var(--color-text-muted)}
.travel-card-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-divider);display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.travels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-5)}

/* ── ACTIVITY TIMELINE ───────────────────────────────────────── */
.day-heading{font-size:var(--text-sm);font-weight:700;color:var(--color-primary);padding:var(--space-3) 0 var(--space-2);border-bottom:2px solid var(--color-primary);margin:var(--space-6) 0 var(--space-3)}
.day-sub{font-weight:400;color:var(--color-text-muted);margin-left:var(--space-2)}
.activity-timeline{display:flex;flex-direction:column}
.act-card{display:grid;grid-template-columns:52px 12px 1fr;gap:0 var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider)}
.act-card:last-child{border-bottom:none}
.act-time{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:var(--text-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums;padding-top:2px}
.act-time-end{color:var(--color-text-faint)}
.act-dot{width:12px;height:12px;border-radius:50%;margin-top:4px;flex-shrink:0;background:var(--color-primary)}
.d-transport{background:#da7101}.d-accommodation{background:#006494}
.d-food{background:#437a22}.d-attraction{background:#7a39bb}
.d-shopping{background:#a13544}.d-other{background:#7a7974}
.act-row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.act-name{font-weight:600;font-size:var(--text-sm)}
.act-detail{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:3px}
.act-links{display:flex;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap}
.act-link{font-size:var(--text-xs);color:var(--color-primary);text-decoration:none;padding:2px 8px;border:1px solid var(--color-primary);border-radius:var(--radius-full)}
.act-link:hover{background:var(--color-primary);color:#fff}

/* ── COST TAGS ───────────────────────────────────────────────── */
.cost-tag{font-size:var(--text-xs);font-weight:600;padding:2px 8px;border-radius:var(--radius-full);white-space:nowrap}
.cost-tag--actual{background:var(--color-success-hl);color:var(--color-success)}
.cost-tag--planned{background:var(--color-info-hl);color:var(--color-info)}

/* ── COSTS TABLE ─────────────────────────────────────────────── */
/* FIX: wrapper con scroll orizzontale su mobile */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-md)}
.costs-table thead th{text-align:left;padding:var(--space-2) var(--space-3);border-bottom:2px solid var(--color-border);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);white-space:nowrap}
.costs-table tbody td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-divider);font-size:var(--text-sm);vertical-align:middle}
.costs-table tfoot td{padding:var(--space-3);font-weight:700;border-top:2px solid var(--color-border)}
.costs-table .num{text-align:right;font-variant-numeric:tabular-nums}

/* ── CHECKLIST ───────────────────────────────────────────────── */
.checklist-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--color-divider);font-size:var(--text-sm)}
.checklist-item:last-child{border-bottom:none}
.checklist-item input[type="checkbox"]{width:16px;height:16px;accent-color:var(--color-primary);cursor:pointer;flex-shrink:0}
.checklist-item label{cursor:pointer;flex:1}
.checklist-item.is-checked label{text-decoration:line-through;color:var(--color-text-muted)}

/* ── BUDGET BAR ──────────────────────────────────────────────── */
.budget-bar{height:6px;background:var(--color-surface-dynamic);border-radius:var(--radius-full);overflow:hidden}
.budget-bar__fill{height:100%;background:var(--color-primary);border-radius:var(--radius-full);transition:width .8s ease}
.budget-bar__fill--warn{background:var(--color-warning)}

/* ── OVERLAY / DIALOG ────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:oklch(0.1 0 0 / .5);display:flex;align-items:center;justify-content:center;z-index:500;opacity:0;pointer-events:none;transition:opacity var(--transition);padding:var(--space-4)}
.overlay.is-open{opacity:1;pointer-events:auto}
.dialog{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);width:100%;max-width:460px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:var(--space-4);transform:translateY(16px);transition:transform var(--transition)}
.overlay.is-open .dialog{transform:translateY(0)}
.dialog-head{display:flex;justify-content:space-between;align-items:center}
.dialog-title{font-family:var(--font-display);font-size:var(--text-lg)}
.dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-3);padding-top:var(--space-2)}

/* ── FLASH ───────────────────────────────────────────────────── */
.flash-msg{background:var(--color-success-hl);color:var(--color-success);border:1px solid var(--color-success);padding:var(--space-3) var(--space-6);font-size:var(--text-sm);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.flash-close{background:none;border:none;color:inherit;cursor:pointer;opacity:.7;font-size:var(--text-sm)}
.flash-close:hover{opacity:1}

/* ── TOKEN CARD (share) ──────────────────────────────────────── */
.token-card{background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);display:flex;gap:var(--space-4);align-items:flex-start;flex-wrap:wrap}
.token-url{font-size:var(--text-xs);color:var(--color-text-faint);word-break:break-all;font-family:monospace;margin-top:var(--space-1)}

/* ── RECAP GRID ──────────────────────────────────────────────── */
.recap-grid{display:grid;grid-template-columns:1fr 360px;gap:var(--space-6)}

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer{background:var(--color-surface);border-top:1px solid var(--color-divider);padding:var(--space-6) var(--space-8);margin-top:auto}
.footer-inner{max-width:var(--content-wide);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4)}
.footer-brand{display:flex;align-items:center;gap:var(--space-2);color:var(--color-primary);font-weight:600;font-size:var(--text-sm)}
.footer-copy{font-size:var(--text-xs);color:var(--color-text-faint)}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-4);color:var(--color-text-muted)}
.empty-state p{font-size:var(--text-sm)}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:768px){
  /* Layout */
  .form-grid{grid-template-columns:1fr}
  .recap-grid{display:flex;flex-direction:column}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .hamburger{display:flex}
  .container{padding:0 var(--space-4)}
  main#main-content{padding:var(--space-4) 0}
  .page-header{flex-direction:column;align-items:flex-start}
  .travels-grid{grid-template-columns:1fr}
  /* Padding ridotto nelle card su mobile */
  .section-block{padding:var(--space-4)}
  /* form-actions: bottoni full-width su mobile */
  .form-actions{flex-direction:column-reverse}
  .form-actions .btn{width:100%;justify-content:center}
  /* dialog più compatto */
  .dialog{padding:var(--space-4)}
  /* navbar padding ridotto */
  .navbar-inner{padding:0 var(--space-4);gap:var(--space-3)}
}

@media(max-width:480px){
  /* KPI a colonna singola */
  .kpi-row{grid-template-columns:1fr}
  /* Timeline: colonna ora più stretta */
  .act-card{grid-template-columns:38px 10px 1fr;gap:0 var(--space-2)}
  /* KPI value non troppo grande su schermi piccoli */
  .kpi-value{font-size:clamp(1.25rem,5vw,2.25rem)}
  /* Bottoni nel travel-card-footer si impilano */
  .travel-card-footer{flex-direction:column;align-items:flex-start}
  /* page-title più compatto */
  .page-title{font-size:clamp(1.3rem,5vw,2.25rem)}
  /* section-block padding minimo */
  .section-block{padding:var(--space-3)}
  /* badge e cost-tag piccoli: non escono fuori */
  .act-row{row-gap:var(--space-1)}
}

/* ── MAP PAGE ────────────────────────────────────────────────── */
#map-wrap{
  position:relative;
  height:calc(100vh - 120px);
  min-height:500px;
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--color-border);
}
#world-map{height:100%;width:100%}

.map-sidebar{
  position:absolute;
  top:var(--space-4);right:var(--space-4);
  width:280px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  z-index:1000;
  overflow:hidden;
  max-height:calc(100% - 2rem);
}
.map-sidebar-head{
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--color-divider);
  display:flex;justify-content:space-between;align-items:center;
}
.map-sidebar-body{
  overflow-y:auto;
  max-height:400px;
  padding:var(--space-3) var(--space-4);
}
.map-kpi{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-3);
  margin-bottom:var(--space-6);
}
.map-kpi-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  text-align:center;
}
.map-kpi-val{
  font-size:var(--text-xl);font-weight:800;
  font-family:var(--font-display);
  color:var(--color-primary);line-height:1;
}
.map-kpi-lbl{
  font-size:var(--text-xs);color:var(--color-text-muted);
  font-weight:600;text-transform:uppercase;margin-top:var(--space-1);
}
.country-flag{width:20px;height:14px;object-fit:cover;border-radius:2px;vertical-align:middle}

/* ── MAP RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:768px){
  /* La sidebar esce dalla mappa e diventa un blocco normale sopra */
  .map-sidebar{
    position:static;
    width:100%;
    max-height:none;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    margin-bottom:var(--space-4);
  }
  .map-sidebar-body{
    max-height:220px; /* scorrevole ma compatta */
  }
  /* La mappa si riduce un po' in altezza su mobile */
  #map-wrap{
    height:55vmax;
    min-height:300px;
    border-radius:var(--radius-lg);
  }
}