/* Triple A house style, applied in place to CIA's custom classes.
   Reference: AAA-Blazor-Style-Conventions.md. This app does not use the Bootstrap/AAA.Blazor/SASS
   skeleton, so the tokens and the "three knobs" (§5) are reproduced here as plain CSS instead of
   compiled from Figma SCSS. Deliberate deviations from the doc carry a comment saying why. */

:root {
    /* Palette — §4.1 (ported verbatim from the Figma tokens). */
    --cia-navy: #00365e;          /* sidebar background */
    --cia-navy-700: #002a4a;      /* panels on dark surfaces */
    --cia-action: #1e6dc9;        /* primary action / links */
    --cia-action-700: #1856a3;    /* hover / pressed */
    --cia-positive: #16a34a;      /* positive / down-trend / checks */
    --cia-warning: #f59e0b;
    --cia-danger: #fb2c36;        /* negative / up-trend */
    --cia-bg: #f8f9fb;            /* page background */
    --cia-surface: #ffffff;       /* card surface */
    --cia-ink: #0f172a;           /* primary text */
    --cia-muted: #64748b;         /* secondary text */
    --cia-divider: #e2e8f0;       /* borders */
    --cia-muted-soft: #cbd5e1;    /* a filled shape that should read as "nothing to look at here" */
    --cia-table-head: #f8fafc;
    --cia-row-divider: #f1f5f9;

    /* $success is a status semantic here (down-trend green, presence checks), so it stays green and
       is NOT collapsed into the action blue — see §4.2. */
    --cia-up: var(--cia-danger);   /* cost increased → bad */
    --cia-down: var(--cia-positive); /* cost decreased → good */

    /* Sidebar-local tokens — §6.1. */
    --sb-hover: rgba(255, 255, 255, .08);
    --sb-active: rgba(255, 255, 255, .15);
    --sb-text-dim: rgba(255, 255, 255, .72);
}

* { box-sizing: border-box; }

/* Knob 1 — type scale (§5.1). The whole ramp below is in rem, so this one value scales body text,
   headings and controls together. Never scale a single element instead. */
html { font-size: 17px; }

html, body {
    margin: 0;
    /* Inter is linked in index.html; degrades to Segoe UI (§4.4). */
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--cia-bg);
    color: var(--cia-ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Type ramp — §4.3, in rem. */
h1, .h1, .cia-page-title { font-size: 1.5rem; }
h2, .h2 { font-size: 1.25rem; }
h3, .h3 { font-size: 1.1875rem; }
h4, .h4 { font-size: .9375rem; }
h5, .h5, h6, .h6 { font-size: .8125rem; }
h1, h2, h3, h4, h5, h6, .cia-page-title { font-weight: 600; line-height: 1.5; }

.cia-loading { padding: 2rem; color: var(--cia-muted); }

.cia-cell-load { color: var(--cia-muted); animation: cia-pulse 1.1s ease-in-out infinite; }
@keyframes cia-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ── Layout & navigation ─────────────────────────────────────────────── §6 */

/* App shell is exactly one viewport tall; the content pane scrolls on its own (see .cia-content),
   so the page scrollbar sits beside the content — below the top bar — not up the full window. */
.cia-layout { display: flex; height: 100vh; overflow: hidden; }

/* Knob 3 note: the sidebar sizes itself in px so the type knob (§5.1) never distorts navigation.
   Kept as a flex column rather than fixed + margin-left (§6.1) because the shell is already a flex
   row; the visual result is identical. */
.cia-sidebar {
    width: 264px;
    flex: 0 0 264px;
    background: var(--cia-navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 0 12px 12px;
    /* Pin the full-height sidebar; only the project list inside scrolls (see .cia-nav__projects),
       so the logo, business-line filter, Overview link and version footer stay put. */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.cia-brand {
    flex: 0 0 auto;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 6px;
    border-bottom: 1px solid var(--sb-hover);
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
/* Triple A house logo (§9). Drawn for dark backgrounds; a client theme can claim the slot by
   overriding --brand-logo-image. Logo box 180×64, background-size: contain (§6.1). */
.cia-brand__logo {
    flex: 0 0 auto;
    width: 180px; height: 64px;
    background-image: var(--brand-logo-image, url("../assets/int/logo.svg"));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}
.cia-brand__sub { display: block; font-size: 12px; color: var(--sb-text-dim); margin-top: 2px; }

.cia-nav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
/* Only the project links scroll; the filter, Overview and section label above stay fixed. */
.cia-nav__projects {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
    /* Slim, subtle scrollbar that suits the dark sidebar (Firefox). */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
/* WebKit/Chromium: thin overlay-style thumb that only stands out on hover. */
.cia-nav__projects::-webkit-scrollbar { width: 8px; }
.cia-nav__projects::-webkit-scrollbar-track { background: transparent; }
.cia-nav__projects::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.cia-nav__projects:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.4); background-clip: padding-box; }
.cia-nav__link {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 11px 12px;
    font-size: 16px;
    border-radius: 8px;
    color: var(--sb-text-dim);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Fixed-width star slot before a nav project name, so names align whether or not a star is present. */
.cia-nav__star { flex: 0 0 15px; display: inline-flex; align-items: center; justify-content: center; margin-right: 5px; }
/* Notification badges (info / warning / error) shown after a project name and on panel titles. */
.cia-notif { vertical-align: -2px; margin-left: 5px; flex: 0 0 auto; }
.cia-notif--info { color: var(--cia-action); }
.cia-notif--warn { color: var(--cia-warning); }
.cia-notif--error { color: var(--cia-danger); }
/* On the dark sidebar the info blue is lifted so it reads against navy. */
.cia-nav__link .cia-notif--info { color: #6db3ff; }
/* A clickable badge (nav + Overview) that jumps to its notice. */
.cia-notif-link { cursor: pointer; display: inline-flex; align-items: center; }
/* Wraps each icon (+ optional count) so several severities sit side by side without overlapping. */
.cia-notif-wrap { display: inline-flex; align-items: center; }
.cia-notif__count { font-size: .7rem; font-weight: 600; line-height: 1; margin-left: 1px; }
/* Zero-height scroll targets placed before each section; leave a little gap above when jumped to. */
.cia-anchor { display: block; height: 0; }
[id^="notif-"] { scroll-margin-top: 16px; }

.cia-nav__link:hover { background: var(--sb-hover); color: #fff; }
.cia-nav__link.active { background: var(--sb-active); color: #fff; }
.cia-nav__section {
    margin: 18px 0 4px; padding: 0 12px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-text-dim);
}

.cia-nav__filter { margin: 0 0 18px; padding: 0 12px; display: flex; flex-direction: column; gap: 4px; }
.cia-nav__filter-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-text-dim); }
.cia-nav__filter .cia-period__select { width: 100%; }
.cia-nav__empty { padding: 6px 12px; font-size: 13px; color: var(--sb-text-dim); font-style: italic; }

.cia-version {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--sb-hover);
    font-size: 12px;
    color: var(--sb-text-dim);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}
.cia-version__sep { opacity: .5; }
.cia-version--drift { color: var(--cia-warning); font-weight: 600; }

.cia-main { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.cia-topbar {
    flex: 0 0 auto; z-index: 20;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 32px; background: var(--cia-surface); border-bottom: 1px solid var(--cia-divider);
}
/* Right cluster of the top bar: the Audit logs link + the user/login box. */
.cia-topbar__right { display: flex; align-items: center; gap: 16px; }
.cia-topbar__link {
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    font-size: .82rem; color: var(--cia-action); padding: 6px 12px; border-radius: 6px;
    border: 1px solid var(--cia-divider); white-space: nowrap;
}
.cia-topbar__link:hover { background: rgba(0, 0, 0, .04); }
.cia-topbar__link.active { background: var(--cia-action); color: #fff; border-color: var(--cia-action); }

/* Project filters on the left of the top bar (business line + optional "my projects" toggle). */
.cia-topfilters { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cia-topfilter { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--cia-muted); }
.cia-topfilter--toggle { cursor: pointer; }

/* Sliding on/off switch (checkbox visually hidden; the track + knob are the control). */
.cia-switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 40px; height: 22px; }
.cia-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.cia-switch__track {
    position: absolute; inset: 0; border-radius: 999px; background: var(--cia-divider);
    transition: background .15s ease;
}
.cia-switch__track::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}
.cia-switch input:checked + .cia-switch__track { background: var(--cia-action); }
.cia-switch input:checked + .cia-switch__track::after { transform: translateX(18px); }
.cia-switch input:focus-visible + .cia-switch__track { outline: 2px solid var(--cia-action); outline-offset: 2px; }
/* Knob 2 — page padding in px (§5.2). The content pane is the scroll container, so its scrollbar
   sits below the top bar rather than running the full height of the window. */
.cia-content {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 36px 32px 48px;
    /* Slim, subtle scrollbar matching the sidebar's, tuned for the light background (Firefox). */
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.28) transparent;
}
/* WebKit/Chromium: thin rounded thumb that brightens on hover. */
.cia-content::-webkit-scrollbar { width: 10px; height: 10px; }
.cia-content::-webkit-scrollbar-track { background: transparent; }
.cia-content::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.22);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.cia-content::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.4); background-clip: padding-box; }

/* ── Page vocabulary ─────────────────────────────────────────────────── §7 */

.cia-page-title { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
/* "My project" star — a project the signed-in user is involved in. */
.cia-mystar { flex: none; vertical-align: -3px; }
/* Star column in the Overview grid: narrow, centred, first. */
.cia-grid__star { width: 1%; white-space: nowrap; text-align: center; }
/* "My projects" toggle drawn as a star: filled when on, outline when off. */
.cia-startoggle { cursor: pointer; }
.cia-startoggle__input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.cia-startoggle__star { flex: none; }
.cia-startoggle:hover .cia-startoggle__star path { stroke: #b8860b; }
.cia-startoggle__input:focus-visible + .cia-startoggle__star { outline: 2px solid var(--cia-action); outline-offset: 2px; border-radius: 2px; }
.cia-page-lead { color: var(--cia-muted); margin-top: 0; margin-bottom: 24px; }
.cia-projects-refresh { margin-top: 8px; }

.cia-stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 24px 0 16px; }
.stat-card {
    background: var(--cia-surface); border: 1px solid var(--cia-divider);
    border-radius: .75rem; padding: 16px 20px; min-width: 180px;
}
.stat-card__label { color: var(--cia-muted); font-size: .8125rem; }
.stat-card__value { font-size: 1.5rem; font-weight: 600; margin-top: 4px; }
.stat-card__delta.is-up { color: var(--cia-up); }
.stat-card__delta.is-down { color: var(--cia-down); }
.stat-card__note { color: var(--cia-muted); font-size: .75rem; margin-top: 4px; }

.cia-card {
    background: var(--cia-surface); border: 1px solid var(--cia-divider);
    border-radius: .75rem; padding: 20px; margin-top: 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.cia-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cia-card__head h2 { margin: 0; }
.cia-card__title { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cia-source {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cia-muted);
    background: var(--cia-row-divider); border: 1px solid var(--cia-divider); border-radius: 999rem; padding: 2px 9px;
}

.cia-tenancyrow { margin: 2px 0 12px; display: inline-flex; align-items: center; gap: 10px; }
/* App-registration + enterprise-application links stacked one per line, with the tenant pill below. */
.cia-applinks { margin: 2px 0 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Client-connection secret/certificate status cell: icon + expiry text on one line, right-aligned.
   Scoped to td/th so it beats the .cia-matrix td centre-alignment. */
.cia-matrix th.cia-matrix__secret, .cia-matrix td.cia-matrix__secret { text-align: right; white-space: nowrap; }
.cia-matrix__secret .cia-notif { margin-left: 0; margin-right: 4px; }

/* Deep link to an Azure portal resource (e.g. an app registration). */
.cia-extlink {
    display: inline-flex; align-items: center; gap: 4px; font-size: .82rem;
    color: var(--cia-action); text-decoration: none; font-weight: 500;
}
.cia-extlink:hover { color: var(--cia-action-700); text-decoration: underline; }
.cia-extlink__icon { flex: 0 0 auto; opacity: .8; }

/* Resource-groups column (last) in the environments matrix. */
.cia-matrix__rgcol { text-align: left; white-space: nowrap; padding-left: 20px; }
.cia-matrix__rgs { display: flex; flex-direction: column; gap: 2px; }
.cia-matrix__rgs .cia-extlink { font-size: .75rem; font-weight: 400; }

.cia-asof { color: var(--cia-muted); font-size: .82rem; display: inline-flex; align-items: baseline; gap: 8px; }
.cia-linkbtn {
    background: none; border: none; padding: 0; font: inherit; font-size: .82rem;
    color: var(--cia-action); cursor: pointer; text-decoration: underline;
}
.cia-linkbtn:hover { color: var(--cia-action-700); }
.cia-linkbtn:disabled { color: var(--cia-muted); cursor: default; text-decoration: none; }

/* ── Filters / period selector ───────────────────────────────────────── */

.cia-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0 0 8px; }
.cia-businessline { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.cia-businessline__label { color: var(--cia-muted); }
.cia-businessline__value { font-weight: 600; }
/* Owner cell can hold up to three combos, laid out on one row (wrapping only if space is tight). */
.cia-owners { display: flex; flex-flow: row wrap; align-items: center; gap: 6px 10px; }

/* Per-project cost budget editor (warning + error rows), shown beside the cost total tile. */
.cia-budgetbox { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.cia-budgetbox__label { color: var(--cia-muted); font-size: .9rem; font-weight: 600; }
.cia-budget { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cia-budget__row { display: inline-flex; align-items: center; gap: 8px; }
.cia-budget__rowlabel { width: 176px; color: var(--cia-muted); font-size: .85rem; white-space: nowrap; }
.cia-budget__input { width: 9ch; }
/* Read-only value shown to non-admins in the same slot as the admin input. */
.cia-budget__value { width: 9ch; font-weight: 500; }
.cia-budget__cur { min-width: 2.5em; }
/* No spinner arrows — budget values are typed in, not stepped. */
.cia-budget__input::-webkit-outer-spin-button,
.cia-budget__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cia-budget__input { -moz-appearance: textfield; appearance: textfield; }
.cia-ownerrow { display: flex; align-items: center; gap: 6px; }
.cia-iconbtn {
    border: 1px solid var(--cia-divider); background: var(--cia-surface); color: var(--cia-muted);
    width: 26px; height: 26px; border-radius: 6px; cursor: pointer; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.cia-iconbtn:hover { background: var(--cia-bg); color: var(--cia-ink); }
.cia-iconbtn:disabled { opacity: .5; cursor: default; }

.cia-filters { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.cia-filter { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--cia-muted); }

/* One tab per client/environment, replacing the scope combobox (with per-tab notification icons). */
.cia-scopetabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--cia-divider); }
.cia-tab {
    display: inline-flex; align-items: center;
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 8px 12px; margin-bottom: -1px; font: inherit; font-size: .9rem;
    color: var(--cia-muted); cursor: pointer; white-space: nowrap;
}
.cia-tab:hover { color: var(--cia-ink); }
.cia-tab.is-active { color: var(--cia-ink); font-weight: 600; border-bottom-color: var(--cia-action); }
/* Tab panel: the Add-user action sits just above the grid, scoped to the active tab. */
.cia-scopepanel { padding-top: 16px; }
/* Row holding "Add user" and, when it's disabled, the reason beside it. */
.cia-scopeactions { margin-bottom: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.cia-period { display: inline-flex; align-items: center; gap: 6px; }
.cia-period__select, .cia-period__date {
    background: var(--cia-surface); color: var(--cia-ink);
    border: 1px solid var(--cia-divider); border-radius: .5rem;
    padding: 4px 8px; font-size: .82rem;
}
.cia-period__select:focus, .cia-period__date:focus {
    outline: none; border-color: var(--cia-action); box-shadow: 0 0 0 2px rgba(30, 109, 201, .15);
}
.cia-period__dash { color: var(--cia-muted); }

/* ── Tables ──────────────────────────────────────────────────────────── §8 */

/* This is a desktop dashboard (not a tablet), and rows are not full-row tap targets — they carry
   inline links instead. So both grids and matrices use the compact "read" row height (~46px,
   §8.1); the 70px touch rows are deliberately not applied here. */
.cia-grid { width: 100%; border-collapse: collapse; font-size: 1rem; margin-bottom: 48px; }
.cia-grid th, .cia-grid td { padding: 10px 14px; border-bottom: 1px solid var(--cia-row-divider); vertical-align: middle; }
.cia-grid thead th {
    background: var(--cia-table-head);
    color: var(--cia-muted); font-weight: 600; font-size: .8125rem;
    text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; text-align: left;
}
.cia-grid thead th button { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; }
/* Keep the numeric column's header right-aligned like its cells. */
.cia-grid thead th.cia-num, .cia-grid thead th.cia-num button { text-align: right; }
.cia-grid tbody td { font-variant-numeric: tabular-nums; }
.cia-grid tbody tr { transition: background .1s ease; }
.cia-grid tbody tr:hover { background: var(--cia-row-divider); }
.cia-grid tbody tr:last-child td { border-bottom: none; }
.cia-grid a { color: var(--cia-action); text-decoration: none; font-weight: 500; }
.cia-grid a:hover { text-decoration: underline; }
/* width:1% + nowrap shrinks numeric columns to their content; the first column absorbs the rest. */
.cia-grid .cia-num { text-align: right; white-space: nowrap; width: 1%; }
/* Keep a cell's content on one line so long values don't wrap and inflate row height. */
.cia-grid .cia-grid__nowrap { white-space: nowrap; }

/* A table of unbounded strings will happily grow past its card, pushing the right-hand columns off
   screen — Azure DevOps project names like "GenericSolvencyCapitalRequirementsTooling" did exactly
   that to Cost and Environments. Two guards: truncate the one column whose content has no natural
   limit, and let the card scroll rather than overflow if some future column defeats that anyway. */
.cia-card { overflow-x: auto; }
.cia-grid__truncate { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The cell is a flex link (picture + name + external-link mark), so the *name* is what must shrink;
   the picture and the mark keep their size. */
.cia-rowinner .cia-grid__truncate { display: inline-block; vertical-align: middle; }

/* Overview: make the whole row a link to the project via a stretched anchor overlay. The
   project-name link's ::after covers the (relatively-positioned) row, so a click anywhere navigates.
   Notification icons / the self-marker are lifted above the overlay so their tooltips still work. */
.cia-grid--rows tbody tr { position: relative; }
.cia-grid--rows tbody tr:hover { cursor: pointer; }
.cia-rowlink::after { content: ""; position: absolute; inset: 0; }
.cia-grid--rows .cia-notif, .cia-grid--rows .cia-notif-link, .cia-grid--rows .cia-selfpill,
.cia-grid--rows .cia-rowinner { position: relative; z-index: 1; }
/* A link inside a row that goes somewhere other than the project page (the Azure DevOps mark). */
.cia-rowinner { display: inline-flex; align-items: center; color: var(--cia-action); }
.cia-rowinner:hover { color: var(--cia-action-700); }
/* Picture (or logo), then the Azure DevOps project's name. */
.cia-rowinner.cia-extlink { gap: 6px; }
/* The Azure DevOps project's own picture, at the size of the logo it stands in for. */
.cia-devopsavatar { width: 20px; height: 20px; border-radius: .25rem; object-fit: cover; display: block; }
.cia-rowinner:hover .cia-devopsavatar { opacity: .85; }
/* Overview cells put the icon to the LEFT of the value, so flip the icon's margin (it defaults to a
   left margin for icons that trail text elsewhere, e.g. the nav). */
.cia-grid--rows .cia-notif { margin-left: 0; margin-right: 4px; }

/* Same visual language as .cia-grid: header band, row dividers, hover — no boxed cell borders. */
/* When a project has many role columns the table can exceed the card; scroll it horizontally
   instead of letting it overflow the layout. */
.cia-matrix-scroll { overflow-x: auto; margin-bottom: 48px; }

/* Cost detail downloads (stacked links above the pivot). */
.cia-costdownloads { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 4px 0 12px; }
.cia-downloadlink { display: inline-flex; align-items: center; gap: 6px; text-align: left; }
.cia-downloadlink__icon { flex: 0 0 auto; }

/* Cost pivot (client × environment with cost cells + totals). */
.cia-costpivot__note { margin: 0 0 8px; font-size: .85rem; }
.cia-costpivot th.cia-num, .cia-costpivot td.cia-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cia-costpivot .cia-costpivot__total { font-weight: 600; }
.cia-costpivot tfoot td { border-top: 2px solid var(--cia-divider); border-bottom: none; font-weight: 600; }
.cia-matrix { border-collapse: collapse; width: auto; font-size: 1rem; }
/* Keep role headers on one line so the columns stay readable while scrolling. */
.cia-matrix th.cia-matrix__env { white-space: nowrap; }
.cia-matrix th, .cia-matrix td { padding: 10px 14px; border-bottom: 1px solid var(--cia-row-divider); vertical-align: middle; text-align: center; }
.cia-matrix thead th {
    background: var(--cia-table-head); color: var(--cia-muted); font-weight: 600; font-size: .8125rem;
    text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; text-align: left;
}
.cia-matrix tbody tr { transition: background .1s ease; }
.cia-matrix tbody tr:hover { background: var(--cia-row-divider); }
.cia-matrix tbody tr:last-child td { border-bottom: none; }
/* Keep the user name (and organisation) on one line so long names don't wrap and inflate row height;
   the table scrolls horizontally if that makes it wider than the card. */
.cia-matrix td.cia-matrix__client { text-align: left; font-weight: 500; color: var(--cia-ink); white-space: nowrap; }
.cia-matrix td.cia-matrix__org { text-align: left; color: var(--cia-muted); white-space: nowrap; }
.cia-matrix__check { color: var(--cia-positive); font-weight: 700; }
/* Backend-service health circles in a client × environment cell, coloured by the server-side probe:
   green healthy, orange unhealthy, red (hollow) unreachable, grey not-yet-probed. */
.cia-appdots { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.cia-appdot { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.cia-appdot--healthy { color: var(--cia-positive); }
.cia-appdot--unhealthy { color: var(--cia-warning); }
.cia-appdot--unreachable { color: var(--cia-danger); }
.cia-appdot--unknown { color: var(--cia-muted); }

/* Frontend cell: each reachable address (internal Azure host + custom domains) on its own line, with
   a user glyph (has access) or health circle (no access) coloured by the probe. */
.cia-matrix td.cia-matrix__frontendcell { text-align: left; }
.cia-applinks { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
/* The link's own colour comes from the health class (.cia-appdot--*) so the icon renders in the probe
   colour via currentColor; the host text is forced to the link colour below. */
.cia-frontendlink { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; text-decoration: none; }
.cia-frontendlink:hover .cia-frontendlink__host { text-decoration: underline; }
.cia-frontendlink__icon { flex: none; }
.cia-frontendlink__host { color: var(--cia-action); }
/* Aggregated health circle in a backend/frontend matrix cell — a button that opens the detail dialog.
   Coloured green (all healthy), red (all down), split green/red (mixed) or grey (not yet probed);
   drawn as a user glyph (currentColor) when the user has access. */
.cia-celldot { background: none; border: none; padding: 4px; margin: 0; cursor: pointer; line-height: 0; display: inline-flex; border-radius: 999px; }
.cia-celldot:hover { background: var(--cia-row-divider); }
.cia-celldot:focus-visible { outline: 2px solid var(--cia-action); outline-offset: 1px; }
/* Non-interactive variant (Reader role): shows the health summary but doesn't open the dialog. */
.cia-celldot--static { cursor: default; }
.cia-celldot--static:hover { background: none; }
.cia-celldot__icon { display: block; }

/* A project whose business line is Deprecated, wherever its name is shown (nav, Overview, its own
   page title). Struck through rather than hidden: it still has cost, users and security worth seeing. */
.cia-deprecated { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .75; }
/* ".cia-grid a" sets text-decoration: none and, being a class plus an element, outranks the single
   class above — so the Overview's project link needs the strike restating at matching specificity.
   The link keeps its normal colour: it is still a link, and a struck *grey* name reads as disabled. */
.cia-grid a.cia-deprecated { text-decoration: line-through; }
.cia-grid a.cia-deprecated:hover { text-decoration: underline line-through; }

/* Pinning the Azure DevOps project: a quiet row under the section's content, since most projects
   never need it. */
.cia-devops__pin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
/* The suggestion sits beside the box, not in it: readable, never selectable. */
.cia-devops__pinhint { font-size: .8rem; color: var(--cia-muted); }
/* Wide enough for the longest project name in the organisation rather than a typed abbreviation. */
.cia-devops__pininput { min-width: 30ch; }

/* Azure DevOps section: the project's picture beside its description, then its repositories. */
.cia-devops__intro { display: flex; align-items: flex-start; gap: 14px; margin: 4px 0 16px; }
/* Decorative: the project is already named in the header, so the image says nothing of its own. */
.cia-devops__avatar { flex: none; width: 44px; height: 44px; border-radius: .5rem; object-fit: cover; }
.cia-devops__desc { margin: 0; color: var(--cia-muted); max-width: 70ch; }
.cia-devops__grouptitle {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--cia-muted); margin-bottom: 8px;
}
.cia-devops__row { display: inline-flex; align-items: center; gap: 8px; }
.cia-devops__meta { font-size: .72rem; }

/* Directory objects grid: left-aligned reference data rather than a reconciliation matrix. */
.cia-directory td, .cia-directory th { text-align: left; }
.cia-directory .cia-extlink { font-size: inherit; }


/* Endpoints dialog: one row per application — name, type, endpoint, portal blade. Both links share a
   row with plain text, so they take the cell's size instead of the smaller one they carried as a
   standalone list. */
.cia-endpointgrid td, .cia-endpointgrid th { text-align: left; }
.cia-endpointgrid .cia-frontendlink, .cia-endpointgrid .cia-extlink { font-size: inherit; }
/* Reconciliation markers use the small SVG badge icons (warn ⚠ / error ❗), coloured via
   .cia-notif--warn/--error, matching the nav and Overview. */
.cia-matrix__icon { vertical-align: -2px; cursor: help; }
.cia-matrix__icon--ok { color: var(--cia-positive); }
.cia-mark { font-weight: 700; margin-left: 3px; cursor: help; }
.cia-mark--warn { color: var(--cia-warning); }
.cia-mark--error { color: var(--cia-danger); }

/* Security rules grid: sits inside a scope panel, so no big bottom gap. */
.cia-secgrid { margin-bottom: 0; }
.cia-sec-ok { color: var(--cia-positive); font-weight: 600; white-space: nowrap; }
.cia-sec-fail { display: inline-flex; align-items: center; gap: 8px; }
.cia-sec-fail .cia-notif { flex: none; vertical-align: middle; }

/* Expand/collapse button on a card title (e.g. the cost detail grid). */
.cia-expandbtn { display: inline-flex; align-items: center; gap: 6px; }
.cia-expandbtn__arrow { font-size: .7rem; line-height: 1; }

.cia-muted { color: var(--cia-muted); }
/* Marks CIA's own project in the list / nav. */
/* Grey "self" pill marking the CIA application itself (grid + nav + scope tabs), reusing the cia-source pill. */
.cia-selfpill { margin-left: 6px; text-transform: none; cursor: help; vertical-align: middle; }

/* ── Status / feedback ───────────────────────────────────────────────── */

.is-up { color: var(--cia-up); }
.is-down { color: var(--cia-down); }
.cia-error { color: var(--cia-danger); }
.cia-warning {
    background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .35); color: #92610a;
    padding: 10px 14px; border-radius: .5rem; margin: 16px 0;
}

/* Labelled status pill (§8.3) — available for status semantics rather than a bare coloured dot. */
.status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px; border-radius: 999rem; font-size: .8125rem; font-weight: 500;
    background: var(--cia-row-divider); color: var(--cia-muted);
}
.status-pill--success { background: rgba(22, 163, 74, .12); color: #15803d; }
.status-pill--danger { background: rgba(251, 44, 54, .12); color: #b91c1c; }
.status-pill--info { background: rgba(30, 109, 201, .12); color: var(--cia-action-700); }
.status-pill--draft { background: var(--cia-row-divider); color: var(--cia-muted); }

.cia-btn {
    background: var(--cia-action); color: #fff; border: none; border-radius: .5rem;
    padding: 6px 14px; cursor: pointer; text-decoration: none; font-size: .85rem;
}
.cia-btn:hover { background: var(--cia-action-700); }
.cia-btn:disabled { background: var(--cia-divider); color: var(--cia-muted); cursor: default; }
.cia-btn--sm { padding: 4px 10px; font-size: .8rem; }

/* Access-request modal + pending list */
.cia-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
    display: flex; align-items: center; justify-content: center; z-index: 50;
}
.cia-modal {
    background: var(--cia-surface); border: 1px solid var(--cia-divider); border-radius: .75rem;
    width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
}
.cia-modal__head {
    padding: 16px 20px;
    background: var(--cia-navy); color: #fff;
    border-bottom: 1px solid var(--cia-navy-700);
    border-top-left-radius: .75rem; border-top-right-radius: .75rem;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.cia-modal__head h3 { margin: 0; color: #fff; }
.cia-modal__close { background: none; border: none; color: #fff; cursor: pointer; font-size: .85rem; opacity: .85; padding: 2px 4px; }
.cia-modal__close:hover { opacity: 1; text-decoration: underline; }
.cia-modal__body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.cia-modal__body .cia-matrix-scroll { margin-bottom: 0; }
.cia-modal__foot { padding: 14px 20px; border-top: 1px solid var(--cia-divider); display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.cia-field { display: flex; flex-direction: column; gap: 6px; }
.cia-field__label { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cia-muted); }
.cia-field__input { width: 100%; }
.cia-field__hint { margin: 6px 0 0; font-size: .85rem; }
/* A read-only field value (e.g. the fixed DevOps group in the add-user dialog). */
.cia-readonly { font-weight: 500; color: var(--cia-ink); }
/* Membership checkbox in the DevOps change dialog — unchecking requests removal from the group. */
.cia-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.cia-selecteduser { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cia-selecteduser__info { min-width: 0; word-break: break-all; }
.cia-searchresults { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--cia-divider); border-radius: .5rem; max-height: 220px; overflow: auto; }
.cia-searchresults li { border-bottom: 1px solid var(--cia-row-divider); }
.cia-searchresults li:last-child { border-bottom: none; }
.cia-searchresults button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 12px; font: inherit; cursor: pointer; color: var(--cia-ink); }
.cia-searchresults button:hover { background: var(--cia-row-divider); }
.cia-addself { display: block; margin-bottom: 8px; }
/* Role picker grid inside the dialog: roles as headers, one row of ticks. */
.cia-rolegrid { width: auto; margin-bottom: 0; }
.cia-rolegrid thead th, .cia-rolegrid td { text-align: center; padding: 8px 12px; }
/* Green ticks, matching the users grid's presence checkmarks. */
.cia-rolegrid input[type="checkbox"] { accent-color: var(--cia-positive); width: 16px; height: 16px; cursor: pointer; }

/* Owner's outstanding-actions panel at the top of the project page. */
/* Page-level notification callouts (info / warning / error), coloured by type. Actionable ones
   (approvals) carry their buttons. Shown at the top of the project page. */
.cia-notice { border: 1px solid; border-radius: .5rem; padding: 12px 16px; margin: 0 0 12px; }
/* A notice that leads a section (e.g. the cost budget breach under the previous card) needs a gap above. */
.cia-notice--lead { margin-top: 24px; }
.cia-notice__head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cia-notice__item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 0 0; font-size: .95rem; }
.cia-notice__buttons { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.cia-notice--error { background: rgba(251, 44, 54, .07); border-color: rgba(251, 44, 54, .35); }
.cia-notice--error .cia-notice__head { color: var(--cia-danger); }
.cia-notice--warn { background: rgba(245, 158, 11, .09); border-color: rgba(245, 158, 11, .4); }
.cia-notice--warn .cia-notice__head { color: #92610a; }
.cia-notice--info { background: rgba(30, 109, 201, .07); border-color: rgba(30, 109, 201, .35); }
.cia-notice--info .cia-notice__head { color: var(--cia-action-700); }
.cia-notice__actions { margin-top: 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* "· remove X, Y" on a change request that revokes roles. */
.cia-revoke { color: var(--cia-danger); font-weight: 600; }

/* Small "add … in Azure" script buttons and the ready-to-paste PowerShell dialog. */
.cia-scriptbtn {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    background: none; border: none; padding: 2px 4px; font: inherit; font-size: .85rem;
    color: var(--cia-action); cursor: pointer;
}
.cia-scriptbtn:hover { color: var(--cia-action-700); text-decoration: underline; }
.cia-scriptbtn__icon { flex: 0 0 auto; }
/* Icon-only variant, shown to the left of a user in the warning notice. */
.cia-scriptbtn--icon { padding: 2px; }
.cia-scriptbtn--icon:hover { text-decoration: none; }
.cia-notice__left { display: flex; align-items: center; gap: 8px; }
.cia-script { margin-top: 8px; }
.cia-script__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.cia-script__baractions { display: inline-flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.cia-code {
    margin: 0; padding: 12px 14px; border-radius: .5rem;
    background: var(--cia-navy-700); color: #e6edf3;
    font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;
    font-size: .8rem; line-height: 1.5; white-space: pre; overflow: auto; max-height: 320px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
.cia-code::-webkit-scrollbar { width: 10px; height: 10px; }
.cia-code::-webkit-scrollbar-track { background: transparent; }
.cia-code::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
.cia-code::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .5); background-clip: padding-box; }

.cia-actions { border: 1px solid rgba(30, 109, 201, .35); background: rgba(30, 109, 201, .07); border-radius: .5rem; padding: 12px 16px; margin: 8px 0 20px; }
.cia-actions__title { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cia-action-700); font-weight: 600; margin-bottom: 8px; }
.cia-actions__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid rgba(30, 109, 201, .15); }
.cia-actions__item:first-of-type { border-top: none; }
.cia-actions__buttons { display: flex; align-items: center; gap: 14px; white-space: nowrap; }

.cia-requests { border: 1px solid rgba(30, 109, 201, .35); background: rgba(30, 109, 201, .07); border-radius: .5rem; padding: 10px 14px; margin-bottom: 16px; }
.cia-requests__title { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cia-action-700); margin-bottom: 6px; }
.cia-requests__item { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; font-size: .92rem; }
/* Keep the name + roles + sign-out together as one right-aligned group in the top bar. */
.cia-userbox { display: inline-flex; align-items: center; gap: 12px; }
.cia-user { color: var(--cia-muted); font-size: .9rem; }
.cia-user__roles {
    margin-left: 6px; color: var(--cia-action); font-size: .82rem;
    background: none; border: none; padding: 0; font-family: inherit; cursor: pointer;
}
.cia-user__roles:hover { text-decoration: underline; }
/* A role masked off for testing: struck through wherever it's listed (top bar + dialog). */
.cia-user__roles .is-off,
.cia-rolelist__name.is-off { text-decoration: line-through; opacity: .6; }

/* Role enable/disable list in the "Your roles" dialog. */
.cia-rolelist { display: flex; flex-direction: column; gap: 10px; }
.cia-rolelist__row { display: flex; align-items: center; gap: 10px; }
.cia-rolelist__name { font-weight: 500; color: var(--cia-ink); }
.cia-rolelist__name.is-unassigned { color: var(--cia-muted); font-weight: 400; }
.cia-rolelist__note { font-size: .82rem; }
.cia-modal--narrow { width: min(420px, calc(100vw - 32px)); }
.cia-modal--medium { width: min(600px, calc(100vw - 32px)); }
/* Wide enough for a grid of endpoints or directory objects: long hostnames and a trailing portal link
   next to each other without the dialog itself scrolling sideways. */
.cia-modal--wide { width: min(1180px, calc(100vw - 32px)); }

/* Role capability matrix in the "Your roles" dialog. */
.cia-rolematrix-wrap { border-top: 1px solid var(--cia-divider); padding-top: 16px; }
.cia-rolematrix__title { margin: 0 0 10px; font-size: .95rem; }
.cia-rolematrix { border-collapse: collapse; width: 100%; font-size: .82rem; }
.cia-rolematrix th, .cia-rolematrix td { padding: 6px 8px; border-bottom: 1px solid var(--cia-row-divider); text-align: center; }
.cia-rolematrix thead th { color: var(--cia-muted); font-weight: 600; white-space: nowrap; }
.cia-rolematrix td.cia-rolematrix__cap, .cia-rolematrix th.cia-rolematrix__cap { text-align: left; color: var(--cia-ink); }
.cia-rolematrix tbody tr:last-child td { border-bottom: none; }
.cia-rolematrix__yes { color: var(--cia-positive); font-weight: 700; }
.cia-rolematrix__own { color: var(--cia-action); font-size: .72rem; font-weight: 600; }
.cia-rolematrix__no { color: var(--cia-muted); }
.cia-rolematrix__legend { margin: 10px 0 0; font-size: .72rem; color: var(--cia-muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; width: 100%;
    background: #fff5f5; color: #b91c1c; border-top: 1px solid var(--cia-danger);
    padding: 12px 20px;
}

/* Projects declared to CIA because Azure has no resource group for them. Collapsed by default: it is
   an exception list an admin visits rarely, so above the grid it stays one line until opened. */
.cia-registered { margin: 2px 2px 14px; font-size: .85rem; }
.cia-registered > summary { cursor: pointer; color: var(--cia-muted); }
.cia-registered p { max-width: 80ch; margin: 8px 0; }
.cia-registered__add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.cia-registered__input { min-width: 24ch; }
.cia-registered__list { list-style: none; margin: 0; padding: 0; }
.cia-registered__list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--cia-row-divider); }

/* "There is nothing here" for a project with no Azure resources. Deliberately unstyled beyond the
   muted colour: a panel would read as a notice, which is what it is not. */
.cia-nothing { margin: 18px 2px; max-width: 90ch; }