/* Shared black and white admin identity. Status colours retain their meaning. */
:root { --bg:#070707; --panel:#111; --panel2:#181818; --line:#2a2a2a; --text:#f5f5f5; --muted:#aaa; --orange:#f4f4f4; --orange2:#ddd; --radius:14px; --shadow:none; }
body { background:var(--bg); line-height:1.5; }
:focus-visible { outline:2px solid #fff; outline-offset:4px; }
[hidden] { display:none !important; }
.admin-skip { position:fixed; z-index:10001; top:12px; left:12px; transform:translateY(-180%); background:#fff; color:#111; padding:12px 18px; border-radius:6px; }
.admin-skip:focus { transform:none; }
.sidebar { background:#0c0c0c; overflow-y:auto; gap:8px; height:100dvh; }
.sidebar-brand { border-bottom:1px solid var(--line); }
.nav a { color:#aaa; }
.nav a:hover { background:#191919; }
.nav a.active { background:#202020; color:#fff; box-shadow:inset 3px 0 #fff; }
.profile-box { background:#151515; margin-top:auto; }
.profile-avatar { background:#303030; flex-shrink:0; }
.profile-copy { min-width:0; overflow-wrap:anywhere; }
.topbar { border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:24px; gap:16px; }
.topbar h1 { letter-spacing:-.05em; }
.mini { color:#a5a5a5; font-size:.68rem; letter-spacing:.16em; }
.year-chip,.select-chip { background:#151515; border-radius:6px; font-size:.85rem; }
.panel,.kpi-card,.stat,.member-profile-card,.admin-user-card,.money-card,.member-modal { background:#111; box-shadow:none; }
.panel { padding:26px; }
.panel h2 { font-size:1rem; text-transform:none; letter-spacing:0; }
.kpi-card { align-items:flex-start; padding:22px; gap:14px; }
.kpi-card strong { font-size:2.25rem; letter-spacing:-.05em; }
.kpi-icon.orange,.money-icon.orange { background:#242424; color:#fff; }
.money-card { background:#171717; }
.donut::after { background:#111; }
.progress-track { background:#303030; }
.action-card { background:#191919; min-height:135px; }
.action-card:hover { border-color:#777; background:#242424; }
.action-card.primary { background:#f5f5f5; color:#111; }
.action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.action-card strong { max-width:none; }
.btn { background:#f3f3f3; color:#111; border:1px solid transparent; border-radius:7px; min-height:44px; }
.btn:hover { background:#d6d6d6; }
.btn.dark { background:#242424; color:#eee; border-color:#373737; }
.btn.dark:hover { background:#343434; }
.btn.danger { background:#2c1717; color:#ffadad; }
input,select,textarea { background:#0c0c0c; border-color:#393939; border-radius:7px; min-height:44px; }
input[type=checkbox],input[type=radio] { min-height:0; accent-color:#fff; }
input:focus,select:focus,textarea:focus { border-color:#aaa; }
.member-avatar-large,.admin-user-avatar { background:#282828; color:#fff; }
.payment-member-card-fixed { background:#111 !important; box-shadow:none !important; border-radius:14px !important; }
.payment-member-card-fixed .member-avatar { background:#292929 !important; }
.payment-member-card-fixed .payment-status-line { background:#191919 !important; }
.payment-member-card-fixed input,.payment-member-card-fixed select,.payment-member-card-fixed .money-input { background:#0b0b0b !important; border-color:#393939 !important; }
.payment-member-card-fixed .money-input input { background:transparent !important; }
.payment-save-bar-fixed { background:rgba(18,18,18,.97) !important; }
.payment-summary-list > div { display:flex; justify-content:space-between; gap:18px; }
.payment-summary-list + .muted { font-size:.85rem; margin-block:20px; }
.member-search-bar { display:grid; grid-template-columns:minmax(0,1fr) 190px auto; gap:18px; align-items:end; margin-bottom:22px; padding:18px; background:#111; border:1px solid var(--line); border-radius:12px; }
.member-search-bar .field { margin:0; }
.member-search-bar p { margin:0; padding-bottom:10px; font-size:.85rem; }
.member-profile-card h3,.admin-user-identity h3 { overflow-wrap:anywhere; }
.table-scroll { width:100%; overflow-x:auto; margin-block:16px; }
.table-scroll table { min-width:520px; }
th { background:#191919; color:#bbb; white-space:nowrap; }
tbody tr:hover { background:rgba(255,255,255,.025); }
.modal-open,.admin-menu-open { overflow:hidden; }
.modal-close { cursor:pointer; flex-shrink:0; }
.sidebar-backdrop { position:fixed; inset:0; z-index:999; border:0; background:rgba(0,0,0,.7); backdrop-filter:blur(3px); }
.sidebar-close { display:none; }
.admin-footer { margin-top:30px; padding-block:20px; color:#999; }
.admin-login { background:#070707; --orange:#fff; --orange2:#ddd; --bg:#070707; --panel:#111; --panel2:#181818; --line:#303030; }
.admin-login .login-shell { background:#111; border-radius:16px; box-shadow:0 24px 80px #0008; }
.admin-login .visual { background:radial-gradient(circle at 50% 30%,#262626,transparent 70%),#0c0c0c; }
.admin-login .visual::after { background:rgba(255,255,255,.05); }
.admin-login .logo { animation:none; }
.admin-login button[type=submit] { background:#f4f4f4; color:#111; border-radius:7px; }
.admin-login .form-side { background:#111; }
@media (max-width:1100px) { .member-search-bar { grid-template-columns:minmax(0,1fr) 170px; } .member-search-bar p { grid-column:1/-1; padding:0; } }
@media (max-width:900px) {
 .sidebar { visibility:hidden; }
 .sidebar.open { visibility:visible; }
 .sidebar-close { display:block; align-self:flex-end; padding:8px 12px; background:#222; color:#fff; border:1px solid #444; border-radius:6px; cursor:pointer; }
 .mobile-topbar { position:sticky; top:0; z-index:30; background:#070707; padding:12px 0; }
 .menu-toggle { background:#222; min-width:44px; min-height:44px; }
}
@media (max-width:620px) {
 .member-search-bar { grid-template-columns:1fr; gap:12px; }
 .panel { padding:20px; }
 .kpi-card { padding:18px; }
 .action-card { padding:15px; }
 .panel-title-row { gap:12px; }
 .donut { flex-shrink:0; width:75px; height:75px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }

.admin-login .form-card button { background:#f4f4f4; color:#111; }
/* Layout for the existing member and payment page components. */
.members-toolbar,.payment-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.members-toolbar .muted { margin:8px 0 0; }
.members-toolbar .btn { flex-shrink:0; }
.member-card-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.payment-hero h2 { font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.04em; margin:0 0 8px; }
.payment-hero p { margin:0; color:var(--muted); }
.payment-year-box { flex-shrink:0; padding:14px 18px; border:1px solid var(--line); border-radius:10px; background:#111; }
.payment-year-box span { display:block; color:var(--muted); font-size:.75rem; }
.payment-year-box strong { display:block; font-size:1.35rem; }
.payment-stats { margin-bottom:20px; }
.payment-stats .stat { padding:22px; }
.payment-stats .stat-icon { color:#aaa; margin-bottom:10px; }
.payment-stats .stat b { letter-spacing:-.04em; line-height:1.2; margin-bottom:6px; }
.payment-progress-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.payment-progress-head h2 { margin-top:6px; font-size:1.25rem; }
.payment-progress-count { color:var(--muted); font-size:.9rem; }
.payment-progress-track { height:10px; background:#303030; border-radius:999px; overflow:hidden; }
.payment-progress-bar { height:100%; background:#eee; border-radius:inherit; }
.payment-filter-form { display:grid; grid-template-columns:minmax(0,2fr) minmax(90px,.6fr) minmax(140px,1fr) auto; gap:16px; align-items:end; }
.payment-filter-form .field { margin:0; min-width:0; }
.payment-filter-form .btn { white-space:nowrap; }
.bulk-tools { border-top:1px solid var(--line); margin-top:22px; padding-top:20px; }
.bulk-row { display:flex; align-items:center; gap:12px; }
.bulk-row input { max-width:180px; }
.switch { position:relative; width:46px; height:28px; margin:0; cursor:pointer; }
.payment-member-card-fixed .switch input { position:absolute; opacity:0; inset:0; width:100% !important; height:100%; min-height:0 !important; margin:0; cursor:pointer; }
.switch-slider { position:absolute; inset:0; border:1px solid #777; border-radius:20px; background:#333; pointer-events:none; }
.switch-slider::before { content:""; position:absolute; top:3px; left:3px; height:20px; width:20px; border-radius:50%; background:#bbb; transition:transform .15s; }
.switch input:checked + .switch-slider { background:#d9f5df; border-color:#b1ddba; }
.switch input:checked + .switch-slider::before { transform:translateX(18px); background:#1a4826; }
.switch input:focus-visible + .switch-slider { outline:2px solid #fff; outline-offset:4px; }
.paid-card .status-dot { background:var(--green); }
.unpaid-card .status-dot { background:var(--red); }
.toast-success { margin-bottom:20px; border:1px solid #285336; background:#132219; color:#adf0bd; padding:14px 18px; border-radius:10px; }
@media(max-width:1100px) { .payment-filter-form { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media(max-width:620px) {
 .members-toolbar,.payment-hero { align-items:flex-start; flex-direction:column; gap:16px; }
 .members-toolbar .btn { width:100%; }
 .payment-year-box { display:flex; align-items:center; justify-content:space-between; width:100%; gap:16px; }
 .payment-progress-head { align-items:flex-start; flex-direction:column; gap:8px; }
 .payment-filter-form { grid-template-columns:1fr; }
 .bulk-row { align-items:stretch; flex-direction:column; }
 .bulk-row input { max-width:none; }
}