/* Theme transitions and FOUC prevention */

/* Prevent Flash of Unstyled Content by hiding content until CSS is loaded */
html:not(.css-ready) * {
  visibility: hidden;
}

/* Smooth transition between themes */
.theme-wrapper {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* Ensure dashboard has proper styling */
.theme-wrapper[data-theme="light"] {
  background-color: #ffffff;
  color: #111827;
}

.theme-wrapper[data-theme="dark"] {
  background-color: #121212;
  color: #f5f5f5;
}

/* Fix FontAwesome icon styling issues */
.svg-inline--fa {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  vertical-align: -0.125em !important;
  overflow: visible !important;
  font-size: inherit !important;
}

/* Ensure FontAwesome icons are visible in different contexts */
button .svg-inline--fa,
a .svg-inline--fa,
div .svg-inline--fa,
span .svg-inline--fa,
li .svg-inline--fa,
label .svg-inline--fa {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix specific icon issues in certain components */
[class*="settingsPanel"] .svg-inline--fa,
[class*="formGroup"] .svg-inline--fa,
[class*="saveButton"] .svg-inline--fa,
[class*="tabButton"] .svg-inline--fa,
[class*="toggleSwitch"] .svg-inline--fa {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
}

html[data-theme="light"] .svg-inline--fa {
  color: inherit !important;
  fill: currentColor !important;
}

html[data-theme="dark"] .svg-inline--fa {
  color: inherit !important;
  fill: currentColor !important;
}

/* Force correct styling for icons in sidebar */
html[data-theme="light"] .navIcon,
html[data-theme="dark"] .navIcon {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-theme="light"] .navLink .navIcon {
  color: #4b5563 !important;
}

html[data-theme="light"] .navLink:hover .navIcon {
  color: #111827 !important;
}

html[data-theme="light"] .navLink.active .navIcon {
  color: #ffffff !important;
}

html[data-theme="dark"] .navLink .navIcon {
  color: #b0b0b0 !important;
}

html[data-theme="dark"] .navLink:hover .navIcon {
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .navLink.active .navIcon {
  color: #ffffff !important;
}

/* Fix FontAwesome icon scaling on different themes */
html[data-theme="light"] svg:not(:root).svg-inline--fa,
html[data-theme="dark"] svg:not(:root).svg-inline--fa {
  overflow: visible !important;
  box-sizing: content-box !important;
}

/* CSS to ensure sidebar visibility */
html[data-theme="light"] .sidebar,
html[data-theme="dark"] .sidebar {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix navigation links in sidebar */
html[data-theme="light"] .navLink,
html[data-theme="dark"] .navLink {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force correct colors for sidebar in light theme */
html[data-theme="light"] .sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
}

html[data-theme="light"] .sidebarHeader,
html[data-theme="light"] .logoContainer,
html[data-theme="light"] .userProfile,
html[data-theme="light"] .navigation {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

html[data-theme="light"] .logoText,
html[data-theme="light"] .userName {
  color: #111827 !important;
}

html[data-theme="light"] .navLink {
  color: #4b5563 !important;
}

html[data-theme="light"] .navLink:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

html[data-theme="light"] .navLink.active {
  background-color: #6366f1 !important;
  color: #ffffff !important;
}

/* Force correct colors for sidebar in dark theme */
html[data-theme="dark"] .sidebar {
  background-color: #1e1e1e !important;
  border-right: 1px solid #333333 !important;
}

html[data-theme="dark"] .sidebarHeader,
html[data-theme="dark"] .logoContainer,
html[data-theme="dark"] .userProfile,
html[data-theme="dark"] .navigation {
  background-color: #1e1e1e !important;
  border-color: #333333 !important;
}

html[data-theme="dark"] .logoText,
html[data-theme="dark"] .userName {
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .navLink {
  color: #b0b0b0 !important;
}

html[data-theme="dark"] .navLink:hover {
  background-color: #2d2d2d !important;
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .navLink.active {
  background-color: #7c5dce !important;
  color: #ffffff !important;
}

/* Special treatment for Settings page icons */
html[data-theme="light"] [class*="settingsPanel"] svg,
html[data-theme="dark"] [class*="settingsPanel"] svg {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 1em !important;
  height: 1em !important;
  color: inherit !important;
}

/* CSS-loaded class to override visibility issues */
.css-loaded * {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix icon visibility in dashboard pages */
.css-loaded [class*="dashboardContainer"] .svg-inline--fa,
.css-loaded [class*="mainContent"] .svg-inline--fa,
.css-loaded [class*="settingsContainer"] .svg-inline--fa,
.css-loaded [class*="settingsPanel"] .svg-inline--fa {
  visibility: visible !important;
  opacity: 1 !important;
  display: inline-block !important;
}

/* Fix for any specific component visibility issues */
.css-loaded [class*="dashboardContainer"],
.css-loaded [class*="mainContent"],
.css-loaded [class*="settingsContainer"],
.css-loaded [class*="sidebar"],
.css-loaded [class*="navLink"],
.css-loaded [class*="viewContainer"] {
  visibility: visible !important;
  opacity: 1 !important;
}