/* Statistiques de la PWA — charte Mitel 2026 uniquement (Dark Blue, Mid Blue, Light Blue, Yellow, Purple,
   Periwinkle, blanc et leurs transparences ; vert / rouge d'appel pour les états de présence) */
@font-face { font-family: "Museo Sans"; src: url("../fonts/MuseoSans-300.woff") format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Museo Sans"; src: url("../fonts/MuseoSans-500.woff") format("woff"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Museo Sans"; src: url("../fonts/MuseoSans-700.woff") format("woff"); font-weight: 600 700; font-display: swap; }

:root {
  --dark: #15325f; --mid: #0073d0; --light: #00a1e0; --yellow: #fdb714; --purple: #812cc4; --peri: #def7fc;
  --green: #13a10e; --red: #c4314b;
  --text: var(--dark); --text-2: rgba(21, 50, 95, .74); --line: rgba(21, 50, 95, .12);
  --shadow: 0 0 0 1px rgba(21, 50, 95, .03), 0 3px 8px -3px rgba(21, 50, 95, .16);
}
* { box-sizing: border-box; }
html { background: #ffffff; }
body { margin: 0; min-height: 100dvh; font: 400 14px/1.45 "Museo Sans", Arial, sans-serif; color: var(--text); background: rgba(222, 247, 252, .20); }
h1, h2 { font-weight: 700; margin: 0; }
.muted { color: var(--text-2); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .2px; }

/* Bande du haut : dégradé Mid Blue → Dark Blue, logo blanc officiel */
.band { display: flex; align-items: center; gap: 20px; padding: 14px 28px; color: #ffffff; background: linear-gradient(100deg, var(--mid), var(--dark) 70%); }
.band .logo { width: 120px; height: auto; flex: none; }
.band h1 { font-size: 18px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band-form { margin: 0; }
.updated { font-size: 12px; color: rgba(255, 255, 255, .78); white-space: nowrap; }
#refresh.busy { opacity: .6; cursor: progress; }

.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border: 0; border-radius: 999px; font: 600 14px "Museo Sans", Arial, sans-serif; color: #ffffff; background: linear-gradient(135deg, var(--mid), var(--dark)); cursor: pointer; box-shadow: var(--shadow); }
.btn:hover { background: var(--dark); }
.btn:focus-visible, .field input:focus-visible { outline: 3px solid var(--light); outline-offset: 2px; }
.btn.ghost { height: 34px; padding: 0 16px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.btn.ghost:hover { background: rgba(255, 255, 255, .22); }

main { max-width: 1500px; margin: 0 auto; padding: 24px 28px 40px; }
.card { background: #ffffff; border-radius: 16px; box-shadow: var(--shadow); padding: 18px 20px 20px; margin-top: 20px; }
.card h2 { font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.count { font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 999px; background: rgba(21, 50, 95, .06); color: var(--text-2); }
.empty { margin: 4px 0 0; }
.foot { font-size: 12px; text-align: center; margin-top: 18px; }

/* Connexion */
.login { display: grid; place-items: start center; padding-top: 8vh; }
.login-card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; }
/* Petits repères de mémoire à côté des libellés (comme sur l'extracteur vidéo) */
.hint { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; border-radius: 999px; background: rgba(129, 44, 196, .10); color: var(--purple); font-size: 12px; font-weight: 700; }
.field input { -webkit-appearance: none; appearance: none; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(21, 50, 95, .25); background: #ffffff; color: var(--text); font: 400 15px "Museo Sans", Arial, sans-serif; }
.field input:focus { border-color: var(--mid); box-shadow: 0 0 0 1px var(--mid); outline: none; }
.login-card .btn { align-self: flex-start; }
.alert { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(196, 49, 75, .10); color: var(--red); font-weight: 600; box-shadow: inset 4px 0 0 var(--red); }

/* Chiffres clés */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.kpi { background: #ffffff; border-radius: 16px; box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi-n { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-l { font-size: 12.5px; color: var(--text-2); }
.kpi.on { background: linear-gradient(135deg, var(--peri), #ffffff); box-shadow: inset 4px 0 0 var(--green), var(--shadow); }
.kpi.warn { box-shadow: inset 4px 0 0 var(--yellow), var(--shadow); }
.kpi.demo { box-shadow: inset 4px 0 0 var(--purple), var(--shadow); }
.note { font-size: 12.5px; margin: -4px 0 12px; }

/* Tableaux : arrondis, lignes seulement, en-tête en un seul dégradé */
.table-wrap { border-radius: 12px; overflow: hidden; overflow-x: auto; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { background: linear-gradient(90deg, var(--mid), var(--dark)); color: #ffffff; }
th { background: transparent; text-align: left; font-weight: 600; padding: 9px 12px; white-space: nowrap; }
td { padding: 8px 12px; border-top: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
td.wrap { white-space: normal; min-width: 180px; }
td .sub { display: block; font-size: 11.5px; color: var(--text-2); }
td.num { text-align: center; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--peri); }

.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.ok { background: rgba(19, 161, 14, .12); color: var(--dark); box-shadow: inset 3px 0 0 var(--green); }
.pill.pending, .pill.ring { background: rgba(253, 183, 20, .22); color: var(--dark); }
.pill.err, .pill.busy { background: rgba(196, 49, 75, .10); color: var(--red); }
.pill.demo { background: rgba(129, 44, 196, .10); color: var(--purple); }
.pill.held { background: rgba(0, 115, 208, .10); color: var(--mid); }
.pill.dial { background: rgba(0, 161, 224, .12); color: var(--dark); }
.pill.app { background: var(--dark); color: #ffffff; }
.pill.dlr { background: var(--mid); color: #ffffff; }
.pill.pc { background: var(--purple); color: #ffffff; }
.pill.web { background: rgba(21, 50, 95, .06); color: var(--text-2); }
.pill.none { background: rgba(21, 50, 95, .06); color: var(--text-2); }

/* Grand écran : pas d'ascenseur horizontal ; petit écran : le tableau défile dans son cadre */
@media (max-width: 1440px) { td, th { padding-left: 8px; padding-right: 8px; } table { font-size: 12.5px; } }
@media (max-width: 900px) {
  .band { padding: 12px 16px; gap: 12px; }
  .band h1 { font-size: 15px; }
  main { padding: 16px 16px 32px; }
  .table-wrap { overflow-x: auto; }
}
@media (max-width: 640px) { .updated { display: none; } }
@media (max-width: 480px) { .band h1 { display: none; } .band { justify-content: space-between; } }

/* Adresse IP : 4 derniers caractères, l'adresse entière dans la bulle (survol ou focus clavier) */
.ip { cursor: default; border-bottom: 1px dotted rgba(21, 50, 95, .4); }
.ip:focus-visible { outline: 2px solid var(--mid); outline-offset: 2px; border-radius: 4px; }
.tip { position: fixed; z-index: 50; pointer-events: none; max-width: 320px; padding: 6px 10px; border-radius: 8px; background: #ffffff; color: var(--dark); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: inset 3px 0 0 var(--mid), 0 0 0 1px var(--line), 0 6px 18px rgba(21, 50, 95, .18); }

/* Nommer un poste inconnu : petit bouton, puis champ sur place */
.name-btn { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; margin-left: 4px; border: 0; border-radius: 999px; background: rgba(0, 115, 208, .10); color: var(--mid); font: 600 11.5px "Museo Sans", Arial, sans-serif; cursor: pointer; vertical-align: middle; }
.name-btn:hover { background: var(--peri); color: var(--dark); }
.name-btn.edit { width: 22px; padding: 0; justify-content: center; background: transparent; color: var(--text-2); }
.name-btn.edit:hover { background: var(--peri); color: var(--mid); }
/* Crayon « nommer l'appareil » sous un nom déjà connu : discret, visible au survol de la ligne (toujours au toucher) */
.dev-edit .name-btn { height: 18px; margin-left: 2px; padding: 0 7px; font-size: 10.5px; opacity: 0; transition: opacity .15s; }
.dev-edit .name-btn.edit { width: 18px; padding: 0; }
tr:hover .dev-edit .name-btn, li:hover .dev-edit .name-btn, .dev-edit .name-btn:focus-visible { opacity: 1; }
@media (hover: none) { .dev-edit .name-btn { opacity: 1; } }
.name-btn:focus-visible, .mini:focus-visible { outline: 2px solid var(--mid); outline-offset: 2px; }
.name-form { display: flex; align-items: center; gap: 6px; }
.name-form input { width: 170px; height: 30px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(21, 50, 95, .25); background: #ffffff; color: var(--text); font: 400 13px "Museo Sans", Arial, sans-serif; }
.name-form input:focus { outline: none; border-color: var(--mid); box-shadow: 0 0 0 1px var(--mid); }
.mini { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; font: 600 12px "Museo Sans", Arial, sans-serif; color: #ffffff; background: linear-gradient(135deg, var(--mid), var(--dark)); cursor: pointer; }
.mini:hover { background: var(--dark); }
.mini.ghost { color: var(--text-2); background: rgba(21, 50, 95, .06); }
.mini.ghost:hover { background: var(--peri); color: var(--dark); }

/* ───── Smartphone : cartes compactes à la place des tableaux, jamais d'ascenseur horizontal ───── */
.m-list { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 700px) {
  .table-wrap, .note { display: none; }
  .m-list { display: block; }
  .m-list li { padding: 9px 2px; border-top: 1px solid var(--line); }
  .m-list li:first-child { border-top: 0; padding-top: 2px; }
  .m-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .m-who { min-width: 0; font-size: 13.5px; }
  .m-who .sub { display: block; font-size: 11.5px; }
  .m-right { flex: none; text-align: right; }
  .m-right .pill { font-size: 11px; }
  .m-since { font-size: 12px; color: var(--text-2); white-space: nowrap; }
  .m-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 4px; font-size: 12px; color: var(--text-2); }
  .m-meta .sub { display: inline; margin-left: 4px; }
  .m-meta .pill { font-size: 11px; }
  .m-dot { color: rgba(21, 50, 95, .35); }
  .kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .kpi { padding: 9px 10px; border-radius: 12px; }
  .kpi-n { font-size: 21px; }
  .kpi-l { font-size: 11px; line-height: 1.25; }
  .card { padding: 13px 14px 12px; margin-top: 14px; border-radius: 14px; }
  .card h2 { font-size: 15px; margin-bottom: 8px; }
  .band { padding: 10px 12px; gap: 8px; }
  .band .btn.ghost { height: 32px; padding: 0 12px; font-size: 13px; }
  main { padding: 12px 12px 28px; }
  .foot { font-size: 11px; }
}

/* Appels par personne */
.person-btn { height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(0, 115, 208, .10); color: var(--mid); font: 600 12px "Museo Sans", Arial, sans-serif; cursor: pointer; white-space: nowrap; }
.person-btn:hover { background: var(--peri); color: var(--dark); }
.person-btn.on { background: var(--mid); color: #ffffff; }
.person-btn:focus-visible { outline: 2px solid var(--mid); outline-offset: 2px; }
tbody tr.sel { background: rgba(222, 247, 252, .6); }
.miss { color: var(--red); font-weight: 700; }
.detail { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(21, 50, 95, .2); }
.detail h3 { font-size: 14px; margin: 0 0 10px; }

/* Préférences d'affichage : barres empilées (part du temps d'ouverture), couleurs de la charte uniquement */
.pref-all { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 24px; margin: 4px 0 16px; }
.pref-all h3 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.mix { display: flex; flex-direction: column; gap: 5px; min-width: 200px; }
.mix-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line); }
.mix-bar .seg { height: 100%; }
.mix-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--text-2); }
.mix-legend b { color: var(--text); font-weight: 700; }
.mix-legend .lg { white-space: nowrap; }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.th-auto { background: var(--light); }
.th-light { background: var(--peri); box-shadow: inset 0 0 0 1px rgba(21, 50, 95, .35); }
.th-dark { background: var(--dark); }
.th-contrast { background: var(--purple); }
.th-a11y { background: var(--mid); }
.nv-auto { background: var(--light); }
.nv-bottom { background: var(--mid); }
.nv-top { background: var(--dark); }
.nv-compact { background: var(--purple); }
.nv-mini { background: var(--yellow); }
td.mix-cell { min-width: 220px; width: 34%; }
.mix-top { margin-bottom: 4px; }

/* Tri des tableaux : flèches dans chaque titre (les deux estompées au repos, une seule pleine une fois trié) */
.th-sort { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.th-sort:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; border-radius: 4px; }
.arr { display: inline-flex; flex-direction: column; gap: 2px; }
.arr::before, .arr::after { content: ""; border-inline: 3.5px solid transparent; opacity: .45; }
.arr::before { border-bottom: 5px solid currentColor; }
.arr::after { border-top: 5px solid currentColor; }
.th-sort:hover .arr::before, .th-sort:hover .arr::after { opacity: .8; }
th[aria-sort="ascending"] .arr::before, th[aria-sort="descending"] .arr::after { opacity: 1; }
th[aria-sort="ascending"] .arr::after, th[aria-sort="descending"] .arr::before { opacity: 0; }

/* Groupes d'un tableau (appareils hors ligne) : titre de groupe sur toute la largeur */
tr.grp-head td { padding: 7px 12px; font-size: 12px; font-weight: 700; color: var(--text-2); background: rgba(222, 247, 252, .55); }
tbody tr.grp-head:hover { background: transparent; }
.m-list li.m-grp { padding: 10px 2px 4px; font-size: 12px; font-weight: 700; color: var(--text-2); border-top: 0; }

/* Arbre système → navigateur → version : chevron qui tourne, lignes filles en retrait */
.has-kids { cursor: pointer; }
.tree-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(0, 115, 208, .10); color: var(--mid); cursor: pointer; vertical-align: middle; }
.tree-btn svg { transition: transform .15s; }
.open > td .tree-btn svg, .open .m-who .tree-btn svg { transform: rotate(90deg); }
.has-kids:hover .tree-btn { background: var(--peri); color: var(--dark); }
.tree-btn:focus-visible { outline: 2px solid var(--mid); outline-offset: 2px; }
.tree-pad { display: inline-block; width: 28px; }
tr.lvl1 td:first-child { padding-left: 38px; }
tr.lvl2 td:first-child { padding-left: 64px; }
tr.lvl2 { color: var(--text-2); }
tr.lvl1 { background: rgba(222, 247, 252, .25); }
tr.lvl2 { background: rgba(222, 247, 252, .45); }
.m-list li.lvl1 { padding-left: 20px; }
.m-list li.lvl2 { padding-left: 40px; }

/* Onglets de la page : Statistiques, Demandes d'amélioration, Retours d'anomalie (pastille = messages à traiter) */
.stabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: 4px; }
.stab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; border-radius: 10px 10px 0 0; margin-bottom: -2px; font: 600 14px "Museo Sans", Arial, sans-serif; color: var(--text-2); background: transparent; border-bottom: 2px solid transparent; cursor: pointer; }
.stab:hover { background: var(--peri); color: var(--dark); }
.stab.on { color: var(--mid); border-bottom-color: var(--mid); }
.stab:focus-visible { outline: 2px solid var(--mid); outline-offset: 2px; }
.stab-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; line-height: 20px; text-align: center; color: var(--dark); background: var(--yellow); }

/* Retours d'expérience : une carte par message, traités estompés */
.fb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fb-item { padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); background: #ffffff; }
.fb-item:not(.done) { box-shadow: inset 3px 0 0 var(--yellow), inset 0 0 0 1px var(--line); }
.fb-item.done { opacity: .72; }
.fb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-acts { margin-left: auto; display: flex; gap: 6px; }
.fb-text { margin: 10px 0 8px; font-size: 15px; white-space: normal; overflow-wrap: anywhere; }
.fb-meta { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.fb-meta a { color: var(--mid); }
.fb-journal { margin-top: 8px; font-size: 13px; }
.fb-journal summary { cursor: pointer; color: var(--mid); font-weight: 600; }
.fb-journal pre { max-height: 320px; overflow: auto; margin: 8px 0 0; padding: 10px; border-radius: 8px; background: rgba(21, 50, 95, .04); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }


/* Onglets : séparation entre les statistiques et les retours d'expérience */
.stab-sep { width: 1px; margin: 8px 6px; background: var(--line); }
/* Usages : appareils actifs par jour (barres Mid Blue = avec le Mitel Dialer, Purple = démonstration) */
.chart-legend { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; }
.chart-legend .lg { width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; }
.chart-legend .lg.real { background: var(--mid); margin-left: 0; }
.chart-legend .lg.demo { background: var(--purple); }
.chart { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 4px; align-items: end; height: 180px; padding: 8px 4px 0; border-bottom: 1px solid var(--line); }
.chart .col { display: flex; flex-direction: column; align-items: stretch; height: 100%; gap: 4px; border-radius: 6px; }
.chart .col:hover, .chart .col:focus-visible { background: var(--peri); outline: none; }
.chart .bars { flex: 1; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.chart .b { display: block; border-radius: 3px 3px 0 0; }
.chart .b.real { background: var(--mid); }
.chart .b.demo { background: var(--purple); }
.chart .day { font-size: 11px; text-align: center; color: var(--text-2); }
.chart .day.we { color: var(--light); font-weight: 700; }
/* Retour d'expérience : usage de l'appareil qui l'a envoyé */
.fb-usage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.fb-usage-l { font-weight: 700; }
.ct { color: var(--mid); font-weight: 600; }
/* Nom donné par la personne (retour d'expérience) : petit logo Mid Blue ; bouton = l'enregistrer comme nom de l'appareil */
.ct-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; border: 0; border-radius: 999px; padding: 0; vertical-align: middle; color: var(--mid); background: transparent; }
.ct-accept { background: rgba(0, 115, 208, .10); box-shadow: inset 0 0 0 1px rgba(0, 115, 208, .45); cursor: pointer; }
.ct-accept:hover, .ct-accept:focus-visible { background: var(--peri); color: var(--dark); outline: none; }
/* Préférences jour par jour : colonnes partagées à 100 % */
.tl-h { margin: 18px 0 6px; }
.chart.mixchart { height: 130px; }
.chart.mixchart .bars { flex-direction: column-reverse; border-radius: 4px; overflow: hidden; }
.chart.mixchart .b { border-radius: 0; }
/* Compte de présentation : coordonnées floutées, un clic les montre */
.blur { filter: blur(5px); cursor: pointer; border-radius: 4px; transition: filter .15s; user-select: none; }
.blur.shown { filter: none; user-select: text; }
.blur:focus-visible { outline: 2px solid var(--mid); outline-offset: 2px; }