/* ============================================================================
   RSKTV Player Pro — Mes playlists v3 (04/10/2026), modèle TiviMate
   « Une liste calme : on lit d'un coup d'œil laquelle joue. »

   Une ligne par playlist : repère (coche verte = en cours, sinon monogramme
   neutre), nom, détail (type · nombre de médias), état, chevron du menu.
   « Nouvelle playlist » est la dernière ligne, même gabarit.

   Règles TV tenues : un seul aplat rouge = la ligne focalisée ; « en cours »
   se dit en VERT et en texte, jamais en fond ; textes >= 22 px ; ni ombre
   floue ni scale() ; flexbox préfixé, pas de gap ni de grid (Chromium 56) ;
   couleurs = jetons de thème (7 thèmes, clair compris).
   Chargé APRÈS reglages-v3.css.
   ========================================================================== */

#pl-list-container .pl-card.plv3 {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  position: relative;
  width: 100%; min-height: 112px;
  margin: 0 0 10px 0 !important; padding: 0 32px 0 24px;
  border: 0; border-radius: 18px;
  -webkit-transform: none !important; transform: none !important;   /* un scale() générique s'appliquait au focus */
  -webkit-transition: none; transition: none;
  background: var(--rsk-surface);
  -webkit-box-shadow: none; box-shadow: none;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  outline: none; cursor: pointer; overflow: hidden;
}

/* Repère : monogramme neutre, ou coche verte pour la playlist en cours. */
#pl-list-container .plv3-lead {
  width: 64px; height: 64px; min-width: 64px;
  margin-right: 28px;
  border-radius: 16px;
  background: var(--rsk-surface-2, var(--rsk-bg));
  color: var(--rsk-text-dim);
  font-size: 24px; font-weight: 800; letter-spacing: 0.04em;
  line-height: 64px; text-align: center;
}
#pl-list-container .pl-card-active .plv3-lead {
  background: var(--rsk-green);
  color: #fff;
}
#pl-list-container .plv3-lead svg { display: block; margin: 15px auto 0 auto; }

#pl-list-container .plv3-body {
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  min-width: 0;
}
#pl-list-container .plv3 .pl-card-name {
  font-size: 32px; font-weight: 700; line-height: 1.2;
  color: var(--rsk-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#pl-list-container .plv3-meta {
  margin-top: 4px;
  font-size: 22px; font-weight: 500; line-height: 1.3;
  color: var(--rsk-text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* États à droite : du texte, pas des pastilles. */
#pl-list-container .plv3-tag {
  margin-left: 28px;
  font-size: 22px; font-weight: 600;
  color: var(--rsk-text-dim);
  white-space: nowrap;
}
#pl-list-container .plv3-tag-on {
  font-weight: 700;
  color: var(--rsk-green);
}
#pl-list-container .plv3-chev {
  margin-left: 28px;
  font-size: 44px; line-height: 1;
  color: var(--rsk-text-mute);
}

/* Focus : le seul aplat rouge de l'écran, tout le texte en blanc. */
#pl-list-container .pl-card.plv3.focused,
#pl-list-container .pl-card.plv3:focus {
  background: var(--rsk-accent);
  border: 0;
  -webkit-box-shadow: none; box-shadow: none;
}
#pl-list-container .pl-card.plv3.focused .pl-card-name,
#pl-list-container .pl-card.plv3.focused .plv3-tag,
#pl-list-container .pl-card.plv3.focused .plv3-chev,
#pl-list-container .pl-card.plv3:focus .pl-card-name,
#pl-list-container .pl-card.plv3:focus .plv3-tag,
#pl-list-container .pl-card.plv3:focus .plv3-chev { color: #fff; }
#pl-list-container .pl-card.plv3.focused .plv3-meta,
#pl-list-container .pl-card.plv3:focus .plv3-meta { color: rgba(255,255,255,0.86); }
#pl-list-container .pl-card.plv3.focused .plv3-lead,
#pl-list-container .pl-card.plv3:focus .plv3-lead {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* « Nouvelle playlist » et « Afficher les masquées » : lignes de la liste. */
/* Pas de display forcé : #pl-hidden-row est masqué en style en ligne tant
   qu'aucune playlist n'est masquée. */
#section-settings #spanel-playlists .sett-account-actions { padding: 0 4px !important; margin: 0 !important; }   /* aligné sur #pl-list-container */
#section-settings #spanel-playlists .sett-account-btn {
  display: -webkit-box !important; display: -webkit-flex !important; display: flex !important;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: start !important; -webkit-justify-content: flex-start !important; justify-content: flex-start !important;
  width: 100% !important; min-height: 96px !important;
  -webkit-transform: none !important; transform: none !important;
  margin: 0 0 10px 0 !important; padding: 0 32px 0 24px !important;
  border-radius: 18px !important;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
#section-settings #spanel-playlists .sett-account-btn-ico {
  display: block !important;
  width: 64px; height: 64px; min-width: 64px;
  margin-right: 28px;
  border-radius: 16px;
  border: 2px dashed var(--rsk-border-2, var(--rsk-text-mute));
  -webkit-box-sizing: border-box; box-sizing: border-box;
  color: var(--rsk-text-dim);
  font-size: 34px; font-weight: 400; line-height: 60px; text-align: center;
}
#section-settings #spanel-playlists .sett-account-btn:focus .sett-account-btn-ico,
#section-settings #spanel-playlists .sett-account-btn.is-focused .sett-account-btn-ico,
#section-settings #spanel-playlists .sett-account-btn.focused .sett-account-btn-ico {
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}
#section-settings #spanel-playlists .sett-account-btn-lbl { font-size: 28px !important; letter-spacing: 0 !important; }
