/* ============================================================
   945 CLUB — ADMIN PANEL LUXURY DESIGN SYSTEM
   ============================================================ */

/* ---- BRUTALIST ADMIN ----
   Light ground and ink taken straight from the storefront tokens in tokens.css, so
   the two surfaces share one palette. 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 numerals.

   The --admin-* names are kept because 175 references depend on them, 98 of those in
   admin.html inline styles and js/admin.js template strings that no stylesheet edit
   can reach. Only the values change. */
:root {
  --admin-bg: var(--surface-primary, #ffffff);
  --admin-card: var(--surface-primary, #ffffff);
  --admin-card-hover: var(--surface-secondary, #f6f6f9);
  --admin-border: var(--ink-primary, #111113);
  --admin-border-focus: var(--blue, #0071e3);
  --admin-text: var(--ink-primary, #111113);
  --admin-text-muted: var(--ink-secondary, #6e6e73);
  --admin-sidebar-w: 260px;
  --admin-primary: var(--blue, #0071e3);
  --admin-primary-hover: #0064c8;
  --admin-success: #007a33;
  --admin-warning: #8a5300;
  --admin-danger: #c8102e;
  --admin-purple: #5b21b6;
  --admin-radius: 0px;
  --admin-shadow: 4px 4px 0 var(--ink-primary, #111113);

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

  /* admin.html already loads Inter + Outfit from Google Fonts, byte-identical to
     index.html, but this variable pointed at the system stack -- so the fonts were
     downloaded and never used, and the whole panel rendered in Segoe UI on Windows
     while the storefront rendered in Inter. That mismatch is the loudest thing
     separating the two surfaces, ahead of the dark palette. */
  --admin-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --admin-font-display: 'Outfit', 'Inter', sans-serif;

  /* Blue split by role. #0071e3 is legible as a fill under white text but only
     ~3.3:1 as blue-on-dark text; #2997ff is the reverse. Using one for both is why
     badges and links read as low contrast. */
  --admin-blue-text: #2997ff;
  --admin-blue-fill: #0071e3;
}

/* Form controls do not inherit font-family by default, so without this 36 buttons
   and 10 selects stay on the system stack while everything around them is Inter. */
button, input, select, textarea { font-family: inherit; }

/* ---- inventory matrix: per-product size chips ----
   Sizes are read from each product's own sizesStock keys, because the catalogue
   mixes US numeric (7, 8.5), youth (4Y, 11C) and alpha (S-3XL) scales. The previous
   fixed UK 6-UK 11 columns matched nothing in the catalogue. */
.matrix-sizes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.matrix-size { display: inline-flex; flex-direction: column; gap: 2px; align-items: center; }
.matrix-size-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--admin-text-muted); text-transform: uppercase;
}
.matrix-size .matrix-stock-input { width: 52px; text-align: center; padding: 4px 2px; }
.matrix-no-sizes { font-size: 12px; color: var(--admin-text-muted); font-style: italic; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body.admin-body {
  background-color: var(--admin-bg);
  color: var(--admin-text);
  font-family: var(--admin-font);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
}

/* ================= LOGIN GATE ================= */
.admin-login-screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, #1a1c24 0%, #08090c 100%);
  display: flex;
  z-index: 9999;
  padding: 20px;
  /* The wordmark is deliberately wider than the card, so it must be clipped
     sideways -- but a short window has to stay SCROLLABLE. align-items:center
     clips overflow at the start edge with no way to scroll back to it, which
     hid the top of the card on a laptop. Auto margins centre identically and
     keep the overflow reachable. */
  overflow-x: hidden;
  overflow-y: auto;
}
/* The storefront's oversized footer wordmark, reused as the login ground.
   Sized off the viewport the way .club-footer-mark is, so it scales with the
   window instead of being cropped on a narrow one. */
.login-watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display, 'Outfit', 'Inter', sans-serif);
  /* Deliberately wider than the 440px card at every window size, so the ends of
     the wordmark always read either side of it. At 17vw it vanished completely
     behind the card on anything under ~900px. */
  font-size: clamp(110px, 20vw, 300px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.8;
  white-space: nowrap;
  color: #fff;
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}

/* The card has to sit above the mark, not be washed out by it. */
.login-box {
  margin: auto;
  position: relative;
  z-index: 1;
  background: rgba(21, 23, 30, 0.95);
  border: 1px solid var(--admin-border);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 36px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  text-align: center;
  position: relative;
}
.login-shield-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,113,227,0.12);
  border: 1px solid rgba(0,113,227,0.3);
  color: var(--admin-primary);
  padding: 4px 12px;
  border-radius: 980px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.login-logo {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 6px;
}
.login-logo span { color: var(--admin-primary); }
.login-sub { font-size: 13px; color: var(--admin-text-muted); margin-bottom: 20px; line-height: 1.4; }

.login-lockout-banner {
  background: rgba(255, 69, 58, 0.12);
  border: 1px solid rgba(255, 69, 58, 0.3);
  color: #ff453a;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.login-lockout-banner p { margin: 2px 0 0; color: #ffb4ab; }

.login-error-banner {
  background: rgba(255, 69, 58, 0.12);
  border: 1px solid rgba(255, 69, 58, 0.3);
  color: #ff453a;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.login-security-notice {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  color: var(--admin-text-muted);
}

.session-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--admin-success);
  background: rgba(48, 209, 88, 0.1);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(48, 209, 88, 0.2);
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--admin-success);
  box-shadow: 0 0 8px var(--admin-success);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* ================= SIDEBAR COLLAPSE =================
   Both .admin-sidebar's width and .admin-main's margin-left read
   --admin-sidebar-w, so redefining that one variable moves the whole layout
   and the two can never disagree. */
.admin-sidebar,
.admin-main { transition: width .18s ease, margin-left .18s ease; }

body.sidebar-collapsed { --admin-sidebar-w: 68px; }

.sidebar-collapse-btn,
.topbar-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex: none;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: 7px;
  background: transparent;
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.sidebar-collapse-btn svg,
.topbar-menu-btn svg { width: 15px; height: 15px; }
.sidebar-collapse-btn:hover,
.topbar-menu-btn:hover { color: #fff; border-color: #3a3f4b; background: rgba(255,255,255,.05); }
.sidebar-collapse-btn:focus-visible,
.topbar-menu-btn:focus-visible { outline: 2px solid var(--admin-accent, #2b7fff); outline-offset: 2px; }

/* The menu button is for the off-canvas drawer only. */
.topbar-menu-btn { display: none; }

/* --- collapsed: icons only --- */
body.sidebar-collapsed .sidebar-logo span,
body.sidebar-collapsed .nav-group-label,
body.sidebar-collapsed .adm-nav-link > span,
body.sidebar-collapsed .admin-user-info { display: none; }

body.sidebar-collapsed .sidebar-head { justify-content: center; padding: 24px 0; }
body.sidebar-collapsed .sidebar-logo { display: none; }
body.sidebar-collapsed .adm-nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .sidebar-foot { justify-content: center; }
body.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

/* Icons must not shrink once the labels beside them are gone. */
body.sidebar-collapsed .adm-nav-link svg { flex: none; }

/* ================= ADMIN LAYOUT ================= */
.admin-sidebar {
  width: var(--admin-sidebar-w);
  background: #0f1117;
  border-right: 1px solid var(--admin-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 100;
}
.sidebar-head {
  padding: 24px 20px;
  border-bottom: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-logo .badge-adm {
  font-size: 10px;
  background: rgba(0,113,227,0.2);
  color: var(--admin-primary);
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
}

.sidebar-nav {
  padding: 16px 12px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--admin-text-muted);
  padding: 12px 12px 6px;
}
.adm-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--admin-text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}
.adm-nav-link:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
}
.adm-nav-link.active {
  background: var(--admin-primary);
  color: #fff;
  font-weight: 600;
}
.adm-nav-link svg { width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; }
.adm-nav-badge {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
}

.sidebar-foot {
  padding: 16px 14px;
  border-top: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-user-info { display: flex; flex-direction: column; }
.admin-user-name { font-size: 13px; font-weight: 600; color: #fff; }
.admin-user-role { font-size: 11px; color: var(--admin-text-muted); }

/* MAIN VIEWPORT */
.admin-main {
  margin-left: var(--admin-sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.admin-topbar {
  height: 64px;
  border-bottom: 1px solid var(--admin-border);
  background: rgba(15, 17, 23, 0.8);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}
.topbar-title-wrap h1 {
  font-family: var(--admin-font-display); font-size: 18px; font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }

.admin-content {
  padding: 32px;
  flex: 1;
}

/* ================= KPI CARDS ================= */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.kpi-card {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.kpi-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-text-muted);
}
.kpi-val {
  font-family: var(--admin-font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.1;
  margin: 4px 0 2px;
}
.kpi-val.kpi-green { color: var(--admin-success); }
.kpi-val.kpi-red { color: var(--admin-danger); }
.kpi-val.kpi-orange { color: var(--admin-warning); }
.kpi-sub {
  font-size: 12px;
  color: var(--admin-text-muted);
}

/* ================= DASHBOARD 2-COLUMN GRID ================= */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
.brand-dist-list, .activity-feed {
  padding: 12px 24px 20px;
}
.panel-link {
  font-size: 12px;
  color: var(--admin-primary);
  text-decoration: none;
  font-weight: 600;
}
.panel-link:hover {
  text-decoration: underline;
}

/* ================= TABLES & PANELS ================= */
.admin-panel {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  overflow: hidden;
  box-shadow: var(--admin-shadow);
  margin-bottom: 32px;
}
.panel-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.panel-title { font-size: 16px; font-weight: 700; }
.panel-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.admin-search-input {
  background: #0e1015;
  border: 1px solid var(--admin-border);
  color: #fff;
  padding: 8px 14px 8px 36px;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  min-width: 240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.admin-search-input:focus { border-color: var(--admin-primary); }

.admin-select {
  background: #0e1015;
  border: 1px solid var(--admin-border);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

/* DATA TABLE */
.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}
.admin-table th {
  background: #111319;
  color: var(--admin-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--admin-border);
}
.admin-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.admin-table tr:hover td { background: rgba(255,255,255,0.02); }

/* PRODUCT ROW CELLS */
.table-prod-cell { display: flex; align-items: center; gap: 14px; }
.table-prod-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #0b0c10;
  object-fit: contain;
  padding: 2px;
  border: 1px solid var(--admin-border);
}
.table-prod-info h4 { font-size: 14px; font-weight: 600; color: #fff; }
.table-prod-info span { font-size: 11px; color: var(--admin-text-muted); }

.table-actions-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
}

/* MATRIX STOCK INPUTS */
.matrix-stock-input {
  width: 54px;
  text-align: center;
  background: #0e1015;
  border: 1px solid var(--admin-border);
  color: #fff;
  padding: 7px 4px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.matrix-stock-input:hover {
  border-color: rgba(255,255,255,0.25);
  background: #141720;
}
.matrix-stock-input:focus {
  border-color: var(--admin-primary);
  background: #141720;
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.25);
}

/* STATUS BADGES */
.adm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.adm-badge.in_stock { background: rgba(48,209,88,0.15); color: var(--admin-success); }
.adm-badge.out_of_stock { background: rgba(255,69,58,0.15); color: var(--admin-danger); }
.adm-badge.low_stock { background: rgba(255,159,10,0.15); color: var(--admin-warning); }
.adm-badge.published { background: rgba(0,113,227,0.15); color: var(--admin-primary); }
.adm-badge.draft { background: rgba(255,255,255,0.1); color: var(--admin-text-muted); }
.adm-badge.hidden { background: rgba(191,90,242,0.15); color: var(--admin-purple); }

/* BUTTONS */
.btn-adm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  text-decoration: none;
}
.btn-adm.primary { background: var(--admin-primary); color: #fff; }
.btn-adm.primary:hover { background: var(--admin-primary-hover); }
.btn-adm.secondary { background: rgba(255,255,255,0.08); color: #fff; }
.btn-adm.secondary:hover { background: rgba(255,255,255,0.14); }
.btn-adm.danger { background: rgba(255,69,58,0.15); color: var(--admin-danger); }
.btn-adm.danger:hover { background: rgba(255,69,58,0.25); }
.btn-adm.sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }

/* TOGGLE SWITCH */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(255,255,255,0.15);
  transition: .25s;
  border-radius: 22px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .25s;
  border-radius: 50%;
}
input:checked + .slider { background-color: var(--admin-success); }
input:checked + .slider:before { transform: translateX(18px); }

/* ================= PRODUCT EDITOR & DIALOG MODALS ================= */
.admin-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}
.admin-modal.open {
  display: flex !important;
}
.modal-card-adm {
  background: #15171e;
  border: 1px solid var(--admin-border);
  border-radius: 20px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 90px rgba(0,0,0,0.85);
  overflow: hidden;
  position: relative;
  margin: auto;
  animation: modalPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-card-adm.modal-large {
  max-width: 880px;
}
@keyframes modalPopIn {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-head-adm {
  padding: 20px 28px;
  border-bottom: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #12141a;
}
.modal-head-adm h3 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.modal-close-adm {
  background: transparent;
  border: none;
  color: var(--admin-text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.modal-close-adm:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}
.modal-tabs-adm {
  display: flex;
  background: #0e1015;
  border-bottom: 1px solid var(--admin-border);
  padding: 0 20px;
  overflow-x: auto;
  gap: 4px;
}
.modal-tab-btn {
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--admin-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.modal-tab-btn:hover {
  color: #fff;
}
.modal-tab-btn.active {
  color: #fff;
  border-color: var(--admin-primary);
  background: rgba(0, 113, 227, 0.06);
}
.modal-body-adm {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

.modal-foot-adm {
  padding: 16px 28px;
  border-top: 1px solid var(--admin-border);
  background: #0f1117;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* FORM ELEMENTS */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.form-grid.full { grid-template-columns: 1fr; }
.form-group-adm {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group-adm label {
  font-size: 12px;
  font-weight: 600;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-input-adm, .form-textarea-adm {
  background: #0e1015;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.form-input-adm:focus, .form-textarea-adm:focus {
  border-color: var(--admin-primary);
}
.form-textarea-adm { resize: vertical; min-height: 80px; }

/* SIZE INVENTORY MATRIX */
.sizes-grid-adm {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.size-stock-card {
  background: #0e1015;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.size-stock-card span { font-size: 12px; font-weight: 700; color: #fff; }
.size-stock-card input {
  width: 100%;
  margin-top: 6px;
  text-align: center;
  background: #1a1d24;
  border: 1px solid var(--admin-border);
  color: #fff;
  padding: 6px 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

/* ================= IMAGE UPLOAD & GALLERY ================= */
.image-dropzone {
  border: 2px dashed rgba(255,255,255,0.18);
  border-radius: 12px;
  background: #0e1015;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.image-dropzone:hover, .image-dropzone.dragover {
  border-color: var(--admin-primary);
  background: rgba(0, 113, 227, 0.05);
}
.image-dropzone svg {
  width: 36px;
  height: 36px;
  color: var(--admin-primary);
}
.image-dropzone-text {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.image-dropzone-sub {
  font-size: 11px;
  color: var(--admin-text-muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.gallery-card {
  position: relative;
  background: #0e1015;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s ease;
}
.gallery-card.is-primary {
  border-color: var(--admin-primary);
  background: rgba(0, 113, 227, 0.08);
}
.gallery-thumb {
  width: 100%;
  height: 90px;
  object-fit: contain;
  border-radius: 6px;
  background: #000;
}
.gallery-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
}
.gallery-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  background: var(--admin-primary);
  padding: 2px 6px;
  border-radius: 4px;
}
.gallery-btn-primary {
  font-size: 10px;
  font-weight: 600;
  color: var(--admin-text-muted);
  background: transparent;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
}
.gallery-btn-primary:hover {
  color: #fff;
  border-color: #fff;
}
.gallery-btn-del {
  background: transparent;
  border: none;
  color: var(--admin-danger);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 4px;
}
.gallery-btn-del:hover {
  background: rgba(255,69,58,0.2);
}

/* ================= TOASTS ================= */
.adm-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adm-toast {
  background: #1c1f28;
  border: 1px solid var(--admin-border);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn 0.25s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ================= RESPONSIVE ================= */
@media(max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .sizes-grid-adm { grid-template-columns: repeat(3, 1fr); }
}
/* Scrim behind the mobile drawer. */
.sidebar-scrim {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(0,0,0,.55);
}

@media(max-width: 768px) {
  .admin-sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-left: 0; }
  /* Collapsing is a desktop affordance; on a phone the drawer either covers
     the screen or it does not, so always show it in full when open. */
  body.sidebar-collapsed { --admin-sidebar-w: 260px; }
  body.sidebar-collapsed .sidebar-logo,
  body.sidebar-collapsed .sidebar-logo span,
  body.sidebar-collapsed .nav-group-label,
  body.sidebar-collapsed .adm-nav-link > span,
  body.sidebar-collapsed .admin-user-info { display: revert; }
  body.sidebar-collapsed .sidebar-head { justify-content: space-between; padding: 24px 20px; }
  body.sidebar-collapsed .adm-nav-link { justify-content: flex-start; }
  .topbar-menu-btn { display: inline-flex; }
  .sidebar-collapse-btn { display: none; }
  .kpi-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}