/* ============================================================
   EU SwagHub — PROFESSIONAL THEME OVERRIDE
   ============================================================
   DROP-IN FIX: Load this file AFTER all other CSS files.
   It overrides the glassmorphism/gradient effects with clean,
   professional, Amazon-standard styling.
   
   Design principles:
   • Solid backgrounds (no blur, no transparency)
   • High-contrast text (WCAG AA minimum 4.5:1)
   • Uniform font scale (5 sizes only)
   • Clean borders (no glow, no neon)
   • Amazon brand colors via tokens
   
   Load order in index.html:
   1. theme-tokens.css
   2. swag-shop-glassy.css
   3. hover-effects.css
   4. introduction.css
   5. ➡️ professional-override.css (THIS FILE — LAST)
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   SECTION 1: KILL GLASSMORPHISM GLOBALLY
   Replace all semi-transparent + backdrop-filter with solid
   ────────────────────────────────────────────────────────────── */

/* Nuclear: remove ALL backdrop-filter site-wide */
* {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ──────────────────────────────────────────────────────────────
   INTRODUCTION / LOGIN HERO — CLEAN PROFESSIONAL
   Kills the aurora spin, floating sparks, glossy sweep animation
   ────────────────────────────────────────────────────────────── */

.intro-hero {
  background: var(--card-bg, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
  border-radius: 16px !important;
  animation: none !important;
}

/* Kill rotating aurora and glossy shine */
.intro-hero::before,
.intro-hero::after {
  display: none !important;
}

/* Kill floating spark dots */
.intro-hero-spark {
  display: none !important;
}

/* Hero text — solid dark, no gradient */
.intro-hero h1 {
  color: var(--text-primary, #0f172a) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 2: SOLID BACKGROUNDS
   ────────────────────────────────────────────────────────────── */

/* Page background — clean light gray */
body,
html {
  background: var(--bg-secondary, #f8fafc) !important;
}

/* Main content area */
#sh-body,
.main-content,
.content-area,
[class*="content-panel"],
[class*="main-panel"] {
  background: var(--bg-secondary, #f8fafc) !important;
}

/* Sidebar — solid dark slate */
.sidebar,
.side-nav,
nav[class*="sidebar"],
aside {
  background: var(--sidebar-bg, linear-gradient(180deg, #0f172a 0%, #1e293b 100%)) !important;
  border-right: 1px solid var(--slate-700, #334155) !important;
}

/* Cards — solid white, clean border, subtle shadow */
.sh-card,
.card,
.stat-card,
.kpi-card,
.balance-card,
.product-card,
.section-card,
[class*="-card"],
[class*="Card"] {
  background: var(--card-surface, var(--card-bg, #ffffff)) !important;
  border: 1px solid var(--card-border, rgba(15,23,42,0.08)) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Modals */
.modal-content,
.modal-body,
[class*="modal-content"],
#generic-modal .modal-content {
  background: var(--card-bg, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}

/* Dropdowns */
.dropdown,
[class*="dropdown"],
.cart-dropdown,
#cart-dropdown,
.notif-dropdown,
#notif-dropdown {
  background: var(--card-bg, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
}

/* Header / top bar */
.header,
.top-bar,
.nav-bar,
header {
  background: var(--slate-900, #0f172a) !important;
  border-bottom: 1px solid var(--slate-700, #334155) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 3: KILL GRADIENT / ANIMATED BACKGROUNDS
   ────────────────────────────────────────────────────────────── */

body::before,
body::after,
.screen::before,
.screen::after,
#sh-body::before,
#sh-body::after {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 4: TEXT — HIGH CONTRAST, CLEAR, UNIFORM
   Amazon standard: dark text on light, white text on dark
   ────────────────────────────────────────────────────────────── */

/* Primary text — full contrast */
body,
p,
span,
div,
li,
td,
th,
label,
input,
textarea,
select {
  color: var(--text-primary, #0f172a);
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Secondary text */
.text-secondary,
.text-muted,
.subtitle,
.description,
.hint,
.help-text,
[class*="muted"],
[class*="secondary-text"],
small {
  color: var(--text-secondary, #475569) !important;
}

/* Labels and captions */
.label,
.caption,
.meta,
[class*="label"],
[class*="caption"] {
  color: var(--text-muted, #64748b) !important;
}

/* Text on dark backgrounds (sidebar, header) */
.sidebar *,
.sidebar a,
.sidebar span,
header *,
header a,
header span,
.top-bar *,
.nav-bar * {
  color: var(--slate-100, #f1f5f9) !important;
}

/* Active/selected nav item */
.sidebar .active,
.sidebar .active *,
.sidebar [class*="active"],
.sidebar [class*="active"] * {
  color: #ffffff !important;
  background: var(--slate-700, #334155) !important;
}

/* KILL all text-shadow glow */
* {
  text-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 5: FONT SCALE — AMAZON STANDARD (5 sizes)
   Display:  28px / 1.75rem — page titles
   Heading:  20px / 1.25rem — section titles
   Body:     14px / 0.875rem — main content
   Small:    12px / 0.75rem  — labels, captions
   Tiny:     11px / 0.6875rem — badges, meta
   ────────────────────────────────────────────────────────────── */

body {
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif !important;
}

h1, .page-title, [class*="page-title"] {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  color: var(--text-primary, #0f172a) !important;
}

h2, .section-title, [class*="section-title"] {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--text-primary, #0f172a) !important;
}

h3, .subsection-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

small, .small, .caption, .meta, .badge-text {
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 6: BUTTONS — SOLID, PROFESSIONAL
   ────────────────────────────────────────────────────────────── */

/* Primary buttons */
.btn-primary,
[class*="btn-primary"],
button[class*="primary"],
.action-btn {
  background: var(--primary, #0ea5e9) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1rem !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}
.btn-primary:hover,
[class*="btn-primary"]:hover,
button[class*="primary"]:hover {
  background: var(--primary-dark, #0284c7) !important;
}

/* Danger buttons */
.btn-danger,
[class*="btn-danger"],
[class*="btn-delete"],
button[class*="danger"],
button[class*="delete"] {
  background: var(--danger, #ef4444) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.btn-danger:hover,
[class*="btn-danger"]:hover {
  background: var(--danger-dark, #dc2626) !important;
}

/* Success buttons */
.btn-success,
[class*="btn-success"],
button[class*="success"],
button[class*="confirm"] {
  background: var(--success, #10b981) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Ghost/secondary buttons */
.btn-ghost,
.btn-secondary,
[class*="btn-ghost"],
[class*="btn-secondary"],
button[class*="ghost"],
button[class*="secondary"] {
  background: transparent !important;
  color: var(--primary, #0ea5e9) !important;
  border: 1px solid var(--primary, #0ea5e9) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.btn-ghost:hover,
.btn-secondary:hover,
[class*="btn-ghost"]:hover,
[class*="btn-secondary"]:hover {
  background: rgba(14, 165, 233, 0.06) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 7: FORM INPUTS — CLEAN, HIGH CONTRAST
   ────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select,
.input,
[class*="search-box"] {
  background: var(--input-bg, #ffffff) !important;
  color: var(--text-primary, #0f172a) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary, #0ea5e9) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--slate-400, #94a3b8) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 8: STATUS INDICATORS — CONSISTENT SEMANTIC COLORS
   ────────────────────────────────────────────────────────────── */

[class*="status"][class*="success"],
[class*="status"][class*="active"],
[class*="status"][class*="confirmed"],
[class*="badge"][class*="success"],
[class*="badge"][class*="active"] {
  background: var(--success-bg, #d1fae5) !important;
  color: var(--success-dark, #059669) !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

[class*="status"][class*="warning"],
[class*="status"][class*="pending"],
[class*="badge"][class*="warning"],
[class*="badge"][class*="pending"] {
  background: var(--warning-bg, #fef3c7) !important;
  color: var(--warning-dark, #b45309) !important;
  border: none !important;
  box-shadow: none !important;
}

[class*="status"][class*="error"],
[class*="status"][class*="danger"],
[class*="status"][class*="rejected"],
[class*="status"][class*="failed"],
[class*="badge"][class*="error"],
[class*="badge"][class*="danger"] {
  background: var(--danger-bg, #fee2e2) !important;
  color: var(--danger-dark, #dc2626) !important;
  border: none !important;
  box-shadow: none !important;
}

[class*="status"][class*="info"],
[class*="badge"][class*="info"] {
  background: var(--info-bg, #dbeafe) !important;
  color: var(--info-dark, #1d4ed8) !important;
  border: none !important;
  box-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 9: TABLES — CLEAN, READABLE
   ────────────────────────────────────────────────────────────── */

table {
  background: var(--card-bg, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 8px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}

th {
  background: var(--bg-secondary, #f8fafc) !important;
  color: var(--text-secondary, #475569) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--border, #e2e8f0) !important;
  padding: 0.75rem 1rem !important;
}

td {
  color: var(--text-primary, #0f172a) !important;
  font-size: 0.875rem !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--border-light, #f1f5f9) !important;
}

tr:hover td {
  background: rgba(14, 165, 233, 0.03) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 10: SCROLLBAR — MINIMAL
   ────────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--slate-300, #cbd5e1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--slate-400, #94a3b8);
}

/* ──────────────────────────────────────────────────────────────
   SECTION 11: KILL VISUAL NOISE
   ────────────────────────────────────────────────────────────── */

/* Disable AOS scroll animations — distracting */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Kill gradient borders */
[style*="border-image"] {
  border-image: none !important;
  border: 1px solid var(--border, #e2e8f0) !important;
}

/* Kill pulsing/breathing animations on static content */
@keyframes shimmer { 0%, 100% { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: none; } }
@keyframes glow { 0%, 100% { box-shadow: none; } }

/* ──────────────────────────────────────────────────────────────
   SECTION 12: TOAST / NOTIFICATIONS — CLEAN
   ────────────────────────────────────────────────────────────── */

.toast,
[class*="toast"],
.notification,
#toast-container > * {
  background: var(--card-bg, #ffffff) !important;
  color: var(--text-primary, #0f172a) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-left: 4px solid var(--primary, #0ea5e9) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
  border-radius: 8px !important;
}

.toast[class*="error"],
.toast[class*="danger"] {
  border-left-color: var(--danger, #ef4444) !important;
}

.toast[class*="success"] {
  border-left-color: var(--success, #10b981) !important;
}

.toast[class*="warning"] {
  border-left-color: var(--gold, #f59e0b) !important;
}