/* ============================================
   CSS Reset for Main V2 Layout
   Prevent any white gaps/boxes
   ============================================ */

/* Ensure box-sizing for all elements */
.main-v2-app-container,
.main-v2-app-container *,
.main-v2-app-container *::before,
.main-v2-app-container *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Reset any default browser spacing */
.main-v2-app-container {
  margin: 0 !important;
  padding: 0 !important;
}

.main-v2-top-nav,
.main-v2-content-area,
.main-v2-sidebar,
.main-v2-nav-sections,
.main-v2-nav-section,
.main-v2-main-content {
  margin: 0 !important;
}

/* Prevent white backgrounds everywhere */
.main-v2-app-container,
.main-v2-top-nav,
.main-v2-content-area,
.main-v2-sidebar,
.main-v2-nav-sections {
  /* Theme variables will apply */
  background-clip: padding-box;
}

/* Prevent any gaps between flex items */
.main-v2-app-container {
  gap: 0 !important;
}

.main-v2-content-area {
  gap: 0 !important;
}

/* Remove any default list styling if present */
.main-v2-nav-sections {
  list-style: none;
}

/* Ensure no overflow creates white space */
html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

/* Remove any default borders */
html {
  border: none !important;
  outline: none !important;
}

body {
  border: none !important;
  outline: none !important;
}

.main-v2-app-container {
  overflow-x: hidden;
}

/* ============================================
   Immediate Theme Application
   Apply theme colors before CSS variables load
   ============================================ */

/* Light Theme - Immediate color application */
html[data-theme="light"] {
  background-color: #f7f7f7 !important;
  color: #222 !important;
}

html[data-theme="light"] body {
  background-color: #f7f7f7 !important;
  color: #222 !important;
}

html[data-theme="light"] .main-v2-app-container {
  background-color: #f7f7f7 !important;
  color: #222 !important;
}

html[data-theme="light"] .main-v2-app {
  background-color: #f7f7f7 !important;
}

html[data-theme="light"] #global-audio-player {
  background-color: rgba(0, 0, 0, 0.95) !important;
  color: #fff !important;
}

/* Dark Theme - Immediate color application */
html[data-theme="dark"],
html:not([data-theme]) {
  background-color: #1a1a1a !important;
  color: #fff !important;
}

html[data-theme="dark"] body,
html:not([data-theme]) body {
  background-color: #1a1a1a !important;
  color: #fff !important;
}

html[data-theme="dark"] .main-v2-app-container,
html:not([data-theme]) .main-v2-app-container {
  background-color: #1a1a1a !important;
  color: #fff !important;
}

html[data-theme="dark"] .main-v2-app,
html:not([data-theme]) .main-v2-app {
  background-color: #1a1a1a !important;
}

html[data-theme="dark"] #global-audio-player,
html:not([data-theme]) #global-audio-player {
  background-color: rgba(0, 0, 0, 0.95) !important;
  color: #fff !important;
}