/* SafeExchange admin panel — distinct visual language from the main site.
   Dark by default, single accent (cyan/teal), mobile-first. Same Bootstrap
   base; we only retheme via CSS variables + a layout-scoped style sheet. */

:root {
    --admin-accent: #36b1bf;
    --admin-accent-hover: #4cd6e6;
    --admin-accent-alt: #a855ff;                    /* contrasting hue for the animated strip */
    --admin-nav-active-bg: rgba(255, 255, 255, .12);
    --admin-surface: #11161c;
    --admin-surface-2: #1a2129;
    --admin-border: #2a3441;
    --admin-text: #d8e1eb;
    --admin-text-muted: #8a96a3;
    --admin-topbar-h: 56px;
    --admin-nav-w: 220px;
}

:root[data-bs-theme="light"] {
    --admin-accent: #48c8d6;
    --admin-accent-hover: #6cdce8;
    --admin-accent-alt: #7c2acc;                    /* contrasting hue for the animated strip, light theme */
    --admin-nav-active-bg: rgba(0, 0, 0, .10);
    --admin-surface: #f5f7fa;
    --admin-surface-2: #ffffff;
    --admin-border: #d6dde4;
    --admin-text: #1f2933;
    --admin-text-muted: #5a6675;
}

html, body {
    height: 100%;
    background-color: var(--admin-surface) !important;
    color: var(--admin-text);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link { color: var(--admin-accent); }
a:hover { color: var(--admin-accent-hover); }

.admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--admin-nav-w) 1fr;
    grid-template-rows: var(--admin-topbar-h) 1fr;
    grid-template-areas: "topbar topbar" "nav main";
}

.admin-topbar {
    grid-area: topbar;
    background: var(--admin-surface-2);
    border-bottom: 1px solid var(--admin-border);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
}
.admin-topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--admin-accent) 0%,
        var(--admin-accent-alt) 50%,
        var(--admin-accent) 100%);
    background-size: 200% 100%;
    animation: admin-accent-shift 9s linear infinite;
    z-index: 11;
    pointer-events: none;
}
@keyframes admin-accent-shift {
    0%   { background-position:   0% 50%; }
    100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .admin-topbar::after { animation: none; }
}

.admin-brand { font-weight: 600; letter-spacing: .02em; }

.admin-chip {
    background: var(--admin-accent);
    color: #062930;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    padding: 2px 8px;
    border-radius: 999px;
}

.admin-hamburger {
    background: transparent;
    color: var(--admin-text);
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    padding: 4px 10px;
    display: none;
}

.admin-nav {
    grid-area: nav;
    background: var(--admin-surface-2);
    border-right: 1px solid var(--admin-border);
    padding: 1rem .5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* Nav links: always render in the regular text color regardless of the
   global a, .btn-link accent. Active state is bold, not background. */
.admin-nav .admin-nav-link,
.admin-nav .admin-nav-link:hover,
.admin-nav .admin-nav-link:focus,
.admin-nav .admin-nav-link.active,
.admin-nav a.admin-nav-link {
    color: var(--admin-text);
    text-decoration: none;
}
.admin-nav-link {
    padding: .55rem .85rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .95rem;
    font-weight: 400;
}
.admin-nav-link:hover { background: rgba(127, 127, 127, .12); }
.admin-nav-link.active { background: var(--admin-nav-active-bg); font-weight: 700; }
.admin-nav-link i { font-size: 1.1rem; }

.admin-main {
    grid-area: main;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
}

/* Mobile-first layout — single column, nav becomes a slide-over. */
@media (max-width: 720px) {
    .admin-shell {
        grid-template-columns: 1fr;
        grid-template-areas: "topbar" "main";
    }
    .admin-hamburger { display: inline-flex; align-items: center; }
    .admin-nav {
        position: fixed;
        top: var(--admin-topbar-h);
        left: 0;
        bottom: 0;
        width: 78%;
        max-width: 320px;
        transform: translateX(-100%);
        transition: transform .18s ease-out;
        z-index: 9;
    }
    .admin-nav.open { transform: translateX(0); }
    .admin-main { padding: 1rem .9rem; }
}

/* Lists -> cards on small screens for the paginated admin tables. */
.admin-card {
    background: var(--admin-surface-2);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    padding: .85rem 1rem;
    margin-bottom: .55rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.admin-card .grow { flex: 1; min-width: 0; }
.admin-card .grow > div { overflow: hidden; text-overflow: ellipsis; }

.admin-search {
    background: var(--admin-surface-2);
    color: var(--admin-text);
    border: 1px solid var(--admin-border);
}
.admin-search:focus {
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 .15rem rgba(54, 177, 191, .25);
    color: var(--admin-text);
}

.admin-pager {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
    color: var(--admin-text-muted);
}

.admin-pill {
    font-size: .75rem;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--admin-border);
}
.admin-pill.ok { background: rgba(54, 191, 113, .12); color: #5dd394; border-color: #2b6b46; }
.admin-pill.off { background: rgba(160, 160, 160, .08); color: var(--admin-text-muted); }
.admin-pill.attn { background: rgba(255, 191, 71, .12); color: #ffd07a; border-color: #6e561c; }
.admin-pill.historical { background: rgba(255, 132, 132, .1); color: #f59595; border-color: #6a2d2d; }

#blazor-error-ui {
    background: #2a1a1a;
    color: var(--admin-text);
    border-top: 1px solid #6a2d2d;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.admin-login-link {
    color: var(--admin-text) !important;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
}
.admin-login-link i { font-size: 1.6rem; }
.admin-login-link:hover { background: rgba(255, 255, 255, .04); }
.admin-login-menu { min-width: 280px; }