/* ══════════════════════════════════════════════════════════════════════════
   Pilotage DentalSuite — outil INTERNE. La densité prime sur l'élégance.
   ⚠️ Préfixes `ad-*` partout : ce dépôt est jeune, mais la règle du dépôt
      frontend (« les classes partagées ne se redéfinissent jamais ») vaut ici
      dès la première ligne — c'est plus facile maintenant que dans six mois.
   ══════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
body{font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
     background:#eef1f5;color:#1a2332}
button{font:inherit;cursor:pointer}
input{font:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ── Écran d'authentification ── */
.ad-auth{max-width:380px;margin:64px auto;background:#fff;border:1px solid #c9d2dd;
         border-radius:6px;padding:28px}
.ad-auth h1{font-size:18px;margin-bottom:3px}
.ad-auth .ad-sub{color:#5b6b7f;font-size:12.5px;margin-bottom:20px}
.ad-auth label{display:block;font-size:12.5px;font-weight:600;margin:14px 0 5px}
.ad-auth input{width:100%;padding:8px 10px;border:1px solid #b9c4d1;border-radius:4px}
.ad-auth input:focus{outline:2px solid #1a5fb4;outline-offset:-1px;border-color:#1a5fb4}
.ad-code{letter-spacing:8px;text-align:center;font-size:22px;
         font-family:ui-monospace,monospace}
.ad-go{width:100%;margin-top:18px;background:#1a5fb4;color:#fff;border:0;
       border-radius:4px;padding:10px;font-weight:600}
.ad-go:disabled{background:#a8bdd8;cursor:not-allowed}
.ad-lien{background:none;border:0;color:#1a5fb4;text-decoration:underline;
         padding:0;font-size:12.5px}

/* ── Messages ── */
.ad-err{background:#fdecec;border:1px solid #f5b7b7;color:#a01b1b;padding:9px 11px;
        border-radius:4px;font-size:12.5px;margin-top:14px;line-height:1.5}
.ad-avert{background:#fffbeb;border:1px solid #f5d98a;color:#7a5200;padding:9px 11px;
          border-radius:4px;font-size:12.5px;margin-top:14px;line-height:1.5}
.ad-info{background:#eef4fd;border:1px solid #b9cdf0;color:#1b3d6e;padding:9px 11px;
         border-radius:4px;font-size:12.5px;margin-top:14px;line-height:1.5}

/* ── Enrôlement ── */
.ad-qr{display:flex;justify-content:center;padding:14px 0}
.ad-qr svg{border:1px solid #dde5ee;border-radius:4px;max-width:100%;height:auto}
.ad-cle{background:#f4f7fa;border:1px solid #dde5ee;border-radius:4px;padding:9px 11px;
        font-family:ui-monospace,monospace;font-size:12.5px;word-break:break-all;
        text-align:center;letter-spacing:1px;margin-top:8px}
.ad-etapes{font-size:12.5px;color:#4a5b70;line-height:1.7;margin:6px 0 2px;padding-left:18px}
.ad-etapes li{margin-bottom:3px}

/* ── Codes de secours ── */
.ad-codes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.ad-codes span{background:#f4f7fa;border:1px solid #dde5ee;border-radius:3px;
               padding:6px 8px;font-family:ui-monospace,monospace;font-size:13px;
               text-align:center;letter-spacing:1px}

/* ── En-tête de l'application (lots suivants) ── */
.ad-hd{background:#152a45;color:#fff;height:44px;display:flex;align-items:center;
       padding:0 14px;gap:14px}
.ad-hd .ad-logo{font-weight:700}
.ad-hd .ad-qui{margin-left:auto;font-size:12.5px;color:#a9bdd6}
.ad-hd button{background:#28405f;color:#cfe0f5;border:1px solid #395a80;
              border-radius:4px;padding:4px 10px;font-size:12px}
.ad-vide{background:#fff;border:1px solid #c9d2dd;border-radius:6px;
         margin:14px;padding:34px 20px;text-align:center;color:#5b6b7f}

/* ══════════════════════════════════════════════════════════════════════════
   ÉCRAN DE PILOTAGE (lot 4) — maquette A+B
   ⚠️ Préfixes `ad-*` comme le reste : rien n'est partagé avec le front client.
   ══════════════════════════════════════════════════════════════════════════ */

/* 🔴 La bannière de décor est VOYANTE à dessein. Elle disparaîtra d'elle-même
      quand `SOURCE` passera à 'api' — elle ne se retire pas à la main. */
.ad-decor{background:#7a4a00;color:#ffe9c4;padding:7px 14px;font-size:12.5px;
          display:flex;align-items:center;gap:10px}
.ad-decor b{color:#ffd84d;letter-spacing:.4px}
.ad-decor-b{color:#ffd84d;margin-left:auto;white-space:nowrap}

.ad-corps{padding:14px;display:flex;gap:14px;align-items:flex-start}
.ad-principal{flex:1;min-width:0}
.ad-avec-pan .ad-principal{max-width:calc(100% - 400px)}

/* ── Tuiles d'agrégat ── */
.ad-tuiles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ad-tuile{background:#fff;border:1px solid #c9d2dd;border-radius:6px;
          padding:9px 14px;min-width:104px;text-align:left;display:block}
.ad-tuile:hover{border-color:#1a5fb4}
.ad-t-on{border-color:#1a5fb4;box-shadow:inset 0 0 0 1px #1a5fb4;background:#f4f8ff}
.ad-tn{display:block;font-size:21px;font-weight:700;line-height:1.15}
.ad-tl{display:block;font-size:11.5px;color:#5b6b7f;margin-top:2px}
.ad-t-ok .ad-tn{color:#1a7f37}
.ad-t-alerte .ad-tn{color:#a01b1b}
.ad-t-info .ad-tn{color:#1a5fb4}
.ad-t-mrr{cursor:default;background:#152a45;border-color:#152a45;margin-left:auto}
.ad-t-mrr .ad-tn{color:#fff;font-size:19px}
.ad-t-mrr .ad-tl{color:#a9bdd6}
.ad-t-mrr b{color:#ffd84d;font-weight:600}

/* ── Barre de recherche ── */
.ad-barre{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.ad-barre input{flex:1;padding:7px 10px;border:1px solid #b9c4d1;border-radius:4px;
                background:#fff;max-width:420px}
.ad-barre input:focus{outline:2px solid #1a5fb4;outline-offset:-1px}

/* ── Liste dense ── */
.ad-tbl{width:100%;border-collapse:collapse;background:#fff;
        border:1px solid #c9d2dd;border-radius:6px;overflow:hidden;font-size:13px}
.ad-tbl th{background:#f4f7fa;text-align:left;padding:7px 10px;font-size:11.5px;
           font-weight:600;color:#5b6b7f;border-bottom:1px solid #c9d2dd;
           text-transform:uppercase;letter-spacing:.3px}
.ad-tbl td{padding:6px 10px;border-bottom:1px solid #eef1f5;vertical-align:top}
.ad-tbl tbody tr:hover{background:#f4f8ff;cursor:pointer}
.ad-tbl tbody tr:last-child td{border-bottom:0}
.ad-l-on{background:#eaf2ff !important;box-shadow:inset 3px 0 0 #1a5fb4}
.ad-l-nom{font-weight:600;max-width:260px}
.ad-l-rs{display:block;font-weight:400;font-size:11.5px;color:#8a99ab}
.ad-l-cp{color:#8a99ab;font-size:11.5px}
.ad-l-num{text-align:right;font-variant-numeric:tabular-nums}
.ad-l-date{color:#5b6b7f;white-space:nowrap}
.ad-l-vide{color:#b9c4d1}
.ad-l-imp{color:#a01b1b;font-weight:600}
.ad-l-fin{display:block;font-size:11px;color:#a05a00}
.ad-compte{font-size:12px;color:#5b6b7f;margin-top:7px}
.ad-vide-liste{background:#fff;border:1px solid #c9d2dd;border-radius:6px;
               padding:30px;text-align:center;color:#5b6b7f}

/* Pastilles */
.ad-p,.ad-s{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11.5px;
            font-weight:600;white-space:nowrap}
.ad-p{background:#eef1f5;color:#4a5b70}
.ad-p-trial{background:#eef4fd;color:#1a5fb4}
.ad-p-pro,.ad-p-enterprise{background:#e8f5ec;color:#1a7f37}
.ad-s-active{background:#e8f5ec;color:#1a7f37}
.ad-s-suspended{background:#fdecec;color:#a01b1b}
.ad-s-cancelled{background:#eef1f5;color:#5b6b7f}
.ad-s-deleted{background:#eef1f5;color:#8a99ab}

/* ── Panneau latéral ── */
.ad-pan{width:388px;flex:0 0 388px;background:#fff;border:1px solid #c9d2dd;
        border-radius:6px;position:sticky;top:14px;max-height:calc(100vh - 72px);
        display:flex;flex-direction:column;overflow:hidden}
.ad-pan-hd{display:flex;align-items:center;gap:10px;padding:10px 12px;
           border-bottom:1px solid #dde5ee;background:#f4f7fa}
.ad-pan-hd b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-pan-x{background:none;border:0;font-size:15px;color:#5b6b7f;padding:0 4px}
.ad-pan-co{padding:12px;overflow-y:auto}
.ad-pan-co label{display:block;font-size:12.5px;font-weight:600;margin:12px 0 5px}
.ad-pan-co select,.ad-pan-co input[type=text],.ad-pan-co textarea{
  width:100%;padding:7px 9px;border:1px solid #b9c4d1;border-radius:4px;font:inherit}
.ad-pan-co textarea{resize:vertical}
.ad-h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;color:#5b6b7f;
       margin:16px 0 7px;padding-bottom:4px;border-bottom:1px solid #eef1f5}
.ad-ch{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:13px}
.ad-ch span{color:#5b6b7f}
.ad-ch b{text-align:right;word-break:break-word}
.ad-fin{font-size:11.5px;color:#8a99ab;font-weight:400}
.ad-go-s{width:auto;padding:6px 14px;margin-top:8px}
.ad-mini{font-size:11.5px;padding:7px 9px}

.ad-histo{list-style:none;font-size:12.5px}
.ad-histo li{padding:5px 0;border-bottom:1px solid #f4f7fa;display:flex;
             gap:8px;align-items:baseline;flex-wrap:wrap}
.ad-hd8{color:#8a99ab;white-space:nowrap;font-size:11.5px}
.ad-hev{font-family:ui-monospace,monospace;font-size:11.5px;color:#1b3d6e}
.ad-hm{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}

.ad-notes{list-style:none;margin-top:10px}
.ad-notes li{background:#f4f7fa;border:1px solid #dde5ee;border-radius:4px;
             padding:8px 10px;margin-bottom:7px}
.ad-notes p{font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.ad-notes span{display:block;margin-top:4px}

/* ── Squelettes de chargement ── */
.ad-skel{height:15px;background:linear-gradient(90deg,#e6ebf2,#f2f5f9,#e6ebf2);
         background-size:200% 100%;animation:ad-sk 1.2s infinite;border-radius:4px;
         margin-bottom:9px}
.ad-skel.s{width:55%}
.ad-skel-t{height:56px;min-width:104px;background:linear-gradient(90deg,#e6ebf2,#f2f5f9,#e6ebf2);
           background-size:200% 100%;animation:ad-sk 1.2s infinite;border-color:#dde5ee}
@keyframes ad-sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ⚠️ Sous 1100 px le panneau passe SOUS la liste plutôt que de l'écraser :
      une liste dense à 300 px de large n'est plus une liste dense. */
@media (max-width:1100px){
  .ad-corps{flex-direction:column}
  .ad-avec-pan .ad-principal{max-width:100%}
  .ad-pan{width:100%;flex:1 1 auto;position:static;max-height:none}
}