/* ===== Variables + base ===== */
:root{
  --bg:#f6f7fb; --card:#fff; --ink:#111; --muted:#667085;
  --line:#e6e8ef; --brand:#111; --brand-ink:#fff;
  --chip:#fafbff;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(16,24,40,.06);
  --radius: 16px;
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0}
a{color:inherit;text-underline-offset:2px}

/* ===== Primitives réutilisables ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .body{padding:22px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:12px;border:1px solid #d5d7de;
  background:#fff;cursor:pointer;font-weight:600;text-decoration:none
}
.btn:hover{background:#f2f4f8}
.btn.primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.btn.primary:hover{filter:brightness(.96)}

.input{
  width:100%;height:44px;padding:10px 12px;border:1px solid #d5d7de;border-radius:12px;background:#fff;
  font-size:15px;line-height:1.3
}
.input:focus{outline:none;border-color:#aab4c8;box-shadow:0 0 0 3px rgba(17,17,17,.08)}

.muted{color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--chip);font-weight:600}

.flash{border:1px solid #dfe3f0;background:#f7f9ff;color:#334;padding:10px 12px;border-radius:10px}
.flash.ok{background:#e9fbe9;border-color:#b9e5b9;color:#0f7a0f}
.flash.danger{background:#ffe9e9;border-color:#e79a9a;color:#b00020}

/* ===== Layouts communs ===== */
.signup-wrap{max-width:1100px;margin:40px auto;padding:0 16px}
.signup-wrap h1{margin:0 0 12px;font-size:28px}

/* ===== Topbar client (commune) ===== */
.topbar{background:transparent;margin:8px 0}
.topbar .inner{
  max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:0 16px
}
.topbar .left{justify-self:start}
.topbar .center{justify-self:center}
.topbar .right{justify-self:end;display:flex;gap:8px;flex-wrap:wrap}

/* ===== Tables (screens, media…) ===== */
table{width:100%;border-collapse:collapse;margin-top:10px}
thead th{background:#fafbff;text-align:left}
th,td{padding:10px;border-top:1px solid var(--line);vertical-align:middle}
.pair{
  font-family:ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--line);
  background:#fafbff;padding:4px 8px;border-radius:8px
}

/* Indicateurs statut (pings) */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:6px}
.dot.g{background:#22c55e}.dot.y{background:#f59e0b}.dot.r{background:#ef4444}

/* ===== Login/signup (hérité) ===== */
.wrapper{max-width:1100px;margin:40px auto;padding:0 16px;display:grid;grid-template-columns:1.35fr .8fr;gap:24px}
@media (max-width:980px){.wrapper{grid-template-columns:1fr}}
.login h2{margin:0 0 12px}
.auth-card .row{display:flex;flex-direction:column;gap:6px}
.auth-card .row + .row{margin-top:10px}
.auth-card .links{max-width:420px;display:flex;gap:16px;margin-top:10px}
.auth-card input[type="email"],
.auth-card input[type="password"]{appearance:none;width:100%;max-width:420px;height:44px;padding:10px 12px;border:1px solid #d5d7de;border-radius:12px;background:#fff;font-size:15px}
.auth-card .btn.primary{width:100%;max-width:420px;height:46px;border:1px solid var(--brand);border-radius:12px}

/* ===== Forgot layout (optionnel) ===== */
.forgot-wrap{max-width:520px;margin:9vh auto}

/* Fix overflow et hr */
.card { overflow: hidden; }
.card hr, .auth-card hr { margin: 16px 0; border: none; border-top: 1px solid var(--line); }

/* Harmonisation index */
.card.pad { padding: 22px; }

/* Bloc quota plus compact */
.card.compact { margin-bottom:10px; border-color:#ddd; box-shadow:none; }
.card.compact .body { padding:10px 14px; font-size:14px; line-height:1.3; }
.card.compact h3 { margin:0 0 4px; font-size:15px; }

/* ===== Grille médias ===== */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}

.card.video .thumb{background:#111}
.thumb{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#f1f3f9;border-bottom:1px solid #eef1f6}
.thumb-wrap{position:relative}
.badge{position:absolute;right:8px;bottom:8px;font-size:11px;line-height:1;padding:6px 7px;border-radius:999px;background:#111;color:#fff;opacity:.85}
.thumb.placeholder{width:100%;aspect-ratio:16/9;border-radius:10px;background:linear-gradient(180deg,#1a1a1a,#000);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600}
.thumb.placeholder::after{content:'Préparation…';opacity:.7;font-size:12px}


/* ===== Client — Playlists UI (patch) ===== */
:root {
  --ui-border:#e6e8ef;
  --ui-border-soft:#eef1f6;
  --ui-chip:#fafbff;
  --ui-text:#111;
}

/* Grille principale (colonnes) */
.cols{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:18px;
}
@media (max-width: 980px){
  .cols{ grid-template-columns:1fr; }
}

/* Cartes */
.card{
  border:1px solid var(--ui-border);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.card .head{
  padding:12px 14px;
  border-bottom:1px solid var(--ui-border-soft);
  font-weight:600;
}
.card .body{
  padding:14px;
}

/* Inputs & selects */
.input,
select.input,
textarea.input{
  padding:10px 12px;
  border:1px solid #d5d7de;
  border-radius:12px;
  background:#fff;
  color:var(--ui-text);
  height:auto; /* évite le min-height par défaut sur certains navigateurs */
}

/* Petites pastilles (pos, durée, etc.) */
.pill{
  display:inline-block;
  font-size:12px;
  padding:4px 8px;
  border:1px solid #e1e3ea;
  border-radius:999px;
  background:var(--ui-chip);
}

/* Boutons */
.btn{
  padding:8px 14px;
  border-radius:12px;
}
.btn.primary{
  background:#111;
  color:#fff;
  border-color:#111;
}
.btn.primary:hover{ filter:brightness(.95); }
.btn.danger{
  background:#fff;
  color:#e24848;
  border-color:#e24848;
}
.btn.danger:hover{ background:#fff1f1; }

/* Liste de playlists (colonne gauche) */
.pl-item{
  border:1px solid var(--ui-border);
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:10px;
  background:#fff;
}
.pl-item.active{ border-color:#111; }
.pl-row{
  display:flex; gap:8px; align-items:center; justify-content:space-between;
}
.pl-title{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.pl-meta{ font-size:12px; opacity:.75; margin-left:8px; white-space:nowrap; }
.pl-actions{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }

/* Items de playlist (colonne droite) */
.items .it{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--ui-border);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:10px;
  background:#fff;
}
.items .left{ display:flex; align-items:center; gap:10px; min-width:0; }
.drag{ cursor:grab; }
.name{ min-width:0; }
.name b{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:560px; }
.name .sub{ font-size:12px; opacity:.7; }

/* Petit adoucissement des “cards” imbriquées (bloc Ajouter) */
.add-card .row + .row { margin-top:10px; }


/* --- client dashboard --- */
.client-dashboard .signup-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;        /* mobile */
}
@media (min-width: 900px) {
  .client-dashboard .signup-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes desktop */
  }
}

/* --- client dashboard extras --- */
.client-dashboard .meter {
  height: 10px; border-radius: 999px;
  background: #eef1f6; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.client-dashboard .meter > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.75));
  border-radius: 999px;
  transition: width .4s ease;
}
.client-dashboard .meter-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; margin:.5rem 0 .25rem;
}
.client-dashboard .meter-label { font-size:.9rem; color:#667085 }


/* Tableaux et badges cohérents client */
.table th, .table td { vertical-align: middle; }
.badge { display:inline-block; padding:.2rem .6rem; border:1px solid #e6e8ef; border-radius:999px; background:#f6f7fb; }


/* SA entitlements grouped like client dashboard */
.sa-ent {
  display: grid;
  gap: 12px;
}
@media (min-width: 1100px) {
  .sa-ent {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
.sa-ent-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 1300px) {
  .sa-ent-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}
.sa-ent-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid #e6e8ef; border-radius: 10px;
  background: #fafbff;
}
.sa-ent-row input[type="checkbox"] { transform: translateY(-1px); }

/* Page client layouts : largeur confortable */
.signup-wrap.layout-wide { max-width: 1120px; }

/* Petits plus de lisibilité */
.table th, .table td { vertical-align: middle; }