* ═══════════════════════════════════════════════════════════════
   EUROPING · TEMI CONDIVISI v1.0
   Un solo file per tutte le pagine. Ogni pagina usa le variabili
   qui definite (--primary, --surface, --ink, ecc.) nel proprio CSS.
   Basta includere questo file + theme-switcher.js per avere lo
   switch tema ovunque, sincronizzato via localStorage.
   ═══════════════════════════════════════════════════════════════ */
 
:root {
  --primary: #0D5C63; --secondary: #2E9CCA; --success: #4FAE7C; --warning: #F4A259; --danger: #E4572E;
  --sand: #FBF6EC; --sand-dark: #EFE6D3; --ink: #1F2D2D;
  --fila1: #E4572E; --fila2: #F4A259; --fila3: #4FAE7C; --fila4: #2E9CCA; --fila5: #0D5C63;
 
  --surface: #ffffff;
  --surface-2: #f2f6f5;
  --surface-header: #f2f6f5;
  --surface-border: rgba(31,45,45,0.10);
  --surface-blur: none;
  --surface-shadow: 0 4px 15px rgba(0,0,0,0.08);
  --row-hover: #f8f9fa;
  --weekend-bg: #fff5f5;
  --today-bg: #e4f7f5;
  --slot-hover: #e3f2fd;
  --text-muted: #6B7A7A;
  --page-bg: var(--sand);
  --body-bg: linear-gradient(135deg, #0D5C63 0%, #2E9CCA 100%);
}
 
/* ═══════ TEMA: SABBIA (default caldo) ═══════ */
[data-theme="sabbia"] {
  --primary: #0D5C63; --secondary: #2E9CCA; --success: #4FAE7C; --warning: #F4A259; --danger: #E4572E;
  --sand: #FBF6EC; --sand-dark: #EFE6D3; --ink: #1F2D2D;
  --surface: #ffffff; --surface-2: #f2f6f5; --surface-header: #f2f6f5;
  --surface-border: rgba(31,45,45,0.10); --surface-blur: none;
  --surface-shadow: 0 4px 15px rgba(0,0,0,0.08); --row-hover: #f8f9fa;
  --weekend-bg: #fff5f5; --today-bg: #e4f7f5; --slot-hover: #e3f2fd;
  --text-muted: #6B7A7A; --page-bg: var(--sand);
  --body-bg: linear-gradient(135deg, #0D5C63 0%, #2E9CCA 100%);
}
 
/* ═══════ TEMA: OCEANO GLASS ═══════ */
[data-theme="glass"] {
  --primary: #0D5C63; --secondary: #2E9CCA; --success: #4FAE7C; --warning: #F4A259; --danger: #E4572E;
  --sand: #FBF6EC; --sand-dark: #EFE6D3; --ink: #12333A;
  --surface: rgba(255,255,255,0.55); --surface-2: rgba(255,255,255,0.35);
  --surface-header: linear-gradient(135deg, rgba(13,92,99,0.92) 0%, rgba(9,66,70,0.92) 100%);
  --surface-border: rgba(255,255,255,0.55); --surface-blur: blur(16px) saturate(1.3);
  --surface-shadow: 0 8px 32px rgba(9,66,70,0.20); --row-hover: rgba(255,255,255,0.30);
  --weekend-bg: rgba(228,87,46,0.10); --today-bg: rgba(20,219,224,0.20); --slot-hover: rgba(46,156,202,0.25);
  --text-muted: #3E6A70; --page-bg: transparent;
  --body-bg:
    radial-gradient(1100px 520px at 8% -10%, rgba(46,156,202,0.38) 0%, transparent 60%),
    radial-gradient(900px 480px at 96% 12%, rgba(79,174,124,0.24) 0%, transparent 55%),
    radial-gradient(1000px 600px at 50% 115%, rgba(13,92,99,0.45) 0%, transparent 60%),
    linear-gradient(160deg, #0E6B74 0%, #0D5C63 34%, #0A4A55 68%, #083A45 100%);
}
[data-theme="glass"] .header,
[data-theme="glass"] .top-nav,
[data-theme="glass"] .search-container,
[data-theme="glass"] .planner-ctrl,
[data-theme="glass"] .view-tabs { background: rgba(9,52,58,0.45) !important; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
[data-theme="glass"] .header-title,
[data-theme="glass"] .tab-btn:not(.active) { color: #eaf7f7 !important; }
[data-theme="glass"] th { color: #fff; }
 
/* ═══════ TEMA: NOTTE (dark) ═══════ */
[data-theme="notte"] {
  --primary: #6EC6FF; --secondary: #3E9CFF; --success: #5FD68A; --warning: #FFC46B; --danger: #FF6B6B;
  --sand: #10161A; --sand-dark: #1B242A; --ink: #E7EEF0;
  --surface: #182229; --surface-2: #1E2A32; --surface-header: #1E2A32;
  --surface-border: rgba(255,255,255,0.08); --surface-blur: none;
  --surface-shadow: 0 4px 18px rgba(0,0,0,0.45); --row-hover: #202D35;
  --weekend-bg: #241a1a; --today-bg: #16303a; --slot-hover: #22323d;
  --text-muted: #93A3AA; --page-bg: var(--sand);
  --body-bg: linear-gradient(135deg, #0B1216 0%, #16232B 100%);
}
[data-theme="notte"] .header, [data-theme="notte"] .top-nav,
[data-theme="notte"] .search-container, [data-theme="notte"] .planner-ctrl,
[data-theme="notte"] .view-tabs, [data-theme="notte"] .planner-mode-toggle { background: var(--surface-2) !important; }
[data-theme="notte"] .tab-btn.active { background: var(--surface) !important; }
[data-theme="notte"] .filter-chip { background: var(--surface) !important; border-color: var(--surface-border) !important; color: var(--ink); }
[data-theme="notte"] .card h3 { color: var(--ink) !important; }
 
/* ═══════ TEMA: SUNSET ═══════ */
[data-theme="sunset"] {
  --primary: #C1440E; --secondary: #E98A15; --success: #4FAE7C; --warning: #F6C453; --danger: #D7263D;
  --sand: #FFF3E6; --sand-dark: #FCE1C7; --ink: #3A2317;
  --surface: #fffaf4; --surface-2: #fdeee0; --surface-header: #fdeee0;
  --surface-border: rgba(193,68,14,0.15); --surface-blur: none;
  --surface-shadow: 0 4px 15px rgba(193,68,14,0.12); --row-hover: #fff1e2;
  --weekend-bg: #ffe4d6; --today-bg: #ffe9cf; --slot-hover: #ffe0c2;
  --text-muted: #8A6650; --page-bg: var(--sand);
  --body-bg: linear-gradient(135deg, #C1440E 0%, #F6C453 100%);
}
 
/* ═══════ BOTTONE + PANNELLO SWITCH TEMA (usato da theme-switcher.js) ═══════
   In basso a destra: sta lontano dagli header fissi in alto (che spesso
   hanno già un bottone "Home" o altro nell'angolo) su tutte le pagine. */
#theme-switch-btn {
  position: fixed; bottom: 20px; right: 18px; z-index: 3000;
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff; font-size: 19px; cursor: pointer; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3); transition: transform 0.2s;
}
#theme-switch-btn:hover { transform: translateY(-2px) rotate(15deg); }
#theme-switch-panel {
  position: fixed; bottom: 74px; right: 18px; z-index: 3000;
  background: var(--surface); color: var(--ink); border: 1px solid var(--surface-border);
  border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); padding: 8px;
  display: none; flex-direction: column; gap: 4px; min-width: 170px;
  backdrop-filter: var(--surface-blur); -webkit-backdrop-filter: var(--surface-blur);
}
#theme-switch-panel.open { display: flex; }
.theme-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  cursor: pointer; font-size: 13px; font-weight: 600; border: 1.5px solid transparent; background: transparent; color: var(--ink);
  font-family: inherit;
}
.theme-opt:hover { background: var(--surface-2); }
.theme-opt.active { border-color: var(--primary); background: var(--surface-2); }
.theme-swatch { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
@media (max-width: 480px) {
  #theme-switch-btn { bottom: 16px; right: 14px; width: 42px; height: 42px; font-size: 17px; }
  #theme-switch-panel { bottom: 66px; right: 14px; }
}