/*
╔═══════════════════════════════════════════════════════════╗
║  🌙 DARK MODE - Portale Nintendo                          ║
║  Variabili CSS per tema chiaro/scuro                      ║
╚═══════════════════════════════════════════════════════════╝
*/

/* ========================================
   LIGHT MODE (Default)
======================================== */
:root {
  /* Colori Nintendo */
  --nintendo-red: #E60012;
  --nintendo-red-dark: #C4000F;
  --nintendo-red-hover: #FF1A2E;
  --nintendo-green: #00A859;
  --nintendo-blue: #0AB9E6;
  --nintendo-orange: #FF8C00;
  --nintendo-purple: #7B1FA2;

  /* Backgrounds */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F7FA;
  --bg-tertiary: #FAFAFA;
  --bg-elevated: #FFFFFF;

  /* Testi */
  --text-primary: #2B2B2B;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --text-inverse: #FFFFFF;

  /* Bordi */
  --border-color: #E8E8E8;
  --border-light: #F0F0F0;
  --border-dark: #D0D0D0;

  /* Ombre */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* Cards */
  --card-bg: #FFFFFF;
  --card-hover: #FAFAFA;

  /* Status Colors */
  --status-pending-bg: #FFF3E0;
  --status-pending-text: #E65100;
  --status-pending-border: #FFE0B2;

  --status-approved-bg: #E8F5E9;
  --status-approved-text: #2E7D32;
  --status-approved-border: #C8E6C9;

  --status-rejected-bg: #FFEBEE;
  --status-rejected-text: #C62828;
  --status-rejected-border: #FFCDD2;

  /* Flash Messages */
  --flash-success-bg: #E8F5E9;
  --flash-success-text: #2E7D32;
  --flash-success-border: #C8E6C9;

  --flash-error-bg: #FFEBEE;
  --flash-error-text: #C62828;
  --flash-error-border: #FFCDD2;

  /* Input */
  --input-bg: #FFFFFF;
  --input-border: #E8E8E8;
  --input-focus-border: var(--nintendo-red);
  --input-focus-shadow: rgba(230, 0, 18, 0.1);

  /* Gradients */
  --gradient-header: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  --gradient-red: linear-gradient(90deg, #E60012 0%, #FF6B6B 100%);

  /* Scrollbar */
  --scrollbar-track: #F5F5F5;
  --scrollbar-thumb: #C0C0C0;
  --scrollbar-thumb-hover: #A0A0A0;
}

/* ========================================
   DARK MODE
======================================== */
[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary: #1A1A1A;
  --bg-secondary: #242424;
  --bg-tertiary: #2B2B2B;
  --bg-elevated: #2F2F2F;

  /* Testi */
  --text-primary: #E8E8E8;
  --text-secondary: #B0B0B0;
  --text-tertiary: #808080;
  --text-inverse: #1A1A1A;

  /* Bordi */
  --border-color: #3A3A3A;
  --border-light: #2F2F2F;
  --border-dark: #505050;

  /* Ombre */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Cards */
  --card-bg: #242424;
  --card-hover: #2B2B2B;

  /* Status Colors */
  --status-pending-bg: #3D2F00;
  --status-pending-text: #FFB74D;
  --status-pending-border: #5D4500;

  --status-approved-bg: #1B3A1F;
  --status-approved-text: #81C784;
  --status-approved-border: #2D5A33;

  --status-rejected-bg: #3A1A1A;
  --status-rejected-text: #EF5350;
  --status-rejected-border: #5A2A2A;

  /* Flash Messages */
  --flash-success-bg: #1B3A1F;
  --flash-success-text: #81C784;
  --flash-success-border: #2D5A33;

  --flash-error-bg: #3A1A1A;
  --flash-error-text: #EF5350;
  --flash-error-border: #5A2A2A;

  /* Input */
  --input-bg: #2F2F2F;
  --input-border: #3A3A3A;
  --input-focus-border: var(--nintendo-red-hover);
  --input-focus-shadow: rgba(255, 26, 46, 0.2);

  /* Gradients */
  --gradient-header: linear-gradient(135deg, #242424 0%, #1A1A1A 100%);
  --gradient-red: linear-gradient(90deg, #FF1A2E 0%, #FF6B6B 100%);

  /* Scrollbar */
  --scrollbar-track: #1A1A1A;
  --scrollbar-thumb: #505050;
  --scrollbar-thumb-hover: #606060;
}

/* ========================================
   APPLICAZIONE GLOBALE
======================================== */
body {
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cards e container */
.form-box,
.container,
.box,
.table-container,
.request-card,
.user-card,
.stat-card {
  background: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Testi */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}

p {
  color: var(--text-secondary);
}

/* Input e Form */
input,
select,
textarea {
  background: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--input-border) !important;
}

input::placeholder {
  color: var(--text-tertiary) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--input-focus-shadow) !important;
}

/* Select options */
select option {
  background: var(--input-bg);
  color: var(--text-primary);
}

/* Tabelle */
table { background: var(--card-bg); }
thead { background: var(--bg-secondary); }

th {
  color: var(--text-primary);
  border-color: var(--border-color);
}

td {
  color: var(--text-secondary);
  border-color: var(--border-light);
}

tbody tr:hover { background: var(--card-hover); }

/* Status Badges */
.status-badge.pending,
.badge.pending {
  background: var(--status-pending-bg) !important;
  color: var(--status-pending-text) !important;
  border-color: var(--status-pending-border) !important;
}

.status-badge.approved,
.badge.approved {
  background: var(--status-approved-bg) !important;
  color: var(--status-approved-text) !important;
  border-color: var(--status-approved-border) !important;
}

.status-badge.rejected,
.badge.rejected {
  background: var(--status-rejected-bg) !important;
  color: var(--status-rejected-text) !important;
  border-color: var(--status-rejected-border) !important;
}

/* Flash Messages */
.flash.success {
  background: var(--flash-success-bg) !important;
  color: var(--flash-success-text) !important;
  border-color: var(--flash-success-border) !important;
}

.flash.error {
  background: var(--flash-error-bg) !important;
  color: var(--flash-error-text) !important;
  border-color: var(--flash-error-border) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ========================================
   TOGGLE BUTTON
======================================== */
.dark-mode-toggle {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 56px !important;
  height: 56px !important;
  background: var(--nintendo-red) !important;
  border: 3px solid var(--border-color) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-lg) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 999999 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  isolation: isolate;
  contain: layout;
}

.dark-mode-toggle:hover {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 12px 32px rgba(230, 0, 18, 0.4) !important;
}

.dark-mode-toggle:active {
  transform: translateY(-2px) scale(0.98) !important;
}

.dark-mode-toggle i {
  font-size: 24px !important;
  color: white !important;
  position: absolute !important;
  transition: all 0.4s ease !important;
  line-height: 1 !important;
}

.dark-mode-toggle .icon-sun {
  opacity: 1 !important;
  transform: rotate(0deg) scale(1) !important;
}

.dark-mode-toggle .icon-moon {
  opacity: 0 !important;
  transform: rotate(-180deg) scale(0) !important;
}

[data-theme="dark"] .dark-mode-toggle .icon-sun {
  opacity: 0 !important;
  transform: rotate(180deg) scale(0) !important;
}

[data-theme="dark"] .dark-mode-toggle .icon-moon {
  opacity: 1 !important;
  transform: rotate(0deg) scale(1) !important;
}

/* Tooltip */
.dark-mode-toggle::before {
  content: attr(data-tooltip);
  position: absolute !important;
  right: 70px !important;
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.3s ease !important;
  box-shadow: var(--shadow-md) !important;
  border: 2px solid var(--border-color) !important;
}

.dark-mode-toggle:hover::before {
  opacity: 1 !important;
  right: 75px !important;
}

/* ========================================
   MOBILE RESPONSIVE
======================================== */
@media (max-width: 768px) {
  .dark-mode-toggle {
    width: 52px !important;
    height: 52px !important;
    bottom: 20px !important;
    right: 20px !important;
  }

  .dark-mode-toggle i { font-size: 22px !important; }
  .dark-mode-toggle::before { display: none !important; }
}

@media (max-width: 480px) {
  .dark-mode-toggle {
    width: 48px !important;
    height: 48px !important;
    bottom: 16px !important;
    right: 16px !important;
  }

  .dark-mode-toggle i { font-size: 20px !important; }
}

/* ========================================
   ANIMATIONS
======================================== */
@keyframes themeSwitch {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.dark-mode-toggle.theme-switching {
  animation: themeSwitch 0.5s ease !important;
}

.theme-transition * {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease !important;
}

@keyframes togglePulse {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(230, 0, 18, 0.4); }
  50%       { box-shadow: var(--shadow-lg), 0 0 0 8px rgba(230, 0, 18, 0); }
}

.dark-mode-toggle {
  animation: togglePulse 2s ease-in-out 1;
}