/* ============================================================
   Digital Trust — Carte des cybermenaces (démo SOC)
   Palette dérivée de la charte : navy / bleu roi / cyan
   ============================================================ */

:root {
    --bg: #04101d;
    --bg-2: #061626;
    --panel: rgba(9, 32, 56, .58);
    --panel-solid: #08203a;
    --line: rgba(108, 196, 224, .16);
    --line-soft: rgba(108, 196, 224, .09);

    --navy-900: #0a2a48;
    --blue-600: #14538a;
    --blue-500: #1f66a6;
    --cyan-400: #6cc4e0;
    --cyan-300: #93d6ec;

    --ink: #d6e9f7;
    --ink-soft: #8fb0c9;
    --ink-faint: #5d7e99;

    --critical: #ff3d63;
    --high: #ff8a3d;
    --medium: #ffcc3d;
    --low: #6cc4e0;
    --green: #38e0a5;

    --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --hdr-h: 62px;
    --foot-h: 34px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    /* nappe lumineuse discrète en fond */
    background-image:
        radial-gradient(900px circle at 78% 12%, rgba(31, 102, 166, .16), transparent 60%),
        radial-gradient(700px circle at 8% 92%, rgba(108, 196, 224, .08), transparent 55%);
}

ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
canvas { display: block; }

/* ============================================================
   En-tête
   ============================================================ */
.topbar {
    height: var(--hdr-h);
    display: flex; align-items: center; gap: 24px;
    padding: 0 18px;
    background: linear-gradient(180deg, rgba(8, 32, 58, .96), rgba(5, 18, 32, .88));
    border-bottom: 1px solid var(--line);
    position: relative; z-index: 10;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { width: 34px; height: 34px; flex: none; }
.brand-txt h1 {
    font-family: var(--sans); font-size: .98rem; font-weight: 700;
    letter-spacing: .09em; white-space: nowrap;
}
.brand-txt h1 span { color: var(--cyan-400); font-weight: 500; }
.brand-txt p {
    font-family: var(--mono); font-size: .66rem; color: var(--ink-faint);
    letter-spacing: .12em; text-transform: uppercase; margin-top: 2px;
}

/* Compteurs */
.kpis { display: flex; gap: 34px; margin: 0 auto; }
.kpi { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.kpi-l {
    font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
    color: var(--ink-faint); text-transform: uppercase;
}
.kpi-v {
    font-family: var(--mono); font-size: 1.42rem; font-weight: 700;
    line-height: 1.1; color: var(--cyan-300);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px rgba(108, 196, 224, .45);
}
.kpi-v.amber { color: var(--medium); text-shadow: 0 0 18px rgba(255, 204, 61, .4); }
.kpi-v.red   { color: var(--critical); text-shadow: 0 0 18px rgba(255, 61, 99, .45); }
.kpi-v.green { color: var(--green); text-shadow: 0 0 18px rgba(56, 224, 165, .4); }

.top-right { display: flex; align-items: center; gap: 10px; }

.demo-badge {
    font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .14em;
    color: var(--medium); background: rgba(255, 204, 61, .1);
    border: 1px solid rgba(255, 204, 61, .38);
    padding: 5px 11px; border-radius: 6px; white-space: nowrap;
}
.live-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .14em;
    color: var(--green); background: rgba(56, 224, 165, .1);
    border: 1px solid rgba(56, 224, 165, .34);
    padding: 5px 12px; border-radius: 100px;
}
.live-badge i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 10px var(--green); animation: blink 1.6s ease-in-out infinite;
}
body.is-paused .live-badge { color: var(--ink-faint); border-color: var(--line); background: transparent; }
body.is-paused .live-badge i { background: var(--ink-faint); box-shadow: none; animation: none; }

.icon-btn {
    font-family: var(--mono); font-size: .7rem; color: var(--ink-soft);
    background: rgba(108, 196, 224, .07); border: 1px solid var(--line);
    width: 32px; height: 30px; border-radius: 7px; cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}
.icon-btn:hover { color: var(--cyan-300); border-color: rgba(108, 196, 224, .4); }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ============================================================
   Grille principale
   ============================================================ */
.layout {
    display: grid;
    grid-template-columns: 258px 1fr 296px;
    height: calc(100vh - var(--hdr-h) - var(--foot-h));
    height: calc(100dvh - var(--hdr-h) - var(--foot-h));
}

.panel {
    background: var(--panel);
    backdrop-filter: blur(6px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 196, 224, .28) transparent;
}
.panel-left { border-right: 1px solid var(--line); }
.panel-right { border-left: 1px solid var(--line); }
.panel::-webkit-scrollbar { width: 7px; }
.panel::-webkit-scrollbar-thumb { background: rgba(108, 196, 224, .25); border-radius: 4px; }
.panel::-webkit-scrollbar-track { background: transparent; }

.block { padding: 15px 15px 17px; border-bottom: 1px solid var(--line-soft); }
.block h2 {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: .64rem; font-weight: 600;
    letter-spacing: .17em; text-transform: uppercase;
    color: var(--cyan-400); margin-bottom: 12px;
}
.blk-count {
    margin-left: auto; font-size: .72rem; color: var(--ink-soft);
    font-family: var(--mono); font-weight: 600;
}
.rec {
    width: 7px; height: 7px; border-radius: 50%; background: var(--critical);
    margin-left: auto; box-shadow: 0 0 9px var(--critical);
    animation: blink 1.4s ease-in-out infinite;
}

/* ---------- Filtre de sévérité ---------- */
.sev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sev {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .05em;
    padding: 7px 9px; border-radius: 7px; cursor: pointer;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line); color: var(--ink-faint);
    transition: border-color .2s, color .2s, background .2s, opacity .2s;
    opacity: .42;
}
.sev i { width: 7px; height: 7px; border-radius: 2px; flex: none; background: currentColor; }
.sev b { margin-left: auto; font-weight: 700; font-size: .68rem; }
.sev.is-on { opacity: 1; background: rgba(255, 255, 255, .05); }
.sev-critical.is-on { color: var(--critical); border-color: rgba(255, 61, 99, .45); }
.sev-high.is-on     { color: var(--high);     border-color: rgba(255, 138, 61, .45); }
.sev-medium.is-on   { color: var(--medium);   border-color: rgba(255, 204, 61, .45); }
.sev-low.is-on      { color: var(--low);      border-color: rgba(108, 196, 224, .45); }
.sev:hover { opacity: 1; }

/* ---------- Classements ---------- */
.rank { display: flex; flex-direction: column; gap: 9px; }
.rank li { font-family: var(--mono); font-size: .7rem; color: var(--ink-soft); }

.rank-row { display: flex; align-items: center; gap: 8px; }
.rank-idx { color: var(--ink-faint); font-size: .64rem; width: 13px; flex: none; }
.rank-name {
    flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; color: var(--ink);
}
.rank-cc {
    font-size: .58rem; color: var(--ink-faint); border: 1px solid var(--line);
    padding: 1px 4px; border-radius: 3px; flex: none;
}
.rank-val { color: var(--cyan-300); font-weight: 600; flex: none; font-variant-numeric: tabular-nums; }
.bar { height: 3px; border-radius: 2px; background: rgba(108, 196, 224, .1); margin-top: 5px; overflow: hidden; }
.bar > span {
    display: block; height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, var(--blue-500), var(--cyan-400));
    transition: width .6s cubic-bezier(.16, .84, .44, 1);
}
.bar.b-critical > span { background: linear-gradient(90deg, #a01430, var(--critical)); }
.bar.b-high > span     { background: linear-gradient(90deg, #a04a10, var(--high)); }
.bar.b-medium > span   { background: linear-gradient(90deg, #a07a10, var(--medium)); }

.sev-tag {
    font-size: .54rem; font-weight: 700; letter-spacing: .09em;
    padding: 2px 6px; border-radius: 3px; flex: none;
}
.t-critical { color: var(--critical); background: rgba(255, 61, 99, .13); }
.t-high     { color: var(--high);     background: rgba(255, 138, 61, .13); }
.t-medium   { color: var(--medium);   background: rgba(255, 204, 61, .13); }
.t-low      { color: var(--low);      background: rgba(108, 196, 224, .13); }

.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--green); box-shadow: 0 0 7px var(--green); }

/* ---------- Histogramme d'activité ---------- */
.spark { width: 100%; height: 60px; }
.spark-axis {
    display: flex; justify-content: space-between; margin-top: 4px;
    font-family: var(--mono); font-size: .55rem; color: var(--ink-faint);
}

/* ============================================================
   Scène / carte
   ============================================================ */
.stage { position: relative; overflow: hidden; }
#map { width: 100%; height: 100%; }

.stage-foot {
    position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%);
    pointer-events: none;
}
.target-pill {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .12em;
    color: var(--green); background: rgba(56, 224, 165, .08);
    border: 1px solid rgba(56, 224, 165, .3);
    padding: 7px 15px; border-radius: 7px; white-space: nowrap;
}
.target-pill b { color: var(--ink); font-weight: 700; }

.disclaimer {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    font-family: var(--mono); font-size: .6rem; color: var(--ink-faint);
    text-align: center; letter-spacing: .04em; max-width: 92%;
    pointer-events: none;
}
.disclaimer strong { color: var(--medium); font-weight: 600; }

/* ============================================================
   Flux temps réel
   ============================================================ */
.block-feed { border-bottom: 0; }
.feed { display: flex; flex-direction: column; gap: 6px; }
.feed li {
    border: 1px solid var(--line-soft); border-left-width: 2px;
    border-radius: 6px; padding: 8px 10px;
    background: rgba(255, 255, 255, .02);
    animation: slidein .4s cubic-bezier(.16, .84, .44, 1);
}
.feed li.f-critical { border-left-color: var(--critical); }
.feed li.f-high     { border-left-color: var(--high); }
.feed li.f-medium   { border-left-color: var(--medium); }
.feed li.f-low      { border-left-color: var(--low); }

.f-top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.f-type {
    font-family: var(--mono); font-size: .68rem; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.f-meta {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: .6rem; color: var(--ink-faint);
}
.f-ip { color: var(--ink-soft); }
.f-time { margin-left: auto; }
.f-arrow { color: var(--cyan-400); }

@keyframes slidein {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   Pied de page
   ============================================================ */
.botbar {
    height: var(--foot-h);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--mono); font-size: .62rem; color: var(--ink-faint);
    border-top: 1px solid var(--line);
    background: rgba(5, 18, 32, .9);
    padding: 0 14px;
}
.botbar a { color: var(--ink-soft); transition: color .2s; }
.botbar a:hover { color: var(--cyan-300); }
.botbar .sep { opacity: .4; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
    .layout { grid-template-columns: 216px 1fr 244px; }
    .kpis { gap: 20px; }
}

@media (max-width: 900px) {
    body { overflow: auto; }
    .topbar { height: auto; flex-wrap: wrap; gap: 12px; padding: 12px 14px; }
    .kpis { order: 3; width: 100%; margin: 0; justify-content: space-between; gap: 8px; }
    .top-right { margin-left: auto; }
    .layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .stage { height: 58vh; min-height: 340px; order: -1; }
    .panel { max-height: none; border: 0; border-top: 1px solid var(--line); }
    .panel-left { display: grid; grid-template-columns: 1fr 1fr; }
    .panel-left .block:last-child { grid-column: 1 / -1; }
    .feed { max-height: 420px; overflow-y: auto; }
    .botbar { height: auto; flex-wrap: wrap; justify-content: center; padding: 10px 14px; text-align: center; }
}

@media (max-width: 560px) {
    .brand-txt h1 { font-size: .82rem; }
    .kpi-v { font-size: 1.12rem; }
    .kpi-l { font-size: .52rem; }
    .panel-left { grid-template-columns: 1fr; }
    .demo-badge { font-size: .55rem; padding: 4px 8px; }
    .disclaimer { font-size: .54rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Composants propres à Digital Trust
   ============================================================ */

/* ---------- Jauge de niveau de menace ---------- */
.block-gauge { padding-bottom: 12px; }
.gauge-wrap { position: relative; display: flex; justify-content: center; }
#gauge { width: 100%; max-width: 200px; height: auto; }
.gauge-txt {
    position: absolute; left: 0; right: 0; bottom: 2px;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    pointer-events: none;
}
.gauge-lvl {
    font-family: var(--mono); font-size: .92rem; font-weight: 700;
    letter-spacing: .1em; color: var(--cyan-300);
    text-shadow: 0 0 14px currentColor; transition: color .5s;
}
.gauge-sub {
    font-family: var(--mono); font-size: .53rem; letter-spacing: .1em;
    color: var(--ink-faint); text-transform: uppercase;
}

/* ---------- Ports & protocoles ---------- */
.ports { display: flex; flex-direction: column; gap: 7px; }
.ports li {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: .68rem;
    padding: 6px 8px; border-radius: 6px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
}
.port-num {
    font-weight: 700; color: var(--cyan-300); min-width: 40px;
    font-variant-numeric: tabular-nums;
}
.port-proto { color: var(--ink); flex: 1; }
.port-bar { width: 46px; height: 3px; border-radius: 2px; background: rgba(108,196,224,.12); overflow: hidden; flex: none; }
.port-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-500), var(--cyan-400)); transition: width .6s; }
.port-val { color: var(--ink-soft); font-weight: 600; min-width: 18px; text-align: right; }

/* ---------- Dernière alerte critique ---------- */
.last-crit {
    border: 1px solid rgba(255, 61, 99, .4);
    border-radius: 8px; padding: 11px 12px;
    background: rgba(255, 61, 99, .07);
    position: relative; overflow: hidden;
}
.last-crit.is-empty { border-color: var(--line-soft); background: rgba(255,255,255,.02); }
.last-crit.flash { animation: critflash .9s ease-out; }
@keyframes critflash {
    0% { background: rgba(255, 61, 99, .38); border-color: var(--critical); }
    100% { background: rgba(255, 61, 99, .07); }
}
.lc-none { font-family: var(--mono); font-size: .64rem; color: var(--ink-faint); text-align: center; padding: 6px 0; }
.lc-type {
    font-family: var(--mono); font-size: .78rem; font-weight: 700;
    color: var(--critical); margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.lc-type::before { content: '⚠'; font-size: .9rem; }
.lc-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 9px; font-family: var(--mono); font-size: .62rem; }
.lc-k { color: var(--ink-faint); }
.lc-v { color: var(--ink); word-break: break-all; }

/* ---------- Donut défense ---------- */
.donut-wrap { display: flex; align-items: center; gap: 14px; }
#donut { flex: none; width: 104px; height: 104px; }
.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: .64rem; }
.donut-legend li { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); }
.donut-legend b { margin-left: auto; color: var(--ink); font-weight: 700; }
.lg { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.lg-ok { background: var(--green); }
.lg-ko { background: var(--high); }
.dl-rate { margin-top: 3px; padding-top: 7px; border-top: 1px solid var(--line-soft); color: var(--ink-faint) !important; }
.dl-rate b { color: var(--green) !important; }

/* ---------- Agents Wazuh ---------- */
.agents { display: flex; flex-direction: column; gap: 6px; }
.agents li {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: .65rem;
    padding: 6px 8px; border-radius: 6px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--line-soft);
}
.ag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); flex: none; }
.ag-name { flex: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-val { color: var(--cyan-300); font-weight: 700; }

/* état actif du bouton son */
.icon-btn.is-on { color: var(--green); border-color: rgba(56,224,165,.45); background: rgba(56,224,165,.1); }