/**
 * Liquid Glass — design tokens e superfici (palette brand invariata).
 * Caricare dopo styles.css, ui-enhancements.css, app-shell-layout.css.
 */

:root {
  --glass-sidebar-base: #0a1637;
  --glass-blur: blur(20px) saturate(180%);
  --glass-blur-light: blur(14px) saturate(160%);
  --glass-fill-light: color-mix(in srgb, var(--bg-card, #ffffff) 78%, transparent);
  --glass-fill-sidebar: color-mix(in srgb, var(--glass-sidebar-base) 88%, transparent);
  --glass-fill-elevated: color-mix(in srgb, var(--bg-elevated, #e8eef8) 85%, transparent);
  --glass-stroke: rgba(255, 255, 255, 0.42);
  --glass-stroke-dark: rgba(255, 255, 255, 0.08);
  --glass-stroke-sidebar: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px rgba(15, 23, 41, 0.08), 0 1px 0 rgba(255, 255, 255, 0.55) inset;
  --glass-shadow-card: 0 4px 24px rgba(15, 23, 41, 0.06), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  --glass-radius: var(--radius, 12px);
  --glass-backdrop: var(--glass-blur);
}

/* Fallback senza backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-fill-light: var(--bg-card, #ffffff);
    --glass-fill-sidebar: var(--glass-sidebar-base);
    --glass-fill-elevated: var(--bg-elevated, #e8eef8);
    --glass-backdrop: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-blur: none;
    --glass-blur-light: none;
    --glass-fill-light: var(--bg-card, #ffffff);
    --glass-fill-sidebar: var(--glass-sidebar-base);
    --glass-fill-elevated: var(--bg-elevated, #e8eef8);
    --glass-backdrop: none;
  }
}

/* Utility */
.glass-surface {
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--border, rgba(15, 23, 41, 0.1));
  box-shadow: var(--glass-shadow-card);
  border-radius: var(--glass-radius);
}

/* Shell: sfondo stratificato pannello */
body:has(.app-shell) {
  background:
    radial-gradient(ellipse 120% 80% at 0% 0%, color-mix(in srgb, var(--bg-elevated, #e8eef8) 65%, transparent), transparent 55%),
    radial-gradient(ellipse 90% 70% at 100% 100%, color-mix(in srgb, var(--accent, #1565c0) 6%, var(--bg, #f0f4fa)), transparent 50%),
    var(--bg, #eef2f7);
  color: var(--text, #1f2937);
}

.app-shell .app-side {
  background: var(--glass-fill-sidebar);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border-right: 1px solid var(--glass-stroke-sidebar);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}

.app-shell .sys-header {
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border-bottom: 1px solid var(--border, #dbe3f0);
  box-shadow: 0 1px 0 var(--glass-stroke) inset;
}

/* sys-content: no blur (scroll / performance) */
.app-shell .sys-content {
  background: transparent;
}

/* Componenti globali nel pannello */
.app-shell .card,
.app-shell .sys-card,
.app-shell .kbox,
body:has(.app-shell) .pane.glass-pane,
.app-shell .panel-card {
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--border, rgba(15, 23, 41, 0.1));
  box-shadow: var(--glass-shadow-card);
}

.app-shell details {
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
}

.app-shell .callout {
  background: var(--glass-fill-elevated);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
}

/* Modali */
.app-shell .modal-card,
.app-modal .app-modal-card,
.qr-modal .qr-modal-card {
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow), 0 24px 48px rgba(15, 23, 41, 0.18);
  border-radius: var(--glass-radius);
}

.app-modal {
  background: rgba(2, 6, 23, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Form nel pannello */
.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.app-shell select,
.app-shell textarea {
  background: color-mix(in srgb, var(--bg-card, #fff) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus {
  background: var(--bg-card, #fff);
}

/* Tabelle: no blur, solo coerenza bordi */
.app-shell .sys-content table {
  border-collapse: collapse;
}

.app-shell .sys-content th {
  background: color-mix(in srgb, var(--bg-elevated, #e8eef8) 90%, transparent);
}

/* Pagine pubbliche (senza app-shell) */
body:not(:has(.app-shell)) {
  background:
    radial-gradient(ellipse 120% 80% at 0% 0%, color-mix(in srgb, var(--bg-elevated, #e8eef8) 65%, transparent), transparent 55%),
    radial-gradient(ellipse 90% 70% at 100% 100%, color-mix(in srgb, var(--accent, #1565c0) 6%, var(--bg, #f0f4fa)), transparent 50%),
    var(--bg, #f0f4fa);
}

body:not(:has(.app-shell)) .site-header {
  background: var(--glass-fill-light, rgba(255, 255, 255, 0.92));
  backdrop-filter: var(--glass-blur-light, blur(12px));
  -webkit-backdrop-filter: var(--glass-blur-light, blur(12px));
}

body:not(:has(.app-shell)) .card.glass-surface,
body:not(:has(.app-shell)) main.card {
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  box-shadow: var(--glass-shadow-card);
}

/* Login / card pubbliche con classe */
.login-wrap.glass-surface,
.foto-ss-card.glass-surface {
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--border, #d5deea);
  box-shadow: var(--glass-shadow);
}

@media print {
  .app-shell .app-side,
  .app-shell .sys-header,
  .app-shell .card,
  .app-shell .sys-card,
  .app-shell .kbox,
  .app-modal .app-modal-card,
  .login-wrap {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff !important;
    box-shadow: none !important;
  }
}