/**
 * Theme & Density — User preferences applied to entire UI
 *
 * data-theme: system | light | dark
 * data-density: comfortable | compact
 *
 * --bg, --card, --text, --muted, --border, --primary, --shadow
 */

/* ============================================
   LIGHT THEME (default)
   ============================================ */
html[data-theme="light"],
html:not([data-theme]) {
  --bg: #f5f6f8;
  --card: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --table-hover: rgba(37, 99, 235, 0.04);
  --text: #0f172a;
  --muted: #64748b;
  --border: #e8eaef;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #dbeafe;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
  --color-bg: #f5f6f8;
  --color-bg-card: #ffffff;
  --color-bg-soft: #e5e7eb;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-soft: #9ca3af;
  --color-border: #e8eaef;
  --color-border-subtle: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #dbeafe;
}

/* ============================================
   DARK THEME
   ============================================ */
html[data-theme="dark"] {
  --bg: #0f172a;
  --card: #1e293b;
  --surface: #1e293b;
  --surface-2: #334155;
  --table-hover: rgba(96, 165, 250, 0.08);
  --text: #f1f5f9;
  --muted: #94a3b8;
  --border: #334155;
  --primary: #60a5fa;
  --primary-hover: #3b82f6;
  --primary-soft: #1e3a5f;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
  --color-bg: #0f172a;
  --color-bg-card: #1e293b;
  --color-bg-soft: #334155;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-text-soft: #64748b;
  --color-border: #334155;
  --color-border-subtle: #475569;
  --color-border-strong: #475569;
  --color-primary: #60a5fa;
  --color-primary-hover: #3b82f6;
  --color-primary-light: #1e3a5f;
}

/* Dark: select chevron visibile */
html[data-theme="dark"] select,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] select,
  html[data-theme="system"] select.form-control,
  html[data-theme="system"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  }
}

/* ============================================
   SYSTEM THEME (prefers-color-scheme)
   ============================================ */
html[data-theme="system"] {
  --bg: #f5f6f8;
  --card: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --table-hover: rgba(37, 99, 235, 0.04);
  --text: #0f172a;
  --muted: #64748b;
  --border: #e8eaef;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #dbeafe;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
  --color-bg: #f5f6f8;
  --color-bg-card: #ffffff;
  --color-bg-soft: #e5e7eb;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-soft: #9ca3af;
  --color-border: #e8eaef;
  --color-border-subtle: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #dbeafe;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #0f172a;
    --card: #1e293b;
    --surface: #1e293b;
    --surface-2: #334155;
    --table-hover: rgba(96, 165, 250, 0.08);
    --text: #f1f5f9;
    --muted: #94a3b8;
    --border: #334155;
    --primary: #60a5fa;
    --primary-hover: #3b82f6;
    --primary-soft: #1e3a5f;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
    --color-bg: #0f172a;
    --color-bg-card: #1e293b;
    --color-bg-soft: #334155;
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-text-soft: #64748b;
    --color-border: #334155;
    --color-border-subtle: #475569;
    --color-border-strong: #475569;
    --color-primary: #60a5fa;
    --color-primary-hover: #3b82f6;
    --color-primary-light: #1e3a5f;
  }
}

/* ============================================
   DENSITY: COMPACT
   ============================================ */
html[data-density="compact"] {
  --space-2: 0.375rem;
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --space-5: 1rem;
  --space-6: 1.25rem;
  --space-8: 1.5rem;
  --radius-card: 0.75rem;
  --radius-btn: 0.5rem;
  --radius-input: 0.5rem;
}

html[data-density="compact"] .card-xl,
html[data-density="compact"] .section-card {
  padding: var(--space-4);
}

html[data-density="compact"] .form-group {
  margin-bottom: var(--space-2);
}

html[data-density="compact"] .btn {
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
}

html[data-density="compact"] table tbody tr td,
html[data-density="compact"] table thead th {
  padding: var(--space-2) var(--space-3);
}

html[data-density="compact"] .form-control,
html[data-density="compact"] input[type="text"],
html[data-density="compact"] input[type="email"],
html[data-density="compact"] select,
html[data-density="compact"] textarea {
  padding: var(--space-2) var(--space-3);
  min-height: 2rem;
}

/* ============================================
   DARK MODE: Browser autofill override
   Evita input bianchi quando il browser applica autofill
   ============================================ */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] input:-webkit-autofill:active,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill:hover,
html[data-theme="dark"] textarea:-webkit-autofill:focus,
html[data-theme="dark"] select:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill:hover,
html[data-theme="dark"] select:-webkit-autofill:focus {
  -webkit-text-fill-color: #f1f5f9;
  -webkit-box-shadow: 0 0 0 1000px #1e293b inset;
  box-shadow: 0 0 0 1000px #1e293b inset;
  transition: background-color 5000s ease-in-out 0s;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] input:-webkit-autofill,
  html[data-theme="system"] input:-webkit-autofill:hover,
  html[data-theme="system"] input:-webkit-autofill:focus,
  html[data-theme="system"] input:-webkit-autofill:active,
  html[data-theme="system"] textarea:-webkit-autofill,
  html[data-theme="system"] textarea:-webkit-autofill:hover,
  html[data-theme="system"] textarea:-webkit-autofill:focus,
  html[data-theme="system"] select:-webkit-autofill,
  html[data-theme="system"] select:-webkit-autofill:hover,
  html[data-theme="system"] select:-webkit-autofill:focus {
    -webkit-text-fill-color: #f1f5f9;
    -webkit-box-shadow: 0 0 0 1000px #1e293b inset;
    box-shadow: 0 0 0 1000px #1e293b inset;
    transition: background-color 5000s ease-in-out 0s;
  }
}