/* Portail des licences DXM Playout (nuage) : même allure sombre que le
   portail local (crates/playout-licence/src/bin/dxm-licences/portail.html). */
:root {
  color-scheme: dark;
  --fond: #0b1220; --panneau: #111a2c; --ligne: #22304a; --texte: #e6ecf5; --doux: #8fa0bb;
  --accent: #3b82f6; --vert: #22c55e; --jaune: #eab308; --orange: #f59e0b; --rouge: #ef4444; --pourpre: #c084fc; --bleu: #60a5fa; --cyan: #22d3ee;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
header { padding: 18px 24px; border-bottom: 1px solid var(--ligne); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
header h1 { margin: 0; font-size: 18px; letter-spacing: .02em; }
header .note { color: var(--doux); font-size: 12px; }
header .droite { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
main { max-width: 1320px; margin: 0 auto; padding: 20px 16px 40px; display: grid; gap: 18px; }
.interieur { display: grid; gap: 18px; min-width: 0; }
section { min-width: 0; background: var(--panneau); border: 1px solid var(--ligne); border-radius: 10px; padding: 16px 18px; }
section h2 { margin: 0 0 12px; font-size: 15px; }
.titre-ligne { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.titre-ligne h2 { margin: 0; }
.titre-ligne .aide { margin: 0; }
.a-droite { margin-left: auto; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px 16px; }
.pleine { grid-column: 1 / -1; }
label { display: block; font-size: 12px; color: var(--doux); margin-bottom: 4px; }
input, select, textarea { width: 100%; background: #0a1322; color: var(--texte); border: 1px solid var(--ligne); border-radius: 6px; padding: 8px 10px; font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input[type="date"] { max-width: 220px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
.raccourcis { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
button { background: #1b2740; color: var(--texte); border: 1px solid var(--ligne); border-radius: 6px; padding: 7px 12px; font: inherit; cursor: pointer; }
button:hover { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
button.principal { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.danger { border-color: rgba(239,68,68,.6); color: #fecaca; }
button.danger:hover { border-color: var(--rouge); }
button.petit { padding: 3px 8px; font-size: 12px; }
button.choisi { border-color: var(--accent); background: rgba(59,130,246,.2); }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.msg { font-size: 13px; }
.msg.erreur { color: var(--rouge); }
.msg.ok { color: var(--vert); }
.aide { color: var(--doux); font-size: 12px; margin-top: 8px; }
#licence-texte { width: 100%; min-height: 70px; resize: vertical; padding: 8px; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.outils { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.outils input { max-width: 280px; }
.outils select { width: auto; }
.tableau { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--ligne); white-space: nowrap; vertical-align: top; }
th { color: var(--doux); font-weight: 600; font-size: 12px; }
td.client, td.notes { white-space: normal; min-width: 140px; }
td.notes { max-width: 320px; color: var(--doux); }
td.nombre { text-align: right; }
td.details { white-space: normal; max-width: 420px; color: var(--doux); font-size: 12px; }
.sous { display: block; color: var(--doux); font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: normal; }
.sous.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
a.lien { color: var(--texte); text-decoration: underline dotted var(--doux); cursor: pointer; }
.etat { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.etat.vert { background: rgba(34,197,94,.15); color: var(--vert); }
.etat.jaune { background: rgba(234,179,8,.15); color: var(--jaune); }
.etat.orange { background: rgba(245,158,11,.15); color: var(--orange); }
.etat.rouge { background: rgba(239,68,68,.15); color: var(--rouge); }
.etat.pourpre { background: rgba(192,132,252,.15); color: var(--pourpre); }
.etat.bleu { background: rgba(96,165,250,.15); color: var(--bleu); }
.etat.cyan { background: rgba(34,211,238,.15); color: var(--cyan); }
.etat.gris { background: rgba(143,160,187,.12); color: var(--doux); }
.vide { color: var(--doux); padding: 10px 0; }

/* Connexion et double authentification */
.connexion { max-width: 440px; margin: 40px auto; }
.connexion .champ { margin-bottom: 12px; }
.qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 8px 0 14px; }
.qr img { width: 180px; height: 180px; background: #fff; border-radius: 8px; padding: 8px; }
.secret { overflow-wrap: anywhere; }
input.code { max-width: 160px; font-size: 20px; letter-spacing: .3em; text-align: center; }

/* Bandeau : ce qui demande une action */
#alerte { border-color: var(--orange); background: linear-gradient(0deg, rgba(245,158,11,.06), rgba(245,158,11,.06)), var(--panneau); }
#alerte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#alerte li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#alerte li .qui { min-width: 0; overflow-wrap: anywhere; }

/* Tuiles */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 10px; }
.tuile { text-align: left; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--ligne); border-left: 4px solid var(--doux); background: #0e1728; display: grid; gap: 2px; }
.tuile .nombre { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tuile .nom { font-size: 13px; font-weight: 600; }
.tuile .precision { font-size: 11px; color: var(--doux); }
.tuile.actif { outline: 2px solid var(--accent); outline-offset: 1px; }
.tuile.vert { border-left-color: var(--vert); } .tuile.jaune { border-left-color: var(--jaune); }
.tuile.orange { border-left-color: var(--orange); } .tuile.rouge { border-left-color: var(--rouge); }
.tuile.pourpre { border-left-color: var(--pourpre); } .tuile.bleu { border-left-color: var(--bleu); }
.tuile.cyan { border-left-color: var(--cyan); } .tuile.gris { border-left-color: var(--doux); }
.tuile.zero .nombre { color: var(--doux); }

/* Échéances sur 90 jours */
.echeances { display: grid; gap: 4px; }
.echeance { display: grid; grid-template-columns: 112px minmax(120px, 1fr) 150px minmax(0, 2fr) auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--ligne); }
.echeance.entete { color: var(--doux); font-size: 11px; border-bottom: none; padding: 0; }
.piste { position: relative; height: 8px; border-radius: 4px; background: #0a1322; border: 1px solid var(--ligne); }
.piste .point { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); }
.piste .rempli { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; opacity: .35; }
.graduation { display: flex; justify-content: space-between; }
.delai { font-weight: 600; font-variant-numeric: tabular-nums; }
.c-vert { color: var(--vert); } .c-jaune { color: var(--jaune); } .c-orange { color: var(--orange); } .c-rouge { color: var(--rouge); } .c-bleu { color: var(--bleu); } .c-cyan { color: var(--cyan); } .c-pourpre { color: var(--pourpre); } .c-gris { color: var(--doux); }
.f-vert { background: var(--vert); } .f-jaune { background: var(--jaune); } .f-orange { background: var(--orange); } .f-rouge { background: var(--rouge); } .f-bleu { background: var(--bleu); } .f-cyan { background: var(--cyan); }
.echeance .qui { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .echeance { grid-template-columns: 1fr auto; }
  .echeance .piste, .echeance.entete { display: none; }
  header { padding: 14px 16px; }
}

/* Historique d'un poste */
tr.historique > td { background: #0d1626; padding: 8px 12px 12px; }
tr.historique table { font-size: 12px; }
tr.historique th, tr.historique td { border-bottom-color: #1a2740; }

/* Formulaire */
#formulaire { border-color: var(--accent); }
#info-renouvellement { margin: -4px 0 12px; }
.base { color: var(--doux); font-size: 12px; }

dialog { background: var(--panneau); color: var(--texte); border: 1px solid var(--ligne); border-radius: 10px; padding: 18px; width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.55); }
dialog h2 { margin: 0 0 12px; font-size: 15px; }
dialog .champ { margin-bottom: 10px; }
dialog textarea { min-height: 80px; resize: vertical; }

/* Logiciels couverts */
.etiquette { display: block; font-size: 12px; color: var(--doux); margin-bottom: 6px; }
.cases { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; }
.cases label { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: 13px; color: var(--texte); }
.cases input { width: auto; }
.cases .forfait { padding-left: 14px; border-left: 1px solid var(--ligne); font-weight: 600; }
.licences-client { margin: 0 0 14px; display: grid; gap: 10px; font-size: 12px; }
.licences-client ul { margin: 4px 0 0; padding-left: 18px; color: var(--doux); }