/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Rules for what MainLayout renders itself: the page colour, the footer and the error bar.
   The cockpit header lives in wwwroot/app.css. This file used to carry the Blazor template's
   .sidebar / .top-row / .page / .navbar-toggler rules, none of which has matched an element
   since the header was rebuilt. */

/* The body gradient belongs to the header; the content and the footer sit on the plain page colour. */
.ed-main[b-kgxek3moza],
.credits[b-kgxek3moza] {
    background-color: var(--ed-bg-body);
}

/* --- Footer --- */
/* The footer owns the gap above its divider (padding-top, painted by the rule above) rather
   than a margin: it sits outside <main>, so a margin would leave a strip of the body gradient
   showing as a band between the page and the divider. */
.credits[b-kgxek3moza] {
    padding: var(--space-7) 0 0;
    text-align: center;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--ed-text-muted);
}

.credits-inner[b-kgxek3moza] {
    padding: var(--space-5) var(--space-4);
    border-top: 1px solid rgb(var(--ed-accent-rgb) / 0.18);
}

/* Centred text needs a short measure: unbounded, each paragraph ran 100-135 characters wide. */
.credits p[b-kgxek3moza] {
    max-width: 75ch;
    margin: 0 auto var(--space-2);
}

.credits p:last-child[b-kgxek3moza] {
    margin-bottom: 0;
}

.credits a[b-kgxek3moza] {
    color: var(--ed-orange);
    border-bottom: 1px dotted rgb(var(--ed-accent-rgb) / 0.4);
    transition: border-color 0.15s ease;
}

.credits a:hover[b-kgxek3moza] {
    border-bottom-color: var(--ed-orange);
}

@media (max-width: 45em) {
    /* The feedback tab is fixed to the bottom-right corner; keep the last line clear of it. */
    .credits-inner[b-kgxek3moza] {
        padding-bottom: calc(var(--tap-min) + var(--space-5));
    }
}

/* --- Unhandled-error bar --- */
/* blazor.web.js sets display:block on #blazor-error-ui when the circuit fails and wires up
   .reload and .dismiss by class. The layout of the bar is therefore on the inner wrapper,
   because an inline display:block would beat any display set here. */
#blazor-error-ui[b-kgxek3moza] {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: var(--z-error-bar);
    padding: var(--space-2) var(--space-4);
    background: var(--ed-red-solid);
    color: rgb(var(--ed-white-rgb));
    box-shadow: 0 -1px 2px rgb(var(--ed-black-rgb) / 0.5);
}

.error-ui-inner[b-kgxek3moza] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
}

.error-ui-text[b-kgxek3moza] {
    flex: 1 1 10rem;
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
}

#blazor-error-ui .reload[b-kgxek3moza] {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min-fine);
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

#blazor-error-ui .reload:hover[b-kgxek3moza] {
    color: inherit;
    text-shadow: none;
}

#blazor-error-ui .dismiss[b-kgxek3moza] {
    min-width: var(--tap-min-fine);
    padding: 0 var(--space-2);
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
}

#blazor-error-ui .dismiss:hover[b-kgxek3moza] {
    background: rgb(var(--ed-white-rgb) / 0.15);
}

/* The default ring is orange, which has no contrast against the red bar. */
#blazor-error-ui :focus-visible[b-kgxek3moza] {
    outline-color: rgb(var(--ed-white-rgb));
}

@media (pointer: coarse) {
    #blazor-error-ui .reload[b-kgxek3moza],
    #blazor-error-ui .dismiss[b-kgxek3moza] {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
        justify-content: center;
    }
}
/* /Components/Pages/PdPagination.razor.rz.scp.css */
/* Scoped here so the styles travel with the component (Blazor CSS isolation scopes only the owning component's elements). */

.pd-pagination[b-ynojjsvw2l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid rgb(var(--ed-white-rgb) / 0.06);
    gap: var(--space-2) var(--space-3);
}

.pd-pagination-range[b-ynojjsvw2l] {
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-sm);
    font-family: var(--ed-font-mono);
}

.pd-pagination-controls[b-ynojjsvw2l] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tp-btn[b-ynojjsvw2l] {
    background: transparent;
    border: 1px solid var(--ed-border);
    color: var(--ed-text-orange);
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--fs-md);
    line-height: 1;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tp-btn:hover:not(:disabled)[b-ynojjsvw2l] {
    background: rgb(var(--ed-accent-rgb) / 0.15);
    border-color: var(--ed-orange);
    color: var(--ed-text);
}
.tp-btn:disabled[b-ynojjsvw2l] {
    opacity: 0.3;
    cursor: default;
}
/* The global rule floors height on touch; the width needs the same floor. */
@media (pointer: coarse) {
    .tp-btn[b-ynojjsvw2l] {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
    }
}

.tp-info[b-ynojjsvw2l] {
    font-size: var(--fs-xs);
    color: var(--ed-text-muted);
    font-family: var(--ed-font-mono);
    min-width: 50px;
    text-align: center;
}
/* /Components/Pages/SystemDetail.razor.rz.scp.css */
/* Dossier page shell, identity card, stat tiles and body grid. The hero card (.sd-hero) is styled in app.css.
   Inline variables from the markup: --state-color / --state-text on .sdx-state-badge, --v-color on .sdx-verdict,
   --accent on the Control pts and Net .sdx-tile. */

.sdx-page[b-3x1nnvkknr] {
    width: 100%;
    background: var(--ed-bg-body);
    color: var(--ed-text);
    font-family: var(--ed-font-sans);
}

.sdx-content[b-3x1nnvkknr] { padding: var(--space-4) var(--page-gutter) var(--space-7); }

/* --- Identity card --- */
.sdx-band[b-3x1nnvkknr] {
    position: relative;
    overflow: hidden;
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
    border: 1px solid rgb(var(--ed-accent-rgb) / 0.25);
    background: linear-gradient(90deg, rgb(var(--ed-accent-rgb) / 0.07), rgb(var(--ed-accent-rgb) / 0) 70%);
}
.sdx-watermark[b-3x1nnvkknr] {
    position: absolute;
    right: -30px;
    top: -60px;
    width: 260px;
    height: 260px;
    object-fit: contain;
    opacity: 0.05;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.sdx-id-row[b-3x1nnvkknr] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
}
.sdx-id-main[b-3x1nnvkknr] { min-width: 0; flex: 1; }

.sdx-back[b-3x1nnvkknr] {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min-fine);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-2xl);
    text-transform: uppercase;
    color: var(--ed-text-muted);
    text-decoration: none;
}
.sdx-back:hover[b-3x1nnvkknr] { color: var(--ed-text-orange); }

.sdx-name-line[b-3x1nnvkknr] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.sdx-name[b-3x1nnvkknr] {
    margin: 0;
    min-width: 0;
    font-size: var(--h1-page);
    font-weight: 700;
    letter-spacing: var(--ls-sm);
    text-transform: uppercase;
    line-height: var(--lh-tight);
    overflow-wrap: anywhere;
    color: var(--ed-text);
}
.sdx-state-badge[b-3x1nnvkknr] {
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-xl);
    text-transform: uppercase;
    padding: var(--space-1) var(--space-2);
    color: var(--state-text, var(--state-color));
    border: 1px solid var(--state-color);
}
.sdx-power-chip[b-3x1nnvkknr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
}

.sdx-verdict-row[b-3x1nnvkknr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-2);
    font-size: var(--fs-xs);
}
.sdx-verdict[b-3x1nnvkknr] {
    letter-spacing: var(--ls-2xl);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--v-color);
}
.sdx-sep[b-3x1nnvkknr] { color: var(--ed-neutral); }
.sdx-mono-sub[b-3x1nnvkknr] { color: var(--ed-text-muted); font-family: var(--ed-font-mono); }
.sdx-dist[b-3x1nnvkknr] { color: var(--ed-orange); }

/* --- Context chip row --- */
.sdx-context[b-3x1nnvkknr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.sdx-chip[b-3x1nnvkknr] {
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-lg);
    text-transform: uppercase;
    padding: var(--space-0) var(--space-2);
    color: var(--ed-text-secondary);
    background: rgb(var(--ed-white-rgb) / 0.05);
}
.sdx-chip-flag[b-3x1nnvkknr] {
    background: transparent;
    border: 1px solid var(--flag, var(--ed-orange));
    color: var(--flag, var(--ed-orange));
}
.sdx-chip-flag.is-hazres[b-3x1nnvkknr] { --flag: var(--ed-state-contested-text); }
.sdx-chip-flag.is-installation[b-3x1nnvkknr] { --flag: var(--ed-state-fortified); }
.sdx-chip-flag.is-beacon[b-3x1nnvkknr] { --flag: var(--ed-yellow); }
.sdx-context-label[b-3x1nnvkknr] { font-size: var(--fs-xs); color: var(--ed-text-muted); }
.sdx-context-faction[b-3x1nnvkknr] { font-size: var(--fs-xs); color: var(--ed-text); }
.sdx-context-state[b-3x1nnvkknr] {
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-lg);
    text-transform: uppercase;
    padding: var(--space-0) var(--space-2);
    color: var(--ed-yellow);
    background: rgb(var(--ed-yellow-rgb) / 0.12);
}

/* --- Telemetry column --- */
.sdx-telemetry[b-3x1nnvkknr] {
    min-width: 190px;
    border-left: 1px solid var(--ed-border-subtle);
    padding-left: var(--space-5);
}
.sdx-telemetry-head[b-3x1nnvkknr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.sdx-live-dot[b-3x1nnvkknr] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ed-green);
    box-shadow: 0 0 6px var(--ed-green);
    animation: sdx-blink-b-3x1nnvkknr 2s infinite;
}
/* Only the fresh state pulses, so the animation means "data is arriving" rather than "page is loaded". */
.sdx-live-quiet[b-3x1nnvkknr] {
    background: var(--ed-yellow);
    box-shadow: 0 0 6px rgb(var(--ed-yellow-rgb) / 0.45);
    animation: none;
}
.sdx-live-dim[b-3x1nnvkknr] {
    background: var(--ed-text-muted);
    box-shadow: none;
    animation: none;
}
.sdx-telemetry-label[b-3x1nnvkknr] {
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-xl);
    text-transform: uppercase;
    color: var(--ed-text-muted);
}
.sdx-telemetry-row[b-3x1nnvkknr] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--fs-xs);
    font-family: var(--ed-font-mono);
    color: var(--ed-text-muted);
    margin-bottom: var(--space-1);
}
.sdx-telemetry-row:last-child[b-3x1nnvkknr] { margin-bottom: 0; }
.sdx-telemetry-value[b-3x1nnvkknr] { color: var(--ed-text); }

/* --- Stat tiles --- */
.sdx-tiles[b-3x1nnvkknr] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    position: relative;
}
.sdx-tile[b-3x1nnvkknr] {
    position: relative;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    background: rgb(var(--ed-body-rgb) / 0.5);
    border: 1px solid var(--ed-border-subtle);
}
/* The 1px accent line is a pseudo-element: a description list may hold only dt/dd inside its groups. */
.sdx-tile[b-3x1nnvkknr]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.6;
}
.sdx-tile.is-green[b-3x1nnvkknr] { --accent: var(--ed-green); }
.sdx-tile.is-red[b-3x1nnvkknr] { --accent: var(--ed-red-text); }
.sdx-tile.is-orange[b-3x1nnvkknr] { --accent: var(--ed-orange); }
.sdx-tile.is-plain[b-3x1nnvkknr] { --accent: var(--ed-text); }
.sdx-tile-label[b-3x1nnvkknr] {
    font-size: var(--fs-2xs);
    color: var(--ed-text-muted);
    letter-spacing: var(--ls-xl);
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}
.sdx-tile-value[b-3x1nnvkknr] {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 300;
    line-height: 1;
    font-family: var(--ed-font-mono);
    color: var(--accent);
}
.sdx-tile-sub[b-3x1nnvkknr] {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    overflow-wrap: anywhere;
    color: var(--ed-text-muted);
    font-family: var(--ed-font-mono);
}

.sbh-screen[b-3x1nnvkknr] {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min-fine);
}

/* --- Body grid: left column (hero, tabs), right rail --- */
.sdx-body[b-3x1nnvkknr] {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(320px, 1fr);
    gap: var(--space-4);
    align-items: start;
}
.sdx-left[b-3x1nnvkknr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}
.sdx-rail[b-3x1nnvkknr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

@media (pointer: coarse) {
    .sdx-back[b-3x1nnvkknr], .sbh-screen[b-3x1nnvkknr] { min-height: var(--tap-min); }
}

/* --- Responsive --- */
@media (max-width: 68.75em) {
    .sdx-body[b-3x1nnvkknr] { grid-template-columns: minmax(0, 1fr); }
    .sdx-tiles[b-3x1nnvkknr] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 50em) {
    .sdx-id-row[b-3x1nnvkknr] { flex-direction: column; gap: var(--space-4); }
    .sdx-telemetry[b-3x1nnvkknr] { border-left: none; padding-left: 0; }
    .sdx-tiles[b-3x1nnvkknr] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Large text: one tile per row, where two would put UNDERMINING over NET. */
@media (max-width: 18em) {
    .sdx-tiles[b-3x1nnvkknr] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 45em) {
    .sdx-content[b-3x1nnvkknr] { padding-block: var(--space-3) var(--space-6); }
    .sdx-band[b-3x1nnvkknr] { padding: var(--space-3) var(--space-4); }
    /* The dots only divide items that share a line; wrapped, they dangle at line ends. */
    .sdx-sep[b-3x1nnvkknr] { display: none; }
}

@keyframes sdx-blink-b-3x1nnvkknr {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}