/* ═══════════════════════════════════════════════════════
   LIQUID GLASS — Sol Livio Marketing Manager
   Stile: Liquid Glass (Apple-inspired) + brand Sol Livio
   Source: UI/UX Pro Max — backdrop-filter + iridescent
   ═══════════════════════════════════════════════════════ */

/* ── BACKGROUND ANIMATO ─────────────────────────────── */

body {
  background: #e8f0f6;
  position: relative;
  overflow: hidden;
}

/* Layer blob — dietro tutto il contenuto */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 700px 600px at 15% 20%,  rgba(42,109,144,0.28)  0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 85% 75%,  rgba(201,169,110,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 600px 500px at 70% 10%,  rgba(13,122,89,0.14)   0%, transparent 70%),
    radial-gradient(ellipse 800px 400px at 30% 90%,  rgba(99,102,241,0.10)  0%, transparent 65%);
  animation: blobs 18s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes blobs {
  0%   { background-position: 15% 20%, 85% 75%, 70% 10%, 30% 90%; filter: blur(0px); }
  33%  { background-position: 20% 35%, 75% 60%, 80% 20%, 25% 80%; }
  66%  { background-position: 10% 15%, 90% 80%, 60% 5%,  35% 95%; }
  100% { background-position: 18% 28%, 80% 70%, 65% 15%, 28% 85%; filter: blur(0px); }
}

/* Grain texture sottile per profondità */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
  pointer-events: none;
  opacity: 0.5;
}

/* Tutti gli elementi sopra i blob */
/* Solo sidebar e main sopra i blob. #toast-container e #modal-container restano
   con il loro position:fixed (altrimenti diventano flex-item e rompono il layout). */
#sidebar, #main { position: relative; z-index: 1; }

/* ── SIDEBAR — DARK GLASS ───────────────────────────── */

#sidebar {
  background: rgba(8, 30, 44, 0.72) !important;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.18), inset -1px 0 0 rgba(255,255,255,0.06);
}

.sidebar-workspace-icon {
  background: linear-gradient(135deg, rgba(42,109,144,0.9), rgba(13,78,112,0.9)) !important;
  box-shadow: 0 2px 12px rgba(42,109,144,0.4), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

.sidebar-item:hover {
  background: rgba(255,255,255,0.10) !important;
}

.sidebar-item.active {
  background: rgba(201,169,110,0.15) !important;
  border-left-color: var(--gold) !important;
  box-shadow: inset 4px 0 12px rgba(201,169,110,0.08);
}

.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.sidebar-footer-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(8px);
}

.sidebar-footer-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* ── HEADER — LIGHT GLASS ───────────────────────────── */

#app-header {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.50) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 12px rgba(13,46,64,0.08) !important;
}

/* ── VIEW TABS — GLASS ──────────────────────────────── */

.view-tabs {
  background: rgba(255,255,255,0.62) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,0.45) !important;
}

/* ── TOOLBAR — GLASS ────────────────────────────────── */

.toolbar {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,0.40) !important;
}

.toolbar-search {
  background: rgba(255,255,255,0.60) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 4px rgba(0,0,0,0.06) !important;
}

.toolbar-search:focus-within {
  background: rgba(255,255,255,0.80) !important;
  border-color: rgba(42,109,144,0.40) !important;
  box-shadow: 0 0 0 3px rgba(42,109,144,0.10), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* Toolbar buttons glass */
.toolbar-btn {
  background: rgba(255,255,255,0.45) !important;
  border: 1px solid rgba(255,255,255,0.50) !important;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 3px rgba(0,0,0,0.06) !important;
}

.toolbar-btn:hover {
  background: rgba(255,255,255,0.70) !important;
  border-color: rgba(42,109,144,0.25) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 12px rgba(42,109,144,0.12) !important;
}

/* Primary button — liquid tinted glass */
.toolbar-btn.primary {
  background: linear-gradient(135deg, rgba(42,109,144,0.88) 0%, rgba(31,82,112,0.88) 100%) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 4px 16px rgba(42,109,144,0.32),
    0 1px 3px rgba(0,0,0,0.10) !important;
  position: relative;
  overflow: hidden;
}

.toolbar-btn.primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: -100%;
  height: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s var(--ease-out);
}

.toolbar-btn.primary:hover::before { left: 100%; }

.toolbar-btn.primary:hover {
  background: linear-gradient(135deg, rgba(31,82,112,0.92) 0%, rgba(13,60,88,0.92) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 6px 20px rgba(42,109,144,0.40),
    0 2px 6px rgba(0,0,0,0.12) !important;
  transform: translateY(-1px);
}

/* ── CONTENT — SCROLLABLE GLASS ─────────────────────── */

#content {
  background: transparent !important;
}

/* ── LIST GROUPS — GLASS CARDS ──────────────────────── */

.list-group {
  background: rgba(255,255,255,0.52) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow:
    0 4px 24px rgba(13,46,64,0.08),
    0 1px 4px rgba(13,46,64,0.05),
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 -1px 0 rgba(255,255,255,0.30) !important;
}

.list-group-header {
  background: rgba(255,255,255,0.45) !important;
  border-bottom: 1px solid rgba(255,255,255,0.40) !important;
}

.list-group-header:hover { background: rgba(255,255,255,0.60) !important; }

/* Table */
.list-table thead th {
  background: rgba(255,255,255,0.40) !important;
  border-bottom: 1px solid rgba(255,255,255,0.38) !important;
  border-right: 1px solid rgba(255,255,255,0.30) !important;
}

.list-row {
  background: transparent;
}

.list-row:hover { background: rgba(255,255,255,0.30) !important; }

.list-row td {
  border-right: 1px solid rgba(255,255,255,0.30) !important;
}

/* ── STATUS BADGES — GLASS TINTED ───────────────────── */

.status-badge {
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 1px 4px rgba(0,0,0,0.07);
}

.status-da-fare {
  background: rgba(220,38,38,0.16) !important;
  border: 1px solid rgba(220,38,38,0.32) !important;
}

.status-in-svolgimento {
  background: rgba(234,179,8,0.20) !important;
  border: 1px solid rgba(234,179,8,0.40) !important;
}

.status-fatto {
  background: rgba(34,197,94,0.18) !important;
  border: 1px solid rgba(34,197,94,0.35) !important;
}

.status-ritiro {
  background: rgba(107,114,128,0.18) !important;
  border: 1px solid rgba(107,114,128,0.30) !important;
}

/* ── AVATAR ─────────────────────────────────────────── */

.avatar {
  border: 2px solid rgba(255,255,255,0.75) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* ── TIMELINE BAR ───────────────────────────────────── */

.timeline-bar {
  background: linear-gradient(90deg, var(--blue) 0%, rgba(42,109,144,0.7) 100%);
  box-shadow: 0 2px 6px rgba(42,109,144,0.25);
  position: relative;
  overflow: hidden;
}

.timeline-bar::after {
  background: linear-gradient(90deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.10) 50%, transparent 100%) !important;
}

/* ── CALENDAR GRID — GLASS ──────────────────────────── */

.calendar-grid {
  background: rgba(200,215,230,0.20) !important;
  border: 1px solid rgba(255,255,255,0.50) !important;
  box-shadow:
    0 4px 32px rgba(13,46,64,0.10),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(4px);
}

.calendar-day {
  background: rgba(255,255,255,0.50) !important;
  transition: background 0.15s ease;
}

.calendar-day:hover { background: rgba(255,255,255,0.72) !important; }

.calendar-day.today { background: rgba(42,109,144,0.08) !important; }

.calendar-day.other-month { background: rgba(250,250,248,0.30) !important; }

.calendar-dow {
  background: rgba(255,255,255,0.40) !important;
}

.cal-item {
  box-shadow: 0 1px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  backdrop-filter: blur(4px);
}

/* ── CALENDAR NAV ───────────────────────────────────── */

.calendar-today-btn {
  background: rgba(255,255,255,0.60) !important;
  border: 1px solid rgba(255,255,255,0.60) !important;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 4px rgba(0,0,0,0.07) !important;
}

.calendar-nav-btn {
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 1px 4px rgba(0,0,0,0.07) !important;
}

.calendar-nav-btn:hover {
  background: rgba(255,255,255,0.80) !important;
}

/* ── MODAL — FULL GLASS ─────────────────────────────── */

#modal-container [style*="background:#fff"] {
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.60) !important;
  box-shadow:
    0 24px 64px rgba(13,46,64,0.18),
    inset 0 1px 0 rgba(255,255,255,0.80) !important;
}

/* Modal backdrop blur */
#modal-container [style*="background:rgba(0,0,0,0.45)"] {
  background: rgba(13,46,64,0.35) !important;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* Modal inputs glass */
#modal-container input,
#modal-container textarea,
#modal-container select {
  background: rgba(255,255,255,0.65) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 3px rgba(0,0,0,0.06) !important;
}

#modal-container input:focus,
#modal-container textarea:focus {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(42,109,144,0.40) !important;
  box-shadow: 0 0 0 3px rgba(42,109,144,0.10), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* Modal buttons */
#modal-container button[id="m-save"] {
  background: linear-gradient(135deg, rgba(42,109,144,0.90), rgba(31,82,112,0.90)) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 14px rgba(42,109,144,0.30) !important;
  backdrop-filter: blur(8px);
}

/* ── STATUS DROPDOWN — GLASS ────────────────────────── */

.status-badge + div,
body > div[style*="position:absolute"] {
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background: rgba(255,255,255,0.80) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  box-shadow: 0 8px 32px rgba(13,46,64,0.16), inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

/* ── TOAST — GLASS ──────────────────────────────────── */

.toast {
  background: rgba(10, 30, 44, 0.82) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.toast.success {
  background: rgba(20, 80, 40, 0.82) !important;
}

.toast.error {
  background: rgba(100, 20, 20, 0.82) !important;
}

/* ── EMPTY STATE ─────────────────────────────────────── */

.list-empty-icon {
  background: rgba(42,109,144,0.12) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
}

/* ── IRIDESCENT SHIMMER sul dot lancio ──────────────── */

.sidebar-launch-dot {
  box-shadow: 0 0 8px currentColor;
  filter: saturate(1.2);
}

.sidebar-item.active .sidebar-launch-dot {
  box-shadow: 0 0 12px currentColor, 0 0 24px currentColor;
  animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* ── SCROLLBAR GLASS ─────────────────────────────────── */

#sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15) !important;
}

#content::-webkit-scrollbar-thumb {
  background: rgba(42,109,144,0.18) !important;
}

/* Nessuna animazione di fade sulle viste: si ri-renderizzano ad ogni interazione
   e l'animazione ripetuta causava un glitch. */

/* ── PERSON VIEW — GLASS ────────────────────────────────── */

.pv-selector {
  background: rgba(255,255,255,0.62) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.45) !important;
  box-shadow: 0 2px 16px rgba(13,46,64,0.06), inset 0 1px 0 rgba(255,255,255,0.70) !important;
}

.pv-person-card {
  background: rgba(255,255,255,0.52) !important;
  border: 1.5px solid rgba(255,255,255,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), 0 1px 4px rgba(0,0,0,0.06) !important;
}

.pv-person-card:hover {
  background: rgba(255,255,255,0.82) !important;
  box-shadow: 0 6px 20px rgba(13,46,64,0.12), inset 0 1px 0 rgba(255,255,255,0.80) !important;
}

.pv-person-card.selected {
  background: rgba(42,109,144,0.12) !important;
  border-color: rgba(42,109,144,0.40) !important;
  box-shadow: 0 0 0 3px rgba(42,109,144,0.12), 0 4px 16px rgba(42,109,144,0.14), inset 0 1px 0 rgba(255,255,255,0.60) !important;
}

/* ── REDUCED MOTION ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .toolbar-btn.primary::before { transition: none; }
  .list-view, .calendar-view { animation: none; }
  .sidebar-item.active .sidebar-launch-dot { animation: none; }
}