/* ============================================================
   EU SwagHub — WORLD-CLASS POLISH LAYER
   ============================================================
   Load AFTER professional-override.css.
   Adds modern micro-interactions, depth, spacing rhythm,
   and premium feel while staying within Amazon standards.
   
   Inspiration: AWS Console 2024+, Notion, Linear, Vercel
   Constraint: Amazon design language (no rounded-3xl, no playful)
   
   Load order:
   1. theme-tokens.css
   2. swag-shop-glassy.css
   3. hover-effects.css
   4. introduction.css
   5. professional-override.css
   6. ➡️ world-class-polish.css (THIS FILE — VERY LAST)
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   DESIGN SYSTEM TOKENS (modern additions)
   ────────────────────────────────────────────────────────────── */
:root {
  /* Elevation system (subtle depth layers) */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.06);
  
  /* Hover elevation (cards lift on hover) */
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
  
  /* Spacing rhythm (8px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  
  /* Motion (smooth, purposeful) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  
  /* Focus ring */
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--primary, #0ea5e9);
  
  /* Modern border — theme-aware (uses --border token so dark/luxe/fusion stay visible) */
  --border-subtle: 1px solid var(--border, rgba(15, 23, 42, 0.06));
  --border-default: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  --border-strong: 1px solid var(--border, rgba(15, 23, 42, 0.12));
}

/* ──────────────────────────────────────────────────────────────
   GLOBAL TRANSITIONS (everything feels smooth)
   ────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-in-out);
}

/* Exceptions: don't animate layout properties */
input, textarea, select {
  transition-property: border-color, box-shadow !important;
}

/* ──────────────────────────────────────────────────────────────
   CARDS — MODERN ELEVATED DESIGN
   ────────────────────────────────────────────────────────────── */

.sh-card,
.card,
.stat-card,
.kpi-card,
.balance-card,
.product-card,
.section-card,
[class*="-card"],
[class*="Card"] {
  border: 1px solid var(--card-outline, transparent) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--space-6) !important;
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out) !important;
}

/* Cards that are interactive lift on hover */
.product-card:hover,
.sh-card:hover,
[class*="product-card"]:hover,
[class*="-card"][onclick]:hover,
[class*="-card"][role="button"]:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px) !important;
}

/* ──────────────────────────────────────────────────────────────
   BUTTONS — MODERN WITH MICRO-INTERACTIONS
   ────────────────────────────────────────────────────────────── */

button,
[class*="btn"],
.action-btn,
[role="button"] {
  transition: all var(--duration-fast) var(--ease-out) !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Subtle press effect */
button:active,
[class*="btn"]:active,
.action-btn:active {
  transform: scale(0.97) !important;
}

/* Primary button glow on hover */
.btn-primary:hover,
[class*="btn-primary"]:hover,
button[class*="primary"]:hover {
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25) !important;
}

/* Danger button hover */
.btn-danger:hover,
[class*="btn-danger"]:hover,
button[class*="danger"]:hover,
button[class*="delete"]:hover {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
}

/* Success button hover */
.btn-success:hover,
[class*="btn-success"]:hover,
button[class*="success"]:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}

/* Focus ring (accessibility + looks premium) */
button:focus-visible,
[class*="btn"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* ──────────────────────────────────────────────────────────────
   INPUTS — REFINED INTERACTION
   ────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
  border: var(--border-strong) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out) !important;
}

input:hover,
textarea:hover,
select:hover {
  border-color: rgba(15, 23, 42, 0.2) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary, #0ea5e9) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08),
              0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* ──────────────────────────────────────────────────────────────
   TABLES — POLISHED DATA DISPLAY
   ────────────────────────────────────────────────────────────── */

table {
  border-radius: 12px !important;
  border: var(--border-subtle) !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden !important;
}

th {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-muted, #64748b) !important;
  padding: 12px 16px !important;
  background: var(--bg-secondary, #f8fafc) !important;
}

td {
  padding: 12px 16px !important;
  font-size: 13px !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}

tr {
  transition: background var(--duration-fast) var(--ease-out) !important;
}

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

/* ──────────────────────────────────────────────────────────────
   SIDEBAR — POLISHED NAVIGATION
   ────────────────────────────────────────────────────────────── */

/* Nav items get smooth hover */
.sidebar a,
.sidebar li,
.sidebar [class*="nav-item"],
.sidebar [class*="menu-item"] {
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin: 2px 8px !important;
  transition: background var(--duration-fast) var(--ease-out) !important;
}

.sidebar a:hover,
.sidebar li:hover,
.sidebar [class*="nav-item"]:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.sidebar .active,
.sidebar [class*="active"] {
  background: rgba(255, 255, 255, 0.1) !important;
  border-left: 3px solid var(--primary, #0ea5e9) !important;
}

/* ──────────────────────────────────────────────────────────────
   HEADER — REFINED TOP BAR
   ────────────────────────────────────────────────────────────── */

header,
.header,
.top-bar,
.nav-bar {
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset,
              0 1px 3px rgba(0,0,0,0.2) !important;
}

/* ──────────────────────────────────────────────────────────────
   STATUS BADGES — MODERN PILL STYLE
   ────────────────────────────────────────────────────────────── */

[class*="status"],
[class*="badge"],
.status-pill,
.pill {
  border-radius: 6px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ──────────────────────────────────────────────────────────────
   MODALS — MODERN OVERLAY WITH ENTRY ANIMATION
   ────────────────────────────────────────────────────────────── */

.modal-content,
[class*="modal-content"] {
  border-radius: 16px !important;
  box-shadow: var(--shadow-xl) !important;
  border: var(--border-subtle) !important;
  animation: modalEnter var(--duration-slow) var(--ease-out) !important;
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal backdrop — subtle blur (only here, not on content) */
#modal-overlay,
[class*="modal-overlay"],
[class*="modal-backdrop"] {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ──────────────────────────────────────────────────────────────
   DROPDOWNS — FLOATING PANELS WITH ENTRY
   ────────────────────────────────────────────────────────────── */

.dropdown,
[class*="dropdown"],
#cart-dropdown,
#notif-dropdown {
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  border: var(--border-subtle) !important;
  animation: dropIn var(--duration-normal) var(--ease-out) !important;
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ──────────────────────────────────────────────────────────────
   TOAST / NOTIFICATIONS — MODERN SLIDE-IN
   ────────────────────────────────────────────────────────────── */

.toast,
[class*="toast"] {
  border-radius: 10px !important;
  box-shadow: var(--shadow-lg) !important;
  border: var(--border-subtle) !important;
  padding: 14px 18px !important;
}

/* ──────────────────────────────────────────────────────────────
   TYPOGRAPHY REFINEMENTS
   ────────────────────────────────────────────────────────────── */

/* Tighter heading letter-spacing for modern feel */
h1, h2, h3, .page-title, .section-title {
  letter-spacing: -0.02em !important;
}

/* Numbers in data displays use tabular figures */
[class*="balance"],
[class*="kpi"],
[class*="stat"],
[class*="price"],
[class*="count"],
[class*="timer"],
td {
  font-variant-numeric: tabular-nums !important;
}

/* ──────────────────────────────────────────────────────────────
   LOADING STATES — SKELETON SHIMMER
   ────────────────────────────────────────────────────────────── */

[class*="skeleton"],
[class*="loading-placeholder"],
.placeholder {
  background: linear-gradient(
    90deg,
    var(--bg-secondary, #f1f5f9) 25%,
    var(--border, #e2e8f0) 50%,
    var(--bg-secondary, #f1f5f9) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeletonShimmer 1.5s ease-in-out infinite !important;
  border-radius: 6px !important;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ──────────────────────────────────────────────────────────────
   SCROLLBAR — MODERN THIN (auto-hide)
   ────────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15) !important;
  border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.25) !important;
}

/* Hide scrollbar until hover (modern pattern) */
.sidebar::-webkit-scrollbar-thumb,
[class*="panel"]::-webkit-scrollbar-thumb {
  background: transparent !important;
}
.sidebar:hover::-webkit-scrollbar-thumb,
[class*="panel"]:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* ──────────────────────────────────────────────────────────────
   SELECTION HIGHLIGHT
   ────────────────────────────────────────────────────────────── */

::selection {
  background: rgba(14, 165, 233, 0.15) !important;
  color: inherit !important;
}

/* ──────────────────────────────────────────────────────────────
   LINKS — SUBTLE UNDERLINE ON HOVER
   ────────────────────────────────────────────────────────────── */

a:not([class*="btn"]):not(.sidebar a) {
  text-decoration: none !important;
  color: var(--primary, #0ea5e9) !important;
  transition: color var(--duration-fast) var(--ease-out) !important;
}
a:not([class*="btn"]):not(.sidebar a):hover {
  color: var(--primary-dark, #0284c7) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ──────────────────────────────────────────────────────────────
   THEME-SAFETY GUARDS (added 2026-06-11)
   Top chrome must be dark in EVERY theme; kill stray white surfaces.
   ────────────────────────────────────────────────────────────── */

/* Top line / chrome — force the dark chrome token in light AND dark/luxe/fusion
   so the top bar is never white. */
.prototype-banner,
.top-header,
header.top-header {
  background: var(--chrome-header) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.top-header .breadcrumb,
.top-header .breadcrumb a,
.top-header .breadcrumb span {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Shop balance banner was hardcoded white (rgba(255,255,255,0.6)); make it a
   solid token surface so it works in all themes. */
#shop-balance-banner {
  background: var(--card-surface, var(--card-bg)) !important;
  border: 1px solid var(--card-outline, transparent) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Cards: no border in light (token transparent), subtle in dark — applied to the
   common dashboard/stat/section card wrappers too. */
.dash-glass-card,
.dash-kpi-card,
.dash-chart-container,
.dash-table-wrap {
  border: 1px solid var(--card-outline, transparent) !important;
}

/* ──────────────────────────────────────────────────────────────
   GOLD STAT CARDS + DROPDOWN READABILITY + THEME CONSISTENCY
   (added 2026-06-11) — applies app-wide, theme-aware.
   ────────────────────────────────────────────────────────────── */

/* (A) Top stat cards → ocean-blue gradient (light theme), app-wide via shared
   --card-surface token. Dark/Luxe/Fusion keep their solid theme card. */
.stat-card {
  background: var(--card-surface, #ffffff) !important;
  border: 1px solid rgba(14, 165, 233, 0.18) !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="dark"] .stat-card,
[data-skin="luxe"] .stat-card,
[data-skin="fusion"] .stat-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-outline, transparent) !important;
}
.stat-card p { color: var(--text-secondary) !important; }

/* (B) Dropdowns (theme switcher, cart, notification) were white-on-white in the
   light theme. Force a readable surface + dark text everywhere, and a light-gold
   tint in light theme so they match the gold cards. */
.theme-dropdown,
.dropdown,
[class*="dropdown"],
#cart-dropdown,
#notif-dropdown,
.cart-dropdown,
.notif-dropdown {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.theme-dropdown, .theme-dropdown *,
#cart-dropdown *, #notif-dropdown *,
.cart-dropdown *, .notif-dropdown * {
  color: var(--text-primary) !important;
}
.theme-dropdown-title,
.theme-opt-desc {
  color: var(--text-secondary) !important;
}
.theme-option.active {
  background: var(--tint-cyan-soft, rgba(14, 165, 233, 0.08)) !important;
}
/* ocean-blue tint to match the cards (light theme only) */
[data-theme="light"] .theme-dropdown,
[data-theme="light"] #cart-dropdown,
[data-theme="light"] #notif-dropdown,
[data-theme="light"] .cart-dropdown,
[data-theme="light"] .notif-dropdown {
  background: var(--card-surface, #ffffff) !important;
}

/* (C) Analytics tab (#analytics) hardcodes a DARK dash theme regardless of the
   app theme — that's why it looked different. Make its tokens follow the theme
   in light mode so the whole app is consistent. */
[data-theme="light"] #analytics {
  --dash-bg: var(--bg-secondary);
  --dash-bg-secondary: #ffffff;
  --dash-card-bg: #ffffff;
  --dash-card-border: var(--border);
  --dash-text-primary: var(--text-primary);
  --dash-text-secondary: var(--text-secondary);
  --dash-text-muted: var(--text-muted);
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] #analytics .dash-glass-card,
[data-theme="light"] #analytics .dash-kpi-card,
[data-theme="light"] #analytics .dash-chart-container,
[data-theme="light"] #analytics .dash-table-wrap,
[data-theme="light"] #analytics .dash-skeleton-card,
[data-theme="light"] #analytics .dash-error-state,
[data-theme="light"] #analytics .dash-empty-state,
[data-theme="light"] #analytics .dash-access-denied-state {
  background: var(--card-surface, #ffffff) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

/* ──────────────────────────────────────────────────────────────
   LOGIN PAGE — liquid-glass card floating in the starfield
   (added 2026-06-11)
   The professional-override forces [class*="-card"] solid white and
   text dark; on the dark login sky that makes the card a white slab
   with invisible text. Restore a translucent frosted card with light
   text so it feels like everything floats. (.landing-card beats the
   universal `*{backdrop-filter:none}` on specificity.)
   ────────────────────────────────────────────────────────────── */
.landing-card {
  background: transparent !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 28px !important;
}
/* readable light text on the dark sky (title keeps its own gradient) */
.landing-card .landing-subtitle,
.landing-card .landing-desc,
.landing-card .landing-footer-text,
.landing-card .landing-footer-text p,
.landing-card .auth-badge,
.landing-card .feature-pill {
  color: rgba(241, 245, 249, 0.92) !important;
}
/* chips + badges become glass so they float too */
.landing-card .feature-pill,
.landing-card .auth-badge {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}
.landing-card .landing-divider {
  background: rgba(255, 255, 255, 0.12) !important;
  border: none !important;
}

/* ============================================================
   Liquid-glass nav + smooth collapse  (login-nav-glass-polish)
   Additive only. Guarded by @supports so it enriches Chrome/Edge;
   Firefox's @-moz-document block keeps its non-blur perf fallback.
   ============================================================ */

/* Smooth open/close of the sidebar */
.sidebar {
    transition: width 0.34s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.34s ease,
                box-shadow 0.34s ease;
}

@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
    .sidebar .nav-item {
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                    background 0.28s ease,
                    box-shadow 0.28s ease,
                    border-color 0.28s ease;
    }
    /* Frosted-glass hover */
    .sidebar .nav-item:hover {
        background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        box-shadow: 0 6px 20px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.14);
    }
    /* Active item reads as a frosted glass panel */
    .sidebar .nav-item.active {
        backdrop-filter: blur(12px) saturate(150%);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
    }
}

/* ============================================================
   FLOATING OVERLAYS MUST BE OPAQUE   [OVERLAY_OPACITY_2026_09_01]

   Reported from the shop in Fusion: the "Select Variant" card was so
   transparent that the product grid behind it showed through the rows —
   colours, stock badges and prices were all competing with someone else's
   teddy bear. Same on every product, because nothing about it is per-product.

   The cause is a design assumption that stopped being true. These surfaces
   were built as glassmorphism: a LOW alpha plus `backdrop-filter: blur()`,
   where the blur is what turns whatever is behind into an unreadable wash.
   professional-override.css then killed the blur site-wide:

       * { backdrop-filter: none !important; }      (nuclear, by design)

   and `!important` on a universal selector also beats the inline
   `backdrop-filter:blur(24px)` on #variant-modal-content. So the alpha was
   left doing the job alone. For a CARD that is harmless — it sits on the flat
   page background, and 0.74 over `--bg-main` just reads as a tint. But the
   variant modal and the cart dropdown FLOAT OVER ARBITRARY CONTENT, and they
   inherited the card alpha because they share its selector list in
   swag-shop-glassy.css (`[data-skin="fusion"] #swag-shop-grid > div, ...,
   #variant-modal-content, ..., .cart-dropdown`). 26% of the shop grid came
   through, sharp.

   Fix: an overlay gets an OPAQUE background. `--card-bg` is the right token —
   every theme defines it solid (light #ffffff, fusion #0e2038), so one rule
   is correct in both without naming a colour, and it is the same hue family
   the translucent version was tinting toward. The header/footer bands keep
   their translucent tint: composited over an opaque parent they now tint
   instead of leak, which is what they were always meant to do.

   Specificity is deliberate. `[data-skin="fusion"] #variant-modal-content`
   is (1,1,0) !important, so these use two IDs (2,0,0) to win on specificity
   rather than on file order — reordering the stylesheets must not silently
   bring the bug back.
   ============================================================ */
#variant-modal #variant-modal-content,
#header-cart-wrap #cart-dropdown {
    background: var(--card-bg, #ffffff) !important;
}

/* With no blur, a 0.5 scrim left the grid behind the modal perfectly legible
   and fighting the dialog for attention (it is what made the modal look
   see-through even where it is not). Dim harder — the page should read as
   "behind", and the dialog is modal anyway. */
#variant-modal #variant-modal-backdrop {
    background: rgba(2, 8, 20, 0.78) !important;
}