/**
 * SporeSwaps Base Styles & Reset
 */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative;
  box-sizing: border-box;
}

#app {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Ambient Mushroom Organic Atmosphere */
.site-ambient-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.site-ambient-img {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  background-image: url('/assets/images/ambient-mushrooms-forest.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 0.15;
  filter: saturate(1.25) contrast(1.1) brightness(0.88);
  mix-blend-mode: screen;
  transform: translateZ(0);
  animation: ambientFloat 35s ease-in-out infinite alternate;
  transition: opacity var(--transition-slow), background-image var(--transition-slow);
}

.site-ambient-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(121, 40, 202, 0.08) 1.2px, transparent 1.2px),
    radial-gradient(circle at 0% 0%, rgba(0, 223, 216, 0.06) 1.2px, transparent 1.2px);
  background-size: 36px 36px, 72px 72px;
  background-position: 0 0, 18px 18px;
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: screen;
}

.site-ambient-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 15%, rgba(13, 17, 23, 0.35) 0%, rgba(13, 17, 23, 0.85) 60%, #0d1117 100%),
              radial-gradient(circle at 85% 15%, var(--color-primary-glow) 0%, transparent 50%),
              radial-gradient(circle at 15% 85%, var(--color-secondary-glow) 0%, transparent 50%);
  mix-blend-mode: multiply;
  transition: background var(--transition-slow);
}

/* Light Theme Ambient Adaptation */
[data-theme="light"] .site-ambient-img {
  background-image: url('/assets/images/ambient-mushrooms-daylight.jpg') !important;
  background-position: center center;
  opacity: 0.34 !important;
  mix-blend-mode: multiply !important;
  filter: saturate(1.3) contrast(1.12) brightness(1.03) !important;
}

[data-theme="light"] .site-ambient-pattern {
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(121, 40, 202, 0.08) 1.2px, transparent 1.2px),
    radial-gradient(circle at 0% 0%, rgba(0, 180, 216, 0.06) 1.2px, transparent 1.2px) !important;
  background-size: 36px 36px, 72px 72px !important;
  background-position: 0 0, 18px 18px !important;
  opacity: 0.65 !important;
  mix-blend-mode: multiply !important;
}

[data-theme="light"] .site-ambient-overlay {
  background: radial-gradient(ellipse at 50% 15%, rgba(248, 250, 252, 0.48) 0%, rgba(248, 250, 252, 0.82) 60%, #f8fafc 100%),
              radial-gradient(circle at 85% 15%, rgba(0, 223, 216, 0.14) 0%, transparent 50%),
              radial-gradient(circle at 15% 85%, rgba(121, 40, 202, 0.09) 0%, transparent 50%) !important;
  mix-blend-mode: normal !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-ambient-img {
    background-image: url('/assets/images/ambient-mushrooms-daylight.jpg') !important;
    background-position: center center;
    opacity: 0.34 !important;
    mix-blend-mode: multiply !important;
    filter: saturate(1.3) contrast(1.12) brightness(1.03) !important;
  }
  :root:not([data-theme="dark"]) .site-ambient-pattern {
    background-image: 
      radial-gradient(circle at 50% 50%, rgba(121, 40, 202, 0.08) 1.2px, transparent 1.2px),
      radial-gradient(circle at 0% 0%, rgba(0, 180, 216, 0.06) 1.2px, transparent 1.2px) !important;
    background-size: 36px 36px, 72px 72px !important;
    background-position: 0 0, 18px 18px !important;
    opacity: 0.65 !important;
    mix-blend-mode: multiply !important;
  }
  :root:not([data-theme="dark"]) .site-ambient-overlay {
    background: radial-gradient(ellipse at 50% 15%, rgba(248, 250, 252, 0.48) 0%, rgba(248, 250, 252, 0.82) 60%, #f8fafc 100%),
                radial-gradient(circle at 85% 15%, rgba(0, 223, 216, 0.14) 0%, transparent 50%),
                radial-gradient(circle at 15% 85%, rgba(121, 40, 202, 0.09) 0%, transparent 50%) !important;
    mix-blend-mode: normal !important;
  }
}

/* Light Theme Component & Card Enhancements */
[data-theme="light"] .glass-panel {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .admin-card,
[data-theme="light"] .kpi-card,
[data-theme="light"] .vendor-card,
[data-theme="light"] .product-card,
[data-theme="light"] .category-card,
[data-theme="light"] .vendor-store-tile,
[data-theme="light"] .dashboard-sidebar {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .admin-card-inner,
[data-theme="light"] .admin-filter-bar,
[data-theme="light"] .admin-empty-state,
[data-theme="light"] .color-input-card {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .data-table-wrap {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .data-table th {
  background: #f1f5f9;
  color: #475569;
}

[data-theme="light"] .data-table tr:hover td {
  background: rgba(0, 0, 0, 0.02);
}

@keyframes ambientFloat {
  0% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.025) translateY(-8px); }
  100% { transform: scale(1.01) translateY(6px); }
}

#app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

h1 { font-size: 2.75rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1rem; }

p {
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

p.muted, .text-muted {
  color: var(--color-text-muted) !important;
}

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container & Viewport Safety Guarantees */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  box-sizing: border-box;
  min-width: 0;
}

#app, .main-content, .container, main, section, article, aside {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.data-table-wrap,
.table-responsive,
.table-wrap,
.admin-table-container,
pre,
code {
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.table-responsive,
.data-table-wrap,
.admin-table-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

table.data-table,
table.admin-table,
.data-table,
.admin-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  box-sizing: border-box !important;
}

table.data-table th, table.data-table td,
table.admin-table th, table.admin-table td,
.data-table th, .data-table td,
.admin-table th, .admin-table td {
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
  vertical-align: middle;
  box-sizing: border-box !important;
}

table.data-table th,
table.admin-table th,
.data-table th,
.admin-table th {
  background: var(--color-surface-elevated);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 1.25;
  padding: 0.6rem 0.65rem;
  box-sizing: border-box !important;
}

table.data-table td,
table.admin-table td,
.data-table td,
.admin-table td {
  overflow-wrap: break-word;
}

/* Granular Early-Hiding Responsive Table Column Utilities (Optimized for Admin Sidebar & Viewports) */
@media (max-width: 2200px) {
  th.hide-xxl, td.hide-xxl,
  th.col-hide-xxl, td.col-hide-xxl,
  th.col-p5, td.col-p5,
  th.hide-logo, td.hide-logo {
    display: none !important;
  }
}

@media (max-width: 1850px) {
  th.hide-xl, td.hide-xl,
  th.col-hide-xl, td.col-hide-xl,
  th.col-p4, td.col-p4,
  th.hide-sales, td.hide-sales,
  th.hide-rating, td.hide-rating {
    display: none !important;
  }
}

@media (max-width: 1550px) {
  th.hide-lg, td.hide-lg,
  th.col-hide-lg, td.col-hide-lg,
  th.col-p3, td.col-p3,
  th.hide-products, td.hide-products,
  th.hide-vacation, td.hide-vacation {
    display: none !important;
  }
}

@media (max-width: 1250px) {
  th.hide-md, td.hide-md,
  th.hide-tablet, td.hide-tablet,
  th.col-hide-md, td.col-hide-md,
  th.col-priority-low, td.col-priority-low,
  th.col-p2, td.col-p2,
  th.hide-commission, td.hide-commission {
    display: none !important;
  }
}

@media (max-width: 900px) {
  th.hide-sm, td.hide-sm,
  th.hide-mobile, td.hide-mobile,
  th.col-hide-sm, td.col-hide-sm,
  th.col-priority-medium, td.col-priority-medium,
  th.col-p1, td.col-p1 {
    display: none !important;
  }
}

@media (max-width: 640px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .container {
    padding: 0 var(--space-sm) !important;
    max-width: 100vw !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  h1 { font-size: 1.65rem !important; line-height: 1.25 !important; }
  h2 { font-size: 1.35rem !important; line-height: 1.3 !important; }
  h3 { font-size: 1.15rem !important; }
  h4 { font-size: 1.0rem !important; }

  .glass-panel {
    border-radius: var(--radius-md) !important;
    padding: var(--space-md) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .main-content {
    padding-top: calc(var(--header-height) + var(--space-md)) !important;
    padding-bottom: var(--space-md) !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  pre, code, kbd, samp {
    max-width: 100% !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  input, select, textarea, .form-control, .form-select {
    font-size: 16px !important;
  }
}

.main-content {
  flex: 1;
  padding-top: calc(var(--header-height) + var(--space-lg));
  padding-bottom: var(--space-3xl);
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Utilities */
.gradient-text {
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-accent {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glass-panel {
  background: var(--color-panel-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

/* Light / Dark Mode Dynamic Logos (Navbar, Footer, Modals) */
.logo-dark-mode, img.logo-dark-mode { display: block !important; }
.logo-light-mode, img.logo-light-mode { display: none !important; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo-dark-mode,
  :root:not([data-theme="dark"]) img.logo-dark-mode { display: none !important; }
  :root:not([data-theme="dark"]) .logo-light-mode,
  :root:not([data-theme="dark"]) img.logo-light-mode { display: block !important; }
}

[data-theme="light"] .logo-dark-mode,
[data-theme="light"] img.logo-dark-mode { display: none !important; }
[data-theme="light"] .logo-light-mode,
[data-theme="light"] img.logo-light-mode { display: block !important; }

[data-theme="dark"] .logo-dark-mode,
[data-theme="dark"] img.logo-dark-mode { display: block !important; }
[data-theme="dark"] .logo-light-mode,
[data-theme="dark"] img.logo-light-mode { display: none !important; }

/* Theme Mode Toggle Button */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
  user-select: none;
}

.theme-toggle-btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-secondary);
  transform: translateY(-1px);
}

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

.grid { display: grid; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }