/* ============================================================
   945 CLUB — BRUTALIST ADMIN LAYER
   Loaded AFTER css/admin.css so it wins on specificity ties, without
   rewriting 888 lines of working layout.

   Palette comes from css/tokens.css — the same tokens the storefront uses —
   so the two surfaces share one colour system. Everything decorative is
   stripped: no radii, no blur, no gradient, no soft shadow. Structure is
   stated rather than suggested: hard 2px rules, flat blocks, uppercase
   labels, tabular monospace numerals, and a hard offset shadow in place of
   a blur wherever elevation is needed.
   ============================================================ */

:root {
  --admin-rule: 2px;
  --admin-rule-hair: 1px;
  --admin-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* 1. Strip every rounded corner, blur and soft shadow in one pass. */
.admin-sidebar, .admin-topbar, .admin-panel, .admin-content, .kpi-card,
.btn-adm, .form-input-adm, .form-textarea-adm, .admin-select, .admin-search-input,
.adm-badge, .badge-adm, .adm-nav-badge, .adm-nav-link, .modal-card-adm, .adm-toast,
.login-box, .login-shield-badge, .login-error-banner, .login-lockout-banner,
.session-badge, .image-dropzone, .gallery-card, .gallery-thumb, .gallery-badge,
.gallery-btn-primary, .gallery-btn-del, .size-stock-card, .matrix-stock-input,
.table-prod-thumb, .modal-tab-btn, .brand-dist-list, .admin-table-wrap,
.panel-header, .sidebar-logo .badge-adm {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* 2. Ground and ink, straight from the storefront tokens. */
body.admin-body { background: var(--surface-primary); color: var(--ink-primary); }
.admin-panel, .admin-content, .admin-main { background: var(--surface-primary); }

/* 3. Sidebar — a hard vertical rule, not a tinted panel. */
.admin-sidebar { background: var(--surface-primary); border-right: var(--admin-rule) solid var(--ink-primary); }
.sidebar-head { border-bottom: var(--admin-rule) solid var(--ink-primary); padding: 20px; }
.sidebar-logo { color: var(--ink-primary); font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; }
.sidebar-logo .badge-adm { background: var(--ink-primary); color: var(--surface-primary); font-weight: 700; letter-spacing: 0.08em; }
.nav-group-label {
  color: var(--ink-primary); font-weight: 800; letter-spacing: 0.12em;
  border-bottom: var(--admin-rule-hair) solid var(--hair);
  margin: 14px 8px 4px; padding: 0 4px 6px;
}
.adm-nav-link {
  color: var(--ink-primary); font-weight: 600;
  border-left: 3px solid transparent; padding: 10px 12px;
}
.adm-nav-link:hover { background: var(--surface-secondary); color: var(--ink-primary); border-left-color: var(--ink-primary); }
.adm-nav-link.active { background: var(--ink-primary); color: var(--surface-primary); border-left-color: var(--blue); font-weight: 700; }
.adm-nav-badge { background: var(--ink-primary); color: var(--surface-primary); font-family: var(--admin-mono); font-size: 10px; }
.adm-nav-link.active .adm-nav-badge { background: var(--surface-primary); color: var(--ink-primary); }
.sidebar-foot { border-top: var(--admin-rule) solid var(--ink-primary); }
.admin-user-name { color: var(--ink-primary); }
.admin-user-role { color: var(--ink-secondary); }

/* 4. Topbar. */
.admin-topbar { background: var(--surface-primary); border-bottom: var(--admin-rule) solid var(--ink-primary); }
.topbar-title-wrap h1 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; color: var(--ink-primary); }

/* 5. Cards — flat and outlined; elevation is a hard offset, never a blur. */
.kpi-card, .admin-panel, .brand-dist-list, .size-stock-card {
  background: var(--surface-primary);
  border: var(--admin-rule) solid var(--ink-primary);
}
.kpi-card { padding: 18px; transition: transform .08s linear, box-shadow .08s linear; }
.kpi-card:hover { box-shadow: 4px 4px 0 var(--ink-primary) !important; transform: translate(-2px, -2px); }
.kpi-label { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; font-size: 10px; color: var(--ink-secondary); }
.kpi-val { font-family: var(--admin-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink-primary); }
.kpi-sub { color: var(--ink-secondary); font-size: 11px; }

/* 6. Buttons — square, outlined, and they physically press. */
.btn-adm {
  border: var(--admin-rule) solid var(--ink-primary);
  background: var(--surface-primary); color: var(--ink-primary);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  transition: transform .08s linear, box-shadow .08s linear, background .08s linear;
}
.btn-adm:hover { background: var(--surface-secondary); box-shadow: 3px 3px 0 var(--ink-primary) !important; transform: translate(-2px, -2px); }
.btn-adm:active { box-shadow: none !important; transform: translate(0, 0); }
.btn-adm.primary { background: var(--ink-primary); color: var(--surface-primary); }
.btn-adm.primary:hover { background: var(--blue); color: #fff; }
.btn-adm.danger { background: var(--admin-danger); color: #fff; }

/* 7. Inputs — square, hard-ruled, with focus you cannot miss. */
.form-input-adm, .form-textarea-adm, .admin-select, .admin-search-input, .matrix-stock-input {
  background: var(--surface-primary);
  border: var(--admin-rule) solid var(--ink-primary);
  color: var(--ink-primary);
}
.form-input-adm:focus, .form-textarea-adm:focus, .admin-select:focus,
.admin-search-input:focus, .matrix-stock-input:focus {
  outline: 3px solid var(--blue); outline-offset: 0; border-color: var(--ink-primary);
}
.form-group-adm label {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 800; font-size: 10px; color: var(--ink-primary);
}
.matrix-stock-input { font-family: var(--admin-mono); font-variant-numeric: tabular-nums; }

/* 8. Tables — ruled, uppercase heads, aligned figures. */
.admin-table-wrap { border: var(--admin-rule) solid var(--ink-primary); overflow-x: auto; }
.admin-table { border-collapse: collapse; }
.admin-table th {
  background: var(--ink-primary); color: var(--surface-primary);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; font-weight: 800; white-space: nowrap;
}
.admin-table td { border-bottom: var(--admin-rule-hair) solid var(--hair); color: var(--ink-primary); }
.admin-table tbody tr:hover { background: var(--surface-secondary); }
.table-prod-thumb { border: var(--admin-rule-hair) solid var(--ink-primary); background: var(--surface-secondary); }
.table-prod-info strong { color: var(--ink-primary); }

/* 9. Badges — outlined blocks, stated not shaded. */
.adm-badge, .badge-adm {
  border: var(--admin-rule-hair) solid currentColor;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 800; font-size: 10px; background: transparent;
}
.adm-badge.in_stock { color: var(--admin-success); }
.adm-badge.low_stock { color: var(--admin-warning); }
.adm-badge.out_of_stock { color: var(--admin-danger); }

/* 10. Login gate, modals, toasts. */
.admin-login-screen { background: var(--surface-secondary); }
/* Same treatment as the storefront's .club-footer-mark: display face, tight
   tracking, ink at a fraction of its weight. Slightly stronger than the dark
   theme's 0.04 because dark ink on a light ground reads fainter than the
   reverse at the same opacity. */
.login-watermark { color: var(--ink-primary); opacity: 0.055; }
.login-box {
  background: var(--surface-primary);
  border: var(--admin-rule) solid var(--ink-primary);
  box-shadow: 8px 8px 0 var(--ink-primary) !important;
}
.login-logo { font-family: var(--font-display); text-transform: uppercase; color: var(--ink-primary); }
.login-logo span { color: var(--blue); }
.login-shield-badge { background: var(--ink-primary); color: var(--surface-primary); border: none; letter-spacing: 0.1em; }
.login-sub, .login-security-notice { color: var(--ink-secondary); }
.modal-card-adm {
  background: var(--surface-primary);
  border: var(--admin-rule) solid var(--ink-primary);
  box-shadow: 8px 8px 0 var(--ink-primary) !important;
}
.modal-head-adm, .modal-foot-adm { border-color: var(--ink-primary); }
.modal-tab-btn {
  border: var(--admin-rule-hair) solid var(--ink-primary);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.modal-tab-btn.active { background: var(--ink-primary); color: var(--surface-primary); }
.adm-toast { background: var(--ink-primary); color: var(--surface-primary); border: var(--admin-rule) solid var(--ink-primary); }

/* 11. Panels, matrix, dropzone. */
.panel-header { border-bottom: var(--admin-rule) solid var(--ink-primary); }
.panel-title { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; color: var(--ink-primary); }
.panel-link { color: var(--blue); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
.matrix-size-label { color: var(--ink-primary); font-weight: 800; }
.matrix-no-sizes { color: var(--ink-secondary); }
.image-dropzone { border: var(--admin-rule) dashed var(--ink-primary); background: var(--surface-secondary); }
.image-dropzone-text { color: var(--ink-primary); font-weight: 700; }
.image-dropzone-sub { color: var(--ink-secondary); }
.session-badge { background: var(--surface-primary); border: var(--admin-rule-hair) solid var(--admin-success); color: var(--admin-success); }
.live-dot { box-shadow: none !important; }

/* 12. Keyboard focus, which the original stylesheet never defined at all. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}