/* Administration → System → Modules (M-490). Page-scoped presentation only: the module table's own cells
   (key · state · reach · order · actions, M-604/M-606), the M-566 diagnosis band, the "what switching off does" list, the
   footnotes, and the grant-to-everyone confirmation. Token-driven; reuses the existing status colours
   (ok / warning / error-text / text-muted) — no new palette. Mirrors the other System pages' page-scoped sheets.

   The BOX, the header band, the cell padding, the row dividers and the phone-width scrolling all come from the
   shared static table (`.platform-table`, table.css) — this sheet adds nothing the shared look already owns
   (coding-standards §3). Before M-604 the modules were a `<ul>` whose `<li>` laid name, key, state, a reach
   sentence and a button out in a subgrid; that is where the 88–130px rows came from, and all of it is gone. */

/* Standing warning that this server's saved module state is unreadable (page-local, like the update page's
   own alert box — not a shared component; the tokens are the shared part). */
.platform-system-modules__alert {
    margin-bottom: var(--platform-space-md, 1rem);
    padding: var(--platform-space-md, 1rem);
    border: 1px solid var(--platform-color-error, #c0392b);
    border-radius: var(--platform-radius-md, 4px);
    background: var(--platform-color-error-surface, #fdecea);
    color: var(--platform-color-error-text, #c0392b);
}

.platform-system-modules__alert-title,
.platform-system-modules__alert-text {
    margin: 0;
}

.platform-system-modules__alert-title {
    margin-bottom: var(--platform-space-xs, 0.25rem);
    font-weight: 700;
}

/* The alert can carry the way out of the state it reports (M-566: "nobody can see this module" comes with
   "grant it to everyone"), so it needs one line of room for an action. */
.platform-system-modules__alert-action {
    margin: var(--platform-space-sm, 0.5rem) 0 0;
}

/* The module's key (M-493): the string `storage/app/modules.json` and `modulus:modules` speak, in the mono
   face the console uses and quieter than the name it belongs to. Its own column in the table; a block under
   the feature label on the grant confirmation (see `__plan` below).

   It does NOT break mid-word any more. A key is one identifier an operator retypes into a config file or a
   console, and the `word-break: break-all` it carried while it lived in a narrow flex column split `directives`
   across two lines at 390px — costing that row 19px and the reader a moment's doubt about what the key is.
   Wrapping is the table wrapper's job now (it scrolls, table.css §12), not the identifier's. */
.platform-system-modules__key {
    color: var(--platform-color-text-muted, #636e6f);
    font-family: var(--platform-font-mono, monospace);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

/* A disabled module reads in the error tone, an enabled one in the OK tone — the row carries the `is-enabled`
   hook, so the state word is scoped under it rather than needing its own modifier. It never wraps: a state
   word folding onto a second line would cost the whole table the density this page was rebuilt for. */
.platform-system-modules__state {
    font-weight: 600;
    white-space: nowrap;
    color: var(--platform-color-error-text, #c0392b);
}

.platform-system-modules__module.is-enabled .platform-system-modules__state {
    color: var(--platform-color-ok, #27ae60);
}

/* The module's own name and the drag grip in front of it (M-607) stay on ONE line, for the third time on this
   page and for the same reason: a cell that wraps costs the whole table the density M-604 rebuilt it for.
   Concretely, under a coarse pointer the grip takes the shared 44px tap floor (table.css) and "⠿ Kmenová data"
   then no longer fits the 102px the name column gets at 390px — the label folded under the grip and every
   draggable row grew 20px. The table already scrolls sideways at that width (table.css §12), so a wider column
   costs nothing a narrower one does not. */
.platform-system-modules__module > th {
    white-space: nowrap;
}

/* Reach (M-566): who can actually see this module, as ONE line in its own column. Same reason as the state
   word — a count that wraps takes the row back to where M-604 started. */
.platform-system-modules__reach {
    white-space: nowrap;
}

/* The everyday figure: readable, quiet, not a headline. */
.platform-system-modules__visible {
    color: var(--platform-color-text-muted, #636e6f);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

/* **The state this page exists for.** On, and reachable by nobody — which used to be indistinguishable from
   "switched off", since the nav gate drops an unreachable entry in silence. It carries the error tone and its
   own weight so it cannot read as one more neutral statistic in a column of them. */
.platform-system-modules__unreachable {
    color: var(--platform-color-error-text, #c0392b);
    font-size: var(--platform-font-size-sm, 0.875rem);
    font-weight: 700;
}

/* The row itself pulls its OK-toned state word back to the caution colour when nothing can reach it: "enabled"
   in green over "nobody can see this module" is the mixed signal the card is about. Same specificity as the
   `is-enabled` rule above, so it wins by coming after it — keep it here, below that rule. */
.platform-system-modules__module.is-unreachable .platform-system-modules__state {
    color: var(--platform-color-warning, #d9822b);
}

/* The diagnosis band (M-604): the full sentence the unreachable row needs, spanning the table under the row it
   belongs to. It is a band and not a cell because a diagnosis is a sentence — and squeezing every row to fit
   the worst one is what made this page 130px tall. Only the broken row pays for it. */
.platform-system-modules__diagnosis td {
    padding-top: 0;
    background: var(--platform-color-error-surface, #fdecea);
    color: var(--platform-color-error-text, #c0392b);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

/* The two are one statement, so the row above drops the divider between them and the band picks the row up
   where it left off. Two classes beat the shared `.platform-table tbody td` divider on specificity. */
.platform-system-modules__module.is-unreachable > th,
.platform-system-modules__module.is-unreachable > td {
    border-bottom: 0;
}

/* The row's actions. A BLOCK inside the cell, never the cell itself: a flex `<td>` drops out of the table's
   height equalisation and its divider then sits above its neighbours' (M-523). Right-aligned, so the switch —
   which is last — lands at the same x on every row, including the ones with no grant button beside it.

   `nowrap` is the whole point of the row: the actions column is `--compact` (width: 1%), so it shrinks to the
   cell's min-content — and a WRAPPING flex row's min-content is its widest single button, which stacks Grant
   above Switch and takes the row straight back to 86px. Not wrapping makes the min-content the two buttons
   side by side, i.e. a 47px row; where that no longer fits, the shared table wrapper scrolls (table.css, §12)
   rather than the row growing. */
.platform-system-modules__actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--platform-space-sm, 0.5rem);
}

.platform-system-modules__switch {
    margin: 0;
}

/* The Order cell's own little form (M-606). It exists only because HTML forbids a form inside a form and the
   switch beside it is one; it must add nothing of its own to the row, so it is an inline box with no margin —
   the pair inside it is `.platform-row-move` (table.css) and keeps its own spacing. */
.platform-system-modules__order {
    display: inline-block;
    margin: 0;
}

/* The confirmation page's two actions sit side by side, wrapping on a narrow screen; the form is an inline box
   so its button lines up with the cancel link rather than starting a block of its own. */
.platform-system-modules__confirm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--platform-space-sm, 0.5rem);
    margin-top: var(--platform-space-md, 1rem);
}

.platform-system-modules__confirm-actions form {
    margin: 0;
}

/* The confirmation's buttons take the shared tap-target floor under a coarse pointer — the same trigger and
   the same token as the central block in buttons.css, which asks a third shape to justify itself here rather
   than joining it. The justification: these two are the ONLY controls on the page, the left one commits a mass
   authorization change and the right one abandons it, and at the token's desktop input height they sit 30px
   apart-and-adjacent under a thumb. Page-scoped on purpose — this is an argument about this page, not about
   every primary button in the app. */
@media (pointer: coarse), (max-width: 47.99rem) {
    .platform-system-modules__confirm-actions .platform-btn {
        min-height: var(--platform-tap-target, 2.75rem);
    }
}

/* The confirmation's "what will happen" pairs: a quiet label over its value, at every width — three pairs do
   not earn a second layout. The values stack their own secondary lines (key, help text), so each is a block. */
.platform-system-modules__plan {
    margin: 0;
}

.platform-system-modules__plan dt {
    color: var(--platform-color-text-muted, #636e6f);
    font-size: var(--platform-font-size-sm, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.platform-system-modules__plan dd {
    margin: 0 0 var(--platform-space-md, 1rem);
    color: var(--platform-color-text, #2c3e50);
}

.platform-system-modules__plan dd:last-child {
    margin-bottom: 0;
}

.platform-system-modules__plan .platform-system-modules__key,
.platform-system-modules__plan .platform-system-modules__note {
    display: block;
}

.platform-system-modules__facts {
    margin: 0;
    padding-left: var(--platform-space-lg, 1.5rem);
    color: var(--platform-color-text, #2c3e50);
}

.platform-system-modules__facts li + li {
    margin-top: var(--platform-space-xs, 0.25rem);
}

/* The footnotes under the table, and the quiet cell that says a module's visibility is nobody's grant to
   make. Same tone either way: this is the page's small print. */
.platform-system-modules__note {
    margin: 0;
    color: var(--platform-color-text-muted, #636e6f);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

.platform-system-modules__note + .platform-system-modules__note {
    margin-top: var(--platform-space-xs, 0.25rem);
}

/* The footnotes sit under the table inside the card, not against it. */
.platform-table-wrap + .platform-system-modules__note {
    margin-top: var(--platform-space-md, 1rem);
}