/* ============================================================
   Styles du dashboard (par-dessus Tabler)
   ============================================================ */
:root {
  --dash-accent: #5865f2;
  --dash-accent-2: #9b59b6;
  --dash-gold: #f5c542;
  --dash-silver: #c0c7d1;
  --dash-bronze: #d08a4d;
}

body { font-feature-settings: "cv03", "cv04", "cv11"; }

/* --- Barre latérale --- */
/* clip (et pas hidden) : sinon le bandeau collé en haut ne tient pas */
.page { overflow-x: clip; }
.brand { display: flex; align-items: center; gap: .75rem; text-align: left; min-width: 0; }
.brand-icon { background-size: cover; background-position: center; font-size: 1.25rem; border-radius: 50%; flex-shrink: 0; }
.brand-text { min-width: 0; }
.brand-name { font-weight: 700; font-size: 1rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Grand écran : menu en colonne avec "Se déconnecter" en bas (sur téléphone, Tabler le replie derrière ☰) */
@media (min-width: 992px) {
  .navbar-vertical .navbar-collapse { display: flex !important; flex-direction: column; }
}
.navbar-vertical .nav-item.active .nav-link {
  background: linear-gradient(90deg, rgba(88, 101, 242, .25), transparent);
  color: #fff;
  border-radius: 6px;
}
.navbar-vertical .nav-item.active .nav-link-icon { color: var(--dash-accent); }

/* --- En-tête --- */
.date-input { width: 150px; color-scheme: dark; }
#period-buttons .btn.active { background: var(--dash-accent); border-color: var(--dash-accent); color: #fff; }

/* Bandeau collé en haut de l'écran quand on défile */
.sticky-bar {
  position: sticky; top: 0; z-index: 1020;
  margin: 0; padding-top: 1rem; padding-bottom: 1rem;
  background: rgba(21, 26, 38, .88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease, padding .2s ease;
}
.sticky-bar.scrolled {
  padding-top: .6rem; padding-bottom: .6rem;
  border-bottom-color: var(--tblr-border-color);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.sticky-bar.scrolled #period-info { display: none; }

/* Bouton ⟳ */
.refresh-btn { padding-left: .55rem; padding-right: .55rem; }
.refresh-btn.spinning .ti { animation: dash-spin .8s linear infinite; }
@keyframes dash-spin { to { transform: rotate(360deg); } }

/* --- Transition entre onglets --- */
.tab-content:not([hidden]) { animation: dash-fade .35s ease both; }
@keyframes dash-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* --- Cartes de chiffres --- */
.stat-card { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-card .stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.stat-card .sparkline { margin: .5rem -1rem -1rem; height: 48px; }
.delta { font-size: .75rem; font-weight: 600; white-space: nowrap; }

/* --- Graphiques --- */
.chart-lg { min-height: 320px; }
.chart-md { min-height: 260px; }
.calendar-chart { height: 170px; }

/* --- Podium --- */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: .75rem; margin-bottom: 1rem; }
.podium-step { text-align: center; padding: 1rem .5rem .75rem; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); animation: dash-rise .6s ease both; min-width: 0; }
.podium-step.p1 { padding-top: 1.5rem; border-color: rgba(245, 197, 66, .45); background: linear-gradient(180deg, rgba(245, 197, 66, .12), rgba(255, 255, 255, .02)); animation-delay: .1s; }
.podium-step.p2 { border-color: rgba(192, 199, 209, .35); animation-delay: .2s; }
.podium-step.p3 { border-color: rgba(208, 138, 77, .35); animation-delay: .3s; }
.podium-step .avatar { margin-bottom: .5rem; }
.podium-step.p1 .avatar { box-shadow: 0 0 0 3px var(--dash-gold); }
.podium-step.p2 .avatar { box-shadow: 0 0 0 3px var(--dash-silver); }
.podium-step.p3 .avatar { box-shadow: 0 0 0 3px var(--dash-bronze); }
.podium-medal { font-size: 1.5rem; line-height: 1; margin-bottom: .35rem; }
.podium-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-value { font-size: 1.1rem; font-weight: 700; }
@keyframes dash-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* --- Classements --- */
.rank-row { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--tblr-border-color); }
.rank-row:last-child { border-bottom: none; }
.rank-pos { width: 1.75rem; text-align: right; color: var(--tblr-secondary); font-variant-numeric: tabular-nums; }
.rank-who { flex: 1; min-width: 0; }
.rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-val { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-row .progress { height: 4px; margin-top: .3rem; }
.rank-row .progress-bar { transition: width .8s ease; }

/* --- Uptime --- */
.days-strip { display: flex; gap: 2px; flex-wrap: wrap; max-width: 540px; }
.days-strip span { width: 8px; height: 22px; border-radius: 2px; background: rgba(255, 255, 255, .08); transition: transform .15s; }
.days-strip span:hover { transform: scaleY(1.25); }
.u-good { background: #2fb344 !important; }
.u-mid { background: #f5c542 !important; }
.u-warn { background: #f76707 !important; }
.u-bad { background: #d63939 !important; }

/* --- Chargement (squelettes) --- */
.skeleton-card { height: 118px; }
.skeleton-chart { height: 320px; }

/* --- Connexion --- */
.login-bg {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(88, 101, 242, .25), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(155, 89, 182, .2), transparent 40%),
    var(--tblr-body-bg);
}
.login-card { animation: dash-rise .5s ease both; }
.login-logo {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 16px; display: grid; place-items: center;
  font-size: 2rem; color: #fff; background: linear-gradient(135deg, var(--dash-accent), var(--dash-accent-2));
  box-shadow: 0 10px 30px rgba(88, 101, 242, .4);
}
.login-error { min-height: 1.5em; }

@media (max-width: 767px) {
  .podium { gap: .4rem; }
  .podium-step { padding: .75rem .25rem .5rem; }
  .date-input { width: 130px; }
}

/* Noms cliquables (ouvrent Discord ou le site) */
.entity-link { color: inherit; text-decoration: none; }
.entity-link:hover { color: var(--tblr-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Fils d'un salon (dépliables sous « Top salons ») */
.thread-toggle {
  margin-left: .5rem; padding: 0 .4rem; border: 0; border-radius: 4px; background: rgba(255,255,255,.06);
  color: var(--tblr-secondary); font-size: .75rem; line-height: 1.4rem; cursor: pointer; vertical-align: middle;
}
.thread-toggle:hover { background: rgba(255,255,255,.12); color: var(--tblr-body-color); }
.thread-toggle .ti { display: inline-block; transition: transform .2s ease; }
.thread-toggle.open .ti { transform: rotate(90deg); }
.thread-list { padding: .25rem 0 .5rem 3.2rem; border-bottom: 1px solid var(--tblr-border-color); }
.thread-list[hidden] { display: none; }
.thread-row { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; }
.thread-branch { color: var(--tblr-secondary); flex-shrink: 0; }
.thread-row .rank-name { font-size: .875rem; }
.thread-row .progress { height: 3px; margin-top: .25rem; }
.thread-more { margin-top: .25rem; }

/* Compte à rebours de la mise à jour automatique */
.live-timer { padding-left: 1.1rem; font-size: .75rem; opacity: .75; font-variant-numeric: tabular-nums; }

/* Onglet Vérification : entonnoir */
.funnel { display: flex; flex-direction: column; gap: 1.1rem; }
.funnel-track { height: 10px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.funnel-bar { height: 100%; border-radius: 6px; transition: width .8s ease; }
.stuck-chip { font-weight: 500; }