/* Presentation for the module admin/configuration core (M-027): the admin landing and the managed-
   lookup management page. Content-only — it renders inside the shell's content frame, so it styles
   just its own sections. Page chrome (title/subtitle/empty), form primitives and the validation-error
   box now live in the shared platform sheets (layout.css / forms.css); this file keeps ONLY what is
   genuinely admin/lookup-specific (section cards, the lookup table + its inline-edit captions). Every
   colour/space/radius comes from the design tokens (tokens.css), so a host can re-skin without
   touching markup (coding-standards §4, §12). Mobile-first and responsive; no inline styles. */

/* --- Admin list-of-links (Enums index) ------------------------------------------------------------
   A simple stacked list where every row is a full-width link to another admin page. The M-309 dashboard
   took over the /admin landing, but the Enums index (lookups.blade.php) is still exactly this shape — a
   list of managed code-lists, each linking to its per-value CRUD page — so this styling stays for it. */
.platform-admin__sections {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--platform-space-sm);
}

.platform-admin__section-link {
    display: block;
    padding: var(--platform-space-md);
    color: var(--platform-color-text);
    text-decoration: none;
    background: var(--platform-color-surface-muted);
    border: 1px solid var(--platform-color-border);
    border-radius: var(--platform-radius-md);
}

.platform-admin__section-link:hover,
.platform-admin__section-link:focus {
    border-color: var(--platform-color-accent);
}

/* --- Admin dashboard landing (M-309) --------------------------------------------------------------
   A dense, technical grid of stat tiles grouped into sections (Data, System). Built for "real techs"
   (Dude): cramped is fine — small tiles, tight gaps, a big number that reads at a glance. Mobile-first
   and fully token-driven; the grid reflows from many columns to a couple on a phone with no horizontal
   scroll, and no media query (the `auto-fill` track floor does the reflow). Presentation only — the
   tiles, their values and their RBAC filtering are all decided server-side (coding-standards §4). */

.platform-dash__group {
    margin-top: var(--platform-space-lg);
}

.platform-dash__group:first-of-type {
    margin-top: var(--platform-space-md);
}

/* Small, muted, upper-cased section heading — a quiet divider, not a page title (the tiles are the
   content). Mirrors the `.user-features__module` section caption below for a consistent admin look. */
.platform-dash__group-title {
    margin: 0 0 var(--platform-space-sm);
    font-size: var(--platform-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--platform-color-text-muted);
}

/* Tiles pack across the row and reflow down: the track floor is 9rem, so a wide screen fits many
   columns and a phone drops to two (or one on the narrowest), never a horizontal scroll. */
.platform-dash__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--platform-space-sm);
}

.platform-dash__tile {
    padding: var(--platform-space-md);
    background: var(--platform-color-surface-muted);
    border: 1px solid var(--platform-color-border);
    border-radius: var(--platform-radius-md);
    overflow-wrap: anywhere;
}

/* The big number/value. Tabular figures so a column of counts lines up digit-for-digit. */
.platform-dash__value {
    font-size: var(--platform-font-size-lg);
    font-weight: 700;
    line-height: 1.2;
    color: var(--platform-color-text);
    font-variant-numeric: tabular-nums;
}

.platform-dash__value--ok {
    color: var(--platform-color-ok);
}

.platform-dash__value--danger {
    color: var(--platform-color-error-text);
}

.platform-dash__label {
    margin-top: var(--platform-space-xs);
    font-size: var(--platform-font-size-sm);
    color: var(--platform-color-text-muted);
}

/* Optional sub-line under the label — the last-sync status, the enabled-module list. Smaller still and
   allowed to wrap; it is context, not the headline. */
.platform-dash__sub {
    margin-top: var(--platform-space-xs);
    font-size: var(--platform-font-size-xs);
    color: var(--platform-color-text-muted);
}

/* A tile's compact row list (M-310) — the deployment-history tile shows its last few runs here. It is a
   list, not the headline, so it stays small and quiet; a run's ref and its status/when stack on a phone and
   sit side by side once there is room. */
.platform-dash__list {
    margin: var(--platform-space-sm) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-xs);
}

.platform-dash__list-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--platform-space-sm);
    font-size: var(--platform-font-size-xs);
    line-height: 1.3;
}

.platform-dash__list-label {
    font-weight: 600;
    color: var(--platform-color-text);
    overflow-wrap: anywhere;
}

.platform-dash__list-sub {
    color: var(--platform-color-text-muted);
    white-space: nowrap;
}

.platform-dash__list-sub--ok {
    color: var(--platform-color-ok);
}

.platform-dash__list-sub--danger {
    color: var(--platform-color-error-text);
}

/* The one-line explainer under a page title moved to `.platform-page__explainer` (layout.css) when
   <x-platform::page-header> took ownership of it: it was never an admin-only idea, and the header component
   emits it on ordinary module pages too, where an "admin" class name would have been a lie. */

/* --- Managed-lookup page --- */

.platform-lookup__description {
    margin: 0 0 var(--platform-space-lg);
    color: var(--platform-color-text-muted);
}

.platform-lookup__empty {
    color: var(--platform-color-text-muted, #57606a);
}

/* Drag-to-reorder hint sitting above the editor table. */
.platform-lookup__hint {
    margin: 0 0 var(--platform-space-sm);
    font-size: var(--platform-font-size-sm);
    color: var(--platform-color-text-muted);
}

/* The editor table itself reuses the shared `.platform-table` grid look (table.css); only the
   lookup-specific cell layout lives here. The label input fills its cell so a row reads like a table
   cell, not a form field. */
.platform-lookup__row .platform-form__input {
    width: 100%;
}

/* Code cell: the drag grip + the immutable code, inline. Must stay a **table-cell** — NOT `display: flex`:
   a flex <td> drops out of the row's height equalisation, so the cell shrinks to its own content and its
   `border-bottom` lands ~13px above the sibling cells', giving the row a stepped/misaligned divider. Lay the
   grip and code out inline instead; the cell's own `vertical-align: middle` (table.css) centres them. */
.platform-lookup__code {
    white-space: nowrap;
}

.platform-lookup__code-text {
    font-family: ui-monospace, "SFMono-Regular", monospace;
    font-size: var(--platform-font-size-sm);
    vertical-align: middle;
}

/* Drag handle — the reorder grip (same glyph as the uploader's file rows). Grab cursor, muted until
   hover; decorative (the header + hint carry the meaning), so it is aria-hidden in the markup. */
.platform-lookup__handle {
    cursor: grab;
    line-height: 1;
    color: var(--platform-color-text-muted);
    user-select: none;
    margin-inline-end: var(--platform-space-sm);
    vertical-align: middle;
}

.platform-lookup__handle:hover {
    color: var(--platform-color-text);
}

/* Keep the Active + Actions columns compact and centred so the Label column absorbs the slack. */
.platform-lookup__col--active,
.platform-lookup__col--actions {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* The single page-level Save bar under the editor table; the Save button sits beside its dirty cue. */
.platform-lookup__actions-bar {
    display: flex;
    align-items: center;
    gap: var(--platform-space-sm);
    margin-top: var(--platform-space-md);
}

/* Unsaved-changes cue — hidden until the `unsaved-changes` guard flags the bulk form dirty (`is-dirty`),
   then revealed. Subtle, muted, token-driven; the guard clears on a successful Save (the page reloads
   pristine, so the class is gone). */
.platform-lookup__unsaved {
    display: none;
    font-size: var(--platform-font-size-sm);
    color: var(--platform-color-text-muted);
}

.platform-lookup__bulk-form.is-dirty .platform-lookup__unsaved {
    display: inline;
}

/* Emphasize the Save button while there are unsaved edits so the "you must save" state reads at a glance. */
.platform-lookup__bulk-form.is-dirty .platform-btn--primary {
    box-shadow: 0 0 0 3px rgba(var(--platform-color-accent-rgb), 0.35);
}

/* Per-row delete forms carry only hidden fields (their button lives in the table via `form=`), so they
   take no layout space. */
.platform-lookup__delete-form {
    margin: 0;
}

/* The "add a value" form flows as wrapping rows so the page works from phone to desktop without fixed
   widths. */
.platform-lookup__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--platform-space-sm);
}

/* Non-bold, small, muted caption above each input inside the "add a value" form. */
.platform-lookup__field-label {
    font-size: var(--platform-font-size-sm);
    color: var(--platform-color-text-muted);
}

.platform-lookup__form--add {
    margin-top: var(--platform-space-md);
    padding: var(--platform-space-md);
    background: var(--platform-color-surface-muted);
    border: 1px solid var(--platform-color-border);
    border-radius: var(--platform-radius-md);
}

/* --- Notification detail page (M-093): full text + delivery metadata for one log row --- */
/* The delivery-details key/value table renders with the shared platform key/value table
   (`.platform-kv-table`, 12rem key via `.platform-kv-table__key--fixed`, red error value via
   `.platform-kv-table__value--error`), promoted to the platform layer in G4 — same shape as the contract
   and směrnice detail pages, no page-local copy (coding-standards §3, table.css). The message subject/body
   blocks below stay notification-specific. */

/* The stored message keeps the sender's line breaks and never overflows its card. */
.platform-notification-detail__subject,
.platform-notification-detail__body {
    margin: 0 0 var(--platform-space-md);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.platform-notification-detail__body-missing {
    margin: 0 0 var(--platform-space-md);
    color: var(--platform-color-text-muted);
}

/* Stack the two cards with normal spacing between them. */
.notification-detail .platform-card + .platform-card {
    margin-top: var(--platform-space-lg);
}

/* ── Users administration (M-063b/M-107) ──────────────────────────────────────────────────────────────
 * The post-create screen surfaces a copyable set-password invite link so onboarding works with no mail
 * configured. Presentation only — behaviour (copy) lives in the `clipboard` controller (coding-standards §4).
 * The list header's own layout is gone: "New user" beside the title with an explainer underneath is exactly
 * what <x-platform::page-header> does, so the bespoke `.users__head` flex row was deleted rather than kept as
 * a second, slightly different definition of a page header. */
.users-invite {
    margin: var(--platform-space-md) 0 var(--platform-space-lg);
    padding: var(--platform-space-md) var(--platform-space-lg);
    color: var(--platform-color-text);
    background: var(--platform-color-surface-muted);
    border: 1px solid var(--platform-color-border);
    border-radius: var(--platform-radius-lg, 0.5rem);
}

.users-invite__lead {
    margin: 0 0 var(--platform-space-sm);
    font-weight: 600;
}

.users-invite__row {
    display: flex;
    align-items: center;
    gap: var(--platform-space-sm);
    flex-wrap: wrap;
}

.users-invite__link {
    flex: 1 1 20rem;
    font-family: var(--platform-font-mono, monospace);
}

.users-invite__feedback {
    display: inline-block;
    margin-top: var(--platform-space-xs, 0.25rem);
    color: var(--platform-color-primary);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

/* ── Re-send the set-password invite (M-227) ──────────────────────────────────────────────────────────
 * A secondary action below the access form on a user's manage page — its explainer and its button on one
 * row on a wide screen, stacked on a phone (mobile-first, coding-standards §12). Separated from the form
 * above by a rule, so it reads as its own action rather than part of the Save. */
/* The re-send-invite control, now the last block INSIDE the left "basics" card rather than a full-width strip
   at the foot of the page. It is not a form field — it is a separate action that happens to live among them —
   so a rule above it marks the seam: everything below this line is not saved by Save. It keeps the field
   stack's own vertical rhythm (it is a `.platform-form__field`), and the button sits on its own line at the
   start edge rather than stretching, because it is an action, not an input. */
.users-manage__invite {
    margin-top: var(--platform-space-sm, 0.5rem);
    padding-top: var(--platform-space-md);
    border-top: 1px solid var(--platform-color-border);
}

.users-manage__invite-hint {
    margin: var(--platform-space-xs, 0.25rem) 0 var(--platform-space-sm, 0.5rem);
    color: var(--platform-color-text-muted);
    font-size: var(--platform-font-size-sm);
    line-height: 1.5;
}

.users-manage__invite-btn {
    align-self: flex-start;
}

/* ── Per-user feature switches (M-110c) ───────────────────────────────────────────────────────────────
 * The tier select's companion: sections of grantable-feature checkboxes, one titled block per module,
 * each row a themeable checkbox plus a small description. Built to scale to many features — scannable
 * sections, a readable measure, comfortable spacing — and fully token-driven so it re-skins with the
 * theme (light/dark) with no markup change (coding-standards §4, §12). */
.user-features {
    margin: 0;
    padding: 0;
    border: 0;
}

.user-features__hint {
    margin: 0 0 var(--platform-space-md);
    color: var(--platform-color-text-muted);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

.user-features__section {
    margin-bottom: var(--platform-space-md);
    padding: var(--platform-space-md);
    background: var(--platform-color-surface-muted);
    border: 1px solid var(--platform-color-border);
    border-radius: var(--platform-radius-md);
}

.user-features__module {
    margin: 0 0 var(--platform-space-sm);
    font-size: var(--platform-font-size-sm, 0.875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--platform-color-text-muted);
}

/* Feature boxes tile across the section rather than stacking full-width: up to THREE per row, reflowing to
   two then one as the column narrows. The track floor is `max(14rem, a-third-of-the-row)`: on a wide section
   the third wins, so exactly three columns fit (a fourth has no room); once a third would fall below 14rem
   (narrow / mobile) the 14rem floor wins and `auto-fill` packs two or one. This caps the count at three
   without a media query while still scaling to many more feature options over time — new options just fill
   more rows. `align-items: start` keeps boxes top-aligned when descriptions differ in length. */
.user-features__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(max(14rem, calc((100% - 2 * var(--platform-space-md, 1rem)) / 3)), 1fr)
    );
    align-items: start;
    gap: var(--platform-space-md);
}

.user-features__item {
    display: grid;
    gap: var(--platform-space-xs, 0.25rem);
}

/* The description sits under its checkbox, indented to line up past the checkbox box so the label + help
 * text read as one unit. The indent tracks the shared checkbox box (1.15rem) + its label gap. */
.user-features__description {
    margin: 0;
    padding-left: calc(1.15rem + var(--platform-space-xs, 0.25rem));
    max-width: 60ch;
    color: var(--platform-color-text-muted);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

.user-features__empty {
    margin: 0;
    color: var(--platform-color-text-muted);
    font-size: var(--platform-font-size-sm, 0.875rem);
}