/* =====================================================
   ARGUS SENTINEL — WINDOWS ENDPOINTS PAGE
   Navbar, footer, .container, .eyebrow, .section-head and
   the preview CTA band all come from general.css. Only
   rules unique to this page live here.
   ===================================================== */

.windows-page {
    /* .pim-page in general.css supplies --navy --blue --cyan --green --red
       --muted --border etc. Only the extras this page needs are declared. */
    --ink: #17236f;
    --hair: rgba(23, 35, 111, 0.12);
    --card: rgba(255, 255, 255, 0.72);
    --warm: #f1efe7;
    --deep: linear-gradient(150deg, #202b80, #17236f 74%);
}

/*===================SECTION SHELL=====================*/
.we-section {
    padding: 96px 0;
    background: #f7f8f4;
}

/*===================SHARED TYPE=====================*/
.windows-page .section-head {
    max-width: 760px;
    margin-bottom: 46px;
}

.windows-page h2 {
    font-size: clamp(30px, 3.1vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.we-lead {
    max-width: 640px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

/*===================01 · WINDOWS ENDPOINTS=====================*/
.we-hero {
    padding: 60px 0 88px;
}

.we-hero-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(400px, 0.92fr);
    align-items: center;
    gap: 72px;
}

/* the eyebrow and the status tag share one baseline */
.we-kicker-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 2rem;
}

.we-kicker-row .eyebrow {
    margin-bottom: 0 !important;
}

.we-tag {
    padding: 4px 13px;
    border: 1px solid rgba(16, 167, 196, 0.4);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(16, 167, 196, 0.09);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.we-hero h1 {
    margin-top: 0;
    color: var(--ink);
    font-size: clamp(40px, 4.4vw, 58px);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.we-hero .we-lead {
    margin-top: 24px;
    font-size: 16px;
}

.we-points {
    margin-top: 34px;
    display: grid;
    gap: 14px;
}

.we-points li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 18px;
    border: 1px solid var(--hair);
    border-radius: 12px;
    background: var(--card);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.we-points li:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 167, 196, 0.4);
    box-shadow: 0 14px 30px rgba(26, 38, 93, 0.07);
}

.we-points img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.windows-page .we-points b {
    display: block;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.35;
}

.we-points small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.6;
}

/* dark preview panel */
.we-preview {
    /* the table inside sets a wide min-content, so let the card shrink */
    min-width: 0;
    padding: 24px 26px 22px;
    border: 1px solid rgba(114, 217, 238, 0.16);
    border-radius: 16px;
    background: var(--deep);
    box-shadow: 0 28px 70px rgba(23, 35, 111, 0.22);
}

.we-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.windows-page .we-preview-head b {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
}

.we-preview-head img {
    width: 20px;
    height: 20px;
}

.we-preview-head small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/*===================STATUS CHIPS (shared)=====================*/
.we-status {
    display: inline-block;
    margin-bottom: 16px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* signal coverage sits on dark, the roadmap on light */
.we-status.is-design {
    color: #72d9ee;
    background: rgba(16, 167, 196, 0.16);
}

.we-status.is-scope {
    color: rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.09);
}

.we-status.is-done {
    color: #0a7d59;
    background: rgba(10, 162, 113, 0.13);
}

.we-status.is-now {
    color: #135f8c;
    background: rgba(22, 137, 199, 0.13);
}

.we-status.is-next {
    color: #b07d0b;
    background: rgba(235, 169, 40, 0.16);
}

.we-status.is-later {
    color: #6b7180;
    background: rgba(23, 35, 111, 0.07);
}

/*===================02 · SIGNAL COVERAGE (DARK)=====================*/
.we-coverage {
    color: #ffffff;
    background: var(--deep);
}

.windows-page .we-coverage h2 {
    color: #ffffff;
}

.we-coverage .we-lead {
    color: rgba(255, 255, 255, 0.72);
}

.we-coverage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.we-coverage-grid article {
    padding: 24px 22px 26px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.we-coverage-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(114, 217, 238, 0.35);
}

.windows-page .we-coverage-grid b {
    display: block;
    margin-bottom: 9px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.3;
}

.we-coverage-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    line-height: 1.7;
}

/*===================03 · ANALYSIS PIPELINE=====================*/
.we-steps {
    margin: 0 0 64px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    list-style: none;
}

.we-steps li {
    padding: 24px 22px 26px;
    border: 1px solid var(--hair);
    border-radius: 14px;
    background: var(--card);
}

.we-steps span {
    width: 30px;
    height: 30px;
    margin-bottom: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.windows-page .we-steps b {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 15px;
}

.we-steps p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

.we-correlation {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 56px;
}

/* dark evidence card */
.we-finding {
    /* the table inside sets a wide min-content, so let the card shrink */
    min-width: 0;
    padding: 22px 22px 24px;
    border: 1px solid rgba(114, 217, 238, 0.16);
    border-radius: 16px;
    background: var(--deep);
    box-shadow: 0 24px 60px rgba(23, 35, 111, 0.2);
}

.we-finding-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.windows-page .we-finding-head b {
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
}

.we-finding-head small {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid rgba(114, 217, 238, 0.3);
    border-radius: 6px;
    color: #72d9ee;
    background: rgba(16, 167, 196, 0.14);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* table rows, laid out like the GridView in the desktop console. Shared by
   the hero engine list and the correlated finding below. */
.we-grid-scroll {
    min-width: 0;
    margin-top: 18px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.we-grid-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.we-grid-table th {
    padding: 0 16px 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.62);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-align: left;
    text-transform: uppercase;
}

.we-grid-table td {
    padding: 11px 16px 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.86);
    font-size: 11.5px;
}

.we-grid-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.04);
}

.we-grid-table tbody tr:last-child td {
    border-bottom: 0;
}

/* the finding card leads with a timestamp, so that column reads as metadata */
.we-finding .we-grid-table td:first-child {
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

.we-grid-table th:last-child,
.we-grid-table td:last-child {
    padding-right: 0;
    text-align: right;
}

.we-grid-table .is-mal {
    color: #ff8a8f;
    font-weight: 700;
}

.we-grid-table .is-susp {
    color: #f2c14e;
    font-weight: 700;
}

.we-grid-table .is-ok {
    color: #4adea1;
    font-weight: 700;
}

.we-grid-table .is-shadow {
    color: #72d9ee;
    font-weight: 700;
}

.we-grid-table .is-off {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
}

/* closing strip: the engine's own verdict or response */
.we-finding-foot,
.we-preview-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.we-finding-foot span,
.we-preview-foot span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11.5px;
}

.windows-page .we-finding-foot b,
.windows-page .we-preview-foot b {
    flex-shrink: 0;
    color: #4adea1;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.windows-page .we-preview-foot b {
    color: #72d9ee;
}

/* explanation beside the card */
.windows-page .we-why h3 {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 19px;
    letter-spacing: -0.02em;
}

.we-why > p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.75;
}

.we-why ul {
    display: grid;
    gap: 11px;
}

.we-why li {
    position: relative;
    max-width: 560px;
    padding-left: 26px;
    color: var(--ink);
    font-size: 12.5px;
    line-height: 1.6;
}

.we-why li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--green);
    font-weight: 800;
}

/*===================05 · ROADMAP=====================*/
.we-roadmap-track {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    list-style: none;
}

.we-roadmap-track li {
    position: relative;
    padding: 30px 20px 26px;
    border-top: 2px solid var(--hair);
}

/* the marker that rides the track line */
.we-roadmap-track li::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    width: 12px;
    height: 12px;
    border: 2px solid #c9cdd8;
    border-radius: 50%;
    background: #f7f8f4;
}

.we-roadmap-track li.is-done {
    border-top-color: var(--green);
}

.we-roadmap-track li.is-done::before {
    border-color: var(--green);
    background: var(--green);
}

.we-roadmap-track li.is-now {
    border-top-color: var(--blue);
}

.we-roadmap-track li.is-now::before {
    border-color: var(--blue);
    background: #ffffff;
}

.windows-page .we-roadmap-track b {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.3;
}

.we-roadmap-track p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

/*===================06 · EARLY ACCESS=====================*/
.we-early-grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 64px;
}

.we-early-grid h2 {
    margin: 15px 0 18px;
}

.we-early-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.we-early-cards article {
    padding: 26px 24px 28px;
    border: 1px solid var(--hair);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(26, 38, 93, 0.05);
}

.windows-page .we-early-cards b {
    display: block;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hair);
    color: var(--ink);
    font-size: 15px;
}

.we-early-cards ul {
    display: grid;
    gap: 10px;
}

.we-early-cards li {
    position: relative;
    padding-left: 22px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.we-early-cards li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--green);
    font-weight: 800;
}

/*===================DYNAMIC LAYOUT=====================*/
@media (max-width: 1150px) {
    .we-hero-grid,
    .we-correlation,
    .we-early-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .we-coverage-grid,
    .we-steps,
    .we-roadmap-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    .we-section {
        padding: 66px 0;
    }

    .we-hero {
        padding: 34px 0 66px;
    }
}

@media (max-width: 620px) {
    .we-hero-grid,
    .we-correlation,
    .we-early-grid {
        gap: 38px;
    }

    .we-kicker-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .we-hero h1 {
        font-size: 34px;
    }

    .we-coverage-grid,
    .we-steps,
    .we-roadmap-track,
    .we-early-cards {
        grid-template-columns: 1fr;
    }

    /* ---- the roadmap turns on its side ----
       In one column the track line has to run down the list rather than sit
       across the top of each item, with every marker level with the status
       chip it belongs to. */
    .we-roadmap-track {
        gap: 0;
    }

    .we-roadmap-track li {
        padding: 0 0 30px 26px;
        border-top: 0;
        border-left: 2px solid var(--hair);
    }

    .we-roadmap-track li:last-child {
        padding-bottom: 0;
        border-left-color: transparent;
    }

    /* the chip is ~20px tall and the marker 12px, so 4px centres them */
    .we-roadmap-track li::before {
        top: 4px;
        left: -7px;
    }

    .we-roadmap-track li.is-done,
    .we-roadmap-track li.is-now {
        border-top-color: var(--hair);
    }

    .we-roadmap-track li.is-done {
        border-left-color: var(--green);
    }

    .we-roadmap-track li.is-now {
        border-left-color: var(--blue);
    }

    .we-preview {
        padding: 20px 20px 18px;
    }

    .we-finding-foot,
    .we-preview-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}


/*===================HEADER GAP=====================*/
/* One consistent distance between the sticky header and the first line of the
   page, matching Home. Appended last so it settles the several earlier rules
   that were each setting this differently. */
.we-hero {
    padding-top: 48px;
}

@media (max-width: 820px) {
    .we-hero {
        padding-top: 26px;
    }
}

@media (max-width: 620px) {
    /* .container picks up margin-top: 1rem here, which covers most of the gap */
    .we-hero {
        padding-top: 4px;
    }
}

/*===================ARGUS SENTINEL EDR CONSOLE REPLICA=====================*/
/* A faithful HTML rebuild of the WPF console (MainWindow.xaml and the six
   views it navigates). Its palette is the desktop app's, not the website's,
   so every token is scoped to .we-app. */
.we-app {
    --edr-dark: #050a13;
    --edr-med: #0e1624;
    --edr-light: #202d40;
    --edr-accent: #10a7c4;
    --edr-txt: #f1f5f9;
    --edr-txt2: #c8d4e2;
    --edr-muted: #7a8a9e;
    --edr-red: #ef4444;
    --edr-green: #22c55e;
    --edr-orange: #ffb74d;
    --edr-purple: #b388ff;

    margin-bottom: 46px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: var(--edr-dark);
    box-shadow: 0 30px 80px rgba(5, 10, 19, 0.45);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    overflow: hidden;
}

/*---------- custom title bar (WindowChrome, CaptionHeight 35) ----------*/
.we-app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding-left: 14px;
    background: var(--edr-med);
}

.windows-page .we-app-bar b {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--edr-txt2);
    font-size: 12px;
    font-weight: 600;
}

.we-app-shield {
    width: 12px;
    height: 15px;
    background: var(--edr-accent);
    clip-path: polygon(0 13%, 50% 0, 100% 13%, 100% 55%, 50% 100%, 0 55%);
}

.we-app-btns {
    display: flex;
    align-self: stretch;
}

.we-app-btns i {
    position: relative;
    width: 44px;
}

.we-app-btns i::before,
.we-app-btns i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--edr-txt2);
}

.we-app-btns .is-min::before {
    width: 10px;
    height: 1px;
    transform: translate(-50%, -50%);
}

.we-app-btns .is-max::before {
    width: 9px;
    height: 9px;
    border: 1px solid var(--edr-txt2);
    background: none;
    transform: translate(-50%, -50%);
}

.we-app-btns .is-close {
    background: #c8282d;
}

.we-app-btns .is-close::before,
.we-app-btns .is-close::after {
    width: 11px;
    height: 1px;
    background: #ffffff;
    transform: translate(-50%, -50%) rotate(45deg);
}

.we-app-btns .is-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/*---------- sidebar ----------*/
.we-app-body {
    display: grid;
    grid-template-columns: 216px 1fr;
}

.we-app-nav {
    display: flex;
    flex-direction: column;
    padding: 26px 11px 18px;
    border-right: 1px solid var(--edr-light);
    background: var(--edr-med);
}

.we-app-brand {
    margin-bottom: 26px;
    padding: 0 10px;
}

.windows-page .we-app-brand b {
    display: block;
    color: var(--edr-txt);
    font-size: 15px;
    font-weight: 800;
}

.we-app-brand small {
    display: block;
    margin-top: 4px;
    color: var(--edr-accent);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.we-app-nav button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 40px;
    margin-bottom: 5px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--edr-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.we-app-nav button i {
    font-size: 12px;
    font-style: normal;
    line-height: 1;
}

.we-app-nav button:hover {
    background: var(--edr-light);
    color: var(--edr-txt);
}

.we-app-nav button.is-active {
    background: var(--edr-accent);
    color: #050a13;
}

/* the settings tab is a label in this preview: it still lights up under the
   cursor, but there is no view behind it to open */
.we-app-nav button.is-inert {
    cursor: default;
}

.we-app-engine {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 12px;
    border: 1px solid var(--edr-light);
    border-radius: 10px;
    background: var(--edr-dark);
}

.we-app-engine .dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--edr-red);
}

.we-app-engine small {
    display: block;
    color: var(--edr-muted);
    font-size: 9px;
    font-weight: 700;
}

.windows-page .we-app-engine b {
    display: block;
    margin-top: 2px;
    color: var(--edr-txt2);
    font-size: 11.5px;
    font-weight: 500;
}

/*---------- content frame (MainFrame) ----------*/
.we-app-main {
    max-height: 600px;
    padding: 24px 22px;
    background: var(--edr-dark);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--edr-light) transparent;
}

.we-app-main::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.we-app-main::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: var(--edr-light);
}

.we-app-view > * + * {
    margin-top: 16px;
}

.we-app-head h3 {
    margin: 0;
    color: var(--edr-txt);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.we-app-head p {
    margin: 5px 0 0;
    color: var(--edr-muted);
    font-size: 11.5px;
    line-height: 1.6;
}

/*---------- engine ribbon ----------*/
.we-app-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.we-app-chips span {
    flex: 1 1 auto;
    padding: 9px 12px;
    border: 1px solid var(--edr-light);
    border-radius: 9px;
    background: var(--edr-med);
}

.we-app-chips small {
    display: block;
    color: var(--edr-txt2);
    font-size: 9.5px;
    font-weight: 600;
}

.windows-page .we-app-chips b {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
}

.we-app .is-accent {
    color: var(--edr-accent);
}

.we-app .is-green {
    color: var(--edr-green);
}

.we-app .is-orange {
    color: var(--edr-orange);
}

.we-app .is-red {
    color: var(--edr-red);
}

.we-app .is-purple {
    color: var(--edr-purple);
}

.we-app .is-muted {
    color: var(--edr-muted);
}

/*---------- metric cards ----------*/
.we-app-metrics {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 12px;
}

.we-app-metrics.is-three {
    grid-template-columns: 1fr 1fr 1.1fr;
}

.we-app-metric {
    padding: 15px 16px;
    border: 1px solid var(--edr-light);
    border-radius: 12px;
    background: var(--edr-med);
}

.we-app-metric small {
    display: block;
    color: var(--edr-muted);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.windows-page .we-app-metric b {
    display: block;
    margin-top: 7px;
    color: var(--edr-txt);
    font-size: 22px;
    font-weight: 800;
}

.we-app-metric em {
    display: block;
    margin-top: 4px;
    color: var(--edr-muted);
    font-size: 10.5px;
    font-style: normal;
}

.we-app-metric.is-danger {
    border-color: rgba(239, 68, 68, 0.7);
}

.we-app-metric.is-danger small {
    color: var(--edr-red);
}

.windows-page .we-app-metric.is-danger b {
    font-size: 27px;
}

/*---------- panels, charts, legends ----------*/
.we-app-panel {
    padding: 15px 16px;
    border: 1px solid var(--edr-light);
    border-radius: 12px;
    background: var(--edr-med);
}

.we-app-charts {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 12px;
}

.we-app-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.windows-page .we-app-panel-top b {
    color: var(--edr-txt);
    font-size: 12.5px;
    font-weight: 700;
}

.windows-page .we-app-panel-top b.is-red {
    color: var(--edr-red);
}

.windows-page .we-app-panel-top b.is-green {
    color: var(--edr-green);
}

.we-app-panel-top small {
    color: var(--edr-muted);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.we-app-panel-top i {
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
}

.we-app-legend {
    display: flex;
    align-items: center;
    color: var(--edr-txt2);
    font-size: 10px;
    white-space: nowrap;
}

.we-app-legend i {
    width: 8px;
    height: 8px;
    margin: 0 5px 0 12px;
    border-radius: 2px;
}

.we-app .k-accent {
    background: var(--edr-accent);
}

.we-app .k-red {
    background: var(--edr-red);
}

.we-app .k-orange {
    background: var(--edr-orange);
}

.we-app-spark {
    height: 96px;
}

.we-app-spark svg {
    display: block;
    width: 100%;
    height: 100%;
}

.we-app-pie {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 96px;
}

.we-app-pie .disc {
    flex: none;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: conic-gradient(var(--edr-accent) 0 62%, var(--edr-orange) 62% 88%, var(--edr-red) 88% 100%);
}

.we-app-pie ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.we-app-pie li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--edr-txt2);
    font-size: 10.5px;
}

.we-app-pie li i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

/* 30-day overlapping bar chart (LiveCharts CartesianChart) */
.we-app-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 132px;
    border-bottom: 1px solid var(--edr-light);
}

.we-app-bars span {
    position: relative;
    flex: 1;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--edr-accent);
}

.we-app-bars span i {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    border-radius: 2px 2px 0 0;
    background: var(--edr-red);
}

/*---------- ListView / GridView ----------*/
.we-app-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--edr-light) transparent;
}

.we-app-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.we-app-table th {
    padding: 0 14px 8px 0;
    border-bottom: 1px solid var(--edr-light);
    color: var(--edr-txt2);
    font-size: 10.5px;
    font-weight: 700;
    text-align: left;
}

.we-app-table td {
    padding: 7px 14px 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--edr-txt2);
    font-size: 11px;
}

.we-app-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.we-app .v-benign {
    color: var(--edr-green);
    font-weight: 600;
}

.we-app .v-susp {
    color: var(--edr-orange);
    font-weight: 600;
}

.we-app .v-mal {
    color: var(--edr-red);
    font-weight: 600;
}

.we-app .p {
    color: var(--edr-accent);
    text-decoration: underline;
    cursor: pointer;
}

.we-app .p:hover {
    color: #00e5ff;
}

/*---------- incident centre extras ----------*/
.we-app-split {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 12px;
}

.we-app-note {
    margin: -6px 0 12px;
    color: var(--edr-muted);
    font-size: 10.5px;
}

.we-app-paths {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.we-app-paths li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.we-app-paths .p {
    flex: 1;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.we-app-paths em {
    color: var(--edr-muted);
    font-size: 10px;
    font-style: normal;
}

.we-app-paths i {
    color: var(--edr-red);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.we-app-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.we-app-filters button {
    padding: 8px 13px;
    border: 1px solid #3a4658;
    border-radius: 3px;
    background: var(--edr-med);
    color: var(--edr-txt2);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.we-app-filters button.is-active {
    border-color: var(--edr-accent);
    background: var(--edr-light);
    color: var(--edr-txt);
    font-weight: 700;
}

/*---------- engine settings ----------*/
.windows-page .we-set-h {
    display: block;
    margin-bottom: 12px;
    color: var(--edr-accent);
    font-size: 13px;
    font-weight: 700;
}

.we-set-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.we-set-btn {
    padding: 6px 12px;
    border: 1px solid #b9b9b9;
    border-radius: 3px;
    background: #dddddd;
    color: #141414;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.we-set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.we-set-row + .we-set-row {
    margin-top: 12px;
}

.windows-page .we-set-row b {
    display: block;
    color: var(--edr-txt);
    font-size: 11.5px;
    font-weight: 600;
}

.we-set-row p {
    margin: 4px 0 0;
    color: var(--edr-muted);
    font-size: 10px;
    line-height: 1.6;
}

.we-set hr {
    height: 1px;
    margin: 14px 0;
    border: 0;
    background: var(--edr-light);
}

.we-toggle {
    position: relative;
    flex: none;
    width: 36px;
    height: 18px;
    border-radius: 9px;
    background: var(--edr-light);
}

.we-toggle::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #8e95a5;
    transition: left 0.18s ease, background 0.18s ease;
}

.we-toggle.is-on {
    background: var(--edr-green);
}

.we-toggle.is-on::after {
    left: 21px;
    background: #ffffff;
}

.we-set-slider + .we-set-slider {
    margin-top: 18px;
}

.we-set-slider > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.windows-page .we-set-slider b {
    color: var(--edr-txt);
    font-size: 11.5px;
    font-weight: 600;
}

.we-set-slider i {
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.we-range {
    position: relative;
    display: block;
    height: 6px;
    margin-top: 10px;
    border-radius: 3px;
    background: var(--edr-light);
}

.we-range span {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--edr-accent);
}

.we-range span::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -7px;
    width: 13px;
    height: 13px;
    border: 2px solid var(--edr-dark);
    border-radius: 50%;
    background: var(--edr-accent);
}

.windows-page .we-set-label {
    display: block;
    margin: 16px 0 6px;
    color: var(--edr-txt);
    font-size: 11.5px;
    font-weight: 600;
}

.we-set-desc {
    margin: 0 0 9px;
    color: var(--edr-muted);
    font-size: 10px;
    line-height: 1.6;
}

.we-set-field {
    display: flex;
    gap: 10px;
}

.we-input {
    flex: 1;
    overflow: hidden;
    padding: 8px 10px;
    border: 1px solid var(--edr-light);
    border-radius: 2px;
    background: var(--edr-dark);
    color: var(--edr-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.we-set-add {
    padding: 8px 14px;
    border: 0;
    border-radius: 2px;
    background: var(--edr-accent);
    color: #02121a;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.we-set-list {
    display: grid;
    gap: 8px;
    max-height: 96px;
    margin: 10px 0 0;
    padding: 9px 11px;
    border: 1px solid var(--edr-light);
    border-radius: 2px;
    background: var(--edr-dark);
    list-style: none;
    overflow: auto;
}

.we-set-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: hidden;
    color: var(--edr-txt);
    font-size: 11px;
    white-space: nowrap;
}

.we-set-list i {
    color: var(--edr-red);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    cursor: pointer;
}

.we-select {
    position: relative;
    display: block;
    max-width: 320px;
    padding: 9px 30px 9px 12px;
    border: 1px solid var(--edr-accent);
    border-radius: 2px;
    background: var(--edr-light);
    color: var(--edr-txt);
    font-size: 11.5px;
}

.we-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -2px;
    border-top: 5px solid var(--edr-txt2);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/*---------- console replica, small screens ----------*/
@media (max-width: 900px) {
    .we-app-body {
        grid-template-columns: 1fr;
    }

    .we-app-nav {
        flex-direction: row;
        padding: 10px;
        border-right: 0;
        border-bottom: 1px solid var(--edr-light);
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .we-app-brand,
    .we-app-engine {
        display: none;
    }

    .we-app-nav button {
        width: auto;
        margin: 0 6px 0 0;
        white-space: nowrap;
    }

    .we-app-main {
        max-height: 520px;
        padding: 16px 14px;
    }

    .we-app-metrics,
    .we-app-metrics.is-three,
    .we-app-charts,
    .we-app-split {
        grid-template-columns: 1fr;
    }
}