/**
 * Projet         : MageTicket
 * Fichier        : public/assets/css/observability.css
 * Rôle           : Styles uniformes, accessibles et responsives du centre de performance.
 * Auteur         : Régis KREMER
 * Version        : 0.33.1
 * Version projet : 0.33.0
 * Lot            : MAGETICKET GLOBAL DESIGN MODULES VISUAL CONSISTENCY FIX2
 * Base requise   : 0.33.0 + MAGETICKET GLOBAL DESIGN SYSTEM REQUESTER FULL VIEW UNIFICATION1
 * Créé le        : 2026-07-22
 * Modifié le     : 2026-07-24
 * Dépendances    : shell.css, governance.css, tokens et composants MageTicket
 * Contraintes    : bord à bord mobile/tablette ; focus visible ; lower-grid ancrée en bas desktop
 * Modifications  : séparation de la racine pleine largeur et du contenu paddé ; suppression du viewport et du scroll imbriqué authentifiés.
 */
.observability-shell{width:100%;min-width:0;min-height:100%;height:auto;display:flex;flex-direction:column;background:var(--bg,#07101f);color:var(--text,#e8f0fa)}
.observability-workspace{min-height:0;flex:1 1 auto;display:flex;flex-direction:column;gap:1rem;padding:clamp(.8rem,2vw,1.5rem);background:var(--bg,#07101f);color:var(--text,#e8f0fa);overflow:visible}.observability-brand{display:flex;align-items:center;gap:.75rem;color:inherit;text-decoration:none}.observability-brand img{inline-size:2.8rem;block-size:2.8rem;object-fit:contain}.observability-brand span{display:grid}.observability-brand small{color:var(--muted,#a9bad0)}.observability-alert,.observability-status{padding:.75rem 1rem;border-inline-start:4px solid var(--brand,#55a7ff);background:var(--surface,#0e1c30)}.observability-alert{border-color:#ff6b6b}.observability-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem}.observability-kpis article{display:grid;gap:.3rem;padding:.85rem;border:1px solid var(--line,#29405c);background:var(--surface,#0e1c30)}.observability-kpis span{color:var(--muted,#a9bad0);font-size:var(--fs-sm)}.observability-kpis strong{font-size:var(--fs-lg)}.observability-main-grid{display:grid;grid-template-columns:minmax(18rem,.75fr) minmax(0,1.6fr);gap:1rem;min-height:0}.observability-main-grid>.panel,.observability-lower-grid>.panel{min-width:0;overflow:auto}.observability-lower-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:auto}.observability-badge,.observability-state,.observability-severity{display:inline-flex;align-items:center;padding:.25rem .5rem;border:1px solid currentColor;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}.observability-state--passed{color:#7ee2ad}.observability-state--warning{color:#ffd166}.observability-state--failed,.observability-severity--critical{color:#ff7b7b}.observability-severity--warning{color:#ffd166}.observability-severity--info{color:#7ec8ff}.observability-count-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.observability-benchmark-panel form,.observability-dialog form{display:grid;gap:.8rem}.observability-benchmark-panel label,.observability-dialog label{display:grid;gap:.35rem}.observability-benchmark-panel input,.observability-benchmark-panel select,.observability-dialog input,.observability-dialog select{inline-size:100%}.observability-error-summary{padding:.8rem;border:2px solid #ff7b7b}.observability-diagnostics{display:grid;gap:.55rem;margin:0}.observability-diagnostics div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line,#29405c);padding:.45rem 0}.observability-diagnostics dt{color:var(--muted,#a9bad0)}.observability-alert-list{display:grid;gap:.55rem;list-style:none;padding:0;margin:0}.observability-alert-list li{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:start;padding:.65rem;border-bottom:1px solid var(--line,#29405c)}.observability-alert-list p{margin:.2rem 0;color:var(--muted,#a9bad0)}.observability-log-actions{display:flex;justify-content:space-between;align-items:center;gap:.7rem;margin-top:1rem}.observability-dialog{inline-size:min(48rem,calc(100vw - 2rem));max-block-size:calc(100dvh - 2rem);padding:0;border:1px solid var(--line,#29405c);background:var(--surface,#0e1c30);color:inherit}.observability-dialog::backdrop{background:rgba(0,0,0,.72)}.observability-dialog header,.observability-dialog footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--line,#29405c)}.observability-dialog footer{border-top:1px solid var(--line,#29405c);border-bottom:0}.observability-dialog-body{display:grid;gap:.8rem;padding:1rem;overflow:auto}.observability-workspace :focus-visible{outline:3px solid var(--focus,#ffd166);outline-offset:3px}@media(max-width:1100px){.observability-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.observability-main-grid,.observability-lower-grid{grid-template-columns:1fr 1fr}.observability-lower-grid .panel:last-child{grid-column:1/-1}}@media(max-width:760px){.observability-workspace{padding:max(.6rem,env(safe-area-inset-top)) max(.6rem,env(safe-area-inset-right)) max(.8rem,env(safe-area-inset-bottom)) max(.6rem,env(safe-area-inset-left));gap:.65rem}.observability-kpis,.observability-main-grid,.observability-lower-grid,.observability-count-grid{grid-template-columns:1fr}.observability-lower-grid .panel:last-child{grid-column:auto}.observability-main-grid>.panel,.observability-lower-grid>.panel{border-inline:0}.observability-alert-list li{grid-template-columns:auto 1fr}.observability-alert-list button{grid-column:1/-1;inline-size:100%}.observability-dialog{inline-size:100vw;max-inline-size:none;block-size:100dvh;max-block-size:none;border:0}.observability-dialog form{min-block-size:100%;grid-template-rows:auto 1fr auto}}@media(prefers-reduced-motion:reduce){.observability-workspace *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media(forced-colors:active){.observability-state,.observability-severity,.observability-alert,.observability-status{forced-color-adjust:auto}}

.observability-workspace>.lower-grid{margin-top:auto;min-height:0}