/*
 * Admin host-owned, layout-only stylesheet (T59.1 / D15.8 / D11.6). Complements the copied, pristine
 * cycrosant.css — it only adds the anonymous discovery-page auth-card layout and a couple of host-local
 * utility classes; every colour/spacing/radius value comes from the design-system --cs-* tokens (never
 * re-declared here), so cycrosant.css stays the single source of visual truth and is never hand-edited.
 * Mirrors the Server host's own wwwroot/css/auth-shell.css (same D09.11/D15.8 pattern, different host).
 */

.cs-auth-body {
    min-height: 100vh;
    margin: 0;
    background: var(--cs-color-bg);
}

.cs-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.cs-auth__header {
    display: flex;
    align-items: center;
    gap: var(--cs-space-3);
    padding: var(--cs-space-4) var(--cs-space-5);
    border-bottom: 1px solid var(--cs-color-border);
    background: var(--cs-color-surface);
}

.cs-auth__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-space-2);
}

.cs-auth__header .cs-lang {
    margin-left: auto;
}

.cs-auth__main {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--cs-space-7) var(--cs-space-4);
}

.cs-auth__main .cs-card {
    width: 100%;
    max-width: 26rem;
}

/* D15.8: CycroGuard is a host-owned product wordmark — the shared CycroSant.Design.Web stays
   product-neutral, so the two-tone colouring lives here, not in cycrosant.css. "Cycro" keeps the
   wordmark's default brand colour; "Guard" uses the grey token the design review specified
   (var(--cs-grey-600) === #65696D). Used by both the anonymous discovery header and the authenticated
   sidebar brand (_SideMenu). */
.cs-brand-cycro {
    color: var(--cs-color-brand);
}

.cs-brand-guard {
    color: var(--cs-grey-600);
}

/* ADM-DISCOVERY (T59.1): a plain hairline separator above the primary CTA — replaces the mockup's
   one-off `style="border-top:…"` (nonce-CSP forbids inline style, D11.6). Token-only, reusable. */
.cs-form__divider {
    border: 0;
    border-top: 1px solid var(--cs-color-border);
    margin: var(--cs-space-5) 0 0;
}

/* ADM-DASHBOARD quick-actions (T59.1): a wrapping button row — replaces the mockup's one-off
   `style="display:flex; flex-wrap:wrap; gap:…"`. Generic/reusable, not a one-off (mirrors the Server
   host's own .cs-consent-actions precedent). */
.cs-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cs-space-3);
}

/* ADM-SHELL user-menu (T59.1): the non-interactive identity row (name + email) at the top of the
   user dropdown — replaces the mockup's one-off `style="pointer-events:none; flex-direction:column;
   align-items:flex-start"`. */
.cs-menu__item--identity {
    pointer-events: none;
    flex-direction: column;
    align-items: flex-start;
}

/* Generic vertical-rhythm utilities (T59.1) — replace the mockups' one-off
   `style="margin-top: var(--cs-space-N)"` tweaks (nonce-CSP forbids inline style, D11.6). Mirror the
   Server host's own .cs-mt-4/.cs-mt-2 precedent (wwwroot/css/auth-shell.css). */
.cs-mt-3 {
    margin-top: var(--cs-space-3);
}

.cs-mt-4 {
    margin-top: var(--cs-space-4);
}

.cs-mt-5 {
    margin-top: var(--cs-space-5);
}

.cs-mb-5 {
    margin-bottom: var(--cs-space-5);
}

/* ADM-ACCOUNT (T59.1): the single identity card is narrower than the shell's full content width —
   not itself a cs-* design-system component, so it lives here (mirrors the Server host's own
   .cs-manage precedent). */
.cs-account-card {
    max-width: 34rem;
}

/* ADM-TENANTS-LIST (T59.2): a right-aligned, non-wrapping row-action cell — replaces the mockup's
   one-off `style="text-align:right; white-space:nowrap"` (nonce-CSP forbids inline style, D11.6).
   Generic/reusable by any list screen's icon-action column (T59.3+). The nested-form rule below is a
   scoped workaround for a pre-existing gap: the app-wide `.cs-inline-form` class (used by every POST
   row-action across the admin views) has NO CSS definition anywhere (cycrosant.css nor host.css), so a
   <form> defaults to block and would stack the icon-only action below the <a> links instead of sitting
   inline with them. Fixing `.cs-inline-form` itself is a cross-screen Design.Web-owned gap (T57 — out of
   this slice's scope, flagged in the T59.2 return notes); this rule only unblocks the ONE column T59.2
   touches, without claiming that class. */
.cs-table__actions--end {
    text-align: right;
    white-space: nowrap;
}

.cs-table__actions--end form {
    display: inline-block;
}

/* ADM-TENANTS-LIST (T59.2): a ghost icon-button that still needs a danger tint on the icon itself
   (cs-btn--danger would fill the whole button, which the mockup's subtle row-action style doesn't
   want) — replaces the mockup's one-off `style="color: var(--cs-color-danger)"`. Reusable by any
   list screen's icon-only delete action (T59.3+). */
.cs-btn--ghost-danger {
    color: var(--cs-color-danger);
}

/* ADM-USERS-* (T59.3): a single-column card/form screen (form/invite/roles/groups/approve/reset) —
   replaces the mockups' one-off `style="max-width: 40rem"`. cycrosant.css's own `.cs-form` caps at
   34rem (line 657-659), narrower than this card, so the form ALSO needs `.cs-form--fill` below to reach
   the card's full width. Reusable by any future single-column admin form screen. */
.cs-form-card {
    max-width: 40rem;
}

/* ADM-USERS-* (T59.3): cancels cycrosant.css's own `.cs-form { max-width: 34rem; }` when the form
   already sits inside a deliberately-sized wrapper (`.cs-form-card` above) — replaces the mockups'
   one-off `style="max-width:none"`. */
.cs-form--fill {
    max-width: none;
}

/* ADM-USERS-FORM danger-zone (T59.3): the "min-width:0" flex-truncation wrapper for the label+hint
   column, and the bold zone title — cycrosant.css's own `.cs-danger-zone` only styles the border +
   the `.cs-card__body`/`form` layout (line 2143-2156), not this inner text column, which the mockup
   left classless. Replaces one-off `style="min-width:0"` / `style="font-weight:600"`. */
.cs-danger-zone__text {
    min-width: 0;
}

.cs-danger-zone__title {
    font-weight: var(--cs-weight-semibold);
}

/* ADM-USERS-LIST empty state (T59.3): a two-column button footer — replaces the mockup's one-off
   `style="display:grid; grid-template-columns:1fr 1fr; gap:…"`. Reusable by any empty-state card with
   a dual call-to-action footer. */
.cs-card__footer--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cs-space-3);
}

/* ADM-ROLES-FORM (T59.4): an icon + text hint row (the "permission assignment happens on the matrix"
   reminder) — replaces the mockup's one-off `style="display:flex; gap:…; align-items:flex-start"` +
   `style="flex:none; margin-top:2px"` on the icon. Generic/reusable by any future icon-led hint line. */
.cs-hint-icon {
    display: flex;
    gap: var(--cs-space-2);
    align-items: flex-start;
}

.cs-hint-icon__glyph {
    flex: none;
    margin-top: 2px;
}

/* ADM-DEVICES create (T53): 3-column claim row [key | value | ✕] — mirrors ADM-DEVICES.html:430's
   `style="display:grid; grid-template-columns:1fr 1fr auto; gap:var(--cs-space-2)"`.
   Applied to #claims-rows so each triplet (key input · value input · delete button) sits on one line. */
.cs-claims-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--cs-space-2);
}

/* A11y (axe link-in-text-block, WCAG 1.4.1 Use of Colour) — T59.4: the ADM-ROLES-FORM hint embeds a bare
   link ("… on the permission matrix") inside body text, and the design system underlines classless <a>
   on hover only, so the link is distinguishable by colour alone (measured 1.48:1 against the muted hint
   text — the rule wants 3:1 OR a non-colour cue). Give in-hint links a persistent underline. Same patch
   the Server carries in auth-shell.css for `.cs-auth__main a:not([class])`; chrome/nav/button links carry
   a class and are excluded. Design-system-wide bare-link a11y remains a T57 observation. */
.cs-form__hint a:not([class]) {
    text-decoration: underline;
}

/* ADM-ROLES-PERMISSIONS / ADM-ROLES-MEMBERSHIPS (T59.4): `.cs-table--card` sets `overflow: hidden` (for
   its rounded corners), and `.cs-table` has no horizontal scroll container of its own — so a list wide
   enough to overflow (key + resource + free-text description + the row-action column) has its trailing
   columns CLIPPED on a narrow viewport, with no scrollbar to reach them. This additive modifier restores
   horizontal scrolling on the card wrapper without claiming or redefining the vendored `cs-table--card`;
   host.css loads after cycrosant.css, so `overflow-x` wins on that axis.
   NOTE — scope of this rule: the clipping it fixes is real, but it did NOT resolve the admin-mobile e2e
   row-action click failure that prompted it. That failure was verified to have a different, shell-level
   cause and is tracked as RF-127; do not read this rule as its fix.
   A responsive `.cs-table` in the design system itself is a T57 gap. */
.cs-table-scroll {
    overflow-x: auto;
}

/* ADM-ROLES-PERMISSIONS / -MEMBERSHIPS (T59.4): pin the row-action column to the right edge of the
   `.cs-table-scroll` container so the actions stay reachable at ANY viewport width. Without this, a list
   that overflows horizontally pushes its actions past the edge: on admin-mobile the edit/delete controls
   were effectively unreachable (and a Playwright click landed on a neighbouring row's cell instead).
   Sticky is inert when the table fits — desktop rendering is unchanged, so the approved mockups still
   hold. The explicit background is required: a sticky cell paints over the columns scrolling beneath it,
   so it must be opaque, and it has to track the design system's `tbody tr:hover` tint by hand because the
   cell no longer inherits the row's painted background.
   NOTE — same caveat as `.cs-table-scroll` above: this improves the affordance but did NOT fix the
   admin-mobile e2e click failure (RF-127, shell-level cause). Kept because pinning the actions is right
   on its own merits, not because it resolved that test.
   A responsive `.cs-table` in the design system itself remains a T57 gap — this is a host-side
   affordance, not a `cs-*` redefinition. */
.cs-table-scroll .cs-table__actions--end {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--cs-color-surface);
}

.cs-table-scroll .cs-table tbody tr:hover .cs-table__actions--end {
    background: var(--cs-color-surface-alt);
}

/* The (empty) actions header cell pins with the column, and keeps the thead's own surface tint. */
.cs-table-scroll .cs-table thead th:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--cs-color-surface-alt);
}

/* ADM-APPS-FORM edit (T59.6): places the metadata form and the secret-rotation card side by side on a wide
   viewport (wrapping to stacked below on narrow ones) — replaces the mockup's one-off
   `style="display:flex; flex-wrap:wrap; gap:…; align-items:flex-start"` (nonce-CSP forbids inline style,
   D11.6). Reusable by any future two-card form+aside layout. */
.cs-form-with-aside {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cs-space-5);
    align-items: flex-start;
}

.cs-form-with-aside > .cs-form-card {
    flex: 1 1 34rem;
}

.cs-form-with-aside > .cs-form-aside {
    flex: 1 1 20rem;
    max-width: 26rem;
}

/* RF-127 (T59.6, root cause PROVEN via an admin-mobile e2e geometry probe): the design system's
   `.cs-header` (cycrosant.css) is a FIXED-HEIGHT, NON-WRAPPING flex row. On a SystemAdmin drill-in page
   it carries an extra `.cs-banner` ("Drilled into tenant {code} · Exit tenant") on top of the breadcrumb,
   realm chip, language switch and user menu — which on a phone-width viewport can neither wrap
   (flex-wrap defaults to nowrap) nor grow (fixed height), so the row overflows the viewport by ~300px.
   That horizontal overflow inflates the mobile LAYOUT viewport (measured innerWidth ~686 vs a 393 visual
   width) while the visual viewport stays 393, desynchronising pointer hit-testing: a click on a form's
   submit button lands on a different element (e.g. `#DisplayName`), making every drill-in admin form
   effectively un-submittable on a real phone. This was the true cause behind the T59.4 permissions
   row-action failure too (same drill-in shell, tracked as RF-127).

   Fix here in the Admin host: below the 992px breakpoint (the same point the sidebar goes off-canvas),
   let the header WRAP and grow instead of overflowing. Purely additive over the vendored `.cs-header`; the
   proper responsive `.cs-header` belongs in the design system (cycrosant.css) — a T57 gap. */
@media (max-width: 992px) {
    .cs-header {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--cs-header-h);
        row-gap: var(--cs-space-2);
        padding-top: var(--cs-space-2);
        padding-bottom: var(--cs-space-2);
    }
}

/* ADM-AUDIT / ADM-PLATFORM-AUDIT (T59.7): the narrow leading column that holds only the row-expand
   chevron button — replaces the mockup's one-off `style="width:36px"` (nonce-CSP forbids inline style,
   D11.6). Generic/reusable by any future icon-only leading table column. */
.cs-table__col-icon {
    width: 36px;
}