/* ─────────────────────────────────────────────────────────────────────────────
   Admin settings (/admin) — flat design layer (2026-09-25)

   Every Admin tab renders inside `.admin-pane` (Admin.razor). This sheet does two jobs:

   1. SAFETY NET — flattens the Bootstrap vocabulary the section components still
      use (cards, glass, buttons, inputs, switches, badges, alerts, tables) so the
      whole page reads as one flat system: solid surfaces, hairline borders, pill
      buttons, no gradients / blur / drop shadows / hover lifts.
   2. `.as-*` VOCABULARY — the flat building blocks new or rewritten admin markup
      should use (same language as Packages' `.pk-*`):
        .as-card            one flat container (never nest another inside it)
        .as-card-head       title + sub on the left, actions on the right
        .as-section-label   uppercase group label with a hairline above
        .as-row             setting row: label/hint left, control right
        .as-row.toggle      switch rows (switch stays right on phones)
        .as-actions         footer action bar (hairline above)
        .as-btn(.primary|.ghost|.danger|.success)   pill buttons
        .as-pill(.success|.warning|.danger|.muted|.primary)   flat status pills
        .as-note(.warn|.danger)   inline hint text, no box
        .as-list / .as-item  divided rows instead of tables or boxed tiles
   ───────────────────────────────────────────────────────────────────────────── */

.admin-pane {
    --as-border: var(--surface-border, rgba(0,0,0,0.1));
    --as-divider: var(--surface-border-light, rgba(0,0,0,0.06));
    --as-radius: 0.75rem;
}
[data-theme="dark"] .admin-pane {
    --as-border: rgba(255,255,255,0.1);
    --as-divider: rgba(255,255,255,0.07);
}

/* ═══ 1. Safety net ═══════════════════════════════════════════════════════════ */

/* Cards + glass → one flat surface */
.admin-pane .card,
.admin-pane [class*="glass-"] {
    background: var(--surface-card, #fff) !important;
    border: 1px solid var(--as-border) !important;
    border-radius: var(--as-radius) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-image: none !important;
}
.admin-pane .card:hover,
.admin-pane [class*="glass-"]:hover {
    transform: none !important;
    box-shadow: none !important;
}
.admin-pane .card::before,
.admin-pane .card::after,
.admin-pane [class*="glass-"]::before,
.admin-pane [class*="glass-"]::after { display: none !important; }

/* No russian dolls: a card inside a card becomes a divided group */
.admin-pane .card .card,
.admin-pane [class*="glass-"] .card,
.admin-pane .card [class*="glass-"],
.admin-pane [class*="glass-"] [class*="glass-"] {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--as-divider) !important;
    border-radius: 0 !important;
}
.admin-pane .card-header,
.admin-pane .card-footer {
    background: transparent !important;
    border-color: var(--as-divider) !important;
}

.admin-pane .shadow,
.admin-pane .shadow-sm,
.admin-pane .shadow-lg { box-shadow: none !important; }

/* Buttons → pills */
.admin-pane .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0 1.1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: none !important;
    background-image: none !important;
    transform: none !important;
    transition: filter 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.admin-pane .btn-sm { min-height: 32px; padding: 0 0.85rem; font-size: 0.8rem; }
.admin-pane .btn-lg { min-height: 44px; }
.admin-pane .btn:focus-visible { outline: 2px solid var(--brand-primary, #0366d6); outline-offset: 2px; }

.admin-pane .btn-primary { background-color: var(--brand-primary, #0366d6); border-color: var(--brand-primary, #0366d6); color: #fff; }
.admin-pane .btn-success { background-color: #16a34a; border-color: #16a34a; color: #fff; }
.admin-pane .btn-danger  { background-color: #dc2626; border-color: #dc2626; color: #fff; }
.admin-pane .btn-warning { background-color: #f59e0b; border-color: #f59e0b; color: #111827; }
.admin-pane .btn-dark    { background-color: #111827; border-color: #111827; color: #fff; }
.admin-pane .btn-primary:hover:not(:disabled),
.admin-pane .btn-success:hover:not(:disabled),
.admin-pane .btn-danger:hover:not(:disabled),
.admin-pane .btn-warning:hover:not(:disabled),
.admin-pane .btn-dark:hover:not(:disabled) { filter: brightness(1.08); }

/* Every outline / secondary / light / info button = one neutral ghost pill;
   danger keeps red text so destructive actions still read as destructive. */
.admin-pane .btn-secondary,
.admin-pane .btn-light,
.admin-pane .btn-info,
.admin-pane [class*="btn-outline-"] {
    background-color: transparent !important;
    border: 1px solid var(--as-border) !important;
    color: var(--text-primary, #111827) !important;
}
.admin-pane [class*="btn-outline-"]:hover:not(:disabled),
.admin-pane .btn-secondary:hover:not(:disabled),
.admin-pane .btn-light:hover:not(:disabled),
.admin-pane .btn-info:hover:not(:disabled) {
    background-color: var(--surface-hover, rgba(0,0,0,0.03)) !important;
    border-color: var(--text-secondary, #6b7280) !important;
}
.admin-pane .btn-outline-danger { color: #dc2626 !important; }
.admin-pane .btn-outline-danger:hover:not(:disabled) { border-color: #dc2626 !important; background-color: rgba(220,38,38,0.06) !important; }
.admin-pane .btn-outline-success { color: #16a34a !important; }
.admin-pane .btn-outline-warning { color: #b45309 !important; }
.admin-pane .btn-outline-primary { color: var(--brand-primary, #0366d6) !important; }
[data-theme="dark"] .admin-pane .btn-outline-warning { color: #fbbf24 !important; }
[data-theme="dark"] .admin-pane .btn-outline-danger { color: #f87171 !important; }
[data-theme="dark"] .admin-pane .btn-outline-success { color: #4ade80 !important; }
.admin-pane .btn-link { min-height: auto; padding: 0; border-radius: 0; }

/* Inputs */
.admin-pane .form-control,
.admin-pane .form-select {
    min-height: 40px;
    border-radius: 0.6rem;
    border: 1px solid var(--as-border);
    box-shadow: none;
    font-size: 0.9rem;
}
.admin-pane textarea.form-control { min-height: 80px; }
.admin-pane .form-control-sm,
.admin-pane .form-select-sm { min-height: 32px; font-size: 0.82rem; }
.admin-pane .form-control:focus,
.admin-pane .form-select:focus {
    border-color: var(--brand-primary, #0366d6);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 3, 102, 214), 0.12);
}
.admin-pane .input-group > .form-control,
.admin-pane .input-group > .form-select,
.admin-pane .input-group > .btn { border-radius: 0.6rem; }
.admin-pane .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.admin-pane .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.admin-pane .input-group-text {
    background: var(--surface-muted, #f5f5f5);
    border-color: var(--as-border);
    border-radius: 0.6rem;
    font-size: 0.85rem;
}
.admin-pane .form-label { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.35rem; }
.admin-pane .form-text { font-size: 0.78rem; }

/* Switches = the flat green pill (Packages' .pk-switch look). The pill is wider than
   Bootstrap's, so widen the label gutter to match or the label touches the switch. */
.admin-pane .form-switch { padding-left: 3.25em; }
.admin-pane .form-switch .form-check-input { margin-left: -3.25em; }
.admin-pane .form-switch.m-0,
.admin-pane .form-switch:not(:has(.form-check-label)) { padding-left: 0; }
.admin-pane .form-switch.m-0 .form-check-input,
.admin-pane .form-switch:not(:has(.form-check-label)) .form-check-input { margin-left: 0; }
.admin-pane .form-switch .form-check-input {
    width: 2.6em;
    height: 1.4em;
    border: 0;
    background-color: rgba(107,114,128,0.35);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    box-shadow: none;
    cursor: pointer;
}
.admin-pane .form-switch .form-check-input:checked { background-color: #16a34a; }
.admin-pane .form-switch .form-check-input:focus { box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.admin-pane .form-check-input:not([role]):not(.form-switch *) { box-shadow: none; }
.admin-pane .form-check-input[type="checkbox"]:checked,
.admin-pane .form-check-input[type="radio"]:checked {
    background-color: var(--brand-primary, #0366d6);
    border-color: var(--brand-primary, #0366d6);
}
.admin-pane .form-switch .form-check-input[type="checkbox"]:checked { background-color: #16a34a; border-color: #16a34a; }

/* Badges → flat tinted pills (no Bootstrap badge chrome) */
.admin-pane .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1.4;
    background: rgba(107,114,128,0.12) !important;
    color: var(--text-secondary, #4b5563) !important;
    border: 0 !important;
    box-shadow: none !important;
}
.admin-pane .badge.bg-success, .admin-pane .badge.text-bg-success { background: rgba(22,163,74,0.12) !important; color: #15803d !important; }
.admin-pane .badge.bg-warning, .admin-pane .badge.text-bg-warning { background: rgba(245,158,11,0.15) !important; color: #b45309 !important; }
.admin-pane .badge.bg-danger,  .admin-pane .badge.text-bg-danger  { background: rgba(220,38,38,0.1) !important;  color: #b91c1c !important; }
.admin-pane .badge.bg-primary, .admin-pane .badge.text-bg-primary,
.admin-pane .badge.bg-info,    .admin-pane .badge.text-bg-info    { background: rgba(var(--brand-primary-rgb, 3, 102, 214), 0.1) !important; color: var(--brand-primary, #0366d6) !important; }
[data-theme="dark"] .admin-pane .badge.bg-success, [data-theme="dark"] .admin-pane .badge.text-bg-success { color: #4ade80 !important; }
[data-theme="dark"] .admin-pane .badge.bg-warning, [data-theme="dark"] .admin-pane .badge.text-bg-warning { color: #fbbf24 !important; }
[data-theme="dark"] .admin-pane .badge.bg-danger,  [data-theme="dark"] .admin-pane .badge.text-bg-danger  { color: #f87171 !important; }

/* Alerts → flat inline notices (hairline, tint, no heavy borders, never cyan) */
.admin-pane .alert {
    border: 1px solid var(--as-border);
    border-radius: 0.6rem;
    background: var(--surface-muted, #f5f5f5);
    color: var(--text-primary, #111827);
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
    box-shadow: none;
}
.admin-pane .alert-info,
.admin-pane .alert-primary,
.admin-pane .alert-secondary,
.admin-pane .alert-light { background: var(--surface-muted, #f5f5f5); border-color: var(--as-border); color: var(--text-primary, #111827); }
.admin-pane .alert-success { background: rgba(22,163,74,0.07); border-color: rgba(22,163,74,0.25); color: #166534; }
.admin-pane .alert-warning { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); color: #92400e; }
.admin-pane .alert-danger  { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.25); color: #991b1b; }
[data-theme="dark"] .admin-pane .alert-success { color: #86efac; }
[data-theme="dark"] .admin-pane .alert-warning { color: #fcd34d; }
[data-theme="dark"] .admin-pane .alert-danger  { color: #fca5a5; }

/* Never cyan (house rule) */
.admin-pane .text-info { color: var(--brand-primary, #0366d6) !important; }
.admin-pane .bg-info { background-color: rgba(var(--brand-primary-rgb, 3, 102, 214), 0.1) !important; }

/* Tables → hairline rows, quiet header, no stripes/hover */
.admin-pane .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    margin-bottom: 0;
    font-size: 0.85rem;
}
.admin-pane .table > thead > tr > th {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary, #6b7280);
    border-bottom: 1px solid var(--as-border);
    background: transparent;
    white-space: nowrap;
}
.admin-pane .table > tbody > tr > td { border-color: var(--as-divider); vertical-align: middle; }
.admin-pane .table > tbody > tr:last-child > td { border-bottom: 0; }

/* ═══ 2. .as-* vocabulary ═════════════════════════════════════════════════════ */

.as-card {
    background: var(--surface-card, #fff);
    border: 1px solid var(--as-border, rgba(0,0,0,0.1));
    border-radius: var(--as-radius, 0.75rem);
}
.as-card + .as-card { margin-top: 1rem; }

.as-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}
.as-card-head > :last-child:not(:first-child) { margin-left: auto; flex-shrink: 0; }
.as-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary, #111827);
    margin: 0;
}
.as-card-sub {
    font-size: 0.83rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.2rem;
    line-height: 1.45;
    max-width: 680px;
}
.as-card-body { padding: 0 1.25rem 1.1rem; }

.as-section-label {
    padding: 0.95rem 1.25rem 0.15rem;
    border-top: 1px solid var(--as-divider, rgba(0,0,0,0.06));
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary, #6b7280);
}

.as-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.9rem 1.25rem;
    align-items: center;
    border-top: 1px solid var(--as-divider, rgba(0,0,0,0.06));
}
.as-section-label + .as-row { border-top: 0; }
.as-row.toggle { grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; }
.as-row.toggle .as-row-control { justify-content: flex-end; }
.as-row-label { font-weight: 600; font-size: 0.9rem; color: var(--text-primary, #111827); }
.as-row-hint { font-size: 0.8rem; color: var(--text-secondary, #6b7280); margin-top: 0.15rem; line-height: 1.45; }
.as-row-control { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; }
.as-row-control .form-select,
.as-row-control .form-control { width: 100%; }
.as-row-control .as-num { width: 96px; text-align: right; flex: 0 0 auto; }
/* Fixed-width unit column so number inputs line up down a card */
.as-unit { font-size: 0.85rem; color: var(--text-secondary, #6b7280); white-space: nowrap; min-width: 5.5rem; }

.as-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--as-divider, rgba(0,0,0,0.06));
}
.as-actions > .as-status { margin-right: auto; font-size: 0.82rem; color: var(--text-secondary, #6b7280); }
.as-actions > :first-child:not(.as-status) { margin-left: auto; }

.as-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--as-border, rgba(0,0,0,0.15));
    background: transparent;
    color: var(--text-primary, #111827);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.as-btn:hover:not(:disabled) { border-color: var(--text-secondary, #6b7280); }
.as-btn.sm { min-height: 32px; padding: 0 0.85rem; font-size: 0.8rem; }
.as-btn.primary { background: var(--brand-primary, #0366d6); border-color: var(--brand-primary, #0366d6); color: #fff; }
.as-btn.success { background: #16a34a; border-color: #16a34a; color: #fff; }
.as-btn.primary:hover:not(:disabled),
.as-btn.success:hover:not(:disabled) { filter: brightness(1.08); }
.as-btn.danger { color: #dc2626; }
.as-btn.danger:hover:not(:disabled) { border-color: #dc2626; background: rgba(220,38,38,0.06); }
.as-btn.icon { width: 32px; min-height: 32px; padding: 0; }
.as-btn:disabled { opacity: 0.5; cursor: default; }
[data-theme="dark"] .as-btn.danger { color: #f87171; }

.as-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: rgba(107,114,128,0.12);
    color: var(--text-secondary, #4b5563);
}
.as-pill.success { background: rgba(22,163,74,0.12); color: #15803d; }
.as-pill.warning { background: rgba(245,158,11,0.15); color: #b45309; }
.as-pill.danger  { background: rgba(220,38,38,0.1);  color: #b91c1c; }
.as-pill.primary { background: rgba(var(--brand-primary-rgb, 3, 102, 214), 0.1); color: var(--brand-primary, #0366d6); }
[data-theme="dark"] .as-pill.success { color: #4ade80; }
[data-theme="dark"] .as-pill.warning { color: #fbbf24; }
[data-theme="dark"] .as-pill.danger  { color: #f87171; }

.as-note { font-size: 0.82rem; line-height: 1.45; color: var(--text-secondary, #6b7280); }
.as-note strong { color: var(--text-primary, #111827); font-weight: 600; }
.as-note.warn { color: #b45309; }
.as-note.danger { color: #b91c1c; }
[data-theme="dark"] .as-note.warn { color: #fbbf24; }
[data-theme="dark"] .as-note.danger { color: #f87171; }

.as-list { display: flex; flex-direction: column; }
.as-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1.25rem;
    border-top: 1px solid var(--as-divider, rgba(0,0,0,0.06));
    min-width: 0;
}
.as-list > .as-item:first-child { border-top: 0; }
.as-item-main { flex: 1 1 auto; min-width: 0; }
.as-item-side { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; margin-left: auto; }

/* Tablet + desktop: label left, control right */
@media (min-width: 768px) {
    .as-row:not(.toggle):not(.wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 2rem; }
    .as-row:not(.wide) .as-row-control { justify-content: flex-end; }
}
@media (max-width: 767.98px) {
    .as-card-head { flex-wrap: wrap; }
    .as-item { flex-wrap: wrap; }
    .as-item-side { margin-left: 0; width: 100%; }
    .as-actions .as-btn { flex: 1 1 auto; }
}