/* ══════════════════════════════════════════════════════════════════════════
   WealthChallenge Admin — Design System
   Dark forest theme, consistent with the WASM game app palette.
   20260523 CL
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
    --adm-bg:           #080f0b;
    --adm-surface:      #0f1a12;
    --adm-surface2:     #141f17;
    --adm-surface3:     #1a2a1e;
    --adm-sidebar-w:    220px;
    --adm-rail-w:       48px;    /* 20260614 CL: resting icon-rail width for the flyout sidebar */
    --adm-border:       #1c4a26;
    --adm-border-hi:    #2a6e38;
    --adm-green:        #4ad05c;
    --adm-green-bright: #6ae07c;
    --adm-green-dim:    #b5e8b5;
    --adm-amber:        #f5a623;
    --adm-amber-dim:    #c88a1a;
    --adm-amber-glow:   rgba(245,166,35,0.12);
    --adm-text:         #c8e8c8;
    --adm-text-muted:   rgba(200,232,200,0.5);
    --adm-text-dim:     rgba(200,232,200,0.3);
    --adm-error:        #ff7b7b;
    --adm-error-bg:     rgba(255,123,123,0.07);
    --adm-success:      #4ad05c;
    --adm-radius:       4px;
    --adm-transition:   0.14s ease;
}

/* ── Scrollbars ────────────────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(74,208,92,0.25) rgba(20,31,23,0.4);
}
*::-webkit-scrollbar            { width: 6px; height: 6px; }
*::-webkit-scrollbar-track      { background: rgba(20,31,23,0.4); }
*::-webkit-scrollbar-thumb      { background: rgba(74,208,92,0.25); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(74,208,92,0.45); }

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(1rem, 0.92rem + 0.5vw, 1.125rem);
    background: var(--adm-bg);
    color: var(--adm-text);
    height: 100%;
    overflow: hidden;
    /* 20260614 CL - crisp text: grayscale antialiasing (light-on-dark otherwise renders heavy/fuzzy) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--adm-green-dim);
    font-weight: 600;
}

h1 { font-size: clamp(1.55rem, 1.2rem + 1vw, 2rem); margin: 0 0 0.6rem; }
h2 { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.55rem); margin: 0 0 0.5rem; }
h3 { font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.3rem); margin: 0 0 0.4rem; }
h4 { font-size: 1.05rem; margin: 0 0 0.3rem; }

p { margin: 0 0 0.5rem; }
a { color: var(--adm-green); text-decoration: none; transition: color var(--adm-transition); }
a:hover { color: var(--adm-green-bright); }

/* ── Admin shell layout ────────────────────────────────────────────────── */
.admin-shell {
    display: flex;
    flex-direction: column;   /* 20260614 CL - top bar, then the body (rail + main) */
    height: 100vh;
    overflow: hidden;
}

/* ── Top bar ───────────────────────────────────────────────────────────── */
.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    flex-shrink: 0;
    padding: 0 1rem;
    background: var(--adm-surface);
    border-bottom: 1px solid var(--adm-border);
    z-index: 60;
}
.admin-brand {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #ff8c1a;            /* 20260614 CL - bright orange brand */
    white-space: nowrap;
}
.admin-brand::before { content: '◈ '; opacity: 0.8; font-size: 0.8em; }
.admin-topbar-logout { margin: 0; }

/* ── Body: collapsed rail overlays the main content on hover ───────────── */
.admin-body {
    flex: 1;
    display: flex;
    position: relative;   /* anchors the absolute rail */
    min-height: 0;
}

.admin-sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--adm-rail-w);
    display: flex;
    flex-direction: column;
    background: var(--adm-surface);
    border-right: 1px solid var(--adm-border);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1030;   /* 20260614 CL - above Bootstrap sticky table headers (z-index 1020) so the expanded rail floats over them */
    transition: width var(--adm-transition);
}
.admin-sidebar:hover {
    width: var(--adm-sidebar-w);
    box-shadow: 6px 0 24px rgba(0,0,0,0.5);
}

/* grain texture overlay on sidebar */
.admin-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.4;
}

.admin-nav {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    flex: 1;
}

.admin-nav li { margin: 0; }

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    color: var(--adm-text-muted);
    font-size: 0.875rem;
    font-weight: 400;
    border-left: 2px solid transparent;
    transition: all var(--adm-transition);
    white-space: nowrap;
    position: relative;
}

.admin-nav a i,
.admin-nav a .nav-icon {
    width: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--adm-green);
    opacity: 0.55;
    flex-shrink: 0;
    transition: opacity var(--adm-transition);
}

.admin-nav a:hover {
    color: var(--adm-green-dim);
    background: rgba(74,208,92,0.05);
    border-left-color: var(--adm-border-hi);
}

.admin-nav a:hover i,
.admin-nav a:hover .nav-icon { opacity: 0.9; }

.admin-nav a.active {
    color: var(--adm-amber);
    background: var(--adm-amber-glow);
    border-left-color: var(--adm-amber);
    font-weight: 500;
}

.admin-nav a.active i,
.admin-nav a.active .nav-icon {
    color: var(--adm-amber);
    opacity: 1;
}

/* 20260614 CL - sign-out styled exactly like a nav link, pinned to the bottom of the rail */
.admin-nav-logout { margin-top: auto; border-top: 1px solid var(--adm-border); }
.admin-nav-logout form { margin: 0; }
.admin-nav-logout button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    color: var(--adm-text-muted);
    font: inherit;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: all var(--adm-transition);
}
.admin-nav-logout button i {
    width: 16px; text-align: center; font-size: 13px;
    color: var(--adm-green); opacity: 0.55; flex-shrink: 0;
}
.admin-nav-logout button:hover {
    color: var(--adm-green-dim);
    background: rgba(74,208,92,0.05);
    border-left-color: var(--adm-border-hi);
}

/* rail (resting): icons centered, labels hidden — nav links + sign-out */
.admin-nav a, .admin-nav-logout button { justify-content: center; padding: 0.65rem 0; }
.admin-nav a span, .admin-nav-logout button span { display: none; }
/* expanded ON HOVER ONLY (like the game) — moving the pointer away collapses it. */
.admin-sidebar:hover .admin-nav a,
.admin-sidebar:hover .admin-nav-logout button {
    justify-content: flex-start; padding: 0.6rem 1rem;
}
.admin-sidebar:hover .admin-nav a span,
.admin-sidebar:hover .admin-nav-logout button span {
    display: inline;
}

/* 20260614 CL - after a nav click, the JS adds .admin-rail-collapsed to tuck the rail back even while still
   hovered; it clears once the pointer leaves the rail. */
.admin-sidebar.admin-rail-collapsed:hover { width: var(--adm-rail-w); box-shadow: none; }
.admin-sidebar.admin-rail-collapsed:hover .admin-nav a,
.admin-sidebar.admin-rail-collapsed:hover .admin-nav-logout button { justify-content: center; padding: 0.65rem 0; }
.admin-sidebar.admin-rail-collapsed:hover .admin-nav a span,
.admin-sidebar.admin-rail-collapsed:hover .admin-nav-logout button span { display: none; }

/* ── Main area ─────────────────────────────────────────────────────────── */
.admin-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--adm-bg);
    margin-left: var(--adm-rail-w); /* 20260614 CL - reserve only the rail; sidebar expands over content on hover */
}

.admin-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* 20260614 CL - trimmed vertical padding so page content (the focus) sits higher */
    padding: 0.6rem clamp(1rem, 0.75rem + 1.5vw, 2rem) clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

/* Pages that fill full height (e.g. Tips grid) */
.adm-fill-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.adm-fill-table {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ── Login page ────────────────────────────────────────────────────────── */
.admin-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--adm-bg);
    background-image:
        radial-gradient(ellipse 60% 50% at 20% 60%, rgba(26,90,47,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 30%, rgba(245,166,35,0.06) 0%, transparent 60%);
}

.admin-login-card {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: 8px;
    padding: 2.5rem 2.25rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(74,208,92,0.04);
}

.admin-login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.admin-login-header h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.55rem;
    color: var(--adm-green-dim);
    font-weight: 600;
    margin: 0;
}

.admin-login-header::before {
    content: '◈';
    display: block;
    font-size: 1.5rem;
    color: var(--adm-amber);
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

/* ── Bootstrap overrides — forms ───────────────────────────────────────── */
.form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--adm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.3rem;
}

.form-control, .form-select,
input[type="search"], input[type="text"], input[type="number"],
input[type="email"], input[type="password"], input[type="date"] {
    background: var(--adm-surface2) !important;
    border: 1px solid var(--adm-border) !important;
    color: var(--adm-text) !important;
    border-radius: var(--adm-radius) !important;
    font-size: 0.9rem !important;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--adm-transition), box-shadow var(--adm-transition);
}

.form-control:focus, .form-select:focus,
input[type="search"]:focus, input[type="text"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="password"]:focus, input[type="date"]:focus {
    border-color: var(--adm-green) !important;
    box-shadow: 0 0 0 3px rgba(74,208,92,0.12) !important;
    background: var(--adm-surface3) !important;
    outline: none !important;
}

.form-control::placeholder,
input::placeholder { color: var(--adm-text-dim) !important; }

.form-control-sm { font-size: 0.83rem !important; padding: 0.3rem 0.6rem !important; }

.form-check-input {
    background-color: var(--adm-surface2) !important;
    border-color: var(--adm-border-hi) !important;
}
.form-check-input:checked {
    background-color: var(--adm-green) !important;
    border-color: var(--adm-green) !important;
}
.form-check-label { color: var(--adm-text-muted); font-size: 0.875rem; }

input[type="date"] {
    color-scheme: dark;
}

/* ── Bootstrap overrides — buttons ─────────────────────────────────────── */
.btn {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    border-radius: var(--adm-radius) !important;
    transition: all var(--adm-transition);
    letter-spacing: 0.02em;
}

.btn-primary, .btn-success {
    background: var(--adm-amber) !important;
    border-color: var(--adm-amber) !important;
    color: #0d1a10 !important;
    font-weight: 600 !important;
}
.btn-primary:hover, .btn-success:hover {
    background: #ffbe45 !important;
    border-color: #ffbe45 !important;
    box-shadow: 0 0 12px rgba(245,166,35,0.3) !important;
}
.btn-primary:focus, .btn-success:focus,
.btn-primary:active, .btn-success:active {
    box-shadow: 0 0 0 3px rgba(245,166,35,0.25) !important;
    background: var(--adm-amber) !important;
}

.btn-outline-primary {
    background: transparent !important;
    border-color: var(--adm-border-hi) !important;
    color: var(--adm-green) !important;
}
.btn-outline-primary:hover {
    background: rgba(74,208,92,0.08) !important;
    border-color: var(--adm-green) !important;
    color: var(--adm-green-bright) !important;
}

.btn-outline-secondary {
    background: transparent !important;
    border-color: var(--adm-border) !important;
    color: var(--adm-text-muted) !important;
}
.btn-outline-secondary:hover {
    background: rgba(74,208,92,0.06) !important;
    border-color: var(--adm-border-hi) !important;
    color: var(--adm-text) !important;
}

.btn-sm { font-size: 0.78rem !important; padding: 0.25rem 0.65rem !important; }

.btn-link, a.btn-link {
    color: var(--adm-green) !important;
    text-decoration: none !important;
}
.btn-link:hover { color: var(--adm-green-bright) !important; }

.btn:focus, .btn:active:focus { box-shadow: 0 0 0 3px rgba(74,208,92,0.2) !important; }

/* ── Bootstrap overrides — tables ──────────────────────────────────────── */
.table {
    color: var(--adm-text) !important;
    border-color: var(--adm-border) !important;
    font-size: 0.875rem;
}

.table > :not(caption) > * > * {
    background-color: transparent !important;
    border-bottom-color: var(--adm-border) !important;
    color: var(--adm-text) !important;
    padding: 0.5rem 0.75rem !important;
    vertical-align: middle !important;
}

.table thead > tr > th {
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--adm-text-muted) !important;
    font-weight: 500 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    border-bottom: 1px solid var(--adm-border-hi) !important;
    background: rgba(74,208,92,0.03) !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(74,208,92,0.04) !important;
}

.table-active, .table-active > td, .table-active > th {
    background-color: rgba(245,166,35,0.08) !important;
}

.table-sm > :not(caption) > * > * { padding: 0.3rem 0.6rem !important; }

.text-muted { color: var(--adm-text-muted) !important; }
.small, small { font-size: 0.8rem !important; }

/* ── Bootstrap overrides — alerts ──────────────────────────────────────── */
.alert {
    border-radius: var(--adm-radius) !important;
    font-size: 0.875rem;
    border-left-width: 3px !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 4px 4px 0 !important;
}

.alert-danger {
    background: var(--adm-error-bg) !important;
    border-color: var(--adm-error) !important;
    color: var(--adm-error) !important;
}

.alert-success {
    background: rgba(74,208,92,0.07) !important;
    border-color: var(--adm-green) !important;
    color: var(--adm-green-dim) !important;
}

.alert-warning {
    background: var(--adm-amber-glow) !important;
    border-color: var(--adm-amber) !important;
    color: var(--adm-amber) !important;
}

/* ── Bootstrap overrides — cards ───────────────────────────────────────── */
.card {
    background: var(--adm-surface) !important;
    border: 1px solid var(--adm-border) !important;
    border-radius: var(--adm-radius) !important;
    color: var(--adm-text) !important;
}

.card-header {
    background: var(--adm-surface2) !important;
    border-bottom: 1px solid var(--adm-border) !important;
    color: var(--adm-text-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-family: Arial, Helvetica, sans-serif !important;
    padding: 0.6rem 1rem !important;
}

.card-body {
    background: transparent !important;
    padding: 1rem !important;
}

.card-footer {
    background: var(--adm-surface2) !important;
    border-top: 1px solid var(--adm-border) !important;
}

/* ── Bootstrap overrides — modal ───────────────────────────────────────── */
.modal-content {
    background: var(--adm-surface) !important;
    border: 1px solid var(--adm-border) !important;
    border-radius: 6px !important;
    color: var(--adm-text) !important;
    box-shadow: 0 16px 60px rgba(0,0,0,0.6) !important;
}

.modal-header {
    background: var(--adm-surface2) !important;
    border-bottom: 1px solid var(--adm-border) !important;
    padding: 0.75rem 1rem !important;
}

.modal-header .modal-title {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--adm-green-dim) !important;
}

.modal-body {
    background: transparent !important;
    padding: 1rem !important;
}

.modal-footer {
    background: var(--adm-surface2) !important;
    border-top: 1px solid var(--adm-border) !important;
    padding: 0.6rem 1rem !important;
}

.modal-backdrop { opacity: 0.7 !important; }

/* ── Bootstrap overrides — badges ──────────────────────────────────────── */
.badge.bg-success {
    background: rgba(74,208,92,0.15) !important;
    color: var(--adm-green) !important;
    border: 1px solid rgba(74,208,92,0.3);
    font-weight: 500;
}

.badge.bg-secondary {
    background: var(--adm-surface3) !important;
    color: var(--adm-text-muted) !important;
}

/* ── Bootstrap overrides — danger button ───────────────────────────────── */
.btn-danger, .btn-outline-danger {
    --bs-btn-color: var(--adm-error) !important;
    --bs-btn-border-color: var(--adm-error) !important;
}

.btn-outline-danger {
    background: transparent !important;
    border-color: var(--adm-error) !important;
    color: var(--adm-error) !important;
}

.btn-outline-danger:hover {
    background: rgba(255,123,123,0.1) !important;
    border-color: var(--adm-error) !important;
    color: var(--adm-error) !important;
}

.btn-danger {
    background: var(--adm-error) !important;
    border-color: var(--adm-error) !important;
    color: #fff !important;
}

.btn-danger:hover {
    background: #ff9494 !important;
    border-color: #ff9494 !important;
}

/* ── Bootstrap overrides — image gallery borders ───────────────────────── */
.border { border-color: var(--adm-border) !important; }
.border.rounded { border-radius: var(--adm-radius) !important; }
.prop-img-primary { border-color: var(--adm-green) !important; border-width: 2px !important; }

/* ── Bootstrap overrides — misc ─────────────────────────────────────────── */
.bg-light, .bg-white {
    background: var(--adm-surface2) !important;
}

/* Top-right card close button */
.adm-card-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 22px;
    height: 22px;
    background: var(--adm-error);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.1s, background 0.1s;
}
.adm-card-close:hover {
    background: #c0392b;
    transform: scale(1.15);
}

/* Sticky table header — opaque dark background so rows don't bleed through */
.adm-thead {
    background: var(--adm-surface) !important;
    box-shadow: 0 1px 0 var(--adm-border-hi);
}

.p-2.bg-light {
    border-top: 1px solid var(--adm-border);
}

/* ── Bootstrap overrides — toasts ──────────────────────────────────────── */
/* 20260615 CL - Bootstrap default .toast has rgba-white background; override for dark Admin theme.
   BlazorBootstrap 3.5 marks toast type by putting .text-{type} on the icon inside the toast —
   use :has() to detect type and colour accordingly, matching the approach in wc-game.css. */
.toast {
    background-color: var(--adm-surface2) !important;
    border-color: var(--adm-border-hi) !important;
    color: var(--adm-text) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55) !important;
}
.toast-header {
    background-color: var(--adm-surface3) !important;
    border-bottom-color: var(--adm-border) !important;
    color: var(--adm-text-muted) !important;
}
.toast-body { background-color: transparent !important; color: var(--adm-text) !important; }
/* close button: Bootstrap ships an SVG bg we don't override — render a × glyph instead */
.toast .btn-close { background: none; border: 0; cursor: pointer; color: inherit; font-size: 0; padding: 0.1rem 0.3rem; opacity: 0.65; }
.toast .btn-close:hover { opacity: 1; }
.toast .btn-close::before { content: "\00d7"; font-size: 1.1rem; color: currentColor; }
/* type colours via the icon's .text-* class that BlazorBootstrap injects */
.toast:has(.text-success)  { border-color: var(--adm-green) !important;  color: var(--adm-green-dim) !important; }
.toast:has(.text-danger)   { border-color: var(--adm-error) !important;  color: var(--adm-error) !important; }
.toast:has(.text-warning)  { border-color: var(--adm-amber) !important;  color: var(--adm-amber) !important; }
.toast:has(.text-primary),
.toast:has(.text-info)     { border-color: var(--adm-green) !important;  color: var(--adm-green) !important; }
/* neutralise child text-* so the icon inherits the box colour rather than fighting it */
.toast .text-success, .toast .text-danger, .toast .text-warning,
.toast .text-primary, .toast .text-info, .toast .text-secondary { color: inherit !important; }

/* ── Blazor error UI ────────────────────────────────────────────────────── */
#blazor-error-ui {
    background: var(--adm-surface2);
    border-top: 1px solid var(--adm-border);
    color: var(--adm-text-muted);
    bottom: 0; left: 0;
    box-sizing: border-box;
    display: none;
    padding: 0.5rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
    font-size: 0.83rem;
}
#blazor-error-ui a { color: var(--adm-green); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; opacity: 0.6; }
#blazor-error-ui .dismiss:hover { opacity: 1; }

.blazor-error-boundary {
    background: var(--adm-error-bg);
    border-left: 3px solid var(--adm-error);
    padding: 0.75rem 1rem;
    color: var(--adm-error);
    border-radius: 0 4px 4px 0;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* ── Validation ─────────────────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--adm-green); }
.invalid { outline: 1px solid var(--adm-error); }
.validation-message, .text-danger { color: var(--adm-error) !important; font-size: 0.8rem; }

/* ── Page-level layout helpers ──────────────────────────────────────────── */
.adm-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--adm-border);
}
.adm-page-header h1, .adm-page-header h2, .adm-page-header h3 {
    margin: 0;
}

/* Replace the d-flex justify-content-between Bootstrap pattern on Properties */
.d-flex.justify-content-between.align-items-center.mb-3 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--adm-border);
}

/* ── Stat cards (for future use) ────────────────────────────────────────── */
.adm-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.adm-stat-card {
    background: var(--adm-surface2);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    padding: 0.85rem 1rem;
}
.adm-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--adm-text-muted);
    margin-bottom: 0.3rem;
}
.adm-stat-value {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    color: var(--adm-amber);
    line-height: 1.1;
}

/* ── Numeric / money inputs — always right-align ────────────────────────── */
input[type="number"] { text-align: right; }

/* ── Inline edit highlight ──────────────────────────────────────────────── */
td .form-control { margin: -2px 0; }

/* ── Sign out button override ───────────────────────────────────────────── */
.admin-logout .btn-outline-secondary {
    width: 100%;
    font-size: 0.78rem !important;
    padding: 0.35rem 0.75rem !important;
    text-align: center;
}

/* ── Responsive: collapse sidebar on small screens ──────────────────────── */
@media (max-width: 768px) {
    /* 20260614 CL - the icon rail is already the default at all sizes; the brand lives in the top bar. */
    .admin-topbar { padding: 0 0.75rem; }
}

/* 20260614 CL - pages render directly inside the column-flex .admin-content, so bare buttons would stretch
   full width (default align-self: stretch). Keep standalone action buttons at their natural width. */
.admin-content > .btn { align-self: flex-start; }

/* 20260614 CL - Activate/Deactivate buttons share one width so the row doesn't shift */
.adm-toggle-btn { min-width: 6.5rem; text-align: center; }

/* 20260614 CL - focused single-player bar on the Players page */
.adm-selected-bar {
    border: 1px solid var(--adm-border-hi);
    border-radius: var(--adm-radius, 4px);
    background: var(--adm-surface);
}

/* 20260614 CL - reusable confirm dialog (admin-themed) */
.adm-modal-backdrop {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
}
.adm-modal {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border-hi);
    border-radius: 8px;
    padding: 0;                                   /* sections own their padding */
    overflow: hidden;                             /* clip header bg to the rounded corners */
    max-width: 440px; width: calc(100% - 2rem);
    box-shadow: 0 12px 48px rgba(0,0,0,0.6);
    color: var(--adm-text);
}
/* 20260614 CL - standard dialog box: header panel (own bg + accent border) / body / footer.
   FOCUS = WHO is being acted on, so the name dominates the body. Strict size hierarchy. */
.adm-modal-header {
    background: var(--adm-surface3);
    border-bottom: 2px solid var(--adm-green);    /* the accent border that separates header from body */
    padding: 0.75rem 1.1rem 0.85rem;
}
.adm-modal-kicker { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--adm-text-muted); margin-bottom: 0.1rem; }  /* tiny label, not a heading */
.adm-modal-title  { margin: 0; color: #eaf7ea; font-weight: 700; font-size: 1.8rem; line-height: 1.1; }  /* 20260614 CL - crisp near-white (was fuzzy bold mint --adm-text); heading = player name = the focus, largest element */
.adm-modal-body   { padding: 1.1rem 1.1rem 1.25rem; }
.adm-modal-note   { color: var(--adm-text-muted); font-size: 0.9rem; line-height: 1.45; margin: 0; }              /* body content, clearly smaller than the heading */
.adm-modal-footer {
    display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem;
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--adm-border);
    background: var(--adm-surface2);
}
.adm-modal-cancel { color: var(--adm-text-muted); background: none; border: none; box-shadow: none; }
.adm-modal-cancel:hover { color: var(--adm-text); background: none; }

/* 20260614 CL - CONVENTION: a date shown in an HTML table must never wrap.
   Add class "nowrap" to any date <th>/<td> (also valid on any cell that must stay on one line). */
.nowrap { white-space: nowrap; }