/* =====================================================================
   EasyTaxe — Élévation (ombres subtiles, esprit Material Design)
   ---------------------------------------------------------------------
   Niveaux d'ombre exposés en variables pour s'adapter au thème :
     --el-1  surface au repos (cartes, panneaux)
     --el-2  survol / élément mis en avant
     --el-3  surfaces flottantes (modales)
     --el-header / --el-nav  barres fixes du haut
   Les ombres sont plus marquées en sombre (les surfaces y sont foncées).
   Transitions douces + léger soulèvement au survol pour un rendu vivant.
   ===================================================================== */

:root {
  --el-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --el-2: 0 2px 6px rgba(16, 24, 40, 0.07), 0 8px 18px rgba(16, 24, 40, 0.12);
  --el-3: 0 4px 10px rgba(16, 24, 40, 0.10), 0 18px 40px rgba(16, 24, 40, 0.18);
  --el-header: 0 2px 10px rgba(11, 61, 145, 0.22);
  --el-nav: 0 3px 8px rgba(20, 30, 60, 0.07);
  --el-ease: 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --el-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.50);
  --el-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 10px 22px rgba(0, 0, 0, 0.55);
  --el-3: 0 6px 16px rgba(0, 0, 0, 0.50), 0 22px 48px rgba(0, 0, 0, 0.65);
  --el-header: 0 2px 12px rgba(0, 0, 0, 0.55);
  --el-nav: 0 3px 10px rgba(0, 0, 0, 0.45);
}

/* ---- Barres fixes du haut : elles « flottent » au-dessus du contenu ---- */
.app-header {
  box-shadow: var(--el-header);
  position: relative;
  z-index: 5;
}

.app-nav {
  box-shadow: var(--el-nav);
  position: relative;
  z-index: 4;
}

/* ---- Cartes / panneaux : ombre douce au repos, plus présente au survol ---- */
.erp-card,
.dash-panel {
  box-shadow: var(--el-1);
  transition: box-shadow var(--el-ease);
}

.erp-card:hover,
.dash-panel:hover {
  box-shadow: var(--el-2);
}

/* Tuiles interactives : ombre + léger soulèvement au survol. */
.kpi-card,
.sources-card {
  box-shadow: var(--el-1);
  transition: box-shadow var(--el-ease), transform var(--el-ease);
}

.kpi-card:hover,
.sources-card:hover {
  box-shadow: var(--el-2);
  transform: translateY(-2px);
}

/* ---- Boutons ---- */
.btn-incorporer {
  transition: box-shadow var(--el-ease), transform var(--el-ease), background 0.15s ease;
}

.btn-incorporer:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(11, 61, 145, 0.35);
}

.btn-incorporer:active {
  transform: translateY(0);
  box-shadow: var(--el-1);
}

.btn-soft,
.pager .btn-page,
.btn-action-ok,
.btn-action-danger,
.btn-theme-toggle {
  transition: box-shadow var(--el-ease), transform var(--el-ease), background 0.15s ease;
}

.btn-soft:hover,
.pager .btn-page:not(:disabled):not(.disabled):hover,
.btn-action-ok:hover,
.btn-action-danger:hover {
  box-shadow: var(--el-1);
  transform: translateY(-1px);
}

/* ---- Chip pays dans l'en-tête : profondeur légère + réactivité ---- */
.app-header .header-chip {
  transition: box-shadow var(--el-ease), background 0.15s ease;
}

.app-header .header-chip:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ---- Onglet de navigation actif : fine ombre pour le détacher ---- */
.app-nav .nav-tab.active {
  box-shadow: 0 6px 12px -8px rgba(232, 121, 42, 0.9);
}

/* ---- Surfaces flottantes : modales (Bootstrap) ---- */
.modal-content {
  box-shadow: var(--el-3);
  border: none;
}

/* ---- Notifications temps réel : ombre portée cohérente avec le niveau 2.
        L'id élève la spécificité pour surpasser le <style> en ligne du layout. ---- */
#rt-toasts .rt-toast {
  box-shadow: var(--el-2);
}

/* ---- Respect des préférences d'accessibilité : pas d'animation si demandé ---- */
@media (prefers-reduced-motion: reduce) {
  .kpi-card,
  .sources-card,
  .btn-incorporer,
  .btn-soft,
  .pager .btn-page,
  .btn-action-ok,
  .btn-action-danger,
  .btn-theme-toggle {
    transition: box-shadow var(--el-ease);
  }

  .kpi-card:hover,
  .sources-card:hover,
  .btn-incorporer:hover,
  .btn-soft:hover,
  .pager .btn-page:not(:disabled):not(.disabled):hover,
  .btn-action-ok:hover,
  .btn-action-danger:hover {
    transform: none;
  }
}

/* ---- Impression : aucune ombre ---- */
@media print {
  .app-header,
  .app-nav,
  .erp-card,
  .dash-panel,
  .kpi-card,
  .sources-card,
  .modal-content {
    box-shadow: none !important;
  }
}