/* === THEME TOKENS (Light + Dark) ======================================= */
html { color-scheme: light dark; }

/* Clair (défaut) */
:root{
  --bg: #fafafa;
  --surface-0: #ffffff;
  --surface-1: #ffffff;               /* petites surfaces (header sticky, cards, tables) */
  --surface-header: rgb(63,81,181);
  --surface-bgbtn: color-mix(in srgb, var(--surface-0), black 12%);
  --text-high: rgba(0,0,0,.87);
  --text-med:  rgba(0,0,0,.60);
  --text-dis:  rgba(0,0,0,.38);
  --border: rgba(0,0,0,.12);
  --hover:  rgba(0,0,0,.06);
  --row-hl: rgba(255,235,59,.18);

  /* Accents utilisés dans tes animations Δ */
  --pos: #10b981;  /* vert */
  --neg: #ef4444;  /* rouge */
}

/* Sombre (Material) */
:root[data-theme="dark"]{
  --bg: #121212;
  --surface-0: #121212;
  /* overlay ~8dp pour de petites surfaces (tables/cards) */
  --surface-1: color-mix(in srgb, var(--surface-0), white 12%);
  --surface-header: color-mix(in srgb, var(--surface-0), white 12%);
  --surface-bgbtn: color-mix(in srgb, var(--surface-0), white 30%);

  --text-high: rgba(255,255,255,.87);
  --text-med:  rgba(255,255,255,.60);
  --text-dis:  rgba(255,255,255,.38);

  --border: rgba(255,255,255,.12);
  --hover:  rgba(255,255,255,.08);
  --row-hl: rgba(255,235,59,.18);

  /* Accents adoucis en sombre */
  --pos: #81C784;  /* Green 300 */
  --neg: #E57373;  /* Red 300 */
}

/* Fallback si color-mix indisponible */
@supports not (background: color-mix(in srgb, black, white)) {
  :root[data-theme="dark"]{
    --surface-1: #2e2e2e;
    --surface-header: rgb(63,81,181);
  }
}

/* Application globale */
body, .mdl-layout, .mdl-layout__content { background: var(--bg); color: var(--text-high); }

/* Header / Drawer / Footer (thème-aware) */
.mdl-layout__header { background: var(--surface-header) !important; color: var(--text-high) !important; }
.mdl-layout__drawer { background: var(--surface-1); color: var(--text-high); }
.mdl-mini-footer { background: var(--surface-1); border-top: 1px solid var(--border); color: var(--text-high); }

/* Nav */
.mdl-navigation__link { cursor: pointer; color: var(--text-high); }
.mdl-navigation__link:hover { background: var(--hover); }

/* Tables thème-aware */
.mdl-data-table { background: var(--surface-1); color: var(--text-high); }
.mdl-data-table td, 
.mdl-data-table th { border-color: var(--border); }
.mdl-data-table td { text-align: inherit;}

.mdl-data-table tbody tr.last-updated {
  background: var(--row-hl) !important;
  transition: background-color 200ms ease;
}

/* Vue smartphone (grille 4x4) : on souligne aussi la tuile */
.points-grid .pg-card.last-updated {
  background-image: linear-gradient(var(--row-hl), var(--row-hl));
  box-shadow: 0 0 0 2px var(--row-hl) inset;
} 

/* Textfields lisibles en dark */
.mdl-textfield__input { color: var(--text-high); }
.mdl-textfield__input::placeholder { color: var(--text-med); }
.mdl-textfield__label { color: var(--text-med); }
.is-focused .mdl-textfield__label { color: var(--text-high); }

/* Adoucir automatiquement les boutons score en dark (pas besoin de changer le JS) */
:root[data-theme="dark"] .mdl-color--red-500   { background-color: #E57373 !important; color:#0d0d0d !important; }
:root[data-theme="dark"] .mdl-color--green-500 { background-color: #81C784 !important; color:#0d0d0d !important; }
:root[data-theme="dark"] .mdl-color--green-600 { background-color: #66BB6A !important; color:#0d0d0d !important; }
:root[data-theme="dark"] .mdl-color--green-700 { background-color: #4CAF50 !important; color:#0d0d0d !important; }

/* === DIALOG ============================================================= */
/* Dialog Material */
.mdl-dialog { border: none; border-radius: 12px; padding: 0; width: 480px; max-width: calc(100vw - 32px); }
.mdl-dialog__title { margin: 0; padding: 16px 24px 0; font-size: 20px; }
.mdl-dialog__content { padding: 16px 24px; }
.mdl-dialog__actions { padding: 8px 16px 16px; display: flex; gap: 8px; justify-content: flex-end; }
.mdl-dialog::backdrop { background: rgba(0,0,0,.4); }
.dlg-error { display:none; font-size:12px; color:#d32f2f; margin-top:4px; }
.is-invalid + .dlg-error { display:block; }

/* === LAYOUT FULLSCREEN ================================================== */
/* Plein écran “app” */
html, body { height: 100%; }
.mdl-layout { min-height: 100vh; }
.mdl-layout__content { display: flex; flex-direction: column; }
.page-content { flex: 1; display: flex; flex-direction: column; }
.panel { flex: 1; padding: 16px; }

.mdl-button:not(.mdl-button--raised):not(.mdl-button--accent):not([class*="mdl-color--"]):not(.mdl-button--colored) {
  background: var(--surface-bgbtn);
}
/* === ANIMATIONS & VISUELS SCORE ======================================== */
/* Couleurs (déjà fournies via --pos/--neg) */

/* La valeur du score grossit, se colore, puis revient à la normale */
@keyframes flashUp {
  0%   { transform: scale(1);   color: inherit;   }
  15%  { transform: scale(1.35); color: var(--pos); }
  100% { transform: scale(1);   color: inherit;   }
}
@keyframes flashDown {
  0%   { transform: scale(1);   color: inherit;   }
  15%  { transform: scale(1.35); color: var(--neg); }
  100% { transform: scale(1);   color: inherit;   }
}

/* Classes appliquées dynamiquement */
.score.flash-up   { animation: flashUp 220ms ease-out; }
.score.flash-down { animation: flashDown 220ms ease-out; }

/* Surlignage discret de la ligne touchée, selon le sens */
@keyframes rowPulseUp   { 0% { background: color-mix(in srgb, var(--pos), transparent 72%) } 100% { background: transparent } }
@keyframes rowPulseDown { 0% { background: color-mix(in srgb, var(--neg), transparent 72%) } 100% { background: transparent } }
tr.pulse-up   { animation: rowPulseUp   1000ms ease-out; }
tr.pulse-down { animation: rowPulseDown 1000ms ease-out; }

/* ===== Animation buzzer (td) : grossit puis revient ===== */
@keyframes buzzerUp {
  0%   { transform: scale(1);   color: inherit; }
  20%  { transform: scale(2);   color: var(--pos) !important; }
  100% { transform: scale(1);   color: inherit; }
}
@keyframes buzzerDown {
  0%   { transform: scale(1);   color: inherit; }
  20%  { transform: scale(2); color: var(--neg) !important; }
  100% { transform: scale(1);   color: inherit; }
}

/* Classes à appliquer/relancer depuis le JS */
.bz-bump-up   { animation: buzzerUp   2000ms ease-out; will-change: transform, color; transform-origin: center; }
.bz-bump-down { animation: buzzerDown 2000ms ease-out; will-change: transform, color; transform-origin: center; }

/* Respecte le "réduire les animations" */
@media (prefers-reduced-motion: reduce){
  .bz-bump-up, .bz-bump-down { animation: none !important; }
}

/* Dark mode friendly */
html[data-theme="dark"] .select-line select{ border-bottom-color: var(--border); color: var(--text-high); }


/* Optionnel: évite le "saut" visuel des chiffres */
.score { font-variant-numeric: tabular-nums; }

.scorewrap { position: relative; display: inline-block; min-width: 2ch; }
.delta-pop {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, 0) scale(1);
  pointer-events: none; font-weight: 700;
  opacity: 0; white-space: nowrap;
}
.delta-pop.up   { color: var(--pos); animation: popUp 600ms ease-out; }
.delta-pop.down { color: var(--neg); animation: popDown 600ms ease-out; }

@keyframes popUp{ 
  0%{ opacity:.2; transform:translate(-50%,0)   scale(.9) }
  20%{opacity:1;  transform:translate(-50%,-6px) scale(1.15)}
  100%{opacity:0; transform:translate(-50%,-18px) scale(1)}
}
@keyframes popDown{ 
  0%{ opacity:.2; transform:translate(-50%,0)   rotate(0deg) }
  20%{opacity:1;  transform:translate(-50%,4px)  rotate(-6deg)}
  100%{opacity:0; transform:translate(-50%,12px) rotate(0deg)}
}

@media (prefers-reduced-motion: reduce){
  .delta-pop { animation: none !important; }
}

/* === ONGLET POINTS : MODE COMPACT ====================================== */
#scores { display:flex; flex-direction:column; }
#scores .controls {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:4px 8px 0;
}
#scores .panel-title { margin:0; }

/* actions serrées */
#scores .controls-actions { display:flex; gap:6px; flex-wrap:wrap; }
#scores .controls-actions .mdl-button { height:32px; line-height:32px; padding:0 10px; }

/* la table occupe tout l'espace restant */
#scores .table-wrap { flex:1; overflow:auto; padding:4px 8px 8px; }

/* densifier la data table */
#scores .mdl-data-table { font-size:13px; }
#scores .mdl-data-table th,
#scores .mdl-data-table td { padding:2px 5px; height:30px; }
#scores .mdl-data-table tbody tr { height: 32px; }
/* En-tête sticky thème-aware */
#scores .mdl-data-table thead th { position:sticky; top:0; background:var(--surface-1); z-index:1; color: var(--text-med); }
#scores td.cell-center, #scores th.cell-center { text-align: center; }

/* score plus compact */
#scores .score-num { font-size:18px; font-weight:600; line-height:1; }

/* petits boutons */
#scores .mini-btn {
  min-width:64px; height:30px; line-height:30px;
  padding:0 8px;
}
#scores .mini-icon { font-size:18px; vertical-align:middle; }

/* input Δ compact */
#scores .delta-input { width:64px; height:30px; line-height:30px; padding: 0; }

#scores .buzzer {
  font-weight: bold;
  font-size: 18px;
}

#scores .score--neg {
    min-width: 52px;
    height: 24px;
    line-height: 24px;
    padding: 0 6px;
}

/* réduire les marges internes de la page pour gagner en hauteur */
@media (min-width: 1024px){
  #scores.panel { padding:8px; }
}

/* === SMARTPHONE : bascule Table -> Grille 4×4 ========================== */
.points-grid { display: none; }
@media (max-width: 600px) {
  #scores .table-wrap { display: none !important; }   /* cache la table */
  .points-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; }
  /* Réduire l'entête de section pour gagner en hauteur */
  #scores .controls { padding: 2px 6px 0; }
  #scores .controls .mdl-button { height: 30px; line-height: 30px; padding: 0 8px; }
}

/* ----- Tuiles 4×4 ----- */
.pg-card {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  min-height: 90px; padding: 8px 4px; border-radius: 8px;
  background: var(--surface-1); border: 1px solid var(--border);
}
.pg-buzzer { font-size: 14px; opacity: .65; }
.pg-name {
  font-size: 12px; font-weight: 600; text-align: center; width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-score { font-size: 20px; font-weight: 800; line-height: 1; padding-bottom: 5px; }
.pg-actions { display: flex; gap: 4px; }
.pg-btn {
  min-width: 0 !important; width: 34px !important; height: 32px !important; line-height: 32px !important; padding: 0 !important;
}

/* Place le dialog en haut quand la classe .at-top est présente */
#appDialog.at-top[open]{
  position: fixed;                    /* viewport */
  inset: auto !important;             /* neutralise certains UA styles */
  top: var(--dlg-top, 16px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  max-height: calc(100vh - var(--dlg-top, 16px) - 16px) !important;
  overflow: hidden;                    /* évite le débordement global */
}

/* Scroll interne si le contenu est long */
#appDialog.at-top[open] .mdl-dialog__content{
  overflow: auto;
  max-height: calc(100vh - 160px);
}


/* ===== DARK FIXES ===== */

/* 1) TABLES : header lisible + hover non-blanc */
html[data-theme="dark"] .mdl-data-table thead th {
  background: var(--surface-1) !important;
  color: var(--text-med) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .mdl-data-table tbody td,
html[data-theme="dark"] .mdl-data-table tbody th {
  border-color: var(--border) !important;
  color: var(--text-high) !important;
}
html[data-theme="dark"] .mdl-data-table tbody tr:hover {
  background: var(--hover); /* plus de hover blanc */
}

/* 2) BOUTONS : éviter “fond noir / texte noir” en dark */
html[data-theme="dark"] .mdl-button { 
  color: var(--text-high) !important; 
}
html[data-theme="dark"] .mdl-button .material-icons {
  color: inherit !important;
}
html[data-theme="dark"] .mdl-button--accent { 
  background-color: #E57373 !important;
}

/* Boutons RAISED sans couleur explicite (par ex. “Exporter”, “Importer”, etc.) */
html[data-theme="dark"] .mdl-button.mdl-button--raised:not(.mdl-button--colored):not([class*="mdl-color--"]) {
  background: color-mix(in srgb, var(--surface-0), white 9%) !important; /* petite élévation Material */
  /* fallback si color-mix indispo */
  background: var(--surface-bgbtn) !important;
}

/* Boutons plats : fond transparent + hover doux */
html[data-theme="dark"] .mdl-button:not(.mdl-button--raised):not(.mdl-button--accent):not([class*="mdl-color--"]):not(.mdl-button--colored) {
  background: var(--surface-bgbtn) !important;
}
html[data-theme="dark"] .mdl-button:hover {
  background: var(--hover) !important;
}

/* Boutons colorés (+/-) : déjà éclaircis plus haut, on garde la lisibilité */
html[data-theme="dark"] .mdl-color--red-500   { background-color: #E57373 !important; color:#0d0d0d !important; }
html[data-theme="dark"] .mdl-color--green-500 { background-color: #81C784 !important; color:#0d0d0d !important; }
html[data-theme="dark"] .mdl-color--green-600 { background-color: #4CAF50 !important; color:#0d0d0d !important; }

/* Boutons “--colored” (indigo/pink MDL) : forcer le texte lisible */
html[data-theme="dark"] .mdl-button--colored { color: #fff !important; }

/* Ripple MDL plus visible en dark */
html[data-theme="dark"] .mdl-ripple { background: rgba(255,255,255,.3) !important; }

/* 3) (bonus) Tuiles mobile et zones collantes */
html[data-theme="dark"] .pg-card { 
  background: var(--surface-1) !important; 
  border-color: var(--border) !important; 
}
/* === DARK MODE — <dialog> (MDL + polyfill) ============================ */
html[data-theme="dark"] .mdl-dialog {
  background: var(--surface-1) !important;
  color: var(--text-high) !important;
}

html[data-theme="dark"] .mdl-dialog__title {
  color: var(--text-high) !important;
}

html[data-theme="dark"] .mdl-dialog__content {
  color: var(--text-high) !important;
}

html[data-theme="dark"] .mdl-dialog__actions {
  background: var(--surface-1) !important;
  border-top: 1px solid var(--border) !important;
}

/* Backdrop natif et polyfill */
html[data-theme="dark"] .mdl-dialog::backdrop {
  background: rgba(0,0,0,.6) !important;
}
html[data-theme="dark"] .dialog-polyfill-backdrop,
html[data-theme="dark"] .backdrop {            /* certains builds nomment la classe .backdrop */
  background: rgba(0,0,0,.6) !important;
}

/* Boutons dans le dialog */
html[data-theme="dark"] .mdl-dialog .mdl-button {
  color: var(--text-high) !important;
}
html[data-theme="dark"] .mdl-dialog .mdl-button:hover {
  background: var(--hover) !important;
}
/* Raised neutres (sans mdl-color--*, ni --colored) */
html[data-theme="dark"] .mdl-dialog .mdl-button--raised:not([class*="mdl-color--"]):not(.mdl-button--colored) {
  background: color-mix(in srgb, var(--surface-0), white 14%) !important;
  color: var(--text-high) !important;
  border: 1px solid var(--border) !important;
}

/* Textfields dans le dialog */
html[data-theme="dark"] .mdl-dialog .mdl-textfield__input {
  color: var(--text-high) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .mdl-dialog .mdl-textfield__input::placeholder {
  color: var(--text-med) !important;
}
html[data-theme="dark"] .mdl-dialog .mdl-textfield__label {
  color: var(--text-med) !important;
}
html[data-theme="dark"] .mdl-dialog .is-focused .mdl-textfield__label {
  color: var(--text-high) !important;
}

/* Message d'erreur du prompt */
html[data-theme="dark"] .mdl-dialog .dlg-error {
  color: #EF9A9A !important; /* Red 200-300, lisible sur fond sombre */
}

.mdl-textfield__input {
    border-bottom: 1px solid var(--text-high);
}