/* ═══════════════════════════════════════════════════════════════════
   SHRISH LLC — ADMIN DASHBOARD — LIQUID GOLD LUXURY UI
   Aesthetic: Dark Obsidian × Liquid Gold × Glassmorphism × Magnetic
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  /* Gold palette */
  --gold-100: #FFF8ED;
  --gold-200: #FFE9C2;
  --gold-300: #F5C97A;
  --gold-400: #E8A83C;
  --gold-500: #C8791A;
  --gold-600: #9A5A0A;
  --gold-glow: rgba(200,121,26,0.35);
  --gold-shimmer: linear-gradient(135deg, #F5C97A 0%, #C8791A 40%, #9A5A0A 70%, #E8A83C 100%);

  /* Obsidian palette */
  --obs-900: #080604;
  --obs-800: #0F0C07;
  --obs-700: #1A1208;
  --obs-600: #251A0C;
  --obs-500: #332513;
  --obs-400: #4A3820;
  --obs-300: #6B5535;

  /* Glass */
  --glass-light: rgba(255,248,237,0.06);
  --glass-mid:   rgba(255,248,237,0.10);
  --glass-heavy: rgba(255,248,237,0.15);
  --glass-border: rgba(200,121,26,0.20);
  --glass-border-bright: rgba(200,121,26,0.45);

  /* Status */
  --green:  #22C55E; --green-dim: rgba(34,197,94,0.15);
  --amber:  #F59E0B; --amber-dim: rgba(245,158,11,0.15);
  --red:    #EF4444; --red-dim:   rgba(239,68,68,0.15);
  --blue:   #3B82F6; --blue-dim:  rgba(59,130,246,0.15);
  --purple: #A855F7; --purple-dim:rgba(168,85,247,0.15);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --ease-spring:   cubic-bezier(0.34,1.56,0.64,1);
  --t-fast:  150ms;
  --t-mid:   300ms;
  --t-slow:  600ms;

  /* Radius */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 9999px;

  /* Shadows */
  --shadow-gold: 0 0 40px rgba(200,121,26,0.25), 0 8px 32px rgba(0,0,0,0.6);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(200,121,26,0.1) inset;
  --shadow-glow: 0 0 80px rgba(200,121,26,0.15);

  /* Legacy compat vars (keep so existing JS doesn't break computed styles) */
  --saffron: #C8791A; --saffron-d: #9A5A0A;
  --dark: #080604; --white: #FFF8ED;
  --cream: #1A1208; --text: #E8D5B0; --text-light: #9A8060;
  --border: rgba(200,121,26,0.18);
  --font-serif: 'Cormorant Garamond', serif;
  --gold: #C8791A; --gold-l: rgba(200,121,26,0.12);
  --gold-d: #9A5A0A;
  --transition: 300ms cubic-bezier(0.16,1,0.3,1);
  --radius: 14px; --radius-lg: 20px;
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 48px rgba(0,0,0,0.7);
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--obs-900);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── AMBIENT BACKGROUND ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(200,121,26,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(200,121,26,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, var(--obs-800) 0%, var(--obs-900) 100%);
  pointer-events: none;
  z-index: 0;
}

body > * { position: relative; z-index: 1; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--obs-800); }
::-webkit-scrollbar-thumb { background: var(--obs-400); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-500); }

/* ═══════════════════════════════════════════════════════════════════
   LOGIN SCREEN
   ═══════════════════════════════════════════════════════════════════ */
.admin-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

/* Animated orbs behind login */
.admin-login-wrap::before,
.admin-login-wrap::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: orb-drift 8s ease-in-out infinite alternate;
}
.admin-login-wrap::before {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(200,121,26,0.15) 0%, transparent 70%);
  top: -200px; left: -200px;
}
.admin-login-wrap::after {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(245,201,122,0.08) 0%, transparent 70%);
  bottom: -100px; right: -100px;
  animation-delay: -4s;
}
@keyframes orb-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(40px,30px) scale(1.1); }
}

.admin-login-card {
  background: var(--glass-mid);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border: 1px solid var(--glass-border-bright);
  border-radius: var(--r-xl);
  padding: 56px 48px;
  width: 100%;
  max-width: 440px;
  text-align: center;
  box-shadow: var(--shadow-gold), 0 1px 0 rgba(255,255,255,0.05) inset;
  position: relative;
  animation: card-rise 0.8s var(--ease-out-expo) both;
}
@keyframes card-rise {
  from { opacity: 0; transform: translateY(32px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Gold line accent top of card */
.admin-login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: var(--gold-shimmer);
  border-radius: 99px;
}

.admin-login-card img {
  height: 72px;
  width: 72px;
  object-fit: contain;
  border-radius: 50%;
  margin: 0 auto 24px;
  display: block;
  border: 2px solid rgba(200,121,26,0.4);
  box-shadow: 0 0 32px rgba(200,121,26,0.3);
  animation: logo-pulse 3s ease-in-out infinite;
}
@keyframes logo-pulse {
  0%,100% { box-shadow: 0 0 32px rgba(200,121,26,0.3); }
  50%      { box-shadow: 0 0 48px rgba(200,121,26,0.5), 0 0 80px rgba(200,121,26,0.15); }
}

.admin-login-card h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--gold-200);
  margin-bottom: 8px;
  line-height: 1.1;
}

.admin-login-card p {
  color: var(--text-light);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 36px;
}

.admin-login-card input {
  width: 100%;
  padding: 15px 20px;
  border-radius: var(--r-md);
  border: 1px solid rgba(200,121,26,0.25);
  background: rgba(255,255,255,0.04);
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--gold-200);
  outline: none;
  margin-bottom: 14px;
  transition: border-color var(--t-mid) ease, box-shadow var(--t-mid) ease, background var(--t-mid) ease;
}
.admin-login-card input::placeholder { color: var(--obs-300); }
.admin-login-card input:focus {
  border-color: var(--gold-400);
  background: rgba(200,121,26,0.06);
  box-shadow: 0 0 0 3px rgba(200,121,26,0.12), 0 0 20px rgba(200,121,26,0.1);
}

.admin-login-card button {
  width: 100%;
  padding: 16px;
  background: var(--gold-shimmer);
  color: var(--obs-900);
  border: none;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--t-mid) var(--ease-out-expo);
  position: relative;
  overflow: hidden;
  margin-top: 4px;
}
.admin-login-card button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--t-mid) ease;
}
.admin-login-card button:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(200,121,26,0.5); }
.admin-login-card button:hover::after { opacity: 1; }
.admin-login-card button:active { transform: translateY(0); }
.admin-login-card button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.login-error {
  color: #fff;
  background: linear-gradient(135deg, rgba(239,68,68,0.9), rgba(185,28,28,0.9));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 14px;
  display: none;
  text-align: center;
  line-height: 1.5;
  animation: shake 0.4s var(--ease-spring);
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* ═══════════════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════════════ */
.admin-topbar {
  background: rgba(8,6,4,0.85);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-bottom: 1px solid rgba(200,121,26,0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(200,121,26,0.1), 0 8px 32px rgba(0,0,0,0.4);
}

.admin-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-topbar img {
  height: 36px;
  width: 36px;
  border-radius: 50%;
  object-fit: contain;
  border: 1.5px solid rgba(200,121,26,0.5);
  box-shadow: 0 0 12px rgba(200,121,26,0.3);
}

.admin-topbar h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  background: var(--gold-shimmer);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.02em;
}

#adminUserEmail {
  font-size: 12px;
  color: var(--text-light);
  font-family: var(--font-mono);
  margin-right: 8px;
}

.admin-logout-btn {
  padding: 8px 20px;
  background: transparent;
  border: 1px solid rgba(200,121,26,0.3);
  border-radius: var(--r-full);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--t-mid) ease;
  letter-spacing: 0.03em;
}
.admin-logout-btn:hover {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 0 16px rgba(239,68,68,0.15);
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.admin-wrap { max-width: none; margin: 0; padding: 24px 20px 80px; }

.admin-layout {
  display: grid;
  /* Stats moved into the left sidebar, so the main column gets the 300px the
     old right rail was taking. That rail was squeezing the orders table and
     clipping the Actions buttons. */
  grid-template-columns: 240px minmax(0,1fr);
  gap: 20px;
  align-items: start;
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════ */
.admin-sidebar {
  position: sticky;
  top: 74px;
  background: var(--glass-light);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: 20px 14px;
  box-shadow: var(--shadow-card);
}

.sidebar-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--obs-300);
  padding: 0 10px;
  margin-bottom: 10px;
}

.admin-tabs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-tab {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-mid) var(--ease-out-expo);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-tab::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 2px;
  background: var(--gold-shimmer);
  border-radius: 99px;
  opacity: 0;
  transition: opacity var(--t-mid) ease;
}

.admin-tab:hover {
  background: var(--glass-mid);
  color: var(--gold-300);
  border-color: rgba(200,121,26,0.15);
  transform: translateX(3px);
}

.admin-tab.active {
  background: linear-gradient(135deg, rgba(200,121,26,0.18) 0%, rgba(200,121,26,0.08) 100%);
  border-color: rgba(200,121,26,0.35);
  color: var(--gold-300);
  box-shadow: 0 0 20px rgba(200,121,26,0.1), inset 0 1px 0 rgba(255,255,255,0.05);
}
.admin-tab.active::before { opacity: 1; }

/* Sheet pills inside sidebar */
.sidebar-sheet-group { margin: 4px 0 8px 8px; }
.sheet-switcher { display: flex; flex-direction: column; gap: 2px; }
.sheet-pill {
  padding: 7px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--obs-300);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--t-fast) ease;
  text-align: left;
}
.sheet-pill:hover { color: var(--gold-300); background: var(--glass-light); }
.sheet-pill.active { color: var(--gold-400); background: rgba(200,121,26,0.08); border-color: rgba(200,121,26,0.2); }

/* Divider in sidebar */
.admin-tab[style*="margin-top"],
.admin-tab + .admin-tab:nth-child(5) { margin-top: 4px; }

.sidebar-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,121,26,0.2), transparent);
  margin: 10px 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   STAT RAIL (RIGHT)
   ═══════════════════════════════════════════════════════════════════ */
.admin-stats-rail {
  position: sticky;
  top: 74px;
}

/* Compact now that these sit in the 240px sidebar rather than a 300px rail. */
.admin-stats { display: flex; flex-direction: column; gap: 8px; }

.stat-card {
  background: var(--glass-light);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 10px 13px;
  position: relative;
  overflow: hidden;
  transition: all var(--t-mid) var(--ease-out-expo);
  cursor: default;
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,121,26,0.3), transparent);
}
.stat-card:hover {
  border-color: rgba(200,121,26,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 20px rgba(200,121,26,0.08);
}

.stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--obs-300);
  margin-bottom: 6px;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--gold-300);
  line-height: 1;
}
.stat-value.gold { background: var(--gold-shimmer); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-value.green { color: var(--green); }
.stat-value.amber { color: var(--amber); }
.stat-sub { font-size: 11px; color: var(--text-light); margin-top: 4px; }

/* renderStats() emits .s-label / .s-value, but only .stat-label / .stat-value
   were ever defined, so these cards rendered unstyled. */
.s-label {
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--obs-300);
  line-height: 1.2;
}
.s-value {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 3px;
  color: var(--gold-200);
  font-variant-numeric: tabular-nums;
}
.s-value.gold  { color: var(--gold-300); }
.s-value.green { color: var(--green); }
.s-value.amber { color: var(--amber); }

/* Resend / send-now control in the shipping tracking cell. Needs to read as a
   real button in a dense, low-contrast cell. */
.tracking-mail-btn {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--glass-border-bright);
  background: rgba(200,121,26,0.14);
  color: var(--gold-200);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast, .15s) ease, color var(--t-fast, .15s) ease;
}
.tracking-mail-btn:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: #1A1208;
}
.tracking-mail-btn.is-urgent {
  background: var(--gold-500);
  border-color: var(--gold-400);
  color: #1A1208;
}
.tracking-mail-btn.is-urgent:hover {
  background: var(--gold-400);
}

/* ═══════════════════════════════════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════════════════════════════════ */
.admin-main { min-width: 0; }

.tab-panel { display: none; animation: panel-in 0.4s var(--ease-out-expo) both; }
.tab-panel.active { display: block; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section headers ── */
.section-header, .orders-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.section-title, .orders-section-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  background: var(--gold-shimmer);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

/* ── Toolbar ── */
.orders-toolbar, .toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--glass-light);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
}

.filter-input, .orders-search, input[type="search"] {
  flex: 1;
  min-width: 180px;
  padding: 9px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,121,26,0.2);
  border-radius: var(--r-md);
  color: var(--gold-200);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: all var(--t-mid) ease;
}
.filter-input:focus, .orders-search:focus {
  border-color: var(--gold-400);
  background: rgba(200,121,26,0.06);
  box-shadow: 0 0 0 3px rgba(200,121,26,0.1);
}
input[type="date"], select.filter-select, select {
  padding: 9px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,121,26,0.2);
  border-radius: var(--r-md);
  color: var(--gold-200);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--t-mid) ease;
}
input[type="date"]:focus, select:focus { border-color: var(--gold-400); outline: none; }
select option { background: var(--obs-700); color: var(--text); }

/* ── Buttons ── */
.toolbar-btn, button.toolbar-btn {
  padding: 9px 16px;
  background: var(--glass-mid);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-mid) var(--ease-out-expo);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.toolbar-btn:hover {
  background: rgba(200,121,26,0.15);
  border-color: rgba(200,121,26,0.4);
  color: var(--gold-300);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* Print button — dark gold */
.print-btn {
  background: linear-gradient(135deg, var(--obs-600), var(--obs-500)) !important;
  border-color: rgba(200,121,26,0.5) !important;
  color: var(--gold-300) !important;
}
.print-btn:hover {
  background: var(--gold-shimmer) !important;
  color: var(--obs-900) !important;
  box-shadow: 0 4px 20px rgba(200,121,26,0.4) !important;
}

/* Primary action button */
.btn-primary, .action-btn-primary {
  background: var(--gold-shimmer) !important;
  border-color: transparent !important;
  color: var(--obs-900) !important;
  font-weight: 700 !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(200,121,26,0.4) !important;
}

/* Status filter chips */
.status-filter-btn, .filter-chip {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(200,121,26,0.2);
  border-radius: var(--r-full);
  color: var(--text-light);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-mid) ease;
  white-space: nowrap;
}
.status-filter-btn:hover, .filter-chip:hover { border-color: rgba(200,121,26,0.4); color: var(--gold-300); }
.status-filter-btn.active, .filter-chip.active {
  background: var(--gold-shimmer);
  border-color: transparent;
  color: var(--obs-900);
  box-shadow: 0 2px 12px rgba(200,121,26,0.3);
}

/* ═══════════════════════════════════════════════════════════════════
   ORDERS TABLE
   ═══════════════════════════════════════════════════════════════════ */
.orders-table-wrap, .table-wrap {
  background: var(--glass-light);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  overflow-x: auto;   /* wide tables scroll instead of clipping the last column */
  overflow-y: hidden;
  box-shadow: var(--shadow-card);
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
}

.orders-table th {
  background: rgba(200,121,26,0.08);
  color: var(--obs-300);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(200,121,26,0.12);
  white-space: nowrap;
}

.orders-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(200,121,26,0.06);
  vertical-align: middle;
  font-size: 13px;
  color: var(--text);
  transition: background var(--t-fast) ease;
}

.orders-table tr:last-child td { border-bottom: none; }
.orders-table tbody tr:hover td {
  background: rgba(200,121,26,0.04);
}

/* Order number link */
.order-number-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold-400);
  font-weight: 600;
  text-decoration: none;
}
.order-number-link:hover { color: var(--gold-300); text-decoration: underline; }

/* Customer info */
.customer-name { font-weight: 600; color: var(--gold-200); font-size: 13px; }
.customer-email, .customer-phone { font-size: 11px; color: var(--text-light); margin-top: 2px; }

/* Product pills */
.product-pill {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(200,121,26,0.12);
  border: 1px solid rgba(200,121,26,0.2);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-300);
  margin: 2px 2px 2px 0;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   STATUS BADGES
   ═══════════════════════════════════════════════════════════════════ */
.status-badge, .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-badge::before, .badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-pending, .badge-pending   { background: var(--amber-dim);  color: var(--amber);  border: 1px solid rgba(245,158,11,0.2); }
.status-fulfilled, .badge-fulfilled { background: var(--green-dim);  color: var(--green);  border: 1px solid rgba(34,197,94,0.2); }
.status-cancelled, .badge-cancelled { background: var(--red-dim);    color: var(--red);    border: 1px solid rgba(239,68,68,0.2); }
.status-no-show, .badge-no-show   { background: rgba(107,85,53,0.2); color: var(--obs-300); border: 1px solid rgba(107,85,53,0.3); }
.status-stripe, .badge-stripe     { background: var(--purple-dim);  color: var(--purple); border: 1px solid rgba(168,85,247,0.2); }
.status-zelle                     { background: var(--blue-dim);    color: var(--blue);   border: 1px solid rgba(59,130,246,0.2); }
.status-cash                      { background: var(--green-dim);   color: var(--green);  border: 1px solid rgba(34,197,94,0.2); }

/* ── Action buttons in table ── */
.order-action-btn {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  transition: all var(--t-fast) ease;
  white-space: nowrap;
  font-family: var(--font-body);
}
.order-action-btn:hover { transform: translateY(-1px); }

.btn-fulfill  { background: var(--green-dim);  color: var(--green);  border-color: rgba(34,197,94,0.3);  }
.btn-fulfill:hover  { background: rgba(34,197,94,0.3);  box-shadow: 0 4px 12px rgba(34,197,94,0.2); }
.btn-noshow   { background: var(--amber-dim);  color: var(--amber);  border-color: rgba(245,158,11,0.3); }
.btn-noshow:hover   { background: rgba(245,158,11,0.25); }
.btn-cancel   { background: var(--red-dim);    color: var(--red);    border-color: rgba(239,68,68,0.3);  }
.btn-cancel:hover   { background: rgba(239,68,68,0.25); }
.btn-reset    { background: var(--glass-mid);  color: var(--text-light); border-color: var(--glass-border); }
.btn-edit     { background: var(--glass-mid);  color: var(--gold-300);   border-color: rgba(200,121,26,0.3); }
.btn-edit:hover { background: rgba(200,121,26,0.12); }
.btn-print    { background: var(--glass-mid);  color: var(--gold-300);   border-color: rgba(200,121,26,0.35); }
.btn-print:hover { background: rgba(200,121,26,0.18); box-shadow: 0 4px 12px rgba(200,121,26,0.18); }

/* Payment method select in table */
.payment-select {
  padding: 5px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,121,26,0.2);
  border-radius: var(--r-sm);
  color: var(--gold-200);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  outline: none;
}
.payment-quick-btn {
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(200,121,26,0.25);
  background: rgba(200,121,26,0.08);
  color: var(--gold-300);
  transition: all var(--t-fast) ease;
}
.payment-quick-btn.active, .payment-quick-btn:hover {
  background: rgba(200,121,26,0.2);
  border-color: rgba(200,121,26,0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   ACTIVE ITEM SUMMARY
   ═══════════════════════════════════════════════════════════════════ */
.active-order-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: rgba(200,121,26,0.06);
  border: 1px solid rgba(200,121,26,0.15);
  border-radius: var(--r-lg);
}
.summary-item {
  padding: 5px 12px;
  background: rgba(200,121,26,0.1);
  border: 1px solid rgba(200,121,26,0.2);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-300);
}
.active-order-title { font-family: var(--font-display); font-style: italic; }
.orders-help { font-size: 12px; color: var(--text-light); margin-bottom: 12px; line-height: 1.5; padding: 0 4px; }

/* ═══════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════ */
.modal-overlay, .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8,6,4,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fade-in 0.2s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-card, .modal-content, .order-editor-modal-inner, .email-reminder-modal-inner, .whatsapp-reminder-modal-inner {
  background: var(--obs-700);
  border: 1px solid rgba(200,121,26,0.25);
  border-radius: var(--r-xl);
  padding: 32px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-gold);
  animation: modal-rise 0.35s var(--ease-out-expo) both;
}
@keyframes modal-rise {
  from { opacity: 0; transform: scale(0.96) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.modal-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  font-style: italic;
  background: var(--gold-shimmer);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.modal-close {
  width: 32px; height: 32px;
  background: var(--glass-mid);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--text-light);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast) ease;
}
.modal-close:hover { background: var(--red-dim); color: var(--red); border-color: rgba(239,68,68,0.3); }

/* ═══════════════════════════════════════════════════════════════════
   FORMS (Manual Order, Product, etc.)
   ═══════════════════════════════════════════════════════════════════ */
.manual-order-fields, .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.manual-order-field, .form-field { display: flex; flex-direction: column; gap: 6px; }
.manual-order-field.full, .form-field.full { grid-column: 1 / -1; }

.manual-order-field label, .form-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
}

.manual-order-field input,
.manual-order-field select,
.manual-order-field textarea,
.form-input, input[type="text"], input[type="email"],
input[type="number"], input[type="password"], textarea {
  padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,121,26,0.2);
  border-radius: var(--r-md);
  color: var(--gold-200);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: all var(--t-mid) ease;
  width: 100%;
}
.manual-order-field input:focus,
.manual-order-field select:focus,
.manual-order-field textarea:focus,
.form-input:focus {
  border-color: var(--gold-400);
  background: rgba(200,121,26,0.06);
  box-shadow: 0 0 0 3px rgba(200,121,26,0.1);
}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT CARDS
   ═══════════════════════════════════════════════════════════════════ */
.product-grid-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; }

.product-card-admin {
  background: var(--glass-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 18px;
  transition: all var(--t-mid) var(--ease-out-expo);
  cursor: pointer;
}
.product-card-admin:hover {
  border-color: rgba(200,121,26,0.35);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 20px rgba(200,121,26,0.08);
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNTING / PICKUP TALLY
   ═══════════════════════════════════════════════════════════════════ */
.accounting-card, .tally-card {
  background: var(--glass-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: 24px;
  margin-bottom: 16px;
}

.accounting-section-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  color: var(--gold-300);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(200,121,26,0.15);
}

/* Tally number inputs */
.ptally-wrap { max-width: 100%; }
.ptally-sec {
  background: var(--glass-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: 20px;
  margin-bottom: 14px;
}
.ptally-section, .excel-calc-section {
  background: var(--glass-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: 20px;
  margin-bottom: 14px;
}
.ptally-head, .excel-calc-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ptally-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-light); font-size: 11px; }

.ptally-two, .excel-calc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.var-row, .ptally-variety-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.var-cell, .ptally-variety-cell { text-align: center; }
.var-lbl, .ptally-vcell-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--obs-300);
  margin-bottom: 5px;
}
.var-inp, .ptally-num-input, .ptally-count-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,121,26,0.2);
  border-radius: var(--r-sm);
  padding: 8px 4px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: var(--gold-200);
  font-family: var(--font-mono);
  outline: none;
  transition: all var(--t-fast) ease;
}
.var-inp:focus, .ptally-num-input:focus, .ptally-count-input:focus {
  border-color: var(--gold-400);
  background: rgba(200,121,26,0.06);
  box-shadow: 0 0 0 2px rgba(200,121,26,0.15);
}
.var-total .var-inp {
  background: rgba(200,121,26,0.1);
  border-color: rgba(200,121,26,0.3);
  color: var(--gold-300);
  font-size: 18px;
}

.ptally-price-input, .pt-inp {
  width: 80px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,121,26,0.2);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--gold-200);
  font-family: var(--font-mono);
  outline: none;
}
.ptally-price-input:focus, .pt-inp:focus { border-color: var(--gold-400); }

.ptally-text-input, .pt-txt {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,121,26,0.2);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--gold-200);
  font-family: var(--font-body);
  outline: none;
  width: 130px;
}

.pt-table, .ptally-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pt-table th, .ptally-table th {
  background: rgba(200,121,26,0.06);
  color: var(--obs-300);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(200,121,26,0.1);
}
.pt-table td, .ptally-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(200,121,26,0.06);
  color: var(--text);
  vertical-align: middle;
}
.pt-table tr:last-child td, .ptally-table tr:last-child td { border-bottom: none; }
.pt-table .pt-sub td, .ptally-table .pt-sub td { background: rgba(200,121,26,0.06); font-weight: 700; }
.pt-table .pt-bal td, .ptally-table .pt-bal td { background: rgba(245,158,11,0.08); font-weight: 700; color: var(--amber); }
.pt-num { text-align: right; font-family: var(--font-mono); font-weight: 600; }
.pt-neg { color: var(--red) !important; }

/* Tally result */
.tally-sec, .ptally-tally-section { border-radius: var(--r-xl) !important; }
.tally-ok { background: rgba(34,197,94,0.08) !important; border-color: rgba(34,197,94,0.25) !important; }
.tally-warn { background: rgba(245,158,11,0.08) !important; border-color: rgba(245,158,11,0.25) !important; }
.tally-row, .ptally-tally-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; }
.tally-div, .ptally-tally-divider { border-top: 1px solid rgba(200,121,26,0.15); margin: 10px 0; }
.tally-big, .ptally-tally-big {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  color: var(--green);
  font-style: italic;
}
.tally-big.ptally-neg { color: var(--red); }
.ptally-actions, .ptally-walkup-note { margin-top: 6px; }
.ptally-walkup-note {
  font-size: 11px;
  color: var(--blue);
  background: var(--blue-dim);
  border-radius: var(--r-sm);
  padding: 6px 10px;
}
.ptally-add-btn {
  background: transparent;
  border: 1px dashed rgba(200,121,26,0.3);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  font-size: 11px;
  color: var(--text-light);
  cursor: pointer;
  transition: all var(--t-fast) ease;
}
.ptally-add-btn:hover { border-color: var(--gold-400); color: var(--gold-300); }

/* ═══════════════════════════════════════════════════════════════════
   REFUNDS TAB
   ═══════════════════════════════════════════════════════════════════ */
.refund-card {
  background: var(--glass-light);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  transition: all var(--t-mid) ease;
}
.refund-card:hover { border-color: rgba(200,121,26,0.3); border-left-color: var(--gold-400); }
.refund-card.status-approved { border-left-color: var(--green); }
.refund-card.status-rejected { border-left-color: var(--red); }

.refund-meta { font-size: 11px; color: var(--text-light); margin-top: 4px; line-height: 1.8; }
.refund-reason {
  font-size: 12px;
  font-style: italic;
  color: var(--text-light);
  background: rgba(255,255,255,0.03);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-top: 8px;
  border-left: 2px solid rgba(200,121,26,0.2);
}
.refund-actions { display: flex; flex-direction: column; gap: 8px; min-width: 170px; }
.refund-amount-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,121,26,0.25);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: var(--gold-200);
  font-family: var(--font-mono);
  outline: none;
}
.btn-refund-issue {
  background: rgba(34,197,94,0.15);
  color: var(--green);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: var(--r-sm);
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: all var(--t-fast) ease;
}
.btn-refund-issue:hover { background: rgba(34,197,94,0.25); box-shadow: 0 4px 12px rgba(34,197,94,0.15); }
.btn-refund-reject {
  background: transparent;
  color: var(--red);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--r-sm);
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  transition: all var(--t-fast) ease;
}
.btn-refund-reject:hover { background: var(--red-dim); }
.refund-filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.refund-filter-btn {
  padding: 7px 14px;
  border-radius: var(--r-full);
  border: 1px solid rgba(200,121,26,0.2);
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-light);
  transition: all var(--t-mid) ease;
}
.refund-filter-btn.active { background: var(--gold-shimmer); color: var(--obs-900); border-color: transparent; }
.refund-empty { text-align: center; padding: 48px 20px; color: var(--text-light); font-size: 14px; }
.refund-issued-badge { background: var(--green-dim); color: var(--green); border-radius: var(--r-sm); padding: 8px 14px; font-size: 13px; font-weight: 700; text-align: center; }
.refund-rejected-badge { background: var(--red-dim); color: var(--red); border-radius: var(--r-sm); padding: 8px 14px; font-size: 13px; font-weight: 700; text-align: center; }
.refund-payment-type { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); margin-left: 6px; }
.refund-payment-stripe { background: var(--purple-dim); color: var(--purple); }
.refund-payment-pickup { background: var(--amber-dim); color: var(--amber); }

/* Refund request on order page */
.refund-request-section {
  background: rgba(200,121,26,0.06);
  border: 1px solid rgba(200,121,26,0.2);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-top: 20px;
}
.refund-req-form { display: flex; flex-direction: column; gap: 10px; }
.refund-req-submit {
  background: var(--gold-shimmer);
  color: var(--obs-900);
  border: none;
  border-radius: var(--r-full);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: all var(--t-mid) var(--ease-out-expo);
}
.refund-req-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(200,121,26,0.4); }
.refund-submitted-msg { text-align: center; padding: 16px; color: var(--green); font-weight: 600; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════
   FEEDBACK & SUBSCRIBERS
   ═══════════════════════════════════════════════════════════════════ */
.feedback-card {
  background: var(--glass-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  transition: all var(--t-mid) ease;
}
.feedback-card:hover { border-color: rgba(200,121,26,0.25); }

.feedback-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--obs-500), var(--obs-400));
  border: 1px solid rgba(200,121,26,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold-300);
  flex-shrink: 0;
}

.star-rating { color: var(--gold-400); font-size: 13px; letter-spacing: 1px; }
.feedback-text { font-size: 13px; color: var(--text); line-height: 1.6; margin-top: 4px; }
.feedback-meta { font-size: 11px; color: var(--text-light); margin-top: 6px; }

/* Subscriber table */
.subscriber-table-wrap { background: var(--glass-light); border: 1px solid var(--glass-border); border-radius: var(--r-xl); overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT FORM
   ═══════════════════════════════════════════════════════════════════ */
.product-form-card, #productFormCard {
  background: var(--glass-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: 24px;
  margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════ */
.admin-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--obs-600);
  border: 1px solid rgba(200,121,26,0.4);
  border-radius: var(--r-full);
  padding: 13px 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-200);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(200,121,26,0.15);
  z-index: 9999;
  transform: translateY(80px);
  opacity: 0;
  transition: all 0.4s var(--ease-out-expo);
  max-width: 340px;
}
.admin-toast.show { transform: translateY(0); opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNTING VIEWS
   ═══════════════════════════════════════════════════════════════════ */
.accounting-view-switcher { display: flex; gap: 8px; margin-bottom: 16px; }
.accounting-view-btn {
  padding: 8px 18px;
  border-radius: var(--r-full);
  border: 1px solid rgba(200,121,26,0.2);
  background: transparent;
  color: var(--text-light);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-mid) ease;
}
.accounting-view-btn.active { background: var(--gold-shimmer); color: var(--obs-900); border-color: transparent; }

.accounting-batch-list { display: flex; flex-direction: column; gap: 10px; }
.batch-item {
  background: var(--glass-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all var(--t-mid) ease;
}
.batch-item:hover { border-color: rgba(200,121,26,0.3); transform: translateX(4px); }

.excel-calc-total-row td { background: rgba(200,121,26,0.08); font-weight: 700; }
.excel-calc-tally-row td { background: rgba(34,197,94,0.08); font-weight: 800; font-size: 14px; color: var(--green); }
.excel-calc-tally-warn td { background: rgba(245,158,11,0.08); color: var(--amber); }
.walkup-tally-row td { background: var(--blue-dim); color: var(--blue); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   CHECKBOX — SELECT ALL
   ═══════════════════════════════════════════════════════════════════ */
input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--gold-500);
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════
   ORDER EDITOR (Manual)
   ═══════════════════════════════════════════════════════════════════ */
#orderEditorModal, #emailReminderModal, #whatsappReminderModal, #refundOrderModal, #shipTrackingModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8,6,4,0.85);
  backdrop-filter: blur(8px);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* Modals are hidden by ID, not by the .order-editor-modal class. Any new
   modal MUST be added to both rules below or it renders inline, always
   visible, on every admin tab. */
#orderEditorModal.open, #emailReminderModal.open, #whatsappReminderModal.open, #refundOrderModal.open, #shipTrackingModal.open { display: flex; }

.order-editor-card {
  width: min(960px, calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--obs-700);
  border: 1px solid rgba(200,121,26,0.25);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-gold);
  padding: 24px;
}
.reminder-editor-card {
  width: min(1040px, calc(100vw - 40px));
}
.order-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.order-editor-head h3 { margin: 0 0 4px; }
.order-editor-head p { margin: 0; }
.order-editor-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(200,121,26,0.28);
  border-radius: 50%;
  background: rgba(200,121,26,0.12);
  color: var(--gold-200);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: all var(--t-fast) ease;
}
.order-editor-close:hover {
  background: rgba(200,121,26,0.22);
  border-color: rgba(200,121,26,0.5);
  color: var(--gold-300);
}
.reminder-form {
  display: grid;
  gap: 12px;
}
.reminder-recipient-list {
  max-height: 190px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  padding: 2px 6px 2px 2px;
}
.reminder-recipient {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(200,121,26,0.16);
  border-radius: var(--r-md);
}
.reminder-recipient strong,
.reminder-recipient span,
.reminder-recipient em {
  display: block;
  overflow-wrap: anywhere;
}
.reminder-recipient span,
.reminder-recipient em {
  color: var(--text-light);
  font-size: 12px;
}
.reminder-field {
  display: grid;
  gap: 6px;
}
#emailReminderBody,
#whatsappReminderBody {
  min-height: 300px;
  line-height: 1.55;
  resize: vertical;
}
.reminder-help {
  margin: 0;
  line-height: 1.45;
}
.order-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.order-editor-modal-inner, .email-reminder-modal-inner, .whatsapp-reminder-modal-inner {
  background: var(--obs-700);
  border: 1px solid rgba(200,121,26,0.25);
  border-radius: var(--r-xl);
  padding: 32px;
  width: 100%;
  max-width: 600px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-gold);
}

/* ═══════════════════════════════════════════════════════════════════
   CUSTOMER ACCOUNTS
   ═══════════════════════════════════════════════════════════════════ */
.customer-card {
  background: var(--glass-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 10px;
  transition: all var(--t-mid) ease;
}
.customer-card:hover { border-color: rgba(200,121,26,0.3); transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════════
   MISCELLANEOUS UTILITIES
   ═══════════════════════════════════════════════════════════════════ */
.text-gold { color: var(--gold-300); }
.text-light { color: var(--text-light); }
.text-green { color: var(--green); }
.text-red   { color: var(--red); }
.text-amber { color: var(--amber); }

.font-display { font-family: var(--font-display); font-style: italic; }
.font-mono    { font-family: var(--font-mono); }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,121,26,0.2), transparent);
  margin: 16px 0;
}

/* Batch status badge */
.batch-status-open   { color: var(--green); font-weight: 700; }
.batch-status-closed { color: var(--text-light); }

/* Close button generic */
.close-btn {
  padding: 8px 16px;
  background: var(--glass-mid);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--t-fast) ease;
}
.close-btn:hover { border-color: var(--red); color: var(--red); }

/* Save btn */
.save-btn {
  padding: 10px 24px;
  background: var(--gold-shimmer);
  border: none;
  border-radius: var(--r-full);
  color: var(--obs-900);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-mid) var(--ease-out-expo);
}
.save-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(200,121,26,0.4); }

/* Order editor item rows */
.order-editor-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(200,121,26,0.08);
}
.order-editor-item-row:last-child { border-bottom: none; }

/* Warning / info boxes */
.info-box {
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--blue);
  line-height: 1.5;
  margin-bottom: 14px;
}
.warn-box {
  background: var(--amber-dim);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--amber);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .admin-layout { grid-template-columns: 200px minmax(0,1fr); }
  .admin-stats-rail { display: none; }
}
@media (max-width: 768px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: relative; top: 0; }
  .ptally-two, .ptally-variety-row { grid-template-columns: repeat(4,1fr); }
  .var-row { grid-template-columns: repeat(4,1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   MAGNETIC HOVER EFFECT (JS-assisted)
   ═══════════════════════════════════════════════════════════════════ */
.magnetic { transition: transform 0.3s var(--ease-out-expo); }

/* ═══════════════════════════════════════════════════════════════════
   LIQUID GOLD SHIMMER ANIMATION
   ═══════════════════════════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.shimmer-text {
  background: linear-gradient(90deg, var(--gold-300) 0%, var(--gold-100) 40%, var(--gold-400) 60%, var(--gold-300) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   PARTICLE CANVAS (injected by JS)
   ═══════════════════════════════════════════════════════════════════ */
#particle-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}


/* ════════════════════════════════════════════════════════
   UI FIXES v2 — readability + compact layout
   ════════════════════════════════════════════════════════ */

/* FIX 1 + 3: Products — compact card grid instead of long scroll */
#productFormCard .manual-order-fields,
#addProductForm { max-width: 100%; }

.product-grid-admin {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}
.product-card-admin {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(200,121,26,0.2) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}
.product-card-admin:hover {
  border-color: rgba(200,121,26,0.5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
}
.product-card-admin h3, .product-card-admin .pc-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #F5C97A !important;
  margin-bottom: 4px !important;
  font-style: normal !important;
}
.product-card-admin p, .product-card-admin .pc-desc,
.product-card-admin span, .product-card-admin small {
  font-size: 11px !important;
  color: #9A8060 !important;
  line-height: 1.5 !important;
}

/* FIX 2: Orders table — fix unreadable text colors */
.orders-table td { color: #E8D5B0 !important; }
.orders-table .customer-name { color: #F5C97A !important; font-weight: 600 !important; }
.orders-table .customer-email,
.orders-table .customer-phone { color: #9A8060 !important; font-size: 11px !important; }
.orders-table td a, .orders-table .order-number-link { color: #E8A83C !important; }
/* Product qty text */
.orders-table td:nth-child(4) { color: #E8A83C !important; font-weight: 500 !important; }
/* Total column */
.orders-table td:nth-child(5) { color: #F5C97A !important; font-weight: 700 !important; }
/* Location */
.orders-table td:nth-child(6) { color: #C8A870 !important; }
/* Payment */
.orders-table td:nth-child(7) { color: #9A8060 !important; }
/* Make sure all text in table rows is visible */
.orders-table tbody tr td * { color: inherit !important; }
.orders-table tbody tr td { color: #D4B896 !important; }

/* FIX 3: Pickup Tally — compact two-column sections */
#tab-pickup-tally .ptally-sec,
#tab-pickup-tally .ptally-section,
#tab-pickup-tally section.ptally-sec {
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
}
#tab-pickup-tally .ptally-two {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
/* Tighter variety row */
#tab-pickup-tally .var-row,
#tab-pickup-tally .ptally-variety-row {
  gap: 6px !important;
}
#tab-pickup-tally .var-inp,
#tab-pickup-tally .ptally-num-input {
  padding: 5px 2px !important;
  font-size: 13px !important;
}

/* FIX 4: Accounting — compact, dropdown-style batch rows */
#tab-accounting .accounting-batch-list,
#accountingBatchListBody {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
/* Batch rows compact */
.batch-item,
#accountingBatchListBody tr,
#accountingBatchListBody .batch-row {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}
/* Accounting section titles smaller */
#tab-accounting h2 {
  font-size: 20px !important;
  margin-bottom: 12px !important;
}
/* Accounting view switcher compact */
#accountingViewSwitcher {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

/* FIX 5: Refunds — show placeholder when empty, force column visibility */
#tab-refunds h2 { font-size: 20px !important; color: #F5C97A !important; margin-bottom: 8px !important; }
#tab-refunds p { color: #9A8060 !important; font-size: 12px !important; margin-bottom: 12px !important; }
.refund-filter-bar { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-bottom: 14px !important; }
.refund-filter-btn {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(200,121,26,0.3) !important;
  background: transparent !important;
  color: #9A8060 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.refund-filter-btn.active {
  background: linear-gradient(135deg, #F5C97A, #C8791A) !important;
  color: #080604 !important;
  border-color: transparent !important;
}
/* Empty state — visible placeholder */
.refund-empty {
  text-align: center !important;
  padding: 40px 20px !important;
  color: #6B5535 !important;
  font-size: 14px !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px dashed rgba(200,121,26,0.15) !important;
  border-radius: 14px !important;
}
/* Force refund column structure visible */
#refundsContainer { display: block !important; min-height: 80px !important; }

/* FIX 6: Subscribers, Feedback, Customer Accounts — fix font readability */
/* Subscribers table text */
#tab-subscribers table td,
#tab-subscribers table th { color: #E8D5B0 !important; font-size: 12px !important; }
#tab-subscribers table th {
  color: #9A8060 !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: rgba(200,121,26,0.06) !important;
}
#tab-subscribers table td a,
#tab-subscribers table td:first-child { color: #E8A83C !important; }
.subscriber-table-wrap table tbody tr:hover td { background: rgba(200,121,26,0.04) !important; }

/* Feedback text */
#tab-feedback .feedback-text { color: #D4B896 !important; }
#tab-feedback .feedback-meta { color: #9A8060 !important; }
#tab-feedback .feedback-card h4,
#tab-feedback .feedback-card strong { color: #F5C97A !important; }

/* Customer Accounts text */
#tab-customers table td,
#tab-customers table th { color: #E8D5B0 !important; }
#tab-customers table th {
  color: #9A8060 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  background: rgba(200,121,26,0.06) !important;
}
#tab-customers table td:first-child,
#tab-customers .customer-name { color: #F5C97A !important; font-weight: 600 !important; }
#tab-customers table a { color: #E8A83C !important; }

/* ALL tables globally — ensure readable text */
table td, table th { color: #D4B896 !important; }
table th {
  color: #9A8060 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
/* Subscribed badge */
.badge.subscribed, [class*="subscribed"] { color: #22C55E !important; }

/* ── GLOBAL text readability pass ── */
p, span, div, label, li { color: inherit; }
/* Ensure light text on dark bg throughout */
#dashboard * { -webkit-font-smoothing: antialiased; }

/* Stat card text fix */
.stat-card .stat-label { color: #6B5535 !important; }
.stat-card .stat-value { color: #F5C97A !important; }
.stat-card .stat-sub   { color: #9A8060 !important; }

/* v=1779848324 */

/* ═══════════════════════════════════════════════════════
   CRITICAL FIXES — Applied after base styles
   ═══════════════════════════════════════════════════════ */

/* FIX 1: Order table — dark background, readable text */
.orders-table-wrap,
#ordersBody,
#ordersBody table,
.orders-table-wrap table {
  background: transparent !important;
  color: var(--text) !important;
}
.orders-table-wrap {
  background: var(--glass-light) !important;
  backdrop-filter: blur(12px) !important;
}
.orders-table td { color: var(--text) !important; }
.orders-table td .customer-name,
.orders-table td:nth-child(3) { color: var(--gold-200) !important; }
.orders-table td small,
.orders-table td .customer-email,
.orders-table td .customer-phone { color: var(--text-light) !important; }
/* Order number */
.orders-table td:nth-child(2) a,
.orders-table td:nth-child(2) { color: var(--gold-400) !important; font-family: var(--font-mono) !important; font-size: 12px !important; }
/* Products column */
.orders-table td .product-pill { color: var(--gold-300) !important; background: rgba(200,121,26,0.12) !important; }
/* Total */
.orders-table td:nth-child(6) { color: var(--gold-200) !important; font-weight: 600 !important; }
/* Location */
.orders-table td:nth-child(7) { color: var(--text-light) !important; font-size: 12px !important; }

/* FIX 2: Subscribers / Feedback / Customer tables — dark bg, visible text */
#tab-subscribers table,
#tab-feedback table,
#tab-customers table,
.subscribers-table,
.feedback-table,
.customers-table {
  background: transparent !important;
}
#tab-subscribers table td,
#tab-feedback table td,
#tab-customers table td {
  color: var(--text) !important;
  border-bottom-color: rgba(200,121,26,0.06) !important;
}
#tab-subscribers table td:first-child,
#tab-feedback table td:first-child,
#tab-customers table td:first-child {
  color: var(--gold-300) !important;
}
#tab-subscribers table tr:hover td,
#tab-feedback table tr:hover td,
#tab-customers table tr:hover td {
  background: rgba(200,121,26,0.04) !important;
}
/* All table wrappers */
#tab-subscribers .table-wrap,
#tab-feedback .table-wrap,
#tab-customers .table-wrap,
#tab-subscribers > div,
[class*="subscriber-table"],
[class*="feedback-table"],
[class*="customer-table"] {
  background: var(--glass-light) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r-xl) !important;
  backdrop-filter: blur(12px) !important;
}

/* FIX 3: Products — compact card grid, not long scroll */
#productFormCard,
#addProductForm,
.product-form-card {
  background: var(--glass-light) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r-xl) !important;
  padding: 20px !important;
  margin-bottom: 12px !important;
}
/* Make product form a compact two-column grid */
#addProductForm .manual-order-fields,
#addProductForm .form-grid,
.product-form-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
/* Existing product cards — compact grid */
.product-list-grid,
#productListContainer,
.admin-product-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}
.product-card-admin {
  padding: 14px !important;
}

/* FIX 4: Pickup Tally — compact, not huge inputs */
.ptally-sec, .ptally-section, .excel-calc-section {
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
}
.var-inp, .ptally-num-input, .ptally-count-input {
  font-size: 13px !important;
  padding: 5px 3px !important;
}
.pt-table td, .ptally-table td { padding: 5px 8px !important; }
.pt-table th, .ptally-table th { padding: 5px 8px !important; }
.ptally-price-input, .pt-inp { width: 65px !important; font-size: 12px !important; padding: 4px 6px !important; }
.ptally-two, .excel-calc-two-col { gap: 12px !important; }

/* FIX 5: Accounting — collapsible batches, compact */
.accounting-batch-list .batch-item {
  padding: 10px 14px !important;
  font-size: 12px !important;
}
#accountingBatchListBody table td {
  padding: 6px 10px !important;
  font-size: 12px !important;
  color: var(--text) !important;
}
#accountingBatchListBody table th {
  font-size: 10px !important;
  padding: 6px 10px !important;
}
#accountingStats { color: var(--text) !important; font-size: 13px !important; }
.accounting-view-btn { font-size: 11px !important; padding: 6px 14px !important; }

/* FIX 6: Refunds — show empty state properly */
.refund-empty {
  background: var(--glass-light) !important;
  border: 1px dashed rgba(200,121,26,0.2) !important;
  border-radius: var(--r-xl) !important;
  padding: 48px 20px !important;
  color: var(--text-light) !important;
  text-align: center !important;
  font-size: 14px !important;
}
/* Show column headers even when empty */
#tab-refunds .refund-table-header {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr 2fr !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  background: rgba(200,121,26,0.06) !important;
  border-radius: var(--r-md) !important;
  margin-bottom: 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--obs-300) !important;
}

/* FIX 7: ALL table th backgrounds */
th, .orders-table th {
  background: rgba(200,121,26,0.08) !important;
  color: var(--obs-300) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(200,121,26,0.12) !important;
}

/* FIX 8: Any remaining white/cream backgrounds */
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#FFF"],
[style*="background-color: white"],
[style*="background-color: #fff"] {
  background: var(--glass-light) !important;
  color: var(--text) !important;
}

/* FIX 9: Section titles visible */
h2, h3, .section-header h2 {
  color: var(--gold-300) !important;
}
h3, .subsection-title { color: var(--text) !important; font-size: 15px !important; }
p { color: var(--text-light) !important; }
label { color: var(--text-light) !important; }

/* FIX 10: Form inputs contrast */
input, select, textarea {
  color: var(--gold-200) !important;
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(200,121,26,0.2) !important;
}
input::placeholder, textarea::placeholder { color: rgba(154,128,96,0.5) !important; }

/* FIX 11: Stat cards on left when rail hidden */
#adminStats .stat-card {
  background: var(--glass-light) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text) !important;
}
.stat-card .stat-label { color: var(--obs-300) !important; }
.stat-card .stat-value { color: var(--gold-300) !important; }

/* FIX 12: Tally big number */
.excel-calc-tally-amount,
[class*="tally-big"],
[class*="tally-amount"] {
  font-family: var(--font-display) !important;
  font-size: 36px !important;
  font-style: italic !important;
  color: var(--green) !important;
}

/* ══════════════════════════════════════════
   TARGETED FIXES v3 — 2026-05-27
   ══════════════════════════════════════════ */

/* PRODUCT FORM — 2-col compact grid */
.product-form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 16px !important;
}
.product-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.product-field label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-light) !important;
}
.product-field input,
.product-field select,
.product-field textarea {
  padding: 9px 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(200,121,26,0.2) !important;
  border-radius: 10px !important;
  color: var(--gold-200) !important;
  font-size: 13px !important;
  font-family: var(--font-body) !important;
  outline: none !important;
}
.product-field input:focus,
.product-field select:focus {
  border-color: var(--gold-400) !important;
  background: rgba(200,121,26,0.06) !important;
  box-shadow: 0 0 0 3px rgba(200,121,26,0.1) !important;
}
.product-field small {
  font-size: 10px !important;
  color: var(--text-light) !important;
}
.product-field.full-width { grid-column: 1 / -1 !important; }
.product-form-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(200,121,26,0.15) !important;
}
.product-form-head h3 {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-style: italic !important;
  color: var(--gold-300) !important;
  margin-bottom: 4px !important;
}
.product-form-head p {
  font-size: 12px !important;
  color: var(--text-light) !important;
  margin: 0 !important;
}
.product-form-close {
  padding: 7px 16px !important;
  background: transparent !important;
  border: 1px solid rgba(200,121,26,0.25) !important;
  border-radius: 99px !important;
  color: var(--text-light) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}
.product-form-close:hover {
  border-color: var(--red) !important;
  color: var(--red) !important;
}
.product-form-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(200,121,26,0.1) !important;
}

/* EXISTING PRODUCTS LIST — compact grid cards */
.product-admin-item, .product-list-item {
  background: var(--glass-light) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  transition: all 0.2s ease !important;
}
.product-admin-item:hover, .product-list-item:hover {
  border-color: rgba(200,121,26,0.3) !important;
  transform: translateY(-2px) !important;
}

/* ORDERS TABLE — readable text, dark bg */
.orders-table-wrap, .orders-table-wrap * {
  background: transparent !important;
}
.orders-table-wrap {
  background: rgba(255,248,237,0.04) !important;
  border: 1px solid rgba(200,121,26,0.15) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(12px) !important;
}
.orders-table td {
  color: #D4B896 !important;
  border-bottom: 1px solid rgba(200,121,26,0.06) !important;
}
.orders-table tr:hover td { background: rgba(200,121,26,0.04) !important; }
.orders-table th {
  background: rgba(200,121,26,0.08) !important;
  color: rgba(154,128,96,0.8) !important;
  border-bottom: 1px solid rgba(200,121,26,0.12) !important;
}

/* ALL TABLE TEXT READABLE */
table td { color: #D4B896 !important; }
table th { color: rgba(154,128,96,0.8) !important; background: rgba(200,121,26,0.06) !important; }
table tr:hover td { background: rgba(200,121,26,0.04) !important; }
table { background: transparent !important; }

/* WRAP ALL TABLES IN DARK GLASS */
.table-wrap, [class*="table-wrap"] {
  background: rgba(255,248,237,0.04) !important;
  border: 1px solid rgba(200,121,26,0.15) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  backdrop-filter: blur(12px) !important;
}

/* HEADINGS VISIBLE */
h2, h3 { color: var(--gold-300) !important; }
p, li, small { color: #9A8060 !important; }
label { color: #9A8060 !important; }
strong { color: #D4B896 !important; }
span { color: inherit; }

/* ACCOUNTING COMPACT */
#tab-accounting table td,
#tab-pickup-tally table td {
  padding: 6px 10px !important;
  font-size: 12px !important;
  color: #D4B896 !important;
}
.batch-item { padding: 9px 12px !important; }
.batch-item:hover { transform: translateX(3px) !important; }

/* Admin polish: compact summaries, products, and active counts */
.customers-summary,
#feedbackSummary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 10px !important;
  margin: 12px 0 16px !important;
}

.customers-summary-card {
  min-width: 0 !important;
  padding: 12px 14px !important;
  background: rgba(255,248,237,0.045) !important;
  border: 1px solid rgba(200,121,26,0.16) !important;
  border-radius: 12px !important;
}

.customers-summary-card span {
  display: block !important;
  margin-bottom: 5px !important;
  color: var(--text-light) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.customers-summary-card strong {
  display: block !important;
  overflow: hidden !important;
  color: var(--gold-200) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.active-order-summary {
  display: none !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 12px 0 14px !important;
  padding: 10px 12px !important;
  background: rgba(255,248,237,0.035) !important;
  border: 1px solid rgba(200,121,26,0.14) !important;
  border-radius: 12px !important;
}

.active-order-summary.show { display: flex !important; }
.active-order-summary .summary-label {
  color: var(--gold-300) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.summary-totals,
.summary-items {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
}

.summary-totals span,
.summary-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 260px !important;
  padding: 5px 9px !important;
  background: rgba(200,121,26,0.08) !important;
  border: 1px solid rgba(200,121,26,0.16) !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.summary-chip span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.summary-chip b {
  color: var(--gold-300) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

#tab-products .products-toolbar {
  align-items: center !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding: 18px 20px !important;
  margin-bottom: 12px !important;
}

#tab-products .products-toolbar-copy p {
  max-width: 760px !important;
  margin: 4px 0 0 !important;
}

.add-product-btn,
.product-primary-btn,
.product-secondary-btn {
  appearance: none !important;
  border: 1px solid rgba(200,121,26,0.28) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  min-height: 34px !important;
  padding: 9px 14px !important;
  transition: transform var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease !important;
  white-space: nowrap !important;
}

.products-toolbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.product-add-btn {
  background: var(--gold-shimmer) !important;
  color: var(--obs-900) !important;
  box-shadow: 0 8px 22px rgba(200,121,26,0.18) !important;
}

.product-sync-btn {
  background: rgba(34,197,94,0.12) !important;
  border-color: rgba(34,197,94,0.35) !important;
  color: var(--green) !important;
}

.add-product-btn:hover,
.product-primary-btn:hover,
.product-secondary-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(245,201,122,0.45) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.22) !important;
}

#productFormCard.product-form-card {
  display: none !important;
  margin-bottom: 14px !important;
}

#productFormCard.product-form-card.open {
  display: block !important;
}

#productFormCard .product-field.full {
  grid-column: 1 / -1 !important;
}

#productFormCard textarea {
  min-height: 72px !important;
  resize: vertical !important;
}

#tab-products .products-filter-bar {
  position: sticky !important;
  top: 54px !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
  background: rgba(16,11,7,0.92) !important;
  border: 1px solid rgba(200,121,26,0.14) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px) !important;
}

.products-filter-primary,
.products-filter-secondary {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.products-filter-secondary {
  padding-top: 8px !important;
  border-top: 1px solid rgba(200,121,26,0.14) !important;
}

.products-filter-secondary .products-filter-label {
  color: var(--gold) !important;
}

.products-filter-label {
  color: var(--text-light) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.product-filter-pill {
  padding: 6px 11px !important;
  background: rgba(255,248,237,0.04) !important;
  border: 1px solid rgba(200,121,26,0.18) !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.product-filter-pill.active {
  background: var(--gold-shimmer) !important;
  border-color: transparent !important;
  color: var(--obs-900) !important;
}

#productsGrid.products-manage-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 10px !important;
  max-height: min(680px, 62vh) !important;
  overflow: auto !important;
  padding: 2px 6px 8px 0 !important;
  scrollbar-color: rgba(200,121,26,0.45) rgba(255,248,237,0.04) !important;
}

.pm-card {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 12px !important;
  background: rgba(255,248,237,0.04) !important;
  border: 1px solid rgba(200,121,26,0.15) !important;
  border-radius: 12px !important;
}

.pm-card.is-hidden {
  opacity: 0.72 !important;
}

.pm-emoji { display: none !important; }
.pm-info { min-width: 0 !important; }
.pm-meta {
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}

.pm-chip {
  max-width: 100% !important;
  padding: 3px 7px !important;
  background: rgba(200,121,26,0.08) !important;
  border: 1px solid rgba(200,121,26,0.14) !important;
  border-radius: 999px !important;
  color: var(--text-light) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.pm-status {
  color: var(--gold-300) !important;
}

.pm-status-live {
  background: rgba(34,197,94,0.12) !important;
  border-color: rgba(34,197,94,0.28) !important;
  color: var(--green) !important;
}

.pm-status-off {
  background: rgba(148,163,184,0.12) !important;
  border-color: rgba(148,163,184,0.22) !important;
  color: #cbd5e1 !important;
}

.pm-status-soon {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.28) !important;
  color: var(--amber) !important;
}

.pm-status-hidden {
  background: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.28) !important;
  color: var(--red) !important;
}

.pm-card h4 {
  overflow: hidden !important;
  margin: 0 0 6px !important;
  color: var(--gold-200) !important;
  font-size: 14px !important;
  font-style: normal !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.pm-sub,
.pm-price {
  overflow: hidden !important;
  color: var(--text-light) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.pm-desc {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.pm-price {
  margin-top: 7px !important;
  color: var(--gold-300) !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.pm-sort-wrap {
  display: grid !important;
  grid-template-columns: auto 56px auto !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

.pm-sort-label {
  color: var(--text-light) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.pm-sort-input {
  width: 56px !important;
  padding: 5px 6px !important;
  font-size: 11px !important;
}

.pm-save-btn,
.pm-edit-btn {
  padding: 5px 9px !important;
  background: transparent !important;
  border: 1px solid rgba(200,121,26,0.2) !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.pm-controls {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 7px !important;
}

@media (max-width: 900px) {
  #productsGrid.products-manage-grid {
    max-height: none !important;
    overflow: visible !important;
  }
  .pm-card {
    grid-template-columns: 1fr !important;
  }
  .pm-controls {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
}

/* Accounting batch picker: replace long batch list with one dropdown */
#tab-accounting .batch-list-card {
  max-width: 980px !important;
  margin-bottom: 16px !important;
  padding: 14px 16px !important;
  background: rgba(255,248,237,0.04) !important;
  border: 1px solid rgba(200,121,26,0.16) !important;
  border-radius: 14px !important;
}

#tab-accounting .batch-list-help {
  margin: 4px 0 12px !important;
  color: var(--text-light) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.accounting-batch-picker {
  display: grid !important;
  grid-template-columns: minmax(160px, 1fr) minmax(320px, 3fr) !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.accounting-batch-picker label {
  color: var(--text-light) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#accountingBatchSelect {
  width: 100% !important;
  min-height: 42px !important;
  color: var(--gold-200) !important;
  font-size: 13px !important;
}

.accounting-batch-summary {
  display: block !important;
}

.accounting-batch-summary-card {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(115px, 1fr)) !important;
  gap: 8px !important;
}

.accounting-batch-summary-card > div {
  min-width: 0 !important;
  padding: 10px 11px !important;
  background: rgba(8,6,4,0.32) !important;
  border: 1px solid rgba(200,121,26,0.12) !important;
  border-radius: 10px !important;
}

.accounting-batch-summary-card span {
  display: block !important;
  margin-bottom: 4px !important;
  color: var(--text-light) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.accounting-batch-summary-card strong {
  display: block !important;
  overflow: hidden !important;
  color: var(--gold-200) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.accounting-batch-summary-card strong.good {
  color: var(--green) !important;
}

.accounting-batch-summary-card strong.warn {
  color: var(--amber) !important;
}

@media (max-width: 1100px) {
  .accounting-batch-summary-card {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .accounting-batch-picker {
    grid-template-columns: 1fr !important;
  }
  .accounting-batch-summary-card {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Pickup Tally: smaller bounded panels instead of oversized full-width blocks */
#tab-pickup-tally {
  max-width: 1180px !important;
}

#excelCalcSheet {
  max-width: 1120px !important;
}

#tab-pickup-tally .ptally-wrap {
  display: grid !important;
  gap: 12px !important;
  max-width: 1120px !important;
}

#tab-pickup-tally .ptally-section {
  max-width: 1120px !important;
  padding: 12px 14px !important;
  margin-bottom: 0 !important;
  border-radius: 12px !important;
}

#tab-pickup-tally .ptally-two-col {
  display: grid !important;
  grid-template-columns: minmax(320px, 470px) minmax(360px, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

#tab-pickup-tally .ptally-two-col > div {
  min-width: 0 !important;
  padding: 10px !important;
  background: rgba(8,6,4,0.22) !important;
  border: 1px solid rgba(200,121,26,0.1) !important;
  border-radius: 10px !important;
}

#tab-pickup-tally .ptally-section-head {
  margin-bottom: 8px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

#tab-pickup-tally .ptally-hint {
  font-size: 10px !important;
}

#tab-pickup-tally .ptally-variety-row {
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)) !important;
  gap: 7px !important;
}

#tab-pickup-tally .ptally-variety-cell {
  min-width: 0 !important;
}

#tab-pickup-tally .ptally-vcell-label {
  overflow: hidden !important;
  margin-bottom: 4px !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#tab-pickup-tally .ptally-num-input,
#tab-pickup-tally .ptally-count-input {
  width: 74px !important;
  max-width: 100% !important;
  padding: 5px 6px !important;
  font-size: 12px !important;
}

#tab-pickup-tally .ptally-variety-row .ptally-num-input {
  width: 100% !important;
}

#tab-pickup-tally .ptally-price-input {
  width: 72px !important;
  padding: 5px 7px !important;
  font-size: 12px !important;
}

#tab-pickup-tally .ptally-text-input {
  width: min(100%, 260px) !important;
  padding: 7px 10px !important;
}

#tab-pickup-tally .ptally-table {
  font-size: 12px !important;
}

#tab-pickup-tally .ptally-table th,
#tab-pickup-tally .ptally-table td {
  padding: 6px 9px !important;
}

#tab-pickup-tally .ptally-table td:nth-child(2) {
  width: 92px !important;
}

#tab-pickup-tally #zelleTable td:first-child {
  width: auto !important;
}

#tab-pickup-tally #zelleTable td:nth-child(2) {
  width: 92px !important;
}

#tab-pickup-tally .ptally-tally-section {
  max-width: 680px !important;
}

#tab-pickup-tally .ptally-tally-row {
  padding: 5px 0 !important;
  font-size: 13px !important;
}

#tab-pickup-tally .ptally-tally-big {
  font-size: 30px !important;
}

@media (max-width: 980px) {
  #tab-pickup-tally .ptally-two-col {
    grid-template-columns: 1fr !important;
  }
}

/* Owner growth dashboard */
#tab-growth {
  max-width: 1180px !important;
}

.growth-toolbar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}

.growth-toolbar h2,
.growth-card h3 {
  color: var(--gold-200) !important;
}

.growth-link {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.growth-status {
  margin-bottom: 14px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(200,121,26,0.18) !important;
  border-radius: 10px !important;
  background: rgba(255,248,237,0.05) !important;
  color: var(--text-light) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.growth-status.good {
  border-color: rgba(34,197,94,0.28) !important;
  color: var(--green) !important;
}

.growth-status.warn {
  border-color: rgba(245,158,11,0.3) !important;
  color: var(--amber) !important;
}

.growth-kpis {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(120px, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.growth-kpi,
.growth-card {
  border: 1px solid rgba(200,121,26,0.16) !important;
  border-radius: 12px !important;
  background: rgba(255,248,237,0.045) !important;
  box-shadow: var(--shadow-card) !important;
}

.growth-kpi {
  min-width: 0 !important;
  padding: 12px !important;
}

.growth-kpi span,
.growth-kpi small,
.growth-card-head p,
.growth-funnel-label span,
.growth-funnel-value span {
  color: var(--text-light) !important;
}

.growth-kpi span {
  display: block !important;
  margin-bottom: 5px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.growth-kpi strong {
  display: block !important;
  color: var(--gold-200) !important;
  font-size: 23px !important;
  line-height: 1.15 !important;
}

.growth-kpi small {
  display: block !important;
  margin-top: 6px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.growth-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.growth-card {
  min-width: 0 !important;
  padding: 14px !important;
}

.growth-card-wide {
  grid-column: span 1 !important;
}

.growth-card-head {
  margin-bottom: 12px !important;
}

.growth-card-head h3 {
  margin: 0 0 4px !important;
  font-size: 16px !important;
}

.growth-card-head p {
  margin: 0 !important;
  font-size: 12px !important;
}

.growth-funnel {
  display: grid !important;
  gap: 10px !important;
}

.growth-funnel-row {
  display: grid !important;
  grid-template-columns: minmax(130px, 170px) minmax(160px, 1fr) minmax(82px, auto) !important;
  align-items: center !important;
  gap: 10px !important;
}

.growth-funnel-label strong,
.growth-funnel-label span,
.growth-funnel-value strong,
.growth-funnel-value span {
  display: block !important;
}

.growth-funnel-label strong {
  color: var(--text) !important;
  font-size: 12px !important;
}

.growth-funnel-label span,
.growth-funnel-value span {
  font-size: 10px !important;
}

.growth-funnel-bar {
  height: 12px !important;
  overflow: hidden !important;
  border-radius: 99px !important;
  background: rgba(8,6,4,0.45) !important;
  border: 1px solid rgba(200,121,26,0.12) !important;
}

.growth-funnel-bar div {
  height: 100% !important;
  min-width: 8px !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300)) !important;
}

.growth-funnel-value {
  text-align: right !important;
}

.growth-funnel-value strong {
  color: var(--gold-200) !important;
  font-size: 13px !important;
}

.growth-table {
  overflow-x: auto !important;
}

.growth-table table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.growth-table th,
.growth-table td {
  padding: 9px 8px !important;
  border-bottom: 1px solid rgba(200,121,26,0.1) !important;
  font-size: 12px !important;
  text-align: left !important;
  vertical-align: top !important;
}

.growth-table th {
  color: var(--text-light) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.growth-table td {
  color: var(--text) !important;
}

.growth-empty,
.growth-action-item,
.growth-setup-row {
  padding: 10px 11px !important;
  border-radius: 10px !important;
  background: rgba(8,6,4,0.26) !important;
  color: var(--text) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.growth-actions-list,
.growth-setup,
.growth-chart-list {
  display: grid !important;
  gap: 8px !important;
}

.growth-action-item.critical {
  border: 1px solid rgba(239,68,68,0.24) !important;
  color: #fca5a5 !important;
}

.growth-action-item.warn {
  border: 1px solid rgba(245,158,11,0.24) !important;
  color: var(--amber) !important;
}

.growth-action-item.good {
  border: 1px solid rgba(34,197,94,0.24) !important;
  color: var(--green) !important;
}

.growth-action-item.info {
  border: 1px solid rgba(59,130,246,0.24) !important;
  color: #93c5fd !important;
}

.growth-chart-row {
  display: grid !important;
  grid-template-columns: minmax(120px, 170px) minmax(150px, 1fr) minmax(80px, auto) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  border-radius: 10px !important;
  background: rgba(8,6,4,0.26) !important;
}

.growth-chart-label strong,
.growth-chart-label span {
  display: block !important;
}

.growth-chart-label strong {
  color: var(--text) !important;
  font-size: 12px !important;
}

.growth-chart-label span {
  color: var(--text-light) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.growth-chart-track {
  height: 12px !important;
  overflow: hidden !important;
  border-radius: 99px !important;
  background: rgba(0,0,0,0.28) !important;
  border: 1px solid rgba(200,121,26,0.12) !important;
}

.growth-chart-track div {
  height: 100% !important;
  min-width: 8px !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300)) !important;
}

.growth-chart-value {
  color: var(--gold-200) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: right !important;
}

.growth-setup-row.warn {
  border: 1px solid rgba(245,158,11,0.24) !important;
  color: var(--amber) !important;
}

@media (max-width: 1160px) {
  .growth-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .growth-toolbar,
  .growth-grid {
    grid-template-columns: 1fr !important;
  }
  .growth-toolbar {
    display: grid !important;
  }
  .growth-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .growth-funnel-row {
    grid-template-columns: 1fr !important;
  }
  .growth-funnel-value {
    text-align: left !important;
  }
  .growth-chart-row {
    grid-template-columns: 1fr !important;
  }
  .growth-chart-value {
    text-align: left !important;
  }
}