/* monitoring.css — base partagée pour toutes les nouvelles pages (affect/historique/lectures/cognition/perception/langage/memoire/phase/reves/mandala/meta/home/conversation/tuning_live/apprentissage/alertes).
   Légère, additive : ne casse pas le style.css legacy. Les pages peuvent toujours surcharger en <style> local. */
:root {
    --bg: #0b0d12;
    --text: #e7ecf3;
    --muted: #8a93a3;
    --cyan: #36d6ff;
    --lav:  #e8b9ff;
    --amber:#ffae3a;
    --green:#2ecc40;
    --red:  #ff4136;
    --yellow:#ffd84d;
    --purple:#9b59ff;
    --mono: ui-monospace, Consolas, "JetBrains Mono", monospace;
}
body.mon { background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; margin: 0; padding: 14px 18px; }

/* Mode soir : déclenché automatiquement après 21h via JS (classe body.evening).
   On n'utilise PAS `filter:` sur <body> : un filter sur un ancetre casse
   `position: fixed` (les modals deviennent relatifs au body, disparaissent
   sous le fold de la page). Overlay multiply en pseudo-element a la place. */
body.mon.evening::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 2147483647;
}

nav.subnav { display: flex; gap: 8px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
nav.subnav a { color: var(--text); text-decoration: none; padding: 6px 14px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); font-size: .88rem; }
nav.subnav a:hover { background: rgba(54,214,255,0.12); border-color: rgba(54,214,255,0.3); }
nav.subnav a.active { background: rgba(54,214,255,0.2); border-color: var(--cyan); color: #fff; }
nav.subnav .brand { font-weight: 600; color: var(--cyan); margin-right: auto; }

/* Nav groupee (refactor 7 dropdowns) */
nav.subnav .navgroup { position: relative; display: inline-block; }
nav.subnav .navgroup-label {
    display: inline-block; cursor: pointer; user-select: none;
    color: var(--text); padding: 6px 14px; border-radius: 6px; font-size: .88rem;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
}
nav.subnav .navgroup:hover > .navgroup-label,
nav.subnav .navgroup.navgroup-active > .navgroup-label {
    background: rgba(54,214,255,0.12); border-color: rgba(54,214,255,0.3);
}
nav.subnav .navgroup.navgroup-active > .navgroup-label {
    background: rgba(54,214,255,0.2); border-color: var(--cyan); color: #fff;
}
nav.subnav .navgroup-menu {
    position: absolute; top: 100%; left: 0; z-index: 100;
    display: none; flex-direction: column; min-width: 200px;
    /* margin-top:0 + bridge ::before -> pas de trou de hover entre label et menu */
    margin-top: 0; padding: 10px 6px 6px;
    background: #11141a; border: 1px solid rgba(54,214,255,0.3); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
/* Pont invisible : etend la zone de hover du menu vers le haut pour couvrir l'espace
   entre le label et la boite. Sans ca, la souris quitte le navgroup en chemin -> menu ferme. */
nav.subnav .navgroup-menu::before {
    content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}
nav.subnav .navgroup:hover > .navgroup-menu,
nav.subnav .navgroup:focus-within > .navgroup-menu {
    display: flex;
}
/* Les 2 derniers groupes (Infra et celui d'avant) sont tout à droite de la nav :
   le dropdown qui s'aligne par défaut à left:0 déborde de l'écran. On le re-aligne
   à droite du parent. Ajouté 2026-05-13 pour fixer le bug "Infra invisible". */
nav.subnav .navgroup:nth-last-child(-n+2) .navgroup-menu {
    left: auto;
    right: 0;
}
nav.subnav .navgroup-menu a {
    display: block; padding: 6px 12px; margin: 2px 0; font-size: .85rem;
    background: transparent; border-color: transparent; white-space: nowrap;
}
nav.subnav .navgroup-menu a:hover {
    background: rgba(54,214,255,0.12); border-color: rgba(54,214,255,0.3);
}
nav.subnav .navgroup-menu a.active {
    background: rgba(54,214,255,0.2); border-color: var(--cyan); color: #fff;
}

.poll-ctl { display: inline-flex; gap: 10px; align-items: center; padding: 4px 10px; border-radius: 6px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); font-size: .78rem; color: var(--muted); }
.poll-ctl .pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(46,204,64,0.6); display: inline-block; }
.poll-ctl .pdot.off { background: #666; box-shadow: none; }
.poll-ctl .pdot.hidden-tab { background: var(--amber); box-shadow: 0 0 6px rgba(255,174,58,0.5); }
.poll-ctl input[type=range] { width: 110px; accent-color: var(--cyan); vertical-align: middle; }
.poll-ctl .pmval { color: var(--yellow); min-width: 60px; display: inline-block; text-align: right; font-family: var(--mono); }

.info-dock { position: sticky; top: 0; z-index: 50; background: linear-gradient(135deg,rgba(8,10,14,0.97),rgba(20,24,32,0.97)); border: 1px solid var(--cyan); border-radius: 8px; padding: 12px 18px; margin: 0 0 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--text); white-space: pre-line; min-height: 48px; box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
.info-dock.empty { color: var(--muted); font-style: italic; border-color: rgba(255,255,255,0.12); }
.info-dock .id-title { color: var(--cyan); font-weight: 600; font-size: 13.5px; }

/* Popup d'aide au survol — flotte au-dessus du curseur (remplace l'info-dock sous l'entete). */
.hover-popup { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; max-width: 380px;
    background: rgba(8,10,14,0.97); border: 1px solid var(--cyan); border-radius: 8px;
    padding: 8px 12px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--text);
    box-shadow: 0 6px 20px rgba(0,0,0,0.55); white-space: pre-line;
    opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; }
.hover-popup.shown { opacity: 1; transform: translateY(0); }
.hover-popup .hp-title, .hover-popup .id-title { color: var(--cyan); font-weight: 600; font-size: 12.5px; }

section.panel { padding: 18px 22px; margin: 0 0 18px; border-radius: 12px; background: linear-gradient(135deg,rgba(54,214,255,0.05),rgba(232,185,255,0.03)); border: 1px solid rgba(54,214,255,0.18); }
section.panel h2 { color: var(--cyan); font-size: 1rem; margin: 0 0 .9rem; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
section.panel h2 small { color: var(--muted); font-size: .78rem; font-weight: normal; font-family: var(--mono); }

.ctrl { display: inline-flex; gap: .25rem; background: rgba(0,0,0,0.3); padding: .2rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); margin-left: auto; }
.ctrl button { background: transparent; color: var(--muted); border: 0; padding: .3rem .7rem; border-radius: 5px; cursor: pointer; font-size: .82rem; }
.ctrl button:hover { color: var(--lav); }
.ctrl button.active { background: rgba(232,185,255,0.16); color: var(--lav); }

canvas { background: rgba(0,0,0,0.25); border-radius: 6px; display: block; max-width: 100%; }

.graph-explainer { font-size: .82rem; color: var(--text); line-height: 1.55; margin: 12px 0 4px; padding: 10px 14px; border-left: 3px solid var(--lav); background: rgba(232,185,255,0.04); border-radius: 0 6px 6px 0; }
.graph-explainer strong { color: var(--lav); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 12px 14px; cursor: help; transition: border-color .15s; }
.kpi:hover { border-color: var(--cyan); }
.kpi .kv { font-family: var(--mono); font-size: 1.4rem; color: var(--cyan); font-weight: 600; }
.kpi .kl { font-size: .78rem; color: var(--muted); margin-top: 4px; }

/* Boutons d'actions globales */
.global-actions { display: inline-flex; gap: 6px; margin-left: 8px; }
.global-actions button { background: rgba(54,214,255,0.08); color: var(--cyan); border: 1px solid rgba(54,214,255,0.3); padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: .78rem; font-family: var(--mono); }
.global-actions button:hover { background: rgba(54,214,255,0.18); }

/* Hamburger mobile (caché desktop) */
.mobile-burger { display: none; background: rgba(54,214,255,0.1); color: var(--cyan); border: 1px solid var(--cyan); border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 18px; line-height: 1; }

/* Mobile */
@media (max-width: 720px) {
    body.mon { padding: 8px 10px; }
    .mobile-burger { display: inline-block; }
    nav.subnav { gap: 4px; align-items: stretch; }
    nav.subnav .brand { width: 100%; padding: 6px 0; }
    nav.subnav a { padding: 6px 10px; font-size: .82rem; display: none; flex-basis: calc(50% - 4px); text-align: center; }
    nav.subnav.drawer-open { flex-direction: column; }
    nav.subnav.drawer-open a { display: block; }
    nav.subnav.drawer-open .poll-ctl,
    nav.subnav.drawer-open .ctrl { display: flex; flex-wrap: wrap; }
    .poll-ctl { font-size: .72rem; padding: 4px 8px; gap: 6px; flex-wrap: wrap; }
    .poll-ctl input[type=range] { width: 90px; }
    .info-dock { font-size: 11px; padding: 8px 12px; }
    section.panel { padding: 12px 14px; }
    section.panel h2 { font-size: .92rem; gap: .4rem; flex-wrap: wrap; }
    .ctrl { margin-left: 0; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* Nav locale page (controls only) : style discret pour le titre de la page courante.
   Utilise quand la page a une 2e barre <nav class="subnav page-ctrl"> apres _nav.php
   pour contenir global-range + poll-ctl. Le brand "Mia · ..." reste sur la nav principale. */
nav.subnav.page-ctrl { margin-bottom: 10px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.06); }
nav.subnav.page-ctrl .page-title { color: var(--lav); font-weight: 500; font-size: .92rem; margin-right: auto; opacity: .85; cursor: help; }

/* Raccourcis clavier overlay */
.keyhelp { position: fixed; bottom: 16px; right: 16px; background: rgba(0,0,0,0.85); border: 1px solid var(--cyan); border-radius: 8px; padding: 14px 18px; font-family: var(--mono); font-size: 12px; line-height: 1.7; max-width: 360px; z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,0.6); display: none; }
.keyhelp.shown { display: block; }
.keyhelp h4 { margin: 0 0 8px; color: var(--cyan); font-size: 13px; }
.keyhelp kbd { background: rgba(54,214,255,0.15); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(54,214,255,0.3); color: var(--cyan); font-size: 11px; }
