/* ============================================================
   Collection DoNNiii — Stylesheet principal
   Thèmes clair/sombre + responsive mobile
   ============================================================ */

/* ---------- Variables (thème clair par défaut) ---------- */
:root {
  --color-bg:           #F5F2EC;
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #FAFAFA;
  --color-text:         #1F2937;
  --color-text-muted:   #6B7280;
  --color-border:       #E5E7EB;
  --color-navy:         #0F1B3D;
  --color-navy-text:    #FFFFFF;
  --color-gold:         #D4A95C;
  --color-shadow:       rgba(0, 0, 0, 0.08);
  --color-input-bg:     #FFFFFF;
  --color-input-border: #CED4DA;
  --color-link:         #0D6EFD;

  --badge-platine-bg:    #FFF4D6;
  --badge-platine-text:  #8B6F00;
  --badge-fini-bg:       #D4EDDA;
  --badge-fini-text:     #155724;
  --badge-encours-bg:    #FFF3CD;
  --badge-encours-text:  #856404;
  --badge-noncomm-bg:    #E5E7EB;
  --badge-noncomm-text:  #374151;
  --badge-abandon-bg:    #F8D7DA;
  --badge-abandon-text:  #721C24;

  --cover-empty-bg:      #DDDDDD;
}

/* ---------- Variables (thème sombre - noir profond) ---------- */
[data-theme="dark"] {
  --color-bg:           #0A0A0A;   /* presque noir absolu (fond) */
  --color-surface:      #161616;   /* cards : noir très foncé */
  --color-surface-alt:  #1F1F1F;   /* alt rows : un cran au-dessus */
  --color-text:         #ECECEC;
  --color-text-muted:   #9A9A9A;
  --color-border:       #2A2A2A;
  --color-navy:         #050505;   /* navbar : encore plus noir que le fond */
  --color-navy-text:    #F1F1F1;
  --color-gold:         #D4A95C;
  --color-shadow:       rgba(0, 0, 0, 0.6);
  --color-input-bg:     #1A1A1A;
  --color-input-border: #333333;
  --color-link:         #8AB4F8;

  --badge-platine-bg:    #3D3318;
  --badge-platine-text:  #FFE08A;
  --badge-fini-bg:       #163322;
  --badge-fini-text:     #9DD9AC;
  --badge-encours-bg:    #3D3318;
  --badge-encours-text:  #FFE08A;
  --badge-noncomm-bg:    #2A2A2A;
  --badge-noncomm-text:  #C7C7C7;
  --badge-abandon-bg:    #3D1F22;
  --badge-abandon-text:  #FFB8B8;

  --cover-empty-bg:      #1F1F1F;
}

/* ---------- Base ---------- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Liens */
a { color: var(--color-link); }
a:hover { color: var(--color-link); filter: brightness(1.15); }

/* Texte muet */
.text-muted, .form-text { color: var(--color-text-muted) !important; }

/* ---------- Navbar ---------- */
.navbar {
  background: var(--color-navy) !important;
}
.navbar-brand, .nav-link {
  color: var(--color-navy-text) !important;
}
.nav-link.active { color: var(--color-gold) !important; font-weight: 600; }

/* Toggle hamburger en mode sombre : icône claire */
[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1) brightness(2);
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border) !important;
}
.card-body { color: var(--color-text); }

.shadow-sm {
  box-shadow: 0 .125rem .25rem var(--color-shadow) !important;
}

/* KPI cards */
.card-kpi { border: none; border-radius: .75rem; }
.card-kpi .kpi-label {
  font-size: .75rem; letter-spacing: .08em;
  color: var(--color-text-muted); font-weight: 600;
}
.card-kpi .kpi-value {
  font-size: 2.5rem; font-weight: 700;
  color: var(--color-text); line-height: 1;
}

/* ---------- Forms ---------- */
.form-control, .form-select {
  background: var(--color-input-bg);
  color: var(--color-text);
  border-color: var(--color-input-border);
}
.form-control:focus, .form-select:focus {
  background: var(--color-input-bg);
  color: var(--color-text);
  border-color: var(--color-gold);
  box-shadow: 0 0 0 .2rem rgba(212, 169, 92, 0.25);
}
.form-control::placeholder { color: var(--color-text-muted); opacity: .7; }
.form-label { color: var(--color-text); }
.form-check-label { color: var(--color-text); }

/* Inputs file en thème sombre */
[data-theme="dark"] .form-control[type="file"]::file-selector-button {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* ---------- Tables ---------- */
.table {
  --bs-table-color: var(--color-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-bg: var(--color-surface-alt);
  --bs-table-striped-color: var(--color-text);
  --bs-table-hover-bg: var(--color-surface-alt);
  --bs-table-hover-color: var(--color-text);
  color: var(--color-text);
  border-color: var(--color-border);
}
.table th { color: var(--color-text); }

/* ---------- List groups ---------- */
.list-group {
  --bs-list-group-bg: var(--color-surface);
  --bs-list-group-color: var(--color-text);
  --bs-list-group-border-color: var(--color-border);
}
.list-group-item {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

/* ---------- Dropdowns ---------- */
.dropdown-menu {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.dropdown-item {
  color: var(--color-text);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.dropdown-divider { border-color: var(--color-border); }

/* ---------- Modales ---------- */
.modal-content {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.modal-header,
.modal-footer {
  border-color: var(--color-border);
}
.modal-title {
  color: var(--color-text);
}
[data-theme="dark"] .modal-content .btn-close {
  filter: invert(1) grayscale(100%) brightness(2);
}
.modal-backdrop.show {
  opacity: 0.7;
}

/* ---------- Alerts (lisibles dans les 2 thèmes) ---------- */
[data-theme="dark"] .alert-success {
  background: #1E4D2C; color: #A7E0B5; border-color: #2E7D44;
}
[data-theme="dark"] .alert-danger {
  background: #5C2A2E; color: #FFB8B8; border-color: #8B3A3F;
}
[data-theme="dark"] .alert-warning {
  background: #4D3F1A; color: #FFE08A; border-color: #806622;
}
[data-theme="dark"] .alert-info {
  background: #1E3A5C; color: #93C5FD; border-color: #2B5478;
}
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(2); }

/* ---------- Badges ---------- */
.badge-platine     { background: var(--badge-platine-bg) !important; color: var(--badge-platine-text) !important; }
.badge-fini        { background: var(--badge-fini-bg) !important; color: var(--badge-fini-text) !important; }
.badge-encours     { background: var(--badge-encours-bg) !important; color: var(--badge-encours-text) !important; }
.badge-noncommence { background: var(--badge-noncomm-bg) !important; color: var(--badge-noncomm-text) !important; }
.badge-abandonne   { background: var(--badge-abandon-bg) !important; color: var(--badge-abandon-text) !important; }

/* En mode sombre, certains badges Bootstrap natifs sont mieux contrastés */
[data-theme="dark"] .badge.bg-light {
  background: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
}
[data-theme="dark"] .badge.bg-secondary {
  background: var(--color-border) !important;
}
[data-theme="dark"] .badge.text-dark {
  color: var(--color-text) !important;
}
[data-theme="dark"] .badge.bg-dark {
  background: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
}

/* Cartes de jeux : forcer le texte lisible en mode sombre
   (Bootstrap .text-dark force #212529 ce qui est illisible sur fond sombre) */
[data-theme="dark"] .text-dark,
[data-theme="dark"] a.text-dark,
[data-theme="dark"] a.text-dark:hover {
  color: var(--color-text) !important;
}
[data-theme="dark"] .game-card .small,
[data-theme="dark"] .game-card .fw-semibold {
  color: var(--color-text);
}

/* ---------- Game cards ---------- */
.game-cover {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: .5rem;
  background: var(--cover-empty-bg);
}
.game-card {
  padding: .5rem;
  border-radius: .5rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem var(--color-shadow);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-item.active { color: var(--color-text-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-muted); }

/* ---------- Footer ---------- */
footer {
  color: var(--color-text-muted);
  font-size: .85rem;
  padding: 2rem 0;
}

/* ---------- Fiche jeu : carte image de tête ---------- */
.game-hero-cover {
  background: var(--color-surface-alt);
}

/* ---------- Cartes d'état physique ---------- */
.etat-card {
  border-radius: .75rem;
  padding: 1rem .75rem;
  text-align: center;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: help;
  height: 100%;
}
.etat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem var(--color-shadow);
}
.etat-icon {
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: .35rem;
}
.etat-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: .25rem;
}
.etat-value {
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.etat-dots {
  display: flex;
  gap: .2rem;
  justify-content: center;
}
.etat-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--color-border);
  display: inline-block;
}
.etat-dot.filled { background: currentColor; }

/* Couleurs par état (en lumineux ET en sombre) */
.etat-card.etat-success {
  background: rgba(46, 125, 50, 0.08);
  border-color: rgba(46, 125, 50, 0.25);
  color: #2E7D32;
}
.etat-card.etat-warning {
  background: rgba(224, 123, 0, 0.10);
  border-color: rgba(224, 123, 0, 0.30);
  color: #E07B00;
}
.etat-card.etat-danger {
  background: rgba(192, 57, 43, 0.08);
  border-color: rgba(192, 57, 43, 0.25);
  color: #C0392B;
}
.etat-card.etat-neutral {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* Texte intérieur lisible peu importe la couleur de l'état */
.etat-card .etat-value {
  color: var(--color-text);
}

/* En mode sombre : ajuster les opacités pour rester lisible */
[data-theme="dark"] .etat-card.etat-success {
  background: rgba(76, 175, 80, 0.12);
  border-color: rgba(76, 175, 80, 0.35);
  color: #81C784;
}
[data-theme="dark"] .etat-card.etat-warning {
  background: rgba(255, 167, 38, 0.12);
  border-color: rgba(255, 167, 38, 0.35);
  color: #FFB74D;
}
[data-theme="dark"] .etat-card.etat-danger {
  background: rgba(239, 83, 80, 0.12);
  border-color: rgba(239, 83, 80, 0.35);
  color: #E57373;
}

/* ---------- Notes personnelles ---------- */
.game-notes {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--color-surface-alt);
  border-left: 4px solid var(--color-gold);
  border-radius: 0 .5rem .5rem 0;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.6;
}

/* ---------- Mon avis sur le jeu ---------- */
.game-review {
  padding: 1rem 1.25rem;
  background: rgba(212, 169, 92, 0.08);
  border-radius: .5rem;
  color: var(--color-text);
  line-height: 1.7;
  white-space: pre-wrap;
}
[data-theme="dark"] .game-review {
  background: rgba(212, 169, 92, 0.10);
}

/* ---------- Étoiles de notation ---------- */
.rating {
  color: #F5B301;
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  white-space: nowrap;
}
.rating .bi { line-height: 1; }
.rating-sm  { font-size: .85rem; }
.rating-md  { font-size: 1rem; }
.rating-lg  { font-size: 1.4rem; }
.rating-value {
  margin-left: .4rem;
  font-weight: 700;
  color: var(--color-text);
  font-size: .85em;
}
.rating-empty {
  color: var(--color-text-muted);
}
[data-theme="dark"] .rating { color: #FFC940; }

/* Note bien visible sur la fiche jeu */
.game-rating { padding: .25rem 0; }

/* ---------- Top rated cards ---------- */
.top-rated-card .top-rated-rank {
  position: absolute;
  top: .25rem;
  left: .25rem;
  background: rgba(0, 0, 0, 0.75);
  color: #FFD700;
  font-size: 1.1rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: .35rem;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ---------- Badge "Prêté" sur les cards de collection ---------- */
.lent-badge {
  position: absolute;
  top: .35rem;
  right: .35rem;
  background: rgba(212, 169, 92, 0.95);
  color: #1F1F1F;
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: .35rem;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.lent-cover {
  filter: grayscale(40%) brightness(0.85);
  opacity: 0.75;
}

/* ---------- Lien Metacritic ---------- */
.metacritic-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}
.metacritic-link:hover {
  transform: scale(1.12);
}
.metacritic-link:active {
  transform: scale(1.05);
}
.metacritic-logo {
  display: block;
  border-radius: 50%;
  box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .metacritic-logo {
  box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.6);
}

/* Slider de notation */
input[type="range"]#noteRange {
  accent-color: var(--color-gold);
}

/* ---------- FAB Enregistrer (bouton flottant) ---------- */
.fab-save {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1040;
  border: none;
  background: var(--color-navy);
  color: #FFFFFF;
  border-radius: 999px;
  padding: .85rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, 0.3),
              0 .15rem .35rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.fab-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, 0.35),
              0 .25rem .5rem rgba(0, 0, 0, 0.25);
}
.fab-save:active {
  transform: translateY(0);
}
.fab-save .bi {
  font-size: 1.25rem;
  line-height: 1;
}
.fab-save:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

/* En thème sombre, la couleur navy est presque noire — on force une couleur dorée pour la visibilité */
[data-theme="dark"] .fab-save {
  background: var(--color-gold);
  color: #1A1A1A;
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, 0.6),
              0 .15rem .35rem rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .fab-save:hover {
  filter: brightness(1.1);
}

/* Sur mobile : bouton rond compact (icône uniquement) */
@media (max-width: 575.98px) {
  .fab-save {
    bottom: 1rem;
    right: 1rem;
    padding: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    justify-content: center;
  }
  .fab-save-label {
    display: none;
  }
  .fab-save .bi {
    font-size: 1.5rem;
  }
}

/* ---------- Boutons outline en thème sombre ---------- */
[data-theme="dark"] .btn-outline-secondary {
  color: var(--color-text);
  border-color: var(--color-border);
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
[data-theme="dark"] .btn-outline-dark {
  color: var(--color-text);
  border-color: var(--color-border);
}
[data-theme="dark"] .btn-outline-dark:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
[data-theme="dark"] .btn-light {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* ---------- Progress bars ---------- */
.progress {
  background-color: var(--color-surface-alt);
}

/* ---------- Tooltip pour boutons icônes mobiles ---------- */
.btn .bi { vertical-align: -2px; }

/* ============================================================
   RESPONSIVE — Mobile first adjustments
   ============================================================ */

/* Smartphones : grille 2 cards par ligne, plus aérée */
@media (max-width: 575.98px) {
  /* Conteneur global moins serré */
  main.container { padding-left: .75rem; padding-right: .75rem; }

  /* Titres plus petits */
  h1.h3 { font-size: 1.4rem; }

  /* KPI : passage en 2x2 */
  .card-kpi .kpi-value { font-size: 1.8rem; }
  .card-kpi .kpi-label { font-size: .65rem; }

  /* Boutons plus tactiles : 44px de hauteur min (cible Apple HIG) */
  .btn { min-height: 38px; }
  .btn-sm { min-height: 32px; }

  /* Empile les boutons d'actions verticalement */
  .actions-stack-mobile { flex-direction: column; align-items: stretch; }
  .actions-stack-mobile .btn { width: 100%; }

  /* Tables qui débordent : scroll horizontal forcé */
  .table-responsive-force {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Filtres collection : empilés et pleine largeur */
  .filters-form .row > [class*="col-"] {
    margin-bottom: .5rem;
  }

  /* Game cards plus aérées */
  .game-card .small { font-size: .8rem; }

  /* Wishlist cards : la jaquette prend moins de place */
  .wishlist-card .col-4 { max-width: 30%; }
  .wishlist-card .col-8 { flex: 1; }

  /* Form fields : éviter le zoom auto iOS */
  input, select, textarea { font-size: 16px !important; }

  /* Réduire la marge du dashboard */
  main.container.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
}

/* Tablettes */
@media (min-width: 576px) and (max-width: 767.98px) {
  .card-kpi .kpi-value { font-size: 2rem; }
}

/* ---------- Préférences système : utilise dark si l'utilisateur n'a pas explicitement choisi ---------- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    /* Note: gestion réelle faite via JS pour persistance localStorage */
  }
}

/* ---------- Toggle theme button ---------- */
.theme-toggle-icon-light, .theme-toggle-icon-dark { display: none; }
[data-theme="light"] .theme-toggle-icon-dark { display: inline-block; }
[data-theme="dark"]  .theme-toggle-icon-light { display: inline-block; }
[data-theme="light"] .theme-toggle-label::before { content: "Mode sombre"; }
[data-theme="dark"]  .theme-toggle-label::before { content: "Mode clair"; }

/* Animation discrète sur le formulaire pendant le filtrage */
form.filters-form.is-filtering {
  opacity: .85;
  transition: opacity .15s ease;
  pointer-events: none;
}

/* Style plus aéré pour la rangée de boutons après suppression du bouton Filtrer 
   (le bouton "Réinitialiser" reste visible et bien placé) */
form.filters-form .col-md-1.d-flex.gap-2,
form.filters-form .col-md-2.d-flex.gap-2 {
  justify-content: flex-end;
}