/* Console « Alerte Agression » — style poste de sécurité (control room).
   Sans dépendance externe. Thème sombre par défaut. */
:root {
  --bg: #eef1f4; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #f3f6f8;
  --line: #d9e0e5; --text: #17212b; --muted: #687681; --accent: #09a9d6;
  --crit: #e5392d; --high: #f59e0b; --normal: #09a9d6; --ok: #26945a;
  --degraded: #f59e0b; --offline: #6b7280;
  --radius: 10px; --shadow: 0 8px 24px rgba(28,43,54,.14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; }
/* L'attribut HTML `hidden` doit primer sur les `display:` des règles ci-dessous
   (.login/.overlay utilisent display:grid, qui sinon écrase [hidden] via la cascade). */
[hidden] { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
code { background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 5px; font-size: .85em; }
a { color: var(--accent); }

/* Boutons */
.btn { border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 600;
  transition: filter .12s, transform .05s; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: transparent; color: #fff; }
.btn-ghost { background: transparent; }
.btn-danger { background: var(--crit); border-color: transparent; color: #fff; }
.btn-ok { background: var(--ok); border-color: transparent; color: #052e13; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Connexion */
.login { min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(135deg, #b71c1c 0 34%, #eef1f4 34%); padding: 20px; }
.login-card { width: min(400px, 92vw); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); display: grid; gap: 14px; }
.login-sub { margin: -6px 0 6px; color: var(--muted); font-size: 14px; }
.login-card label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.login-card input { padding: 11px 12px; border-radius: 9px; border: 1px solid var(--line);
  background: #f7f9fa; color: var(--text); font-size: 15px; }
.login-hint { font-size: 12px; color: var(--muted); line-height: 1.6; }
.brand { font-size: 17px; font-weight: 700; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; }
.brand-mark { color: var(--crit); font-size: 20px; }
.error { color: #fecaca; background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.4);
  padding: 8px 12px; border-radius: 8px; font-size: 14px; margin: 0; }

/* Barre supérieure */
.topbar { display: flex; align-items: center; gap: 18px; padding: 11px 18px;
  background: linear-gradient(90deg,#b71c1c,#e5392d); color:#fff; border-bottom: 0; position: sticky; top: 0; z-index: 10;
  box-shadow: 0 3px 12px rgba(120,20,20,.25); }
.nav { display: flex; gap: 6px; flex: 1; }
.nav button { background: transparent; border: none; color: rgba(255,255,255,.72); padding: 8px 12px;
  border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; }
.nav button.active { background: rgba(255,255,255,.18); color: #fff; }
.nav button .badge { margin-left: 6px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.whoami { color: rgba(255,255,255,.78); font-size: 13px; }
.conn { font-size: 12px; font-weight: 700; }
.conn-on { color: #b9ffd3; } .conn-off { color: #ffd3d0; }

/* Vue */
.view { padding: 20px; max-width: 1480px; margin: 0 auto; }
.ops-summary { display:flex; align-items:center; gap:12px; margin-bottom:16px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; box-shadow:0 3px 12px rgba(28,43,54,.06); }
.ops-summary > div:first-child { flex:1; }
.ops-summary h2 { margin:2px 0 0; font-size:22px; }
.eyebrow { font-size:11px; color:var(--crit); font-weight:800; letter-spacing:.12em; }
.summary-metric { min-width:82px; text-align:center; padding:5px 14px; border-left:1px solid var(--line); }
.summary-metric b { display:block; font-size:22px; color:var(--accent); }
.summary-metric span { font-size:11px; color:var(--muted); text-transform:uppercase; }
.summary-metric.danger b { color:var(--crit); }
.summary-live { font-size:12px; font-weight:700; color:var(--ok); padding-left:10px; }
.summary-live i { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--ok); margin-right:5px; }
.grid-ops { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .grid-ops { grid-template-columns: 1fr; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow:0 3px 12px rgba(28,43,54,.06); }
.panel-h { padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; }
.panel-b { padding: 14px 16px; }
.alert-list-title { text-transform:uppercase; font-size:12px; letter-spacing:.07em; }
.count-pill { background:#e8f7fb; color:#0784a8; padding:3px 9px; border-radius:99px; }
.incident-head { color:#fff; border:0; background:linear-gradient(90deg,#d9281c,#f04b32); padding:14px 18px; }
.incident-head > span { display:grid; gap:2px; }
.incident-head small { font-size:10px; letter-spacing:.13em; opacity:.78; }
.incident-head .badge { background:#fff; color:var(--crit); border-color:#fff; }
.muted { color: var(--muted); }
h2 { margin: 0 0 14px; font-size: 20px; }
h3 { margin: 0 0 10px; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* Liste d'alertes */
.alert-list { display: flex; flex-direction: column; max-height: calc(100vh - 160px); overflow: auto; }
.alert-item { padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; display: grid; gap: 4px; }
.alert-item:hover { background: var(--panel-2); }
.alert-item.selected { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.alert-item.crit { box-shadow: inset 3px 0 0 var(--crit); }
.alert-item.active-pulse { animation: pulse 1.4s ease-in-out infinite; }
.alert-row1 { display: flex; align-items: center; gap: 8px; }
.alert-title { font-weight: 700; }
.alert-meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
@keyframes pulse { 0%,100%{ background: var(--panel);} 50%{ background: rgba(239,68,68,.18);} }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--line); }
.badge.crit { background: #fee6e3; color: #b42318; border-color: #f7b5ae; }
.badge.high { background: rgba(245,158,11,.16); color: #fde68a; border-color: rgba(245,158,11,.5); }
.badge.normal { background: #e0f6fb; color: #087e9f; border-color: #9bddec; }
.badge.st-triggered { background:#fee6e3; color:#b42318; }
.badge.st-acknowledged { background:#e0f6fb; color:#087e9f; }
.badge.st-qualified, .badge.st-engaged { background:#fff1d6; color:#9a5d00; }
.badge.st-resolved, .badge.st-closed { background:#dcf6e7; color:#176b3d; }
.badge.st-canceled { background: rgba(107,114,128,.2); color:#d1d5db; }
.badge.discreet { background: rgba(147,51,234,.18); color:#e9d5ff; border-color: rgba(147,51,234,.5); }
.badge.test { background: rgba(107,114,128,.2); color:#e5e7eb; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--ok);} .dot.degraded{ background: var(--degraded);}
.dot.offline{ background: var(--offline);} .dot.unknown{ background: var(--offline);}

/* Détail d'alerte */
.detail-empty { display: grid; place-items: center; min-height: 300px; color: var(--muted); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.incident-overview { display:grid; grid-template-columns:minmax(250px,.75fr) minmax(360px,1.25fr); gap:16px; }
.identity-card, .map-card { min-width:0; }
.identity-card { background:#f7f9fa; border-left:4px solid var(--crit); border-radius:7px; padding:14px; }
.map-card h3, .identity-card h3 { color:#45515b; }
.action-protocol { background:#f7f9fa; border:1px solid var(--line); border-radius:8px; padding:14px; }
.action-protocol h3 { color:var(--crit); }
.action-protocol .btn-primary { background:var(--accent); }
.live-audio-bar { display:grid; grid-template-columns:minmax(0,1fr) 240px; align-items:center; gap:20px;
  background:#e5f8fc; border:1px solid #9bddec; border-radius:8px; padding:11px 12px; margin-bottom:10px; }
.live-audio-bar > span:not(.live-controls) { display:grid; grid-template-columns:12px auto; align-items:center; column-gap:8px; }
.live-audio-bar i { width:10px; height:10px; border-radius:50%; background:var(--crit); animation:pulse-dot 1s infinite; grid-row:1/3; }
.live-audio-bar small { color:var(--muted); }
.live-audio-bar > .live-controls {
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  min-width:0;
  margin:0;
}
.live-audio-bar > .live-controls .btn { position:static; width:100%; min-height:42px; white-space:nowrap; }
.btn-talk { background:#653e68; color:#fff; border-color:#653e68; touch-action:none; user-select:none; }
.btn-talk.speaking { background:var(--crit); border-color:var(--crit); animation:pulse-dot .8s infinite; }
@media (max-width:700px) {
  .live-audio-bar { grid-template-columns:1fr; }
  .live-audio-bar > .live-controls { width:100%; min-width:0; margin:12px 0 0; grid-template-columns:1fr; }
  .live-audio-bar > .live-controls .btn { white-space:normal; }
}
.audio-track { border:1px solid #b8dce7; border-radius:10px; padding:14px; margin:10px 0;
  background:linear-gradient(180deg,#f8fdff,#eef8fb); }
.audio-track-head { display:flex; justify-content:space-between; gap:12px; align-items:start; margin-bottom:10px; }
.audio-track-head > span:first-child { display:flex; flex-direction:column; }
.audio-track-head small, .track-time { color:var(--muted); font-size:12px; }
.track-time { font-variant-numeric:tabular-nums; white-space:nowrap; }
.wave-wrap { position:relative; height:92px; overflow:hidden; background:#fff; border:1px solid #d5e8ee; border-radius:7px; }
.wave-wrap canvas { display:block; width:100%; height:92px; }
.wave-wrap i { position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--crit); pointer-events:none; }
.track-controls { display:flex; align-items:center; gap:12px; margin-top:10px; }
.track-controls input[type=range] { flex:1; accent-color:var(--accent); }
@keyframes pulse-dot { 50% { opacity:.35; } }
.section { margin-top: 18px; }
.journal { display: flex; flex-direction: column; gap: 0; max-height: 320px; overflow: auto;
  border: 1px solid var(--line); border-radius: 8px; }
.jentry { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.jentry:last-child { border-bottom: none; }
.jentry .jhead { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.map { width: 100%; height: 340px; border: 1px solid var(--line); border-radius: 8px; }
.integrity-ok { color: var(--ok); font-weight: 700; }
.integrity-bad { color: var(--crit); font-weight: 700; }

/* Table flotte */
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th, table.tbl td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); }
table.tbl th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
table.tbl tr:hover { background: var(--panel-2); }
.user-form { display:grid; grid-template-columns:repeat(3,minmax(150px,1fr)); gap:10px; align-items:center; }
@media (max-width:850px) { .user-form { grid-template-columns:1fr; } }
.user-site, .user-group { min-width:155px; margin:2px 0; }
.routing-rule { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line); }
.routing-rule > div { display:flex; flex-direction:column; gap:3px; }
.routing-rule small { color:var(--muted); }
.route-days { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); }

/* Vue agent — gros bouton */
.trigger-wrap { display: grid; place-items: center; gap: 22px; padding: 30px 0; }
.big-sos { width: min(360px, 80vw); height: min(360px, 80vw); border-radius: 50%; border: none;
  background: radial-gradient(circle at 50% 35%, #ff6b6b, #dc2626 70%); color: #fff; font-size: 34px;
  font-weight: 800; letter-spacing: .04em; cursor: pointer; box-shadow: 0 12px 40px rgba(220,38,38,.5);
  transition: transform .08s; }
.big-sos:active { transform: scale(.97); }
.discreet-note { max-width: 560px; text-align: center; color: var(--muted); line-height: 1.6; }

/* Overlay plein écran */
.overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg,#7f1d1d,#7f1d1d 40px,#991b1b 40px,#991b1b 80px);
  animation: ov 1s steps(2) infinite; }
@keyframes ov { 50% { filter: brightness(1.25); } }
.overlay-card { background: rgba(0,0,0,.72); border: 3px solid #fff; border-radius: 16px;
  padding: 32px 40px; text-align: center; max-width: 720px; }
.overlay-card h1 { font-size: 44px; margin: 0 0 6px; letter-spacing: .02em; }
.overlay-card .big { font-size: 26px; font-weight: 800; margin: 10px 0; }
.overlay-card .who { font-size: 30px; font-weight: 800; }
.overlay-card .loc { font-size: 20px; color: #fecaca; margin: 8px 0; }
.overlay-card .btn { margin-top: 18px; font-size: 18px; padding: 12px 26px; }
.toast { position: fixed; bottom: 18px; right: 18px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; }
.toast > div { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  padding: 12px 16px; border-radius: 8px; box-shadow: var(--shadow); max-width: 360px; }
.toast > div.crit { border-left-color: var(--crit); }
select, input.field, textarea.field { padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--text); font-size: 14px; font-family: inherit; }
textarea.field { width: 100%; resize: vertical; }

@media (prefers-color-scheme: light) {
  /* Le poste de sécurité reste en thème sombre (lisibilité en conditions variées). */
}
@media (max-width:1100px) {
  .incident-overview { grid-template-columns:1fr; }
  .ops-summary { flex-wrap:wrap; }
  .summary-live { width:100%; }
}