/* === PALETTE COLORI TREERRE === */
:root {
  /* === COLORI PRIMARI === */
  --primary: #8B7F8C;        /* Malva (Basmati) - Azioni principali */
  --primary-hover: #7A6E7B;
  --primary-light: #A596A5;

  /* === COLORI SECONDARI === */
  --secondary: #6B7A5C;      /* Verde militare (Arborio) - Conferme */
  --secondary-hover: #5A6A4C;
  --secondary-light: #8B9A7C;

  /* === COLORI ACCENTO === */
  --accent-gold: #C99A5C;    /* Oro (Parboiled) - Evidenziazioni */
  --accent-sage: #7A8A6B;    /* Verde salvia (Arborio Light) - Stati positivi */
  --accent-terra: #B85C4A;   /* Terracotta (Carnaroli) - Avvisi */
  --accent-steel: #6B7A8C;   /* Grigio-blu (Vialone Nano) - Neutro attivo */

  /* === VARIETÀ DI RISO === */
  --rice-basmati: #8B7F8C;   /* Malva - Primary */
  --rice-arborio: #6B7A5C;   /* Verde militare - Secondary */
  --rice-parboiled: #C99A5C; /* Oro - Accent Gold */
  --rice-vialone: #6B7A8C;   /* Grigio-blu acciaio */
  --rice-carnaroli: #B85C4A; /* Terracotta */

  /* === STATI SERBATOI === */
  --tank-full: #6B7A5C;      /* Verde militare - Pieno */
  --tank-high: #7A8A6B;      /* Verde salvia - 75-99% */
  --tank-medium: #C99A5C;    /* Oro - 50-74% */
  --tank-low: #B85C4A;       /* Terracotta - 25-49% */
  --tank-critical: #9A4738;  /* Terracotta scuro - <25% */
  --tank-offline: #8B7F8C;   /* Malva - Non disponibile */
  --tank-maintenance: #C99A5C;/* Oro - Manutenzione */

  /* === NEUTRI RAFFINATI === */
  --gray-50: #FAFAF8;        /* Quasi bianco caldo */
  --gray-100: #F5F3F0;       /* Carta */
  --gray-200: #E8E5E0;
  --gray-300: #D4D0C9;
  --gray-400: #B8B3AA;
  --gray-500: #8C8780;
  --gray-600: #6B6660;
  --gray-700: #4A4641;
  --gray-800: #2B2826;
  --gray-900: #1A1816;

  /* === STATI UI === */
  --success: #6B7A5C;
  --warning: #C99A5C;
  --danger: #B85C4A;
  --info: #8B7F8C;

  /* === COLORI CON TRASPARENZA === */
  --primary-alpha-10: rgba(139, 127, 140, 0.1);
  --primary-alpha-20: rgba(139, 127, 140, 0.2);
  --primary-alpha-30: rgba(139, 127, 140, 0.3);
  --primary-alpha-40: rgba(139, 127, 140, 0.4);
  --secondary-alpha-30: rgba(107, 122, 92, 0.3);
}

/* === TEMA DYNAMIC (Vivace) === */
[data-theme="dynamic"] {
  --primary: #4F46E5;        /* Indigo elettrico */
  --primary-hover: #4338CA;
  --primary-light: #6366F1;
  --secondary: #F59E0B;      /* Arancione vibrante */
  --secondary-hover: #D97706;
  --secondary-light: #FBBF24;
  --accent-gold: #F59E0B;
  --accent-sage: #10B981;    /* Verde smeraldo */
  --accent-terra: #EF4444;   /* Rosso vivace */
  --accent-steel: #8B5CF6;   /* Viola elettrico */
  --tank-full: #10B981;
  --tank-high: #34D399;
  --tank-medium: #FBBF24;
  --tank-low: #FB923C;
  --tank-critical: #EF4444;
  --tank-offline: #6B7280;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #4F46E5;
  --primary-alpha-10: rgba(79, 70, 229, 0.1);
  --primary-alpha-20: rgba(79, 70, 229, 0.2);
  --primary-alpha-30: rgba(79, 70, 229, 0.3);
  --primary-alpha-40: rgba(79, 70, 229, 0.4);
  --secondary-alpha-30: rgba(245, 158, 11, 0.3);
}

/* === TEMA ELEGANT (Sofisticato) === */
[data-theme="elegant"] {
  --primary: #1F2937;        /* Grigio scuro antracite */
  --primary-hover: #111827;
  --primary-light: #374151;
  --secondary: #D4AF37;      /* Oro classico */
  --secondary-hover: #B8941F;
  --secondary-light: #E5C158;
  --accent-gold: #D4AF37;
  --accent-sage: #6B7280;    /* Grigio medio */
  --accent-terra: #9CA3AF;   /* Grigio chiaro */
  --accent-steel: #4B5563;   /* Grigio-blu */
  --tank-full: #D4AF37;
  --tank-high: #E5C158;
  --tank-medium: #9CA3AF;
  --tank-low: #6B7280;
  --tank-critical: #4B5563;
  --tank-offline: #374151;
  --success: #D4AF37;
  --warning: #E5C158;
  --danger: #6B7280;
  --info: #1F2937;
  --primary-alpha-10: rgba(31, 41, 55, 0.1);
  --primary-alpha-20: rgba(31, 41, 55, 0.2);
  --primary-alpha-30: rgba(31, 41, 55, 0.3);
  --primary-alpha-40: rgba(31, 41, 55, 0.4);
  --secondary-alpha-30: rgba(212, 175, 55, 0.3);
}

/* === TEMA FRESH (Fresco) === */
[data-theme="fresh"] {
  --primary: #059669;        /* Verde smeraldo */
  --primary-hover: #047857;
  --primary-light: #10B981;
  --secondary: #0891B2;      /* Turchese */
  --secondary-hover: #0E7490;
  --secondary-light: #06B6D4;
  --accent-gold: #84CC16;    /* Lime */
  --accent-sage: #22C55E;    /* Verde brillante */
  --accent-terra: #14B8A6;   /* Teal */
  --accent-steel: #0284C7;   /* Blu cielo */
  --tank-full: #059669;
  --tank-high: #10B981;
  --tank-medium: #84CC16;
  --tank-low: #F59E0B;
  --tank-critical: #EF4444;
  --tank-offline: #6B7280;
  --success: #10B981;
  --warning: #84CC16;
  --danger: #EF4444;
  --info: #0891B2;
  --primary-alpha-10: rgba(5, 150, 105, 0.1);
  --primary-alpha-20: rgba(5, 150, 105, 0.2);
  --primary-alpha-30: rgba(5, 150, 105, 0.3);
  --primary-alpha-40: rgba(5, 150, 105, 0.4);
  --secondary-alpha-30: rgba(8, 145, 178, 0.3);
}

/* === RESET BASE === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--gray-100);
  color: var(--gray-800);
  line-height: 1.6;
  margin-bottom: 60px;
}

/* === COMPONENTI UI === */

/* Bottoni Principali */
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  border: none;
  color: white !important;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 127, 140, 0.3);
  color: white !important;
}

.btn-secondary {
  background: var(--secondary);
  border: 1px solid var(--secondary-hover);
  color: white !important;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: var(--secondary-hover);
  color: white !important;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--gray-300);
  color: var(--gray-700);
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: var(--gray-200);
  border-color: var(--gray-400);
  color: var(--gray-800);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary);
}

/* === BADGE STATO === */
.badge-operational {
  background: var(--accent-sage);
  color: white;
}

.badge-maintenance {
  background: var(--accent-gold);
  color: var(--gray-800);
}

.badge-alert {
  background: var(--accent-terra);
  color: white;
}

.badge-offline {
  background: var(--accent-steel);
  color: white;
}

/* === ANIMAZIONI === */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* === UTILITY CLASSES === */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }

.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-info { background-color: var(--info) !important; }