/* ═══════════════════════════════════════════════════════════════════
   Admin Panel — Komponenten & Doku-Helper
   Erweitert das Fairy-Aurora-Design-System um administrative Patterns.
   Tone-Aliases (--tone-cyan/pink/purple) und Severity-Tokens
   (--sev-info-color, --sev-warning-color, --sev-critical-color,
   --sev-danger-color, --sev-success-color, --sev-neutral-color) sind
   in fairy-aurora.css definiert (Light + Dark + System).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tone-Aliases (Helper, nicht-token) ─────────────────────── */
/* ══════════════════════════════════════════════════════════════
   Hub-Layout — .fa-admin-hub / __search / -group / -grid / __empty
   ══════════════════════════════════════════════════════════════ */
.fa-admin-hub {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.fa-admin-hub__search {
    position: relative;
    max-width: 520px;
}
.fa-admin-hub__search > .bi {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fg-3);
    font-size: 16px;
    pointer-events: none;
}
.fa-admin-hub__search-input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--fg);
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fa-admin-hub__search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--tone-cyan-rgb), .15);
}

.fa-admin-hub-group {
    --grp: var(--primary);
}
.fa-admin-hub-group[data-tone="cyan"]   { --grp: var(--tone-cyan); }
.fa-admin-hub-group[data-tone="pink"]   { --grp: var(--tone-pink); }
.fa-admin-hub-group[data-tone="purple"] { --grp: var(--tone-purple); }

.fa-admin-hub-group__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.fa-admin-hub-group__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--grp) 12%, transparent);
    color: var(--grp);
    border: 1px solid color-mix(in oklab, var(--grp) 22%, transparent);
    border-radius: var(--r-md);
    font-size: 18px;
}
.fa-admin-hub-group__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--fg);
    margin: 0 0 2px 0;
    letter-spacing: -0.01em;
}
.fa-admin-hub-group__desc {
    font-size: 13px;
    color: var(--fg-3);
    margin: 0;
    line-height: 1.4;
}

.fa-admin-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.fa-admin-hub__empty {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--fg-3);
    text-align: center;
}
.fa-admin-hub__empty:not([hidden]) {
    display: flex;
}
.fa-admin-hub__empty .bi {
    font-size: 28px;
    color: var(--fg-3);
    opacity: .55;
}
.fa-admin-hub__empty p {
    margin: 0;
    font-size: 14px;
}

.fa-admin-hub-card {
    --tone: var(--tone-cyan);
    --tone-tint: rgba(var(--tone-cyan-rgb), 0.10);
    --tone-bd: rgba(var(--tone-cyan-rgb), 0.22);
    --tone-glow: rgba(var(--tone-cyan-rgb), 0.35);

    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 16px 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
    overflow: hidden;
    min-height: 132px;
}
.fa-admin-hub-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--tone);
    transition: width var(--t-fast) var(--ease-out);
}
.fa-admin-hub-card:hover {
    transform: translateY(-1px);
    border-color: var(--tone);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06),
                0 0 0 1px var(--tone-glow);
}
.fa-admin-hub-card:hover::before { width: 4px; }

/* Tone variants */
.fa-admin-hub-card[data-tone="cyan"]   { --tone: var(--tone-cyan);   --tone-tint: rgba(var(--tone-cyan-rgb), .10);   --tone-bd: rgba(var(--tone-cyan-rgb), .22);   --tone-glow: rgba(var(--tone-cyan-rgb), .30); }
.fa-admin-hub-card[data-tone="pink"]   { --tone: var(--tone-pink);   --tone-tint: rgba(var(--tone-pink-rgb), .10);   --tone-bd: rgba(var(--tone-pink-rgb), .24);   --tone-glow: rgba(var(--tone-pink-rgb), .30); }
.fa-admin-hub-card[data-tone="purple"] { --tone: var(--tone-purple); --tone-tint: rgba(var(--tone-purple-rgb), .10); --tone-bd: rgba(var(--tone-purple-rgb), .24); --tone-glow: rgba(var(--tone-purple-rgb), .30); }

.fa-admin-hub-card__chip {
    width: 32px; height: 32px;
    border-radius: var(--r-lg);
    background: var(--tone-tint);
    border: 1px solid var(--tone-bd);
    color: var(--tone);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 10px;
}
.fa-admin-hub-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.005em;
    margin-bottom: 4px;
}
.fa-admin-hub-card__desc {
    font-size: 12px;
    color: var(--fg-2);
    line-height: 1.45;
    margin: 0 0 12px;
    flex: 1;
}
.fa-admin-hub-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--fg-3);
}
.fa-admin-hub-card__foot i {
    margin-left: auto;
    color: var(--tone);
    transition: transform var(--t-fast) var(--ease-out);
}
.fa-admin-hub-card:hover .fa-admin-hub-card__foot i { transform: translateX(2px); }

.fa-admin-hub-card__count {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--fg-2);
}
.fa-admin-hub-card__badge {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--r-xs);
    background: var(--tone-tint);
    color: var(--tone);
    border: 1px solid var(--tone-bd);
}
.fa-admin-hub-card__badge--cyan   { background: rgba(var(--tone-cyan-rgb), .10);   color: var(--tone-cyan-strong);   border-color: rgba(var(--tone-cyan-rgb), .22); }
.fa-admin-hub-card__badge--pink   { background: rgba(var(--tone-pink-rgb), .10);   color: var(--tone-pink-strong);   border-color: rgba(var(--tone-pink-rgb), .24); }
.fa-admin-hub-card__badge--purple { background: rgba(var(--tone-purple-rgb), .10); color: var(--tone-purple-strong); border-color: rgba(var(--tone-purple-rgb), .24); }

html[data-theme="dark"] .fa-admin-hub-card__count { background: rgba(255,255,255,.06); color: var(--fg-2); }

/* ══════════════════════════════════════════════════════════════
   Permission-Matrix — .fa-perm-matrix
   ══════════════════════════════════════════════════════════════ */

.role-tag {
    --c: var(--primary);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--r-xs);
    color: var(--c);
    background: color-mix(in oklab, var(--c) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--c) 25%, transparent);
    text-transform: none;
    letter-spacing: 0.02em;
}

.perm {
    --c: var(--primary);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--c);
    background: color-mix(in oklab, var(--c) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--c) 22%, transparent);
    padding: 3px 8px;
    border-radius: var(--r-sm);
    display: inline-block;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   Audit-Log-Row — .fa-audit-row
   ══════════════════════════════════════════════════════════════ */
.fa-audit-feed {
    display: flex;
    flex-direction: column;
    background: var(--surface);
}
.fa-audit-row {
    display: grid;
    grid-template-columns: 110px 14px minmax(120px, 1fr) auto minmax(140px, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    border-left: 3px solid transparent;
}
.fa-audit-row:last-child { border-bottom: none; }
.fa-audit-row:hover { background: var(--surface-2); }

.fa-audit-row__ts {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--fg-3);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.fa-audit-row__sev {
    width: 8px; height: 8px;
    border-radius: var(--r-pill);
    background: var(--primary);
    box-shadow: none;
}
.fa-audit-row__sev--info     { background: var(--sev-info-color);     box-shadow: none; }
.fa-audit-row__sev--warning  { background: var(--sev-warning-color);  box-shadow: none; }
.fa-audit-row__sev--critical { background: var(--sev-critical-color); box-shadow: none; }
.fa-audit-row__sev--danger   { background: var(--sev-danger-color);   box-shadow: none; }

.fa-audit-row__actor {
    font-weight: 600;
    color: var(--fg);
}
.fa-audit-row__action {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--primary-tint);
    color: var(--primary-strong);
    padding: 2px 7px;
    border-radius: var(--r-xs);
    border: 1px solid color-mix(in oklab, var(--primary) 22%, transparent);
}
.fa-audit-row__target {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-2);
}
.fa-audit-row__hash {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--fg-3);
    margin-left: auto;
    letter-spacing: 0.04em;
}
.fa-audit-row__pill {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--r-xs);
    background: rgba(var(--tone-purple-rgb), 0.12);
    color: var(--tone-purple-strong);
    border: 1px solid rgba(var(--tone-purple-rgb), 0.28);
}

.fa-audit-row--sealed {
    border-left-color: var(--tone-purple);
    background: linear-gradient(90deg, rgba(var(--tone-purple-rgb), .04) 0%, transparent 40%);
}
.fa-audit-row--failed {
    border-left-color: var(--sev-danger-color);
}

/* ══════════════════════════════════════════════════════════════
   Skeleton — .fa-skel
   ══════════════════════════════════════════════════════════════ */
.fa-confirm {
    --tone: var(--sev-danger-color);
    --tone-tint: rgba(var(--sev-danger-rgb), 0.10);
    --tone-bd: rgba(var(--sev-danger-rgb), 0.28);
    position: relative;
    width: 460px;
    max-width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--tone);
    border-radius: var(--r-md);
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.18),
        0 0 0 1px var(--tone-bd);
    padding: 22px;
    z-index: 2;
}
.fa-confirm[data-tone="warn"]    { --tone: var(--sev-warning-color); --tone-tint: rgba(var(--sev-warning-rgb), .10); --tone-bd: rgba(var(--sev-warning-rgb), .26); }
.fa-confirm[data-tone="danger"]  { --tone: var(--sev-danger-color);  --tone-tint: rgba(var(--sev-danger-rgb), .10);  --tone-bd: rgba(var(--sev-danger-rgb), .28); }
.fa-confirm[data-tone="nuclear"] { --tone: var(--danger-strong);     --tone-tint: rgba(var(--danger-rgb), .14);      --tone-bd: rgba(var(--danger-rgb), .34); }

.fa-confirm__header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.fa-confirm__icon {
    width: 38px; height: 38px;
    border-radius: var(--r-lg);
    background: var(--tone-tint);
    border: 1px solid var(--tone-bd);
    color: var(--tone);
    display: grid; place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}
.fa-confirm__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 4px;
}
.fa-confirm__sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fg-2);
}
.fa-confirm__sub code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--surface-2);
    padding: 1px 5px;
    border-radius: var(--r-xs);
    border: 1px solid var(--border);
    color: var(--fg);
}

.fa-confirm__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
    margin-top: 4px;
    padding-top: 14px;
}
/* ══════════════════════════════════════════════════════════════
   Audit-Log-Item — .audit-log-item (Detail/History Card-Variant)
   Light + Dark via Aurora tokens only. Use in audit_log/detail
   and audit_log/entity_history. For compact log-rows in tables
   keep using .fa-audit-row above.
   ══════════════════════════════════════════════════════════════ */