/* The Sistema tools (/admin/servers, /admin/api-clients, /admin/emails, /admin/database): a staff tool at tool volume.
   Under the header one status line (the settings strip, .pn-set-status in settings.css), then lists that sit on the
   page as hairline rows (a 36px neutral mark, the title in 600, caption facts split by css middle dots, the actions at
   the end) and forms that open in place as one bordered block on the grey layer. No cards, no shadows, no glow;
   palette variables and motion tokens only, so light and dark both work. The email feed reuses the logs toolbar
   (.pn-log-toolbar, .pn-log-periods, .pn-log-summary in logs.css). */

/* ---------- Sections ---------- */

.pn-tool-section {
    margin-top: 28px;
}

.pn-tool-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.pn-tool-section-head h2 {
    margin: 0;
    font-family: var(--pn-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.pn-tool-section-head p {
    flex: 1 1 100%;
    margin: 2px 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.pn-tool-subhead {
    margin: 20px 0 8px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* ---------- Rows ---------- */

.pn-tool-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--pn-line);
}

.pn-tool-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas:
        "mark body actions"
        ". extra extra";
    gap: 0 12px;
    align-items: start;
    padding: 12px 8px;
    border-bottom: 1px solid var(--pn-line);
    transition: background-color var(--pn-dur-fast) ease;
}

/* A row whose mark is a look of its own (a badge, a cosmetic, a multiplier): the first column fits it. */
.pn-tool-row--look { grid-template-columns: minmax(36px, auto) minmax(0, 1fr) auto; }

@media (hover: hover) and (pointer: fine) {
    .pn-tool-row:hover { background: var(--mud-palette-action-default-hover); }
}

/* Something switched off: its mark steps back and a pill says so; the text keeps its full contrast. */
.pn-tool-row[data-off] .pn-tool-mark {
    opacity: .62;
}

.pn-tool-mark {
    grid-area: mark;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--pn-radius-sm);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.pn-tool-mark[data-tone="bad"] {
    background: rgba(var(--mud-palette-error-rgb), .1);
    color: var(--mud-palette-error);
}

.pn-tool-mark[data-tone="warn"] {
    background: rgba(var(--mud-palette-warning-rgb), .12);
    color: var(--mud-palette-warning);
}

.pn-tool-mark[data-tone="good"] {
    background: rgba(var(--mud-palette-success-rgb), .1);
    color: var(--mud-palette-success);
}

/* A mode's own colour (staff data) as a dot inside the neutral square. */
.pn-tool-mark .pn-mode-dot {
    width: 12px;
    height: 12px;
}

.pn-tool-body {
    grid-area: body;
    min-width: 0;
}

.pn-tool-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    padding-top: 2px;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.pn-tool-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
    margin: 2px 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-tool-meta > * + *::before {
    content: "·";
    margin: 0 8px;
    color: var(--mud-palette-text-secondary);
}

.pn-tool-meta a {
    color: var(--pn-brand-text);
    font-weight: 600;
    text-underline-offset: 2px;
}

.pn-tool-warn { color: var(--mud-palette-warning); font-weight: 600; }

.pn-tool-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pn-tool-mono,
.pn-tool-meta code {
    font-family: var(--pn-font-mono);
    font-size: .75rem;
    font-weight: 500;
    background: none;
    padding: 0;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.pn-tool-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* What opens under a row (its edit form, its link picker, its error) spans the body and the actions. */
.pn-tool-extra {
    grid-area: extra;
    min-width: 0;
}

/* ---------- Pills (quiet, text first; the tone only repeats the word) ---------- */

.pn-tool-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-pill);
    background: var(--mud-palette-surface);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.pn-tool-pill .mud-icon-root { font-size: .9rem; }

.pn-tool-pill[data-tone="good"] {
    border-color: rgba(var(--mud-palette-success-rgb), .4);
    background: rgba(var(--mud-palette-success-rgb), .08);
    color: var(--mud-palette-success);
}

.pn-tool-pill[data-tone="warn"] {
    border-color: rgba(var(--mud-palette-warning-rgb), .45);
    background: rgba(var(--mud-palette-warning-rgb), .1);
    color: var(--mud-palette-warning);
}

.pn-tool-pill[data-tone="bad"] {
    border-color: rgba(var(--mud-palette-error-rgb), .4);
    background: rgba(var(--mud-palette-error-rgb), .08);
    color: var(--mud-palette-error);
}

.pn-tool-pill[data-tone="info"] {
    border-color: rgba(var(--mud-palette-info-rgb), .4);
    background: rgba(var(--mud-palette-info-rgb), .08);
    color: var(--mud-palette-info);
}

/* ---------- Forms in place ---------- */

.pn-tool-form {
    margin: 12px 0 4px;
    padding: 16px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-background-gray);
    animation: pn-drop var(--pn-dur) var(--pn-ease-out) both;
}

.pn-tool-form > h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.pn-tool-form > p {
    margin: 0 0 12px;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.pn-tool-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 16px;
    align-items: start;
}

.pn-tool-fields .mud-input-control { margin: 0; }

.pn-tool-wide { grid-column: 1 / -1; }

.pn-tool-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.pn-tool-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 8px;
}

.pn-tool-inline .mud-input-control {
    flex: 1 1 260px;
    max-width: 480px;
    margin: 0;
}

/* A checklist: one row per option, the label then its caption (the scope's code). */
.pn-tool-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0 16px;
    margin: 0;
    padding: 0;
    border: 0;
}

.pn-tool-checks legend {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    padding: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.pn-tool-checks .mud-checkbox { align-items: flex-start; }

.pn-tool-check-label {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    padding-top: 2px;
}

/* ---------- Confirmations in place (RowConfirm) ---------- */

/* What a destructive action asks before it runs, under the row it acts on: a tinted bordered block with the
   consequence as a sentence, Cancelar and the action named after the item. Never a dialog. */
.pn-tool-confirm {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 8px 10px;
    margin: 10px 0 4px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--mud-palette-error-rgb), .45);
    border-radius: var(--pn-radius-md);
    background: rgba(var(--mud-palette-error-rgb), .06);
    animation: pn-drop var(--pn-dur) var(--pn-ease-out) both;
}

.pn-tool-confirm[data-tone="warn"] {
    border-color: rgba(var(--mud-palette-warning-rgb), .45);
    background: rgba(var(--mud-palette-warning-rgb), .07);
}

.pn-tool-confirm > .mud-icon-root { margin-top: 2px; color: var(--mud-palette-error); }
.pn-tool-confirm[data-tone="warn"] > .mud-icon-root { color: var(--mud-palette-warning); }

.pn-tool-confirm > p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

.pn-tool-confirm:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.pn-tool-confirm-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* ---------- Colour and icon fields (ColorField, IconField) ---------- */

.pn-colorfield,
.pn-iconfield {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pn-colorfield-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.pn-colorfield-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.pn-colorfield-hex {
    flex: 0 1 180px;
    min-width: 150px;
}

.pn-colorfield-hex .mud-input-adornment-start .mud-icon-root {
    color: var(--pn-colorfield-now, var(--mud-palette-text-disabled));
}

.pn-colorfield-help {
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* ---------- Notes and lines ---------- */

/* One quiet line on the grey layer (what is never shown, what a copy holds). */
.pn-tool-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
    line-height: 1.5;
}

.pn-tool-note > .mud-icon-root { flex: none; margin-top: 1px; }
.pn-tool-note strong { color: var(--mud-palette-text-primary); font-weight: 600; }

.pn-tool-note[data-tone="bad"] {
    border-color: rgba(var(--mud-palette-error-rgb), .45);
    background: rgba(var(--mud-palette-error-rgb), .06);
    color: var(--mud-palette-text-primary);
}

.pn-tool-note[data-tone="bad"] > .mud-icon-root { color: var(--mud-palette-error); }

.pn-tool-note[data-tone="good"] {
    border-color: rgba(var(--mud-palette-success-rgb), .45);
    background: rgba(var(--mud-palette-success-rgb), .06);
    color: var(--mud-palette-text-primary);
}

.pn-tool-note[data-tone="good"] > .mud-icon-root { color: var(--mud-palette-success); }

.pn-tool-note[data-tone="warn"] {
    border-color: rgba(var(--mud-palette-warning-rgb), .45);
    background: rgba(var(--mud-palette-warning-rgb), .07);
    color: var(--mud-palette-text-primary);
}

.pn-tool-note[data-tone="warn"] > .mud-icon-root { color: var(--mud-palette-warning); }

/* An error under a row: visible text, never a tooltip. */
.pn-tool-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--mud-palette-error);
    overflow-wrap: anywhere;
}

.pn-tool-error .mud-icon-root { flex: none; font-size: 1rem; margin-top: 1px; }

/* ---------- The one-time secret (a new API token) ---------- */

.pn-tool-secret {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(var(--mud-palette-success-rgb), .45);
    border-radius: var(--pn-radius);
    background: rgba(var(--mud-palette-success-rgb), .06);
    animation: pn-drop var(--pn-dur) var(--pn-ease-out) both;
}

.pn-tool-secret p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

.pn-tool-secret-value {
    display: block;
    margin: 10px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-surface);
    font-family: var(--pn-font-mono);
    font-size: .8125rem;
    color: var(--mud-palette-text-primary);
    word-break: break-all;
    user-select: all;
}

/* ---------- A folded group (revoked tokens) ---------- */

.pn-tool-fold {
    margin-top: 20px;
}

.pn-tool-fold > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 4px;
    border-radius: var(--pn-radius-sm);
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    list-style: none;
}

.pn-tool-fold > summary::-webkit-details-marker { display: none; }

.pn-tool-fold > summary .mud-icon-root {
    transition: transform var(--pn-dur-fast) var(--pn-ease-out);
}

.pn-tool-fold[open] > summary .mud-icon-root { transform: rotate(90deg); }

.pn-tool-fold > summary:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.pn-tool-fold > .pn-tool-list { margin-top: 8px; }

/* ---------- Pager ---------- */

.pn-tool-pager {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

/* ---------- Small screens ---------- */

@media (max-width: 599.98px) {
    .pn-tool-row {
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-areas:
            "mark body"
            ". actions"
            ". extra";
        padding: 12px 4px;
    }

    .pn-tool-row--look { grid-template-columns: minmax(36px, auto) minmax(0, 1fr); }

    .pn-tool-actions {
        justify-content: flex-start;
        margin-top: 6px;
    }

    .pn-tool-form { padding: 12px; }

    .pn-tool-form-actions { flex-direction: column-reverse; }

    .pn-tool-form-actions .mud-button-root { width: 100%; }

    .pn-tool-confirm { grid-template-columns: minmax(0, 1fr); }
    .pn-tool-confirm > .mud-icon-root { display: none; }
    .pn-tool-confirm-actions { grid-column: 1; flex-direction: column-reverse; }
    .pn-tool-confirm-actions .mud-button-root { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-tool-form,
    .pn-tool-confirm,
    .pn-tool-secret {
        animation-name: pn-fade;
    }

    .pn-tool-fold > summary .mud-icon-root { transition: none; }
}

/* A help line under a switch or a field that has no helper text of its own. */
.pn-tool-hint {
    display: block;
    margin: -2px 0 4px 46px;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* ---------- Normas (/admin/rules) ---------- */

/* A section's h2 sits beside its own actions; the number from the order in the secondary text colour. */
.pn-ar-head { align-items: center; }
.pn-ar-head h2 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pn-ar-num { color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }

/* The rule's number ("2.3") in the mark square, as text, not as a badge. */
.pn-ar-mark {
    width: auto;
    min-width: 36px;
    padding: 0 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.pn-ar-text {
    margin: 0;
    padding-top: 6px;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.pn-ar-empty {
    margin: 0;
    padding: 12px 8px;
    border-top: 1px solid var(--pn-line);
    border-bottom: 1px solid var(--pn-line);
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

/* ---------- Facts strip (the numbers of a tool: donations, loyalty) ---------- */

/* One bordered strip of cells split by hairlines; no tiles, no tinted icons. The number in Rajdhani with tabular
   figures, its label under it, an optional hint in caption text. */
.pn-tool-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    margin: 16px 0 0;
    padding: 0;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-surface);
    list-style: none;
    overflow: hidden;
}

.pn-tool-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 12px 16px;
    margin: 0 -1px -1px 0;
    border-right: 1px solid var(--pn-line);
    border-bottom: 1px solid var(--pn-line);
}

.pn-tool-fact-value {
    font-family: var(--pn-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.pn-tool-fact-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.pn-tool-fact-hint {
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* A filter bar of a list: selects and switches in one wrapping row, the count and «Quitar filtros» after it. */
.pn-tool-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 12px 0;
}

.pn-tool-filters .mud-input-control { flex: 0 1 220px; min-width: 160px; margin: 0; }

.pn-tool-count {
    margin: 8px 0;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 599.98px) {
    .pn-tool-filters .mud-input-control { flex: 1 1 100%; }
}

/* An SCP:SL badge as the game draws it: its named colour over a dark plate, whatever the theme
   (/admin/servers/groups). */
.pn-slbadge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--pn-radius-sm);
    background: var(--pn-ink);
    color: var(--pn-slbadge, var(--pn-on-dark));
    font-family: var(--pn-font-mono);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.5;
}

.pn-slbadge-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--pn-slbadge);
    box-shadow: 0 0 0 1px var(--pn-line-strong);
    vertical-align: middle;
}

.pn-slbadge-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}