/* ═══════════════════════════════════════════════════════════════
   EUROPING · GLASSMORPHISM MARINO — Tema condiviso v1.0
   Applicato dopo gli stili di pagina: li arricchisce senza
   cancellarne layout nè classi. Nessun JS viene toccato.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --glass-primary: #0D5C63;
  --glass-primary-dark: #094246;
  --glass-secondary: #2E9CCA;
  --glass-success: #4FAE7C;
  --glass-warning: #F4A259;
  --glass-danger: #E4572E;
  --glass-ink: #12333A;
  --glass-card-bg: rgba(255, 255, 255, 0.60);
  --glass-card-bg-hover: rgba(255, 255, 255, 0.75);
  --glass-card-border: rgba(255, 255, 255, 0.65);
  --glass-header-bg: rgba(9, 52, 58, 0.55);
  --glass-blur: 18px;
  --glass-shadow: 0 8px 32px rgba(9, 66, 70, 0.18);
  --glass-shadow-hover: 0 14px 44px rgba(9, 66, 70, 0.28);
  --glass-radius: 22px;
}

/* ── SFONDO OCEANO (onde luminose su tutto il gestionale) ── */
body {
  background:
    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%) !important;
  background-attachment: fixed !important;
  color: var(--glass-ink);
}

/* Testo che resta su sfondo scuro (header/dashboard su gradiente) */
.header, .topbar h1, .header h1 { color: #fff; }

/* ── CARD IN VETRO ───────────────────────────────────────── */
.card,
.stat-card,
.filters-section,
.table-container,
.planner-ctrl,
.modal-content,
.modal-box,
.modal-eseason-content,
.login-container,
.quick-card,
.item-card,
.totals-card,
.quicknav {
  background: var(--glass-card-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35) !important;
  border: 1px solid var(--glass-card-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

.card:hover,
.stat-card:hover,
.item-card:hover {
  background: var(--glass-card-bg-hover) !important;
  box-shadow: var(--glass-shadow-hover) !important;
  transform: translateY(-3px);
}

/* Le card statistiche mantengono la barra colorata in cima */
.stat-card { border-top: 4px solid var(--glass-secondary) !important; }
.stat-card.blue  { border-top-color: var(--glass-secondary) !important; }
.stat-card.green { border-top-color: var(--glass-success) !important; }
.stat-card.red   { border-top-color: var(--glass-danger) !important; }
.stat-value { color: var(--glass-primary) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }

/* ── HEADER FISSO IN VETRO SCURO ─────────────────────────── */
.header, .top-nav, .quicknav {
  background: var(--glass-header-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 6px 26px rgba(4, 34, 38, 0.35) !important;
}

/* ── BOTTONI: gradiente mare + glow ──────────────────────── */
.btn-primary, .btn-login, .btn-print, .btn-add, .btn-sync,
.btn-import, .btn-eseason {
  background: linear-gradient(135deg, #14DBE0 0%, #2E9CCA 45%, #0D5C63 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(46, 156, 202, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(9, 66, 70, 0.4);
}
.btn-primary:hover, .btn-login:hover, .btn-print:hover, .btn-add:hover,
.btn-sync:hover, .btn-import:hover, .btn-eseason:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(46, 156, 202, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  filter: brightness(1.06);
}

.btn-success {
  background: linear-gradient(135deg, #6FE0A8 0%, #4FAE7C 50%, #2E7D5B 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(79, 174, 124, 0.45) !important;
  color: #fff !important;
}

.btn-back, .btn-secondary, .logout {
  background: rgba(255, 255, 255, 0.16) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.btn-back:hover, .btn-secondary:hover, .logout:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-1px);
}

/* ── TAB / CHIP: pillole in vetro ────────────────────────── */
.tab-btn, .filter-chip, .mode-btn, .filter-btn {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 16px !important;
  color: var(--glass-ink) !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}
.tab-btn:hover, .filter-chip:hover { transform: translateY(-1px); background: rgba(255,255,255,0.75) !important; }
.tab-btn.active, .filter-chip.active, .mode-btn.active {
  background: linear-gradient(135deg, #0D5C63 0%, #094246 100%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 6px 18px rgba(9, 66, 70, 0.45) !important;
}

/* ── INPUT: vetro chiaro con focus luminoso ──────────────── */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="tel"], input[type="search"],
select, textarea, .filter-input, .search-input {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 2px 6px rgba(9, 66, 70, 0.06);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s !important;
}
input:focus, select:focus, textarea:focus,
.filter-input:focus, .search-input:focus {
  outline: none !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #14DBE0 !important;
  box-shadow: 0 0 0 4px rgba(20, 219, 224, 0.25),
              0 4px 16px rgba(46, 156, 202, 0.25) !important;
}

/* ── TABELLE: righe traslucide ───────────────────────────── */
.table-header, th, thead {
  background: linear-gradient(135deg, rgba(13, 92, 99, 0.92) 0%, rgba(9, 66, 70, 0.92) 100%) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.table-row { border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important; }
.table-row:hover { background: rgba(255, 255, 255, 0.35) !important; }
tr:nth-child(even) td { background: rgba(255, 255, 255, 0.25); }

/* ── MODALI: vetro profondo ──────────────────────────────── */
#modal-pay, .modal, .modal-overlay, .modal-eseason {
  background: rgba(6, 40, 45, 0.45) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px) !important;
}
.modal-content, .modal-box, .modal-eseason-content {
  background: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 24px 70px rgba(4, 30, 34, 0.4) !important;
}

/* ── BADGE & PILL: riflessi vitrei ───────────────────────── */
.badge, .status-pill {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ── DASHBOARD (base.html): card giganti in vetro ────────── */
.grid .card, .card.blue, .card.green, .card.purple, .card.teal,
.card.orange, .card.cyan, .card.gray {
  background: var(--glass-card-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35) !important;
  border: 1px solid var(--glass-card-border) !important;
  border-radius: 26px !important;
  box-shadow: var(--glass-shadow) !important;
}
.grid .card:hover {
  background: var(--glass-card-bg-hover) !important;
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--glass-shadow-hover) !important;
}
.card h3 { color: var(--glass-primary) !important; }
.card p  { color: #3E6A70 !important; }

/* ── OMBRELLONI / MAPPA: mantenono colori funzionali ─────── */
.u-box {
  background: rgba(255, 255, 255, 0.65) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px) !important;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
}
.u-box:hover { box-shadow: 0 8px 22px rgba(46, 156, 202, 0.4) !important; }

/* ── SCROLLBAR TEMA MARE ─────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2E9CCA, #0D5C63);
  border-radius: 8px;
}
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.15); }

/* ── ACCESSIBILITÀ: riduzione animazioni ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}