/* Incidents page — migrated from Incidents.razor.css; scoped under .page-incidents. */
.page-incidents { display: flex; flex-direction: column; gap: 34px; }

/* ─── Load animations (skeleton shimmer + no slide-in) ────────────
   Mirrors the dashboard: real content is rendered (true sizes), masked
   with a shimmer while loading, then revealed as the numbers count up. */

.page-incidents .loading .head-actions > *,
.page-incidents .loading .inc-stat > *,
.page-incidents .loading .inc-toolbar > *,
.page-incidents .loading .inc-filterbar > *,
.page-incidents .loading .panel > * { visibility: hidden; }

.page-incidents .loading .head-actions,
.page-incidents .loading .inc-stat,
.page-incidents .loading .inc-toolbar,
.page-incidents .loading .inc-filterbar,
.page-incidents .loading .panel { position: relative; }

/* while loading, keep the (default-selected) card neutral — no accent outline
   until the skeleton clears */
.page-incidents .loading .inc-stat.is-active {
    border-color: var(--line);
    background: var(--surface);
}

.page-incidents .loading .head-actions::after,
.page-incidents .loading .inc-toolbar::after,
.page-incidents .loading .inc-filterbar::after { border: 1px solid var(--line); }

.page-incidents .loading .head-actions::after,
.page-incidents .loading .inc-stat::after,
.page-incidents .loading .inc-toolbar::after,
.page-incidents .loading .inc-filterbar::after,
.page-incidents .loading .panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    background-color: var(--surface-2);
    background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: skel-shimmer 1.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .page-incidents .loading .head-actions::after,
    .page-incidents .loading .inc-stat::after,
    .page-incidents .loading .inc-toolbar::after,
    .page-incidents .loading .inc-filterbar::after,
    .page-incidents .loading .panel::after { animation: none; }
}

/* ─── Header action button ────────────────────────────────────── */

.page-incidents .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #04201D;
    font: 600 13px var(--font-body);
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease;
}

.page-incidents .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.page-incidents .btn-primary svg { width: 15px; height: 15px; }

/* ─── Status overview cards (also act as filters) ─────────────── */

/* Two tracks, because there are two buckets: still live, or finished (§46). Kept as explicit tracks rather
   than an auto-fit so the pair always splits the row evenly — a third tile is not something to leave room
   for, and "waiting for customer" is a status on the rows now, not a card. */
.page-incidents .inc-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.page-incidents .inc-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 18px 0;
    min-height: 150px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    overflow: hidden;
    transition: border-color .2s ease, background .2s ease;
}

.page-incidents .inc-stat:hover {
    border-color: rgba(255, 255, 255, 0.20);
    background: var(--surface-2);
}

.page-incidents .inc-stat.is-active {
    border-color: color-mix(in srgb, var(--c) 55%, transparent);
    background: color-mix(in srgb, var(--c) 10%, var(--surface));
}

.page-incidents .inc-stat-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.page-incidents .inc-stat-count {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* severity mix pinned to the bottom of the card */
.page-incidents .inc-sevmini {
    margin-top: auto;
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-height: 15px;
}

.page-incidents .inc-sevmini-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.page-incidents .inc-sevmini-dot {
    width: 11px;
    height: 11px;
    flex: none;
    display: inline-block;
}

/* ─── Toolbar (actions · range · search · columns) ────────────── */

.page-incidents .inc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

/* ─── Popover menus (Add filter · Customize columns) ──────────── */

/* the list section is raised above the backdrop while a menu is open */
.page-incidents .section.menus-open { position: relative; z-index: 50; }

/* ─── Filter row ──────────────────────────────────────────────── */

.page-incidents .inc-filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ─── Incident list ───────────────────────────────────────────── */

/* Containing block for the refetch bar (.tb-loadbar in components.css), which sits over the panel's top
   edge while a new time range is being fetched. The .loading rule above sets this too; the list panel needs
   it whether or not the skeleton is up. */
.page-incidents .panel { position: relative; }

/* Every track is fluid with a zero floor (the inline template from GridCols() matches). A track with a
   pixel minimum can't shrink, so with enough columns switched on the row grew wider than the panel —
   and .content .panel is overflow:hidden, so the right-hand cells were simply clipped off the edge.
   The cost of a fluid track is that any cell can be narrower than its text at some width, so every one
   of them clamps below and carries the whole value on a title. Fallback only: the row and header both
   set the real template inline.
   The name column takes close to half the row and the closed vocabularies share the rest (UAT 2026-08-21):
   keep these in step with _cols in Incidents.razor.cs. */
.page-incidents .inc-head,
.page-incidents .inc-row {
    display: grid;
    grid-template-columns:
        minmax(0, 3.15fr)  /* incident name */
        minmax(0, 0.75fr)  /* incident id */
        minmax(0, 0.8fr)   /* severity */
        minmax(0, 0.65fr)  /* status */
        minmax(0, 0.95fr)  /* assignee */
        minmax(0, 0.65fr)  /* created */
        minmax(0, 0.6fr);  /* updated */
    gap: var(--inc-gap);
    align-items: center;
}

/* The gutter and row padding as tokens, because the scroll floor below has to add them up. */
.page-incidents { --inc-gap: 16px; --inc-pad: 22px; }

/* A readable floor for the whole row, not for any track (§26): 120px per fr unit on screen, plus the
   gutters and padding. Above it the tracks share the panel as before; below it the row keeps that width and
   the box scrolls sideways, where it used to collapse into stacked cards at 1080px and drop the header and
   the Created column (UAT 2026-09-23). --inc-fr and --inc-cols come from ScrollFloor() in Incidents.razor.cs. */
.page-incidents .inc-scroll { overflow-x: auto; overflow-y: hidden; }
.page-incidents .inc-scroll > .inc-head,
.page-incidents .inc-scroll > .inc-row {
    min-width: calc(var(--inc-fr, 7.85) * 120px + (var(--inc-cols, 7) - 1) * var(--inc-gap) + 2 * var(--inc-pad));
}

/* No cell may push its own track: a grid item's automatic minimum size is its content, which would
   re-create the overflow the fluid tracks above exist to prevent. */
.page-incidents .inc-head > *,
.page-incidents .inc-row > * { min-width: 0; }

/* One-line text that ellipsises rather than wrapping — rows stay a uniform height, and the cell's
   title carries the full value. */
.page-incidents .inc-clip {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-incidents .inc-head {
    padding: 12px var(--inc-pad);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-soft);
}

.page-incidents .inc-head span,
.page-incidents .inc-th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--faint);
}

/* sortable header — mirrors the Vulnerabilities list: a bare label that behaves like a button, so the
   header row still reads as a header rather than a toolbar. The caret is the only affordance: dim on
   hover, solid on the sorted column. */
.page-incidents .inc-th {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: color .15s ease;
}
/* the label is its own box so it can be the thing that clips, and the caret next to it is an affordance
   that must stay visible however narrow the column gets. A heading wraps at its spaces onto a second line
   before it is cut: "{Customer} assignee" and "Closure status" were ellipsised on a 1684px window (UAT
   2026-09-23), and a header row one line taller costs nothing. The ellipsis is the last resort, after two. */
.page-incidents .inc-th > span {
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.35;
    white-space: normal;
}
.page-incidents .inc-th:hover { color: var(--text); }
.page-incidents .inc-th.is-sorted { color: var(--accent); }
.page-incidents .inc-th:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* The width reset sits under the Customize-columns toggles as an action rather than another toggle, so a
   hairline keeps the two apart. */
.page-incidents .inc-pop-reset {
    margin-top: 5px;
    padding-top: 9px;
    border-top: 1px solid var(--line-soft);
    border-radius: 0;
}

/* ── Resizable columns ──────────────────────────────────────────
   A grab strip at each header's right edge; dragging it re-shares the width between that column and the
   next fluid one (panopticonColumns in dashboard.js). It sits OUTSIDE the sort button on purpose: inside
   it, the pointerdown that starts a resize is also the click that sorts the column. The wrapper is what
   the grid places, so it — not the button — is the thing that must not push its track. */
.page-incidents .inc-th-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}
.page-incidents .inc-th-wrap > .inc-th { flex: 1 1 auto; }

.page-incidents .inc-resize {
    position: absolute;
    /* taller than the label so the strip covers the header's own padding, and it fills the 16px grid gap
       between the two columns it divides: the strip is the boundary, so it sits in the gutter rather than
       over the sort button of the column to its left. */
    top: -12px;
    bottom: -12px;
    right: -16px;
    width: 16px;
    cursor: col-resize;
    touch-action: none;   /* the drag is ours — don't scroll the page instead */
    z-index: 2;
}
.page-incidents .inc-resize::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    /* centred in the gutter, so the hairline reads as the divider between the two columns */
    left: 7px;
    width: 2px;
    /* Faint but drawn at rest. It shipped fully transparent until hovered, so the only way to find an
       adjuster was to sweep the header with the pointer and watch for the cursor to change (UAT
       2026-08-20). A neutral token rather than an accent tint: at rest these are dividers, and the accent
       belongs to the state under the pointer and to the drag itself. Both tokens flip with the theme —
       a literal white hairline disappears on light. */
    background: var(--hair);
    transition: background .15s ease;
}
.page-incidents .inc-resize:hover::after,
.page-incidents .inc-resize.is-dragging::after { background: var(--accent); }

/* The pointer is captured for the duration of a drag, so the cursor and the ban on selecting text have to
   come from the document rather than from the strip the pointer left behind. */
body.is-col-resizing { cursor: col-resize; user-select: none; }
body.is-col-resizing .inc-row,
body.is-col-resizing .inc-th { cursor: col-resize; }

.page-incidents .inc-th svg {
    width: 11px;
    height: 11px;
    flex: none;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
}
.page-incidents .inc-th:hover svg { opacity: .5; }
.page-incidents .inc-th.is-sorted svg { opacity: 1; }
/* the caret points down (descending) by default and flips for ascending */
.page-incidents .inc-th.is-asc svg { transform: rotate(180deg); }

.page-incidents .inc-row {
    position: relative;
    padding: 16px var(--inc-pad);
    border-bottom: 1px solid var(--line-soft);
    transition: background .18s ease;
}

/* no severity accent rail on the left edge — the severity square already carries the colour, and a rail
   that fades in on hover read as a rendering glitch when a re-render slid rows under a still cursor. */
.page-incidents .inc-row:hover { background: rgba(255, 255, 255, 0.035); }
.page-incidents .inc-row:last-of-type { border-bottom: 0; }

/* incident name */
.page-incidents .inc-name-cell { min-width: 0; }
.page-incidents .inc-name-cell strong {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* A raised incident the SOC hasn't picked up yet (§44). Drawn as a neutral state, not a warning: the
   incident is real and in Sentinel, and nothing has gone wrong — so --muted, never --bad. */
.page-incidents .inc-pending-pill {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    /* clips inside its own fluid track like every other cell (§26) */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The row itself stays clickable — it opens the customer's own submission read-only — but reads as
   provisional rather than as a live queue entry. */
.page-incidents .inc-row.is-pending .inc-name-cell strong { color: var(--muted); }

/* The incident is waiting on the customer (§46): the one status they can act on, so the row says so rather
   than leaving it to the Status column, which is narrow enough to clip the words. Drawn in the same amber
   the status dot uses for it — an ask, not a failure, so never --bad. It is on the name cell rather than
   being a row tint or an edge rail: the pill is the part that can carry words, and the pinned position at
   the top of the list is the other half of the signal.
   --attn-c is the amber tuned for the dark theme; the light theme swaps in the darker variant, because one
   mid-tone can't hold contrast against both a dark surface and a white one (same pair as the dashboard's
   status chips, so the same status reads as the same colour on both pages). */
.page-incidents .inc-attn-pill {
    --attn-c: var(--status-waiting);
    display: inline-block;
    margin-top: 4px;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--attn-c);
    background: color-mix(in srgb, var(--attn-c) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--attn-c) 45%, transparent);
    /* clips inside its own fluid track like every other cell (§26) */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme="light"] .page-incidents .inc-attn-pill { --attn-c: #8A6209; }

/* incident id tag */
.page-incidents .inc-idcell { min-width: 0; }
.page-incidents .inc-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-2);
    /* the key is one token: 5-digit issue numbers otherwise break after the hyphen onto a second line */
    white-space: nowrap;
    /* …and a token that can't wrap has to be clipped instead — the track is fluid like every other one, so
       it can be narrower than the key (the local INC-{guid} fallback key always is) */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--accent-soft);
}

/* A pending row's reference is a Sentinel GUID, not a Jira key: same shape, but muted, because it is not
   the reference the customer will end up quoting. It is long, so the ellipsis above earns its keep here. */
.page-incidents .inc-tag.is-pending {
    color: var(--muted);
    background: var(--surface-2);
}

/* severity — colored square + label */
.page-incidents .inc-sev,
.page-incidents .inc-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    min-width: 0;
}

.page-incidents .inc-sq {
    width: 11px;
    height: 11px;
    flex: none;
}

.page-incidents .inc-dot2 {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
}

/* closure status — a verdict pill, or a dash while the incident is still open.
   .cls-pill is nowrap by design, so the cell has to do the clamping: an unclamped pill overflowed its
   grid track and printed over the Created column. The pill's title carries the whole Jira value. */
.page-incidents .inc-closure { min-width: 0; }
.page-incidents .inc-closure .cls-pill {
    display: inline-block;   /* text-overflow needs a block box; .cls-pill's inline-flex ignores it */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-incidents .inc-blank { font-size: 13px; color: var(--faint); }

/* assignee: the customer's own owner of the incident (never the Evalian analyst), drawn as the same
   puck the vulnerabilities queue uses for its own assignee column, so the two lists read alike.
   The name clamps like every other cell here; the puck is fixed, so it never takes room from it. A row
   nobody there has taken draws the plain .inc-blank dash and no puck: the incident is not unassigned, it
   is with SecOps, so an empty-looking owner column is the honest picture of it. */
.page-incidents .inc-by { display: flex; align-items: center; gap: 8px; min-width: 0; }
.page-incidents .inc-avatar {
    width: 24px;
    height: 24px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    /* The puck holds either initials or the owner's photo, so it clips the image to the circle. */
    overflow: hidden;
    font-size: 9.5px;
    font-weight: 700;
    color: #04201D;
    background: linear-gradient(140deg, #5EEAD9, #14B8A6);
}
/* Fills the puck and keeps the aspect: a portrait crops rather than squashing (§23's both-axes rule). */
.page-incidents .inc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-incidents .inc-byname { font-size: 13px; color: var(--muted); }

/* created / updated timestamps */
.page-incidents .inc-time { display: grid; gap: 2px; min-width: 0; }
.page-incidents .inc-time > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-incidents .inc-time > span:first-child { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.page-incidents .inc-time-abs { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.page-incidents .inc-row { cursor: pointer; }

.page-incidents .inc-empty {
    padding: 36px 22px;
    text-align: center;
    color: var(--faint);
    font-size: 13.5px;
}

.page-incidents .inc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 13px 22px;
    border-top: 1px solid var(--line-soft);
    color: var(--faint);
    font-size: 12.5px;
}

.page-incidents .inc-foot strong { color: var(--muted); font-variant-numeric: tabular-nums; }
.page-incidents .inc-foot-info { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ─── Pagination (in the list footer; mirrors the Vulnerabilities list) ─────────── */

.page-incidents .pager { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.page-incidents .pager-size { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); }
.page-incidents .pager-size select {
    padding: 5px 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: 500 12.5px var(--font-body);
    cursor: pointer;
    color-scheme: dark;
}

.page-incidents .pager-nav { display: inline-flex; align-items: center; gap: 10px; }
.page-incidents .pager-page { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.page-incidents .pager-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font: 500 12.5px var(--font-body);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.page-incidents .pager-btn:hover:not(:disabled) { color: var(--text); border-color: rgba(255, 255, 255, 0.2); }
.page-incidents .pager-btn:disabled { opacity: 0.4; cursor: default; }
.page-incidents .pager-btn svg { width: 13px; height: 13px; flex: none; }

/* ─── Responsive ──────────────────────────────────────────────── */

/* Narrower gutters once the grid is under pressure. With every column switched on, seven 16px gaps and
   the row's own 22px padding are ~155px of a row the columns want — giving it back is what keeps the
   text readable rather than merely un-clipped. */
@media (max-width: 1400px) {
    .page-incidents { --inc-gap: 10px; --inc-pad: 16px; }
}

/* A phone is too narrow for a table at any floor, so there the rows become cards. This was the 1080px
   breakpoint, which took the header and the Created column off a laptop's screen; the scroll floor
   above covers everything down to here. */
@media (max-width: 640px) {
    .page-incidents .inc-head { display: none; }
    .page-incidents .inc-scroll > .inc-row { min-width: 0; }
    /* !important overrides the inline grid-template set for column customisation */
    .page-incidents .inc-row {
        grid-template-columns: 1fr auto !important;
        row-gap: 10px;
        column-gap: 14px;
    }
    .page-incidents .inc-name-cell { grid-column: 1 / -1; }
    .page-incidents .inc-created { display: none; }
    .page-incidents .inc-updated { text-align: right; }
}

@media (max-width: 640px) {
    .page-incidents .inc-stats { grid-template-columns: 1fr; }
}

/* ─── Raise-incident modal (mirrors the Service Requests modal) ──── */

.page-incidents .modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.55); }

.page-incidents .modal {
    position: fixed;
    z-index: 210;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    /* height:auto and overflow:hidden reset Bootstrap's own `.modal` rules
       (height:100%, overflow-y:auto), which would stretch the card to the
       full viewport and leave the body as dead space. */
    height: auto;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
    animation: modal-in .2s ease both;
}

.page-incidents .modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.page-incidents .modal-head h2 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; }

.page-incidents .req-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}
.page-incidents .req-icon svg { width: 22px; height: 22px; }
.page-incidents .req-icon.sm { width: 30px; height: 30px; }
.page-incidents .req-icon.sm svg { width: 16px; height: 16px; }

.page-incidents .modal-x {
    width: 28px; height: 28px;
    border: none;
    background: transparent;
    color: var(--faint);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.page-incidents .modal-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

.page-incidents .modal-body { padding: 18px; overflow-y: auto; }

.page-incidents .modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--line-soft);
}

@media (prefers-reduced-motion: reduce) {
    .page-incidents .modal { animation: none; }
}

/* ── A raised incident awaiting the SOC (§44) ───────────────────────────────────────────────────────── */

/* Shown in place of the Raise control when the portal can't put an incident in this customer's workspace.
   Sits where the button was, so the answer is where the reader looked for the action. */
.page-incidents .inc-raise-off {
    max-width: 46ch;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    text-align: right;
}

/* The customer's half carries the route to a human (§7), which is the only thing here they can act on, so
   it is drawn as the link it is rather than left the same grey as the sentence around it. */
.page-incidents .inc-raise-off a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-incidents .inc-raise-off a:hover {
    color: var(--text);
}

/* What is happening, in the customer's terms, at the top of the read-only view. */
.page-incidents .inc-pending-note {
    margin: 0 0 16px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
}

.page-incidents .inc-pending-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 18px;
    margin: 0 0 18px;
    font-size: 13px;
}
.page-incidents .inc-pending-meta dt {
    color: var(--muted);
    font-weight: 600;
}
.page-incidents .inc-pending-meta dd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text);
    min-width: 0;
}

/* A label, so plain ink and no subtitle under it (§14). */
.page-incidents .inc-pending-h {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
}