.me-10 { margin-right:10px }
.max-w-200 { max-width:200px }
.max-w-300 { max-width:300px }
.max-w-200 { max-width:200px }
.max-w-300 { max-width:300px }

/* Truncate helper */
.truncate{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Small spacing utilities (margins) */
.ms-10 { margin-left:10px }
.ms-8 { margin-left:8px }
.ms-15 { margin-left:15px }
.max-w-150 { max-width:150px }

/* padding helpers */
.p-0 { padding: 0 }
.max-w-100 { max-width:100px }
.max-w-280 { max-width:280px }

:root{
  /* Color palette */
  --bg:#0f172a; /* deep navy background for headers */
  --page-bg:#f6f7fb;
  --surface:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --primary:#0ea5e9;
  --primary-600:#0891b2;
  --success:#10b981;
  --danger:#ef4444;

  /* Type scale */
  --font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --h1:1.6rem; --h2:1.25rem; --base:1rem;

  /* Layout tokens */
  --space-xxs:4px; --space-xs:8px; --space-sm:12px; --space-md:20px; --space-lg:32px;
  --radius:10px;
  --shadow: 0 8px 30px rgba(16,24,40,0.06);
}

/* Global reset and base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font-family);font-size:var(--base);color:var(--text);background:var(--page-bg);-webkit-font-smoothing:antialiased}
a{color:var(--primary)}

/* Cards */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-md);border:1px solid rgba(15,23,42,0.04)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:8px;border:none;cursor:pointer;font-weight:700}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-secondary{background:transparent;color:var(--text);border:1px solid rgba(15,23,42,0.06)}
.btn-danger{background:var(--danger);color:#fff}

/* Forms */
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],select,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);background:linear-gradient(180deg,#ffffff,#fbfdff);}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 4px rgba(14,165,233,0.09);border-color:var(--primary-600)}

/* Compatibility: map common Bootstrap form classes to theme styles so pages don't need markup changes */
.form-control, .form-select, textarea.form-control, input.form-control { display:block; width:100%; padding:10px; border-radius:8px; border:1px solid rgba(15,23,42,0.06); background:linear-gradient(180deg,#ffffff,#fbfdff); }
.form-control:focus, .form-select:focus { outline:none; box-shadow:0 0 0 4px rgba(14,165,233,0.09); border-color:var(--primary-600) }
.form-label { display:block; margin-bottom:6px; font-weight:600 }
.form-text { color:var(--muted); font-size:0.9rem }
.form-check-input { width:1.15em; height:1.15em; margin-top:0.15rem }
.form-check-label { margin-left:8px }


/* Utility layout */
.container{max-width:1200px;margin:0 auto;padding:0 var(--space-md);}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Top-nav compact styling helpers (used progressively) */
.top-nav-wrapper{backdrop-filter:blur(6px);background:linear-gradient(180deg,rgba(255,255,255,0.65),rgba(255,255,255,0.55));padding:8px}

/* Small helpers */
.muted{color:var(--muted)}
.danger{background:var(--danger);color:#fff}

@media (max-width:900px){
  .row{grid-template-columns:1fr}
  .container{padding:0 12px}
}

/* TopNav helpers added during refactor */
.center-muted{ text-align:center; margin-bottom:6px; font-size:0.9rem; color:var(--primary); font-weight:700 }
.top-nav-spacer{ margin:8px 0 }
.nav-dropdown{ position:relative }
.nav-dropdown-menu{ position:absolute; left:0; top:100%; background:var(--surface); border:1px solid rgba(15,23,42,0.04); border-radius:6px; padding:6px; display:none; min-width:160px; box-shadow:0 6px 24px rgba(0,0,0,0.08); z-index:999 }
.nav-dropdown:hover .nav-dropdown-menu{ display:block }
.nav-dropdown-item{ display:block; padding:6px 10px; color:inherit; text-decoration:none }
.dropdown-caret{ margin-left:6px }

/* NavMenu helpers */
.navmenu-container{ max-width:980px; margin:0 auto; padding:0 16px }
.inline-form{ display:inline; margin:0; padding:0 }
.referral-input{ width:180px }
/* Helpers for layout and small gaps */
.max-w-1000 { max-width: 1000px }
.gap-16 { gap: 16px }
.flex-1 { flex: 1 1 0% }
.min-w-320 { min-width: 320px }

/* dropdown/popover used in RewardsLookup */
.dropdown-popover{ position:absolute; z-index:50; background:var(--surface); border:1px solid rgba(15,23,42,0.06); box-shadow:0 2px 8px rgba(0,0,0,0.1); max-width:360px; border-radius:8px }
.chart{ width:100%; height:160px }
.overlay{ z-index:1050 }

/* spacing and text helpers */
.mt-24 { margin-top:24px }
.text-success { color:var(--success) }
.text-danger { color:var(--danger) }

/* Flex helpers */
.d-flex{ display:flex }
.gap-8 { gap:8px }
.flex-wrap { flex-wrap:wrap }
.me-10 { margin-right:10px }

/* width helpers */
.max-w-200 { max-width:200px }
.max-w-300 { max-width:300px }

/* Truncate helper */
.truncate{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.email-referral-row{ display:flex; gap:8px; align-items:center }
.actions button{ margin-right:8px }
.inline{ display:flex; gap:12px; align-items:center }

/* Utilities used by Transactions/Inventory refactor */
.mb-20 { margin-bottom: 20px }
.p-15 { padding: 15px }
.alert-danger { background: #fee2e2; border: 1px solid #fecaca; color: #dc2626; border-radius: 10px }
.table-compact { width: 100%; border-collapse: collapse }
.thead-muted tr { background: #f8f9fa }
.cell-pad { padding: 12px }
.text-right { text-align: right }
.muted-center { text-align: center; color: var(--muted) }

/* Small spacing helpers */
.max-w-520 { max-width: 520px }
.mb-8 { margin-bottom: 8px }
.mb-12 { margin-bottom: 12px }
.mt-8 { margin-top: 8px }

/* Page centering and spacing helpers used by pages */
.mx-auto { margin-left: auto; margin-right: auto }
.mt-40 { margin-top: 40px }
.mt-60 { margin-top: 60px }
.max-w-420 { max-width: 420px }
.max-w-600 { max-width: 600px }

/* Visually hidden helper for honeypot or accessibility-hidden content */
.visually-hidden { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important }

/* Additional utilities added for batch refactor */
.max-w-900 { max-width: 900px }
.gap-12 { gap: 12px }
.d-none { display: none !important }
.page-padding { padding: 24px; font-family: Segoe UI, Roboto, sans-serif }
.center-fit { min-height: 100vh; padding: 32px; background: transparent }

/* Affiliate dashboard styles moved from inline <style> in Dashboard.razor */
.lookup-container{max-width:420px;margin:60px auto;padding:2rem;background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.08);font-family:'Segoe UI',sans-serif;text-align:center}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-bottom:2rem}
.stat-card{background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.stat-label{font-weight:bold;color:#666;font-size:0.9rem}
.stat-value{font-size:1.4rem;margin-top:0.25rem}
.progress-bar{background:#eee;border-radius:8px;overflow:hidden;height:10px;margin-top:0.5rem}
.progress{background:linear-gradient(90deg,#4CAF50,#81C784);height:100%}
.transactions .transaction{border-bottom:1px solid #eee;padding:6px 0}
.muted{color:#666;font-size:0.9rem}

/* Small helpers used by dashboard */
.mono { font-family: monospace; letter-spacing: 1px }
.small { font-size: 0.85rem }
.mt-20 { margin-top: 20px }

/* small button size used in lists */
.btn-sm { padding:6px 10px; font-size:0.9rem; border-radius:8px }