/* ============================================================================
 * FILE: css/temp-style.css
 * DESCRIPTION: Test visuel isolé — trips.html
 *              1. Harmonisation pill + eye-btn (couleur accent stable)
 *              2. Couleurs sémantiques fixes pour les badges d'alertes
 *              3. Effet glassmorphism prononcé sur les cards
 * ============================================================================ */

/* ─── FOND DE PAGE — nécessaire pour que le blur soit visible ─────────────── */

/*
 * Le glassmorphism a besoin d'un fond avec du "contenu visuel" derrière les cards.
 * On ajoute un fond dégradé subtil sur le body pour que le blur ait quelque chose à flouter.
 */

/* Le main passe devant le fond de page */
main {
  position: relative;
  z-index: 1;
}

/* ─── GLASSMORPHISM SUR LES CARDS ────────────────────────────────────────── */

.trip-card-item,
.detail-card {
  /* Fond verre translucide */
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.8) !important;
  backdrop-filter: blur(22px) saturate(1.8) !important;

  /* Bordure verre — reflet lumineux sur le dessus */
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  border-bottom-color: rgba(255, 255, 255, 0.35) !important;
  border-right-color: rgba(255, 255, 255, 0.35) !important;

  /* Ombre portée accentuée */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;

  border-radius: 22px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.trip-card-item:hover,
.detail-card:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.13),
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  border-color: color-mix(in srgb, var(--accent) 50%, rgba(255,255,255,0.7)) !important;
}

/* Thème sombre */
:root[data-theme="dark"] .trip-card-item,
:root[data-theme="dimmed"] .trip-card-item,
:root[data-theme="slate"] .trip-card-item,
:root[data-theme="dark"] .detail-card,
:root[data-theme="dimmed"] .detail-card,
:root[data-theme="slate"] .detail-card {
  background: rgba(24, 30, 40, 0.52) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  border-top-color: rgba(255, 255, 255, 0.22) !important;
  border-left-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.30),
    0 2px 8px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

:root[data-theme="dark"] .trip-card-item:hover,
:root[data-theme="dimmed"] .trip-card-item:hover,
:root[data-theme="slate"] .trip-card-item:hover,
:root[data-theme="dark"] .detail-card:hover,
:root[data-theme="dimmed"] .detail-card:hover,
:root[data-theme="slate"] .detail-card:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.40),
    0 4px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.14)) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .trip-card-item,
  :root:not([data-theme="light"]) .detail-card {
    background: rgba(24, 30, 40, 0.52) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
    border-top-color: rgba(255, 255, 255, 0.22) !important;
    border-left-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.30),
      0 2px 8px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  }
}

/* ─── SÉPARATEUR EN TIRETS dans la card — s'adapte au fond verre ─────────── */

.trip-stats-row {
  border-top: 1px dashed rgba(128, 128, 128, 0.25) !important;
}

:root[data-theme="dark"] .trip-stats-row,
:root[data-theme="dimmed"] .trip-stats-row,
:root[data-theme="slate"] .trip-stats-row {
  border-top: 1px dashed rgba(255, 255, 255, 0.16) !important;
}

/* ─── CHIPS STATS — verre léger dans la card ─────────────────────────────── */

.trip-stat-chip {
  background: rgba(255, 255, 255, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

:root[data-theme="dark"] .trip-stat-chip,
:root[data-theme="dimmed"] .trip-stat-chip,
:root[data-theme="slate"] .trip-stat-chip {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ─── PILL (titre du parcours) ───────────────────────────────────────────── */

.trip-code-pill {
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 11%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

:root[data-theme="dark"] .trip-code-pill,
:root[data-theme="dimmed"] .trip-code-pill,
:root[data-theme="slate"] .trip-code-pill {
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .trip-code-pill {
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
  }
}

/* ─── BOUTON ŒIL ─────────────────────────────────────────────────────────── */

.trip-eye-btn {
  background: color-mix(in srgb, var(--accent) 11%, rgba(255,255,255,0.5)) !important;
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

:root[data-theme="dark"] .trip-eye-btn,
:root[data-theme="dimmed"] .trip-eye-btn,
:root[data-theme="slate"] .trip-eye-btn {
  background: color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,0.2)) !important;
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .trip-eye-btn {
    background: color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,0.2)) !important;
    color: var(--accent) !important;
    border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
  }
}

.trip-eye-btn:hover {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
}

/* ─── MODALES — glassmorphism cohérent avec les cards (trip-detail.html) ──── */

.modal-sheet,
.rem-modal-card {
  background: rgba(255, 255, 255, 0.65) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.8) !important;
  backdrop-filter: blur(26px) saturate(1.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  border-bottom-color: rgba(255, 255, 255, 0.35) !important;
  border-right-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow:
    0 -10px 40px rgba(0, 0, 0, 0.14),
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

:root[data-theme="dark"] .modal-sheet,
:root[data-theme="dimmed"] .modal-sheet,
:root[data-theme="slate"] .modal-sheet,
:root[data-theme="dark"] .rem-modal-card,
:root[data-theme="dimmed"] .rem-modal-card,
:root[data-theme="slate"] .rem-modal-card {
  background: rgba(24, 30, 40, 0.62) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  border-top-color: rgba(255, 255, 255, 0.22) !important;
  border-left-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 -10px 40px rgba(0, 0, 0, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modal-sheet,
  :root:not([data-theme="light"]) .rem-modal-card {
    background: rgba(24, 30, 40, 0.62) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
    border-top-color: rgba(255, 255, 255, 0.22) !important;
    border-left-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      0 -10px 40px rgba(0, 0, 0, 0.35),
      0 4px 16px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  }
}

/* En-tête de la sheet — séparateur adapté au fond verre */
.modal-sheet-header {
  border-bottom-color: rgba(128, 128, 128, 0.25) !important;
}

:root[data-theme="dark"] .modal-sheet-header,
:root[data-theme="dimmed"] .modal-sheet-header,
:root[data-theme="slate"] .modal-sheet-header {
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

/* Cartes "autres parcours" dans la bottom sheet — verre léger cohérent */
.other-trip-card {
  background: rgba(255, 255, 255, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

:root[data-theme="dark"] .other-trip-card,
:root[data-theme="dimmed"] .other-trip-card,
:root[data-theme="slate"] .other-trip-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ─── BADGE ALERTES — couleurs sémantiques fixes ──────────────────────────── */

.alert-badge {
  background: rgba(31, 122, 92, 0.14) !important;
  color: #1f7a5c !important;
}

.alert-badge.has-alerts {
  background: rgba(220, 38, 38, 0.14) !important;
  color: #dc2626 !important;
}