/* ============================================================
   THEME — "Generali-inspired" restyle, Phase 1 (2026-10-07)
   One accent red on warm neutrals, Figtree type.
   Loaded LAST on every page and only overrides design tokens +
   a few shell styles (sidebar, topbar banner). ROLLBACK: empty
   this file (or remove its <link>) — nothing else depends on it.
   Rollback point for the whole change: git tag pre-restyle-2026-10-07.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

:root {
  /* Warm neutrals */
  --c-bg:            #F7F5F3;
  --c-surface:       #FFFFFF;
  --c-surface-2:     #F3F0EC;
  --c-surface-3:     #EAE5DF;
  --c-border:        #E8E3DE;
  --c-border-strong: #D6CFC8;

  --c-text:        #2B2622;
  --c-text-muted:  #4A423C;
  --c-text-subtle: #6B625B;
  --c-text-faint:  #9A9089;

  /* One accent: Generali-style red (confirm hex against the brand kit) */
  --c-accent:        #C21B17;
  --c-accent-hover:  #A3150F;
  --c-accent-strong: #A3150F;
  --c-accent-light:  #F9DCDA;
  --c-accent-bg:     #FBEDEC;
  --c-accent-2:      #D9443F;

  --c-brand-red:     #C21B17;
  --c-brand-red-bg:  #FBEDEC;

  --gradient-brand:      linear-gradient(135deg, #C21B17 0%, #A3150F 100%);
  --gradient-brand-soft: linear-gradient(135deg, #FBEDEC 0%, #F9DCDA 100%);

  /* Status colours stay distinct from the accent, slightly muted */
  --c-success:    #2E7D4F;
  --c-success-bg: #EEF7F1;
  --c-warning:    #B45309;
  --c-warning-bg: #FFF4E0;
  --c-danger:     #B42318;
  --c-danger-bg:  #FDECEA;
  --c-info:       #2F5E8F;

  /* Outbound chat bubbles: warm red tint instead of WhatsApp green */
  --c-wa-outbound: #FBEDEC;
  --c-wa-inbound:  #FFFFFF;

  /* Warmer, softer shadows */
  --shadow-xs: 0 1px 2px rgba(43, 38, 34, 0.04);
  --shadow-sm: 0 1px 3px rgba(43, 38, 34, 0.06), 0 1px 2px rgba(43, 38, 34, 0.04);
  --shadow-md: 0 4px 10px -2px rgba(43, 38, 34, 0.08), 0 2px 4px -2px rgba(43, 38, 34, 0.04);
  --shadow-lg: 0 12px 20px -6px rgba(43, 38, 34, 0.10), 0 4px 8px -4px rgba(43, 38, 34, 0.04);

  --r-md: 10px;
  --r-lg: 14px;

  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body { font-family: var(--font-sans); background: var(--c-bg); color: var(--c-text); }
button, input, select, textarea { font-family: inherit; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar-nav { padding: 14px 10px; }
.nav-section { margin-bottom: 16px; }
.nav-section-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #857B73;
  padding: 4px 10px 6px;
}
.nav-item {
  padding: 8px 10px;
  border-radius: 8px;
  color: #3D3631;
  font-size: 14px;
}
.nav-item:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-item.active {
  background: var(--c-accent-bg);
  color: var(--c-accent);
  font-weight: 600;
}
.nav-item.active::before { display: none; }
.nav-item .badge-mini { font-size: 11px; padding: 1px 7px; }

/* Collapsible "Amministrazione" group */
.nav-section-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 8px; background: transparent;
  color: var(--c-text-subtle); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.nav-section-toggle:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-section-toggle svg { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 1.8; }
.nav-section-toggle .chev { margin-left: auto; transition: transform 150ms ease; }
.nav-section-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-section-body[hidden] { display: none; }
.nav-section-admin { border-top: 1px solid var(--c-border); padding-top: 10px; }
body[data-sidebar="collapsed"] .nav-section-toggle span { display: none; }
body[data-sidebar="collapsed"] .nav-section-toggle { justify-content: center; padding: 8px 0; }

.sidebar-user-name { font-weight: 600; }

/* ── Topbar: the yellow sticky-note becomes a quiet wordmark ── */
.topbar-banner-logo {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--c-border);
}
.topbar-banner-logo:hover { transform: none; box-shadow: none; }
.topbar-banner-logo .map-pin { display: none; }
.topbar-banner-logo .map-text {
  font-family: var(--font-sans);
  color: var(--c-accent);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.topbar-banner-logo .map-tagline {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-subtle);
  margin-top: 0;
}

/* ── Mobile pages (mobile.css has its own --m-* token set) ─── */
:root {
  --m-accent:         #C21B17;
  --m-accent-bg:      #FBEDEC;
  --m-bg:             #F7F5F3;
  --m-surface:        #FFFFFF;
  --m-surface-2:      #F3F0EC;
  --m-border:         #E8E3DE;
  --m-text:           #2B2622;
  --m-text-subtle:    #6B625B;
  --m-text-faint:     #9A9089;
  --m-danger:         #B42318;
  --m-success:        #2E7D4F;
  --m-warning:        #B45309;
  --m-warning-bg:     #FFF4E0;
  --m-warning-border: #F2C27A;
}
html, body { font-family: var(--font-sans); }
/* Outgoing bubbles: light red tint like desktop, not a solid red block. */
.m-msg-out { background: #FBEDEC; color: var(--m-text); }
.m-msg-out .m-msg-meta, .m-msg-out .m-msg-meta * { color: var(--m-text-subtle); }
.m-msg-out a { color: var(--m-accent); }
/* Grouped drawer menu (same groups as desktop). */
.m-drawer-title {
  padding: 14px 16px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #857B73;
}
.m-drawer-icon svg { width: 20px; height: 20px; display: block; }
.m-drawer-item.active { color: var(--m-accent); background: var(--m-accent-bg); }

/* ── Admin area shell (2026-10-09): rail of areas + tabs in the topbar ─────
   Only when shared.js sets body[data-shell="areas"] (desktop admins). */
body[data-shell="areas"],
body[data-shell="areas"][data-sidebar="collapsed"] { --sidebar-w: 84px; }
body[data-shell="areas"] .sidebar { overflow: visible; position: relative; }
body[data-shell="areas"] .topbar-title,
body[data-shell="areas"] .topbar-banner,
body[data-shell="areas"] .topbar-ticker { display: none !important; }

.area-rail { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; height: 100%; box-sizing: border-box; overflow-y: auto; }
.area-rail .rail-home,
.area-rail .rail-item,
.area-rail .rail-more-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 10px;
  color: var(--c-text-subtle); font-size: 11px; font-weight: 500; text-decoration: none; text-align: center;
  position: relative; margin: 0; border: none; background: transparent; cursor: pointer; font-family: inherit;
}
.area-rail .rail-item svg, .area-rail .rail-more-btn svg { width: 22px; height: 22px; stroke-width: 1.8; }
.area-rail .rail-item span:not(.badge-mini) { display: block; }
.area-rail .rail-item:hover, .area-rail .rail-more-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.area-rail .rail-item.active { background: var(--c-accent-bg); color: var(--c-accent); font-weight: 700; }
.area-rail .rail-home { margin-bottom: 8px; color: var(--c-text-muted); font-weight: 600; }
.area-rail .rail-logo {
  width: 40px; height: 40px; border-radius: 10px; background: var(--c-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
.area-rail .rail-more-btn { margin-top: auto; }
.area-rail .rail-item .badge-mini { position: absolute; top: 2px; right: 6px; margin: 0; }
body[data-shell="areas"] .nav-item.active::before { display: none; }

.rail-pop {
  position: absolute; left: calc(100% + 8px); bottom: 12px; z-index: 200; width: 280px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.rail-pop[hidden] { display: none; }
.rail-pop .sidebar-user { border-top: 1px solid var(--c-border); }
.rail-pop-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--c-border);
  color: var(--c-text-muted); font-size: 13px; text-decoration: none;
}
.rail-pop-link:hover { background: var(--c-surface-2); color: var(--c-text); }
.rail-pop-link svg { width: 16px; height: 16px; }

.area-bar { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.area-back {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px 0 6px; border-radius: 9px;
  border: 1px solid var(--c-border); color: var(--c-text-muted); font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.area-back:hover { background: var(--c-surface-2); color: var(--c-text); }
.area-back svg { width: 16px; height: 16px; }
.area-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0; }
.area-tabs { display: flex; align-items: stretch; gap: 2px; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.area-tab {
  display: flex; align-items: center; padding: 0 12px; color: var(--c-text-subtle); font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap; box-shadow: inset 0 -3px 0 transparent;
}
.area-tab:hover { color: var(--c-text); }
.area-tab.active { color: var(--c-accent); font-weight: 700; box-shadow: inset 0 -3px 0 var(--c-accent); }
.area-tab:focus-visible, .area-back:focus-visible, .area-rail a:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* ── Dashboard 1 retirement notice ─────────────────────────── */
.legacy-notice {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 1000;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-radius: 999px; background: var(--c-surface);
  color: var(--c-text); border: 1px solid var(--c-accent-light);
  box-shadow: var(--shadow-lg); font-size: 13px; white-space: nowrap;
}
.legacy-notice a { color: var(--c-accent); font-weight: 600; }