/* ===========================================================================
   Astrium Wallet — admin theme (light + dark, like astrium.co.za)
   :root = LIGHT; [data-theme="dark"] = dark. Teal-leaning accent distinguishes
   the admin console; wider columns + tab/pill controls for monitoring tables.
   =========================================================================== */

:root {
    /* theme-agnostic */
    --accent: #4f9aa0;
    --accent-rgb: 79, 154, 160;
    --positive: #22c55e;
    --positive-rgb: 34, 197, 94;
    --danger: #f4796b;
    --danger-rgb: 244, 121, 107;
    --radius: 14px;
    --radius-sm: 9px;
    --font-display: 'Orbitron', 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* LIGHT palette (default) */
    --bg: #f8f9fc;
    --bg-deep: #eef1f7;
    --bg2: #ffffff;
    --surface: rgba(255, 255, 255, 0.72);
    --bright: #1a2332;
    --text: #4a5568;
    --muted: #8898aa;
    --accent-bright: #2f767c;
    --border: rgba(120, 140, 170, 0.28);
    --border-strong: rgba(120, 140, 170, 0.4);
    --glow: rgba(var(--accent-rgb), 0.25);
    --topbar-bg: rgba(255, 255, 255, 0.82);
    --card-shadow: 0 8px 30px rgba(40, 55, 80, 0.08);
    --err-bg: rgba(var(--danger-rgb), 0.12);
    --err-text: #c0392b;
    --ok-bg: rgba(var(--positive-rgb), 0.12);
    --ok-text: #15803d;
    --btn-ink: #f8f9fc;
}

[data-theme="dark"] {
    --bg: #0f1219;
    --bg-deep: #0a0d1a;
    --bg2: #161b26;
    --surface: rgba(22, 27, 38, 0.66);
    --bright: #e8ecf2;
    --text: #b0b8c8;
    --muted: #7a8599;
    --accent-bright: #a7d6d9;
    --border: rgba(180, 195, 215, 0.12);
    --border-strong: rgba(180, 195, 215, 0.22);
    --glow: rgba(var(--accent-rgb), 0.25);
    --topbar-bg: rgba(10, 13, 26, 0.85);
    --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
    --err-bg: rgba(var(--danger-rgb), 0.1);
    --err-text: #f7a99e;
    --ok-bg: rgba(var(--positive-rgb), 0.1);
    --ok-text: #6ee7a0;
    --btn-ink: #06121a;
}

* { box-sizing: border-box; }

body {
    margin: 0; font-family: var(--font-body); color: var(--text);
    background-color: var(--bg); background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.25s ease, color 0.25s ease;
}
:root:not([data-theme="dark"]) body {
    background-image:
        radial-gradient(circle at 16% 16%, rgba(79, 154, 160, 0.10), transparent 42%),
        radial-gradient(circle at 84% 26%, rgba(138, 155, 181, 0.07), transparent 46%);
}
[data-theme="dark"] body {
    background-image:
        radial-gradient(circle at 16% 18%, rgba(111, 179, 184, 0.05), transparent 42%),
        radial-gradient(circle at 84% 26%, rgba(140, 160, 185, 0.04), transparent 45%),
        radial-gradient(circle at 50% 94%, rgba(111, 179, 184, 0.028), transparent 50%);
}

h1:focus { outline: none; }
a { color: var(--accent-bright); text-decoration: none; }
a:hover { color: var(--bright); }

.page { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    display: flex; align-items: center; gap: 1.5rem; padding: 0.85rem 1.75rem;
    background: var(--topbar-bg); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
}
.topbar .brand {
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--bright);
    display: flex; align-items: center; gap: 0.55rem;
}
.topbar .brand::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 10px 1px var(--glow);
}
.topbar .nav { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.topbar .nav a {
    color: var(--muted); font-size: 0.9rem; padding: 0.2rem 0;
    border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease;
}
.topbar .nav a:hover { color: var(--bright); border-bottom-color: rgba(var(--accent-rgb), 0.6); }
.topbar .nav .who { color: var(--accent); font-size: 0.8rem; font-family: var(--font-mono); }

.theme-toggle {
    background: transparent; border: 1px solid var(--border-strong); color: var(--text);
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer; line-height: 1;
    font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover { color: var(--bright); border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: inline; }
[data-theme="dark"] .theme-toggle .i-sun { display: inline; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }

.content { padding: 2rem 1.5rem 3rem; max-width: 1180px; width: 100%; margin: 0 auto; }

.admin-home {
    display: grid;
    gap: 1.4rem;
}
.admin-home-heading {
    padding: clamp(1.6rem, 4vw, 3rem);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), transparent 42%),
        var(--surface);
    box-shadow: var(--card-shadow);
}
.admin-kicker {
    margin: 0 0 0.75rem;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.admin-home-heading h1 {
    margin: 0;
    color: var(--bright);
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.05;
    letter-spacing: 0;
}
.admin-home-heading p {
    max-width: 760px;
    margin: 1rem 0 0;
    color: var(--text);
    line-height: 1.65;
}
.admin-status-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}
.admin-status-strip div {
    border-top: 1px solid var(--border);
    padding-top: 0.8rem;
}
.admin-status-strip span {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.admin-status-strip strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--bright);
    font-family: var(--font-mono);
    font-size: 0.95rem;
}
.admin-action-list {
    display: grid;
    gap: 0.8rem;
}
.admin-action-list a {
    display: grid;
    grid-template-columns: 48px minmax(150px, 0.5fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    color: var(--text);
}
.admin-action-list a:hover strong {
    color: var(--accent-bright);
}
.admin-action-list span {
    color: var(--accent-bright);
    font-family: var(--font-mono);
}
.admin-action-list strong {
    color: var(--bright);
}
.admin-action-list em {
    color: var(--muted);
    font-style: normal;
    line-height: 1.55;
}

.card {
    background: var(--surface); backdrop-filter: blur(16px);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.4rem 1.6rem; margin-bottom: 1.4rem; box-shadow: var(--card-shadow);
}
.card h2 {
    margin: 0 0 0.35rem; font-family: var(--font-display); font-weight: 600;
    font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bright);
}

label {
    display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted); margin: 0.9rem 0 0.3rem;
}
input, select {
    width: 100%; padding: 0.6rem 0.75rem; background: var(--bg2); color: var(--bright);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font-size: 0.95rem; font-family: var(--font-body);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder { color: var(--muted); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18); }
select option { background: var(--bg2); color: var(--bright); }

button.btn, .btn {
    display: inline-block; background: linear-gradient(135deg, var(--accent), var(--accent-bright));
    color: var(--btn-ink); border: none; border-radius: var(--radius-sm);
    padding: 0.6rem 1.25rem; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em;
    cursor: pointer; margin-top: 0.95rem;
    transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.15s ease;
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.22);
}
button.btn:hover { filter: brightness(1.08); box-shadow: 0 6px 26px rgba(var(--accent-rgb), 0.34); transform: translateY(-1px); }
button.btn:active { transform: translateY(0); }
button.btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; transform: none; filter: none; }
button.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--border-strong); box-shadow: none; }
button.btn.secondary:hover { color: var(--bright); border-color: var(--accent); filter: none; }
button.btn.mini, .btn.mini { font-size: 0.78rem; padding: 0.32rem 0.7rem; margin: 0 0.3rem 0.3rem 0; }

button.link {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 0.9rem; font-family: var(--font-body); padding: 0; transition: color 0.15s ease;
}
button.link:hover { color: var(--bright); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: rgba(var(--accent-rgb), 0.06); }

.amount { font-family: var(--font-mono); font-weight: 500; color: var(--bright); }
.amount.positive { color: var(--positive); }

.alert { padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); margin: 0.85rem 0; font-size: 0.9rem; border: 1px solid transparent; }
.alert.error { background: var(--err-bg); color: var(--err-text); border-color: rgba(var(--danger-rgb), 0.35); }
.alert.ok { background: var(--ok-bg); color: var(--ok-text); border-color: rgba(var(--positive-rgb), 0.32); }

.muted { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.mono { font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-bright); word-break: break-all; }

.tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.1rem; }
.tabs button {
    background: rgba(var(--accent-rgb), 0.06); color: var(--muted);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 0.38rem 0.95rem; cursor: pointer; font-size: 0.82rem; font-family: var(--font-body);
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.tabs button:hover { color: var(--bright); border-color: var(--border-strong); }
.tabs button.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
    color: var(--btn-ink); border-color: transparent; font-weight: 600;
    box-shadow: 0 3px 14px rgba(var(--accent-rgb), 0.3);
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 760px) {
    .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.8rem;
        padding: 0.85rem 1rem;
        position: static;
    }
    .topbar .nav {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
    }
    .content {
        padding: 1.25rem 1rem 2.5rem;
    }
    .admin-status-strip,
    .admin-action-list a {
        grid-template-columns: 1fr;
    }
}

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--positive); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); }
.blazor-error-boundary {
    background: var(--err-bg); border: 1px solid rgba(var(--danger-rgb), 0.4);
    border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; color: var(--err-text);
}
.blazor-error-boundary::after { content: "An error has occurred."; }
#blazor-error-ui {
    background: var(--bg2); border-top: 1px solid rgba(var(--danger-rgb), 0.5);
    bottom: 0; left: 0; right: 0; box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.25);
    display: none; padding: 0.8rem 1.25rem; position: fixed; width: 100%; z-index: 1000; color: var(--text);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.6rem; color: var(--muted); }
#blazor-error-ui .reload { color: var(--accent-bright); }