/*!
 * DinoLoop — dino-polish.css
 * Couche de finition visuelle. À charger APRÈS gamma001.css :
 *   <link rel="stylesheet" href="dino-polish.css">
 * N'ajoute aucune logique : on peut la retirer sans rien casser.
 *
 * Direction : une machine à rythmes de nuit. Fond bleu-noir profond, surfaces mates,
 * et une seule chose qui "s'allume" : les pas actifs (vert LED) et la mesure sélectionnée (jaune du logo).
 */

:root {
  color-scheme: dark;                       /* barres de défilement, select, inputs natifs en sombre */
  --dl-bg: #0c0e12;
  --dl-surface: #171a20;
  --dl-surface-2: #1d2129;
  --dl-inset: #12151a;
  --dl-line: rgba(255, 255, 255, .07);
  --dl-line-strong: rgba(255, 255, 255, .15);
  --dl-text: #e8eaee;
  --dl-muted: #8b93a1;
  --dl-green: #3ddc4f;
  --dl-green-deep: #25b236;
  --dl-yellow: #ffe14d;
  --dl-radius: 14px;
}

/* ---------- Page ---------- */
body {
  background: radial-gradient(900px 420px at 50% -90px, #1a2030 0%, transparent 72%) no-repeat fixed, #0c0e12 !important;
  color: var(--dl-text);
  font-family: Inter, "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
#bpm, #mode { font-variant-numeric: tabular-nums; }

/* ---------- Panneaux (réglages, transport, mesures, samples, footer) ---------- */
.controls-section,
.json-controls,
.samples-section,
#barNav {
  background: linear-gradient(180deg, #1b1f27 0%, #161920 100%) !important;
  border: 1px solid var(--dl-line) !important;
  border-radius: var(--dl-radius) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

/* Champs */
.controls select,
.controls-section select,
.controls input[type="number"],
.controls-section input[type="number"] {
  background: var(--dl-inset);
  border: 1px solid var(--dl-line-strong);
  border-radius: 10px;
  color: var(--dl-text);
}

/* Boutons : retour tactile sans changer leurs couleurs d'origine */
.json-controls button,
.controls-section button {
  transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
}
.json-controls button:hover,
.controls-section button:hover { filter: brightness(1.14); }
.json-controls button:active,
.controls-section button:active { transform: translateY(1px); }

/* Focus clavier visible partout */
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--dl-green);
  outline-offset: 2px;
}

/* ---------- Grille : les pas ---------- */
#grid .step {
  background: #1a1d24;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: background-color .08s ease;
}
#grid .step.alt-step { background: #2b303a; }                         /* temps forts (1, 5, 9, 13) */
#grid .step.bar-odd { background: #20242d; }                          /* mesures impaires */
#grid .step.bar-odd.alt-step { background: #353b48; }

/* Pas actif : LED verte avec léger halo */
#grid .step.active,
#grid .step.alt-step.active,
#grid .step.bar-odd.active,
#grid .step.bar-odd.alt-step.active {
  background: linear-gradient(180deg, #55e865 0%, var(--dl-green-deep) 100%);
  box-shadow: 0 0 10px rgba(61, 220, 79, .42), inset 0 1px 0 rgba(255, 255, 255, .38);
}
#grid .step.sel { box-shadow: inset 0 0 0 9px rgba(77, 163, 255, .30); }

/* Règle des mesures */
.grid-ruler .ruler-bar {
  border-left: 1px solid var(--dl-line-strong);
  color: var(--dl-muted);
  font-weight: 600;
  letter-spacing: .02em;
}

/* Noms de pistes : jaune d'origine, sans soulignement */
.sample-name {
  color: #ffff00;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
}
.sample-name:hover { color: #fff; }

/* ---------- Barre des mesures ---------- */
#barNav { padding: 10px 12px; gap: 10px; }
#barNav .bn-tabs .bn-tab {
  background: var(--dl-inset);
  border-radius: 8px;
  border-color: var(--dl-line-strong);
  transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
}
#barNav .bn-tabs .bn-tab:hover { transform: translateY(-1px); }
#barNav .bn-tabs .bn-tab.inloop {
  border-top-color: var(--dl-green);
  box-shadow: 0 -2px 10px rgba(61, 220, 79, .16);
}
#barNav .bn-tabs .bn-tab.sel {                                         /* sélection = jaune du logo */
  border-color: var(--dl-yellow);
  border-top-color: var(--dl-yellow);
  background: #262a34;
  color: #fff;
}
#barNav .bn-tabs .bn-tab.sel.inloop { border-top-color: var(--dl-green); }
#barNav .bn-tabs .bn-tab.playing { background: #23402a; }
#barNav .bn-tools button,
#barNav .bn-add { border-radius: 9px; }

/* ---------- Défilement sombre (fini les barres blanches) ---------- */
#grid,
#category-nav,
#sampleListContainer,
#piano-roll-grid,
#piano-roll-modal > div,
#barNav .bn-tabs {
  scrollbar-width: thin;
  scrollbar-color: #3a4150 #12151a;
}
#grid::-webkit-scrollbar,
#category-nav::-webkit-scrollbar,
#sampleListContainer::-webkit-scrollbar,
#piano-roll-grid::-webkit-scrollbar,
#piano-roll-modal > div::-webkit-scrollbar,
#barNav .bn-tabs::-webkit-scrollbar { height: 10px; width: 10px; }
#grid::-webkit-scrollbar-track,
#category-nav::-webkit-scrollbar-track,
#sampleListContainer::-webkit-scrollbar-track,
#piano-roll-grid::-webkit-scrollbar-track,
#piano-roll-modal > div::-webkit-scrollbar-track,
#barNav .bn-tabs::-webkit-scrollbar-track { background: #12151a; border-radius: 8px; }
#grid::-webkit-scrollbar-thumb,
#category-nav::-webkit-scrollbar-thumb,
#sampleListContainer::-webkit-scrollbar-thumb,
#piano-roll-grid::-webkit-scrollbar-thumb,
#piano-roll-modal > div::-webkit-scrollbar-thumb,
#barNav .bn-tabs::-webkit-scrollbar-thumb { background: #3a4150; border-radius: 8px; border: 2px solid #12151a; }
#grid::-webkit-scrollbar-thumb:hover,
#category-nav::-webkit-scrollbar-thumb:hover,
#sampleListContainer::-webkit-scrollbar-thumb:hover { background: #505869; }

/* ---------- Choix de sample (modal) ---------- */
#sampleModal { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#sampleModal .modal-content {
  background: linear-gradient(180deg, #1d2129 0%, #151820 100%);
  border: 1px solid var(--dl-line-strong);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
}
#category-nav { padding-bottom: 8px; }
#category-nav .nav-btn { transition: filter .12s ease, transform .12s ease; }
#category-nav .nav-btn:hover { filter: brightness(1.15); }
#sampleListContainer .sample-btn {
  background: var(--dl-inset);
  border: 1px solid var(--dl-line);
  border-radius: 10px;
  transition: border-color .12s ease, background-color .12s ease;
}
#sampleListContainer .sample-btn:hover {
  border-color: rgba(61, 220, 79, .55);
  background: #16221b;
}
#sampleListContainer .play-icon { border-radius: 8px; }
#sampleModal .l_desc {
  background: var(--dl-inset);
  border: 1px solid var(--dl-line);
  border-radius: 10px;
}

/* ---------- Piano roll ---------- */
#piano-roll-modal > div {
  background: linear-gradient(180deg, #1d2129 0%, #151820 100%) !important;
  border: 1px solid var(--dl-line-strong);
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* =====================================================================
   MOBILE / PETIT ÉCRAN (≤ 700px)
   ===================================================================== */

/* Menu "⋯" par piste : créé par dino-mobile.js. Caché sur grand écran,
   et .dl-actions est transparent (display:contents) donc rien ne change. */
.sample-label .dl-more { display: none; }
.sample-label .dl-actions { display: contents; }

@media (max-width: 700px) {

  /* 1. LOGIN : icône seule (le texte est masqué, quel que soit son contenu) */
  #openAuthModalBtn { font-size: 0 !important; padding: 6px 10px !important; min-width: 0 !important; }
  #openAuthModalBtn::before { content: "\1F464"; font-size: 1.1rem; line-height: 1; }

  /* 2. Barre des mesures : on retire copier / coller / annuler / raccourcis
        pour laisser la place aux mesures */
  #barNav #bn-copy,
  #barNav #bn-paste,
  #barNav #bn-undo,
  #barNav #shortcutsBtn { display: none !important; }

  /* 3. Pistes : label étroit = nom + une seule icône "⋯" */
  .sample-label { width: 80px !important; }
  .sample-name  { width: 46px !important; }

  .sample-label .dl-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 26px;
    height: 26px;
    margin-left: 4px;
    padding: 0;
    vertical-align: middle;
    background: var(--dl-inset);
    border: 1px solid var(--dl-line-strong);
    border-radius: 8px;
    color: var(--dl-muted);
    cursor: pointer;
  }
  .sample-label .dl-more svg { display: block; }
  .sample-row.dl-open .dl-more { border-color: var(--dl-yellow); color: #fff; }
  /* petit point vert = un piano roll contient des notes */
  .sample-row.piano-roll-active .dl-more::after {
    content: "";
    position: absolute;
    top: -3px; right: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--dl-green);
    box-shadow: 0 0 6px rgba(61, 220, 79, .7);
  }

  /* Les 3 actions : cachées, puis déployées en bulle à droite du nom */
  .sample-label .dl-actions { display: none; }
  .sample-row.dl-open .sample-label { z-index: 40; }
  .sample-row.dl-open .dl-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    position: absolute;
    left: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 6px 3px 0;
    background: #1b1f27;
    border: 1px solid var(--dl-line-strong);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
    z-index: 50;
  }
  .sample-row.dl-open .dl-actions .btn-icon,
  .sample-row.dl-open .dl-actions .piano-roll-btn { margin-left: 4px; }

  /* 4. Piano roll : plein écran visible + croix toujours atteignable */
  #piano-roll-modal {
    height: 100vh !important;
    height: 100dvh !important;          /* tient compte des barres du navigateur mobile */
    align-items: stretch !important;
  }
  #piano-roll-modal > div {
    width: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    padding-right: 56px;                /* ne passe pas sous la croix */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  #piano-roll-modal #title_piano_info { display: inline-block; max-width: calc(100vw - 90px); }

  /* La croix reste collée en haut à droite de l'écran, même en défilant */
  #piano-roll-modal #close_piano1 {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: 8px !important;
    z-index: 1100;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    max-width: none !important;
    font-size: 18px !important;
    background: rgba(23, 26, 32, .92) !important;
    border: 1px solid var(--dl-line-strong) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5) !important;
  }
}


/* =====================================================================
   RANGÉE "AJOUTER UN SAMPLE" + SAUVEGARDES LOCALES
   ===================================================================== */

/* Boutons raccourcis sur petit écran : "+ sample" et "Upload" */
@media (max-width: 700px) {
  #dlAddRow { gap: 6px; padding: 6px 8px; }
  #dlAddRow button { padding: 6px 10px; }
}

/* Sauvegardes : conteneur en display:flex (l'inline-flex posé par gamma001.js est surchargé),
   il prend la place restante de la rangée et ses puces défilent horizontalement */
#dlAddRow #localSavesContainer {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 120px;
  align-items: center;
  margin-left: 0;
}
#dlAddRow #localSavesContainer .dl-chips {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;                     /* barre visible sur grand écran */
  scrollbar-color: #3a4150 transparent;
  padding-bottom: 4px;
}
#dlAddRow #localSavesContainer .dl-chips::-webkit-scrollbar { display: block; height: 8px; }
#dlAddRow #localSavesContainer .dl-chips::-webkit-scrollbar-track { background: transparent; }
#dlAddRow #localSavesContainer .dl-chips::-webkit-scrollbar-thumb { background: #3a4150; border-radius: 8px; }
@media (max-width: 700px) {
  /* au doigt : défilement sans barre */
  #dlAddRow #localSavesContainer .dl-chips { scrollbar-width: none; padding-bottom: 0; }
  #dlAddRow #localSavesContainer .dl-chips::-webkit-scrollbar { display: none; }
}


/* =====================================================================
   MOBILE : textes des boutons (CSS seul, indépendant de bar-nav.js)
   + mesures (bn-tabs) sur toute la largeur disponible
   ===================================================================== */
/* Samples : toutes résolutions */
/* Samples : "🔥 SAMPLES" + deux boutons icône seule (+ et upload), sans texte */
#dlAddRow .dl-addtxt { display: none !important; }
#dlAddRow::before {
  content: "\1F525  SAMPLES";
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #9aa0a8;
}
html #dlAddRow #addSampleBtn,
html #dlAddRow #uploadSampleBtn {
  padding: 4px 9px;
  gap: 0;
  background: #1a1c21;
  border: 1px solid #2a2c32;
  border-radius: 6px;
  color: #ddd;
}
html #dlAddRow #addSampleBtn:hover,
html #dlAddRow #uploadSampleBtn:hover { background: #1a1c21; border-color: #777; }
#dlAddRow #addSampleBtn svg,
#dlAddRow #uploadSampleBtn svg { width: 16px; height: 16px; }

@media (max-width: 700px) {
  /* Les mesures prennent tout l'espace restant ; − et + restent à droite */
  html #barNav.dl-bn-wrap > .bn-tabs {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* =====================================================================
   SAUVEGARDES LOCALES : message quand il n'y en a aucune
   (le <span> "💾 no saves" est créé par gamma001.js, sans classe ;
    on remplace son texte en CSS, sans toucher au JS)
   ===================================================================== */
#dlAddRow #localSavesContainer > span:not(.dl-chips) {
  font-size: 0 !important;                 /* masque l'ancien texte */
  padding: 0 4px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#dlAddRow #localSavesContainer > span:not(.dl-chips)::after {
  content: "No saves yet";                 /* mobile : court et petit */
  font-size: .7rem;
  color: #8b93a1;
}
@media (min-width: 701px) {
  #dlAddRow #localSavesContainer > span:not(.dl-chips)::after {
    content: "No saves yet \2014  click the disk to save this loop";   /* desktop : plus grand et plus explicite */
    font-size: .85rem;
  }
}