/*
 * Z-INDEX HIERARCHY
 * ==================
 * 0-99:     Base content, normal flow
 * 1000:     Sticky header/navigation
 * 2000:     Ant Design dropdowns (select, dropdown menus)
 * 5000:     Modals
 * 8000:     Popovers and tooltips
 * 9000:     Message notifications
 * 10000:    Navigation dropdowns (must be above all standard UI)
 * 10001:    Accessibility skip links
 */

.emp-link-home {
  color: var(--emp-color-text-on-primary, var(--on-primary));
  text-decoration: none;
}

.emp-main {
  /* Removed padding to allow full-width layouts */
  width: 100%;
  max-width: 100%;
}

.emp-nav a {
  color: var(--emp-color-text, var(--on-surface));
}

/* Header wrapper for padding */
.header-wrapper {
  padding: 0 10px;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Glass header with backdrop blur matching Automation Studio */
.glass-header {
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.emp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  height: 100%;
}

.nav-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: var(--emp-space-lg, 24px);
  overflow: visible;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: var(--emp-space-lg, 24px);
  overflow: visible;
}

.nav-full-width {
  width: 100%;
}

/* Logo styling matching Automation Studio */
.logo {
  display: flex;
  align-items: center;
  gap: var(--emp-space-xs, 8px);
  text-decoration: none;
  color: inherit;
}

.logo-img {
  height: 32px;
  width: auto;
  transition: all 0.3s ease;
}

.logo-text {
  font-size: 22px;
  font-weight: 500;
  color: var(--main-accent); /* Pulse cyan accent color */
  letter-spacing: -0.02em;
}

.emp-nav {
  display: flex;
  gap: var(--emp-space-md, 16px);
}

.emp-actions {
  display: flex;
  gap: var(--emp-space-sm, 8px);
}

/* App wrapper enforces theme background and base typography */
.emp-app {
  background: var(--main-bg);
  color: var(--main-text);
  min-height: 100vh;
  font-family: var(--emp-font-body, Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif);
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal overflow */
  position: relative; /* For ambient glow positioning */
}

/* ✨ Ambient Glow Effect - Adds premium SaaS atmosphere */
.emp-app::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50vh; /* Cover top portion of viewport */
  background: var(--ambient-glow, transparent);
  pointer-events: none;
  z-index: 0; /* Behind all content */
}

/* Header container to constrain navigation */
.header-container {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Ensure HeaderNav doesn't overflow */
.emp-app > header,
.emp-app > nav {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Fix for HeaderNav component overflow */
:global(.header-nav),
:global(.emp-header-nav) {
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 24px !important;
}

:global(.header-nav .nav-items),
:global(.emp-header-nav .nav-items) {
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 100%;
}

/* Additional specific fixes for header layout */
:global(.emp-header-nav-container) {
  max-width: 100% !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

:global(.emp-header-nav .nav-brand) {
  flex-shrink: 0;
  max-width: 350px;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
}

:global(.emp-header-nav .nav-actions) {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

/* Ensure brand text is visible */
:global(.emp-header-nav .nav-brand .logo-text),
:global(.emp-header-nav .nav-brand span),
:global(.nav-brand .brand-title) {
  color: var(--main-accent) !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  margin-left: 8px !important;
}

/* CRITICAL FIX: Force all navigation items to display inline (no "Other" dropdown) */

/* Nuclear option: Hide ALL details/summary elements in header navigation */
/* BUT allow our custom grouped dropdowns */
:global(.emp-header-nav) details:not(.nav-dropdown-menu):not(.nav-dropdown-menu *),
:global(.header-nav) details:not(.nav-dropdown-menu):not(.nav-dropdown-menu *),
:global(.header-wrapper) details:not(.nav-dropdown-menu):not(.nav-dropdown-menu *),
:global(nav) details:not(.nav-dropdown-menu):not(.nav-dropdown-menu *) {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure our custom dropdowns are visible AND on top of everything */
.nav-dropdown-menu,
:global(.nav-dropdown-menu),
div.nav-dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10000 !important;
  position: fixed !important;
}

.nav-dropdown-menu a,
:global(.nav-dropdown-menu) a,
div.nav-dropdown-menu a {
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Force all nav items to be visible flex items */
:global(.emp-header-nav .nav-items),
:global(.header-nav .nav-items),
:global(.emp-header-nav) > div,
:global(.header-nav) > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  max-width: none !important;
}

/* Ensure individual nav links are visible */
:global(.emp-header-nav .nav-items) > a,
:global(.emp-header-nav .nav-items) > button,
:global(.header-nav .nav-items) > a,
:global(.header-nav .nav-items) > button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Remove any overflow menu from the DOM after render */
:global(.overflow-menu),
:global(.nav-overflow),
:global([class*="overflow"]) details,
:global([class*="Overflow"]) details {
  display: none !important;
}

/* Ensure navigation items wrap properly on small screens */
@media (max-width: 768px) {
  :global(.emp-header-nav .nav-items) {
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--main-bg);
    padding: 16px;
    display: none;
  }
  
  :global(.emp-header-nav.nav-open .nav-items) {
    display: flex;
  }
}

/* Accessible skip link using tokens; hidden until focused */
.emp-skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-200%);
  background: var(--emp-color-surface, var(--surface));
  color: var(--emp-color-text, var(--on-surface));
  padding: var(--emp-space-xs, 6px) var(--emp-space-sm, 10px);
  z-index: 10001;
}
.emp-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--emp-color-focus, currentColor);
}

/* DS grid utility for tile layouts */
.emp-grid-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--emp-space-md, 16px);
  margin-top: var(--emp-space-sm, 12px);
}

/* Quick Access Toggle Wrapper - Positioned in header */
.quick-access-toggle-wrapper {
  display: flex;
  align-items: center;
}

/* Header-relative positioning for quick access */
.header-wrapper {
  position: relative;
}


/* Footer styles - Now independently themeable! */
.app-footer {
  position: relative;
  bottom: 0;
  width: 100%;
  /* Use footer-specific bg if defined, fallback to header-bg for backwards compatibility */
  background: var(--footer-bg, var(--header-bg));
  border-top: var(--footer-border-top, 1px solid var(--card-border));
  padding: 16px 0;
  margin-top: auto;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Optional ambient glow effect for themes that define it */
.app-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--footer-glow, transparent);
  pointer-events: none;
  z-index: 0;
}

.footer-content {
  width: 100%;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Footer links use dedicated color variable */
.footer-content a {
  color: var(--footer-link-color, var(--link-color));
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.footer-content a:hover {
  color: var(--link-hover-color, var(--main-accent));
  text-shadow: 0 0 8px var(--footer-link-color, var(--link-color));
}

.footer-text {
  color: var(--footer-text, var(--header-text));  /* Use footer-text if defined */
  font-size: 14px;
  position: relative;
  z-index: 1;
}

/* Theme Switcher Styles */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-label {
  color: var(--header-text);  /* Matches footer background */
  font-size: 14px;
  font-weight: 500;
}

.theme-buttons {
  display: flex;
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 24px;
  padding: 4px;
}

.theme-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--header-text);  /* Matches footer background */
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.theme-button:hover {
  background: var(--glass-frost, rgba(128, 128, 128, 0.1));  /* Neutral fallback works on light/dark */
  opacity: 1;
}

.theme-button.active {
  background: var(--main-accent);
  color: var(--button-text);
}

.theme-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive Design */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-left,
  .footer-right {
    width: 100%;
    justify-content: center;
  }

  .theme-switcher {
    flex-direction: column;
  }

  .theme-buttons {
    justify-content: center;
  }
}

/* Theme-specific adjustments */
[data-theme="white"] .theme-button.active {
  box-shadow: var(--shadow-sm);
}

[data-theme="black"] .theme-button.active {
  box-shadow: var(--shadow-sm);
}
/* Quick Access Sidebar - Premium SaaS Design */

/* Toggle Button */
.quick-access-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  background: var(--card-bg, rgba(15, 40, 71, 0.6));
  color: var(--main-text-secondary, rgba(255, 255, 255, 0.7));
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
}

.quick-access-toggle:hover {
  background: var(--main-bg-elevated, rgba(15, 40, 71, 0.9));
  color: var(--main-accent, #00E7F6);
  border-color: var(--main-accent, #00E7F6);
  box-shadow: 0 0 20px rgba(0, 231, 246, 0.15);
  transform: translateY(-1px);
}

.quick-access-toggle.active {
  background: var(--main-accent, #00E7F6);
  color: var(--void-black, #050810);
  border-color: var(--main-accent, #00E7F6);
  box-shadow: 0 0 24px rgba(0, 231, 246, 0.3);
}

.quick-access-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--void-black, #050810);
  background: linear-gradient(135deg, var(--main-accent, #00E7F6), var(--main-accent-secondary, #B326FF));
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0, 231, 246, 0.4);
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Sidebar Container */
.quick-access-sidebar {
  position: fixed;
  top: 65px;
  right: 0;
  width: 320px;
  height: calc(100vh - 65px);
  background: linear-gradient(135deg, 
    rgba(10, 22, 40, 0.98) 0%, 
    rgba(5, 10, 18, 0.99) 100%
  );
  border-left: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  z-index: 1500;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.quick-access-sidebar.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

/* Header */
.quick-access-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}

.quick-access-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--main-text, #ffffff);
  letter-spacing: -0.02em;
}

.title-icon {
  font-size: 18px;
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.quick-access-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--main-text-secondary, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-access-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--main-text, #ffffff);
}

/* Content Area */
.quick-access-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--main-accent, #00E7F6) transparent;
}

.quick-access-content::-webkit-scrollbar {
  width: 4px;
}

.quick-access-content::-webkit-scrollbar-track {
  background: transparent;
}

.quick-access-content::-webkit-scrollbar-thumb {
  background: rgba(0, 231, 246, 0.3);
  border-radius: 2px;
}

/* Empty State */
.quick-access-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 32px 24px;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  animation: emptyFloat 4s ease-in-out infinite;
}

@keyframes emptyFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(-5deg); }
  75% { transform: translateY(-4px) rotate(5deg); }
}

.empty-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--main-text-secondary, rgba(255, 255, 255, 0.7));
}

.empty-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--main-text-tertiary, rgba(255, 255, 255, 0.4));
  line-height: 1.5;
}

/* Items List */
.quick-access-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Individual Item */
.quick-access-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  animation: itemSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: var(--animation-delay, 0ms);
  opacity: 0;
  transform: translateX(20px);
  user-select: none;
}

@keyframes itemSlideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.quick-access-item:hover {
  background: rgba(0, 231, 246, 0.08);
  border-color: rgba(0, 231, 246, 0.25);
  transform: translateX(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.quick-access-item:active {
  transform: translateX(-2px) scale(0.98);
  background: rgba(0, 231, 246, 0.12);
}


.quick-access-item.active {
  background: linear-gradient(135deg, 
    rgba(0, 231, 246, 0.1) 0%, 
    rgba(179, 38, 255, 0.05) 100%
  );
  border-color: rgba(0, 231, 246, 0.25);
}

.quick-access-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: linear-gradient(180deg, var(--main-accent, #00E7F6), var(--main-accent-secondary, #B326FF));
  border-radius: 0 2px 2px 0;
}

/* Item Icon */
.quick-access-item-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0.04) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.icon-emoji {
  font-size: 20px;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-access-item:hover .icon-emoji {
  transform: scale(1.15);
}

.icon-glow {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(circle at center, 
    rgba(0, 231, 246, 0.2) 0%, 
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.quick-access-item:hover .icon-glow {
  opacity: 1;
}

/* Item Content */
.quick-access-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quick-access-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--main-text, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-access-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--main-text-tertiary, rgba(255, 255, 255, 0.4));
}

.access-count {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: rgba(0, 231, 246, 0.1);
  color: var(--main-accent, #00E7F6);
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
}

/* Remove Button - Always visible and prominent */
.quick-access-item-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 100, 100, 0.3);
  border-radius: 6px;
  background: rgba(255, 100, 100, 0.15);
  color: #ff6b6b;
  cursor: pointer;
  opacity: 1;
  transform: scale(1);
  transition: all 0.2s ease;
}

.quick-access-item-remove:hover {
  background: rgba(255, 100, 100, 0.35);
  border-color: rgba(255, 100, 100, 0.5);
  color: #ff4444;
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255, 100, 100, 0.3);
}

.quick-access-item-remove:active {
  transform: scale(0.95);
  background: rgba(255, 100, 100, 0.5);
}

/* Footer */
.quick-access-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
  background: rgba(0, 0, 0, 0.2);
}

.quick-access-clear-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 100, 100, 0.2);
  border-radius: 6px;
  background: rgba(255, 100, 100, 0.05);
  color: rgba(255, 100, 100, 0.8);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-access-clear-btn:hover {
  background: rgba(255, 100, 100, 0.1);
  border-color: rgba(255, 100, 100, 0.3);
  color: #ff6464;
}

.quick-access-count {
  font-size: 12px;
  color: var(--main-text-tertiary, rgba(255, 255, 255, 0.4));
}

/* Decorative Glow */
.quick-access-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: radial-gradient(ellipse at 50% -50%, 
    rgba(0, 231, 246, 0.08) 0%, 
    rgba(179, 38, 255, 0.04) 40%, 
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Responsive */
@media (max-width: 480px) {
  .quick-access-sidebar {
    width: 100%;
    border-left: none;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}

/* Theme adaptations */
[data-theme="white"] .quick-access-sidebar,
[data-theme="white"] .quick-access-toggle {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(248, 250, 252, 0.99) 100%
  );
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="white"] .quick-access-toggle {
  background: white;
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}

[data-theme="white"] .quick-access-toggle:hover {
  color: var(--main-accent, #3b82f6);
  border-color: var(--main-accent, #3b82f6);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.15);
}

[data-theme="white"] .quick-access-title {
  color: #1e293b;
}

[data-theme="white"] .quick-access-item {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="white"] .quick-access-item:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="white"] .quick-access-item-title {
  color: #1e293b;
}

[data-theme="white"] .quick-access-item-meta,
[data-theme="white"] .empty-subtitle,
[data-theme="white"] .quick-access-count {
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="white"] .quick-access-glow {
  background: radial-gradient(ellipse at 50% -50%, 
    rgba(59, 130, 246, 0.08) 0%, 
    rgba(139, 92, 246, 0.04) 40%, 
    transparent 70%
  );
}

[data-theme="black"] .quick-access-sidebar {
  background: linear-gradient(135deg, 
    rgba(24, 24, 27, 0.98) 0%, 
    rgba(9, 9, 11, 0.99) 100%
  );
}

[data-theme="black"] .quick-access-toggle {
  background: rgba(24, 24, 27, 0.9);
}

/* PagesList styling - adapted from visual_designer PagesPage.css */
.pages-page-container {
  padding: 24px;
  background: transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pages-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 24px;
  background: var(--card-bg, var(--header-bg));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--card-radius, 8px);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--card-border, var(--border-color));
}

.pages-page-header h2 {
  color: var(--main-text, white);
  margin: 0;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  padding: 0;
  flex: 1;
  overflow-y: auto;
  align-content: start;
}

/* CRITICAL: Glass-card base styles for proper tile appearance */
.glass-card {
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--main-accent), transparent);
}

/* Clean and simple: TileCard now properly respects glass-card CSS */
.pages-page-container .tile-grid .glass-card {
  position: relative;
  overflow: hidden;
}

/* Clean gradient lines for glass cards */
.pages-page-container .tile-grid .glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--main-accent), transparent);
  z-index: 1;
}

/* Clean hover effects for glass cards */
.pages-page-container .tile-grid .glass-card:hover {
  transform: translateY(-2px);
}

/* Page card content layout - fixed positioning and spacing */
.page-card-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.page-header {
  margin-bottom: 12px;
  background: none !important;
  border: none !important;
  border-bottom: none !important;
}

.page-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

/* Ensure proper text layout in page titles and descriptions */
.page-header .emp-truncated-text,
.page-header .emp-truncated-text span {
  text-align: left;
}

/* Search input styling for dark theme */
.pages-search-input,
.pages-search-input .ant-input-affix-wrapper {
  background: var(--input-bg) !important;
  border: none !important;
  box-shadow: none !important;
}

.pages-search-input .ant-input {
  background: transparent !important;
  border: 0 !important;
  color: var(--main-text) !important;
  box-shadow: none !important;
  outline: none !important;
}

.pages-search-input input.ant-input {
  border: 0 !important;
}

.pages-search-input .ant-input::placeholder {
  color: var(--main-text-secondary) !important;
}

/* Remove all focus effects on wrapper */
.pages-search-input:focus,
.pages-search-input:focus-within,
.pages-search-input.ant-input-affix-wrapper:focus,
.pages-search-input.ant-input-affix-wrapper:focus-within,
.pages-search-input.ant-input-affix-wrapper-focused {
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
  outline: none !important;
}

.pages-search-input .ant-input:focus,
.pages-search-input .ant-input:active,
.pages-search-input input.ant-input:focus,
.pages-search-input input.ant-input:active {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.pages-search-input .ant-input-prefix {
  color: var(--main-text-secondary) !important;
}/* Theme-aware styles for Ant Design Table */
.grid-view-container {
  margin: 16px 0;
}

.grid-view-table {
  background: var(--card-bg) !important;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.grid-view-table .ant-table {
  background: transparent !important;
  color: var(--main-text) !important;
}

.grid-view-table .ant-table-thead > tr > th {
  background: var(--table-header-bg) !important;
  color: var(--main-text) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-right: 1px solid var(--divider-color) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  padding: 16px 24px !important;
}

.grid-view-table .ant-table-thead > tr > th:last-child {
  border-right: none !important;
}

.grid-view-table .ant-table-tbody > tr > td {
  background: var(--table-row-bg) !important;
  color: var(--main-text) !important;
  border-bottom: 1px solid var(--divider-color) !important;
  border-right: 1px solid var(--divider-color) !important;
  padding: 16px 24px !important;
  font-weight: 500 !important;
}

.grid-view-table .ant-table-tbody > tr > td:last-child {
  border-right: none !important;
}

/* Theme-aware hover effect */
.grid-view-table .ant-table-tbody > tr:hover > td,
.grid-view-table .ant-table-tbody > tr:hover,
.ant-table-tbody > tr:hover > td,
.ant-table-tbody > tr:hover {
  background: var(--table-row-hover) !important;
  background-color: var(--table-row-hover) !important;
}

.grid-view-table .ant-table-tbody > tr.ant-table-row-selected > td {
  background: var(--table-row-selected) !important;
}

.grid-view-table .ant-table-tbody > tr.ant-table-row-selected:hover > td {
  background: var(--table-row-selected-hover) !important;
}

.grid-view-table .ant-table-selection-column {
  width: 48px !important;
  text-align: center !important;
}

.grid-view-table .ant-checkbox-wrapper {
  color: var(--main-text) !important;
}

.grid-view-table .ant-checkbox {
  border-color: var(--checkbox-border) !important;
}

.grid-view-table .ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--checkbox-checked-bg) !important;
  border-color: var(--checkbox-checked-bg) !important;
}

/* FORCE Radio button styles with maximum specificity */
.grid-view-table .ant-table .ant-radio-wrapper,
.grid-view-table .ant-radio-wrapper,
.ant-table .ant-radio-wrapper {
  color: var(--main-text) !important;
}

.grid-view-table .ant-table .ant-radio,
.grid-view-table .ant-radio,
.ant-table .ant-radio {
  border-color: var(--disabled-text) !important;
}

.grid-view-table .ant-table .ant-radio .ant-radio-inner,
.grid-view-table .ant-radio .ant-radio-inner,
.ant-table .ant-radio .ant-radio-inner,
.grid-view-table .ant-radio-inner,
.ant-radio-inner {
  background-color: var(--radio-bg) !important;
  background: var(--radio-bg) !important;
  border-color: var(--radio-border) !important;
}

.grid-view-table .ant-table .ant-radio-checked .ant-radio-inner,
.grid-view-table .ant-radio-checked .ant-radio-inner,
.ant-table .ant-radio-checked .ant-radio-inner {
  background-color: var(--radio-bg) !important;
  background: var(--radio-bg) !important;
  border-color: var(--radio-checked-bg) !important;
}

.grid-view-table .ant-table .ant-radio-checked .ant-radio-inner::after,
.grid-view-table .ant-radio-checked .ant-radio-inner::after,
.ant-table .ant-radio-checked .ant-radio-inner::after {
  background-color: var(--radio-checked-bg) !important;
  background: var(--radio-checked-bg) !important;
}

/* Enhanced checkbox styles - matching table borders and page background */
body .ant-checkbox,
.grid-view-table .ant-checkbox,
.grid-view-table .ant-table .ant-checkbox,
.ant-table .ant-checkbox {
  border-color: var(--border-color) !important;
}

body .ant-checkbox .ant-checkbox-inner,
.grid-view-table .ant-checkbox-inner,
.grid-view-table .ant-table .ant-checkbox-inner,
.ant-table .ant-checkbox-inner {
  background-color: transparent !important;
  background: transparent !important;
  border-color: var(--border-color) !important;
  border-width: 2px !important;
  border-radius: 4px !important;
  opacity: 1 !important;
}

body .ant-checkbox-checked .ant-checkbox-inner,
.grid-view-table .ant-checkbox-checked .ant-checkbox-inner,
.grid-view-table .ant-table .ant-checkbox-checked .ant-checkbox-inner,
.ant-table .ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--main-accent) !important;
  background: var(--main-accent) !important;
  border-color: var(--main-accent) !important;
}

body .ant-checkbox-checked .ant-checkbox-inner::after,
.grid-view-table .ant-checkbox-checked .ant-checkbox-inner::after,
.grid-view-table .ant-table .ant-checkbox-checked .ant-checkbox-inner::after,
.ant-table .ant-checkbox-checked .ant-checkbox-inner::after {
  display: block !important;
  border-color: white !important;
  border-width: 2px !important;
  opacity: 1 !important;
}

/* Card view checkbox styling */
.grid-view-card .ant-checkbox-inner {
  background-color: transparent !important;
  border-color: var(--border-color) !important;
  border-width: 2px !important;
}

.grid-view-card .ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--main-accent) !important;
  border-color: var(--main-accent) !important;
}

.grid-view-card .ant-checkbox-checked .ant-checkbox-inner::after {
  border-color: white !important;
  border-width: 2px !important;
}

/* Hide empty rows that might slip through */
.grid-view-table .ant-table-tbody > tr:empty {
  display: none !important;
}

.grid-view-table .ant-table-tbody > tr > td:empty:only-child {
  display: none !important;
}

.grid-view-table .ant-table-column-sorter {
  color: var(--disabled-text) !important;
}

.grid-view-table .ant-table-column-sorter-up.active,
.grid-view-table .ant-table-column-sorter-down.active {
  color: var(--main-accent) !important;
}

/* Pagination dark theme */
.ant-pagination-dark {
  color: var(--main-text) !important;
  padding-right: 32px !important;
}

.ant-pagination-dark .ant-pagination-item {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  margin: 0 4px !important;
}

.ant-pagination-dark .ant-pagination-item a {
  color: var(--main-text) !important;
}

.ant-pagination-dark .ant-pagination-item:hover,
.ant-pagination-dark .ant-pagination-item:focus {
  background: var(--card-bg) !important;
  border-color: var(--main-accent) !important;
}

.ant-pagination-dark .ant-pagination-item-active {
  background: var(--selected-bg) !important;
  border-color: var(--selected-bg) !important;
}

.ant-pagination-dark .ant-pagination-prev,
.ant-pagination-dark .ant-pagination-next,
.ant-pagination-dark .ant-pagination-jump-prev,
.ant-pagination-dark .ant-pagination-jump-next {
  color: var(--main-text) !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
}

.ant-pagination-dark .ant-pagination-prev:hover,
.ant-pagination-dark .ant-pagination-next:hover,
.ant-pagination-dark .ant-pagination-jump-prev:hover,
.ant-pagination-dark .ant-pagination-jump-next:hover {
  background: var(--card-bg) !important;
  border-color: var(--main-accent) !important;
}

.ant-pagination-dark .ant-pagination-disabled {
  opacity: 0.5 !important;
}

.ant-pagination-dark .ant-pagination-total-text {
  color: var(--main-text) !important;
}

.ant-pagination-dark .ant-select {
  color: var(--main-text) !important;
}

.ant-pagination-dark .ant-select-selector {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--main-text) !important;
}

.ant-pagination-dark .ant-select-arrow {
  color: var(--main-text) !important;
}

/* Add margin after "Page" text in pagination quick jumper */
.ant-pagination-dark .ant-pagination-options-quick-jumper {
  margin-left: 16px !important;
}

.ant-pagination-dark .ant-pagination-options-quick-jumper input {
  margin: 0 8px !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--main-text) !important;
}

/* Quick jumper styles - text is already provided by Ant Design */
.ant-pagination-dark .ant-pagination-options-quick-jumper {
  color: var(--main-text);
}

/* Card view styles */
.grid-view-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-view-card {
  transition: all 0.2s ease;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}

.grid-view-card:hover {
  box-shadow: var(--shadow-lg);
}

.grid-view-card-selected {
  box-shadow: var(--shadow-card-selected) !important;
}

.grid-view-card .ant-card-body {
  padding: 16px !important;
}

.grid-view-card .ant-checkbox-wrapper {
  color: var(--main-text) !important;
}

/* Loading spinner animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* GLOBAL OVERRIDES - Maximum specificity to force our styles */
body .ant-table-tbody > tr:hover > td {
  background: var(--table-row-hover) !important;
  background-color: var(--table-row-hover) !important;
}

body .ant-radio-inner {
  background: var(--radio-bg) !important;
  background-color: var(--radio-bg) !important;
}

body .ant-radio-checked .ant-radio-inner {
  background: var(--radio-bg) !important;
  background-color: var(--radio-bg) !important;
  border-color: var(--radio-checked-bg) !important;
}

body .ant-radio-checked .ant-radio-inner::after {
  background: var(--radio-checked-bg) !important;
  background-color: var(--radio-checked-bg) !important;
}

/* Force no hover with new class */
.force-no-hover .ant-table-tbody > tr:hover > td,
.force-no-hover .ant-table-tbody > tr:hover,
.force-no-hover tbody tr:hover td,
.force-no-hover tbody tr:hover {
  background: var(--table-row-bg) !important;
  background-color: var(--table-row-bg) !important;
}
/* Page Runner Dark Theme Styles */
.page-runner-layout {
  min-height: 100vh;
  background: var(--main-bg) !important;
}

.page-runner-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--main-bg);
}

.page-runner-loading-text {
  color: var(--main-text) !important;
  font-size: 16px !important;
}

.page-runner-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px;
  background: var(--main-bg);
}

.page-runner-error-alert {
  max-width: 500px;
  width: 100%;
  background: var(--error-bg) !important;
  border: 1px solid var(--error-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
}

.page-runner-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: var(--card-bg) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 0 24px !important;
  height: 64px !important;
  line-height: 64px !important;
}

.page-runner-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.page-runner-back-button {
  color: var(--main-text) !important;
  border: none !important;
  background: transparent !important;
}

.page-runner-back-button:hover {
  color: var(--main-accent) !important;
  background: var(--input-bg) !important;
}

.page-runner-title-section {
  margin-left: 16px;
}

.page-runner-title {
  color: var(--main-text) !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.page-runner-subtitle {
  color: var(--main-text-secondary) !important;
  font-size: 12px !important;
  display: block !important;
  line-height: 1.2 !important;
  margin-top: -4px !important;
}

.page-runner-content {
  background: transparent !important;
  padding: 0 !important;
  overflow: auto;
  min-height: calc(100vh - 64px);
}

.page-runner-content-wrapper {
  height: 100%;
  padding: 0;
}

/* Remove any additional padding/margin from PreviewMode in runner */
.page-runner-content-wrapper .preview-mode-layout {
  padding: 0 !important;
  margin: 0 !important;
  height: 100%;
}

.page-runner-content-wrapper .preview-mode-content {
  padding: 0 !important;
}

/* Constrain PreviewMode content within PageRunner */
.page-runner-content .preview-mode-container,
.page-runner-content .grid-view-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Make table responsive and constrain width */
.page-runner-content .ant-table-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  margin: 0 !important;
}

.page-runner-content .ant-table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  margin: 0 !important;
}

.page-runner-content .ant-table-container {
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* Ensure table doesn't break out of container */
.page-runner-content .ant-table-content {
  overflow-x: auto !important;
  max-width: 100% !important;
}

.page-runner-content .ant-table-scroll {
  overflow-x: auto !important;
  max-width: 100% !important;
}

/* Truncate long text in table cells */
.page-runner-content .ant-table-tbody > tr > td {
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: break-word !important;
  position: relative !important;
}

/* Add title attribute for full text on hover */
.page-runner-content .ant-table-tbody > tr > td:hover {
  overflow: visible !important;
  white-space: normal !important;
  z-index: 999 !important;
  background: var(--card-bg) !important;
  box-shadow: var(--card-shadow) !important;
  border-radius: 4px !important;
  padding: 8px !important;
}

/* Specific column width constraints */
.page-runner-content .ant-table-thead > tr > th {
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Specific widths for different column types */
.page-runner-content .ant-table-thead > tr > th:nth-child(1) {
  max-width: 80px !important; /* Selection column or short names */
}

.page-runner-content .ant-table-thead > tr > th:nth-child(2) {
  max-width: 120px !important; /* First name */
}

.page-runner-content .ant-table-thead > tr > th:nth-child(3) {
  max-width: 120px !important; /* Last name */
}

.page-runner-content .ant-table-thead > tr > th:nth-child(4) {
  max-width: 200px !important; /* Login name - can be longer */
}

.page-runner-content .ant-table-thead > tr > th:nth-child(5) {
  max-width: 180px !important; /* System identifier */
}

/* Apply same width constraints to table body cells */
.page-runner-content .ant-table-tbody > tr > td:nth-child(1) {
  max-width: 80px !important;
}

.page-runner-content .ant-table-tbody > tr > td:nth-child(2) {
  max-width: 120px !important;
}

.page-runner-content .ant-table-tbody > tr > td:nth-child(3) {
  max-width: 120px !important;
}

.page-runner-content .ant-table-tbody > tr > td:nth-child(4) {
  max-width: 200px !important;
}

.page-runner-content .ant-table-tbody > tr > td:nth-child(5) {
  max-width: 180px !important;
}

/* Make grid cards smaller and more responsive */
.page-runner-content .grid-view-cards {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
}

/* Constrain card content */
.page-runner-content .grid-view-card {
  max-width: 100% !important;
  word-wrap: break-word !important;
}

.page-runner-content .grid-view-card .ant-card-body {
  padding: 12px !important;
}

/* Truncate text in card content */
.page-runner-content .grid-view-card .ant-space-item {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Ensure preview mode layout fits container */
.page-runner-content .preview-mode-layout {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Ensure PreviewMode content area uses transparent background */
.page-runner-content div[style*="background: var(--main-bg)"] {
  background: transparent !important;
  min-height: auto !important;
}

/* Ensure all content is visible and accessible */
.page-runner-content * {
  visibility: visible !important;
  opacity: 1 !important;
}

.page-runner-content .ant-tabs,
.page-runner-content .ant-tabs-content,
.page-runner-content .ant-table,
.page-runner-content .ant-table-wrapper,
.page-runner-content .grid-view-container {
  display: block !important;
}

/* Glass card styling overrides */
.glass-card {
  background: var(--card-bg) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  color: var(--main-text) !important;
}

.glass-card h1,
.glass-card h2,
.glass-card h3,
.glass-card h4,
.glass-card h5,
.glass-card h6 {
  color: var(--main-text) !important;
}

.glass-card p {
  color: var(--main-text) !important;
}

/* Tile card overrides */
.tile-card-dark {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--main-text) !important;
}
/* src/theme/tokens.css */
:root {
  --color-bg: #0E0E10;
  --color-primary: #6C4CFF;
  --color-secondary: #B326FF;
  --color-accent: #00E7F6;
  --color-success: #B6FF3C;
  --color-warning: #FFC266;
  --color-surface: rgba(255,255,255,0.06);
  --color-gray-700: #44464A;
  --on-bg: #EDEDED;
  --on-primary: #FFFFFF;
  --on-secondary: #FFFFFF;
  --on-accent: #002628;
  --on-surface: #FFFFFF;
  --void-black: var(--color-bg);
  --quantum-violet: var(--color-primary);
  --ultraviolet-magenta: var(--color-secondary);
  --pulse-cyan: var(--color-accent);
  --ion-lime: var(--color-success);
  --signal-amber: var(--color-warning);
  --glass-frost: var(--color-surface);
}
:root {
  --ease-snap: cubic-bezier(.4,0,.2,1);
  --ease-glide: cubic-bezier(.25,.8,.25,1);
  --dur-fast: 150ms;
  --dur-medium: 300ms;
  --dur-slow: 600ms;
  --spacing-1: 8px;
  --radius-sm: 4px;
  --radius-card: 8px;
  --radius-modal: 12px;
}
:root {
  --deep-space-blue: #0B1C3D;
}
:where(:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  transition: outline-offset var(--dur-fast) var(--ease-snap);
}

/* src/style/Navigation.css */
.glass-header {
  background: rgba(11, 28, 61, 0.8) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 231, 246, 0.2);
  padding: 0;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 40px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  color: white;
}
.logo-icon {
  font-size: 28px;
}
.logo img {
  height: 32px;
  vertical-align: middle;
}
.logo-text {
  margin-left: 12px;
  font-size: 22px;
  font-weight: 500;
  color: var(--pulse-cyan);
  white-space: nowrap;
}
.main-menu {
  background: transparent !important;
  border: none;
}
.main-menu .ant-menu-item {
  color: rgba(255, 255, 255, 0.8);
}
.main-menu .ant-menu-item:hover {
  color: #00E7F6 !important;
}
.main-menu .ant-menu-item-selected {
  color: #00E7F6 !important;
  background: rgba(0, 231, 246, 0.1) !important;
}
.user-button {
  color: white;
}
.user-button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.user-avatar {
  background:
    linear-gradient(
      135deg,
      #6C4CFF 0%,
      #B326FF 100%);
}
.user-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* src/style/SideNav.css */
.emp-side-nav {
  transition: width 0.2s ease;
}

/* src/style/GlassCard.css */
.emp-glass-card {
  background: rgba(11, 28, 61, 0.85);
  border: 1px solid rgba(0, 231, 246, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  padding: 24px;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.emp-glass-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background:
    linear-gradient(
      to right,
      transparent,
      rgba(0, 231, 246, 0.8),
      transparent);
  z-index: 1;
}
.emp-glass-card.light-theme {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.emp-glass-card.light-theme::before {
  background:
    linear-gradient(
      to right,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
}
.emp-glass-card.deep-theme {
  background: rgba(11, 28, 61, 0.85);
  border: 1px solid rgba(0, 231, 246, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.emp-tile-card.glass-card {
}
.emp-glass-card.fixed-height {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  max-height: 300px;
  overflow: hidden;
}
.emp-glass-card.fixed-height .content-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.emp-glass-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  border-color: rgba(0, 231, 246, 0.5);
}
.emp-glass-card .emp-truncated-text {
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 768px) {
  .emp-glass-card {
    padding: 16px;
    border-radius: 8px;
  }
  .emp-glass-card.fixed-height {
    min-height: 150px;
    max-height: 250px;
  }
}

/* src/style/EmptyState.css */
.emp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 32px 16px;
  background: #f6f8fa;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  color: #222;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.emp-empty-icon {
  font-size: 48px;
  color: #38bdf8;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emp-empty-state h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #181f2a;
}
.emp-empty-state p {
  color: #555;
  margin: 0 0 12px 0;
  font-size: 1rem;
}
.emp-empty-state .ant-btn {
  margin-top: 12px;
}

/* src/style/SearchBar.css */
.emp-search-bar {
  background: rgba(11, 28, 61, 0.85);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 231, 246, 0.3);
  padding: 16px;
  border-radius: 12px;
}
.emp-search-row {
  display: flex;
  gap: 8px;
}
.emp-adv-container {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}
.emp-adv-field label {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.85);
}

/* src/style/DataGrid.css */
.emp-dg-table .ant-table {
  background: rgba(11, 28, 61, 0.85);
}
.emp-dg-table .ant-table-thead > tr > th {
  background: rgba(11, 28, 61, 0.95) !important;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(0, 231, 246, 0.2);
}
.emp-dg-table .ant-table-tbody > tr > td {
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.emp-dg-table .ant-table-tbody > tr:hover > td {
  background: rgba(139, 92, 246, 0.06) !important;
}
.emp-dg-table .ant-pagination .ant-pagination-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}
.emp-dg-table .ant-pagination .ant-pagination-item-active {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.6);
}
.emp-dg-table .ant-table-row-selected > td {
  background: rgba(139, 92, 246, 0.12) !important;
}
.emp-dg-table .ant-table-thead .ant-table-column-sorters {
  padding-inline: 12px !important;
}
.emp-dg-table .ant-table-thead .ant-table-column-sorter {
  color: rgba(255, 255, 255, 0.8);
}

/* src/style/SearchBarPro.css */
.emp-sbp-advanced {
  background: rgba(24, 34, 62, 0.7);
  border: 1px solid rgba(0, 231, 246, 0.15);
  border-radius: 8px;
  padding: 12px;
}
.emp-sbp-advanced label {
  color: rgba(229, 231, 235, 0.9);
}
.emp-sbp-input input {
  background: rgba(45, 55, 75, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}
.emp-sbp-input {
  background: rgba(45, 55, 75, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  height: auto !important;
  line-height: 1.3 !important;
}
.emp-sbp-toggle {
  background: rgba(55, 65, 81, 0.8) !important;
  border-color: rgba(75, 85, 99, 0.8) !important;
  color: #9CA3AF !important;
}
.emp-sbp-search-btn {
  background: #8B5CF6 !important;
  border-color: #8B5CF6 !important;
}
.emp-sbp-card {
  background: transparent !important;
  border: none !important;
}

/* src/style/DotsLoader.css */
.emp-dots-loader {
  display: inline-block;
}
.emp-dots-loader span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 2px;
  background: var(--pulse-cyan);
  border-radius: 50%;
  animation: emp-dots 1s infinite ease-in-out both;
}
.emp-dots-loader span:nth-child(2) {
  animation-delay: 0.2s;
}
.emp-dots-loader span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes emp-dots {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
/* Global styles with theme support */

/* Blue Theme (NeonFlux) - Default - Magnum Edition! */
:root[data-theme="blue"],
html[data-theme="blue"],
[data-theme="blue"] {
  /* Core brand palette - Cyberpunk color story */
  --void-black: #050810;
  --quantum-violet: #6C4CFF;
  --ultraviolet-magenta: #B326FF;
  --pulse-cyan: #00E7F6;
  --ion-lime: #B6FF3C;
  --signal-amber: #FFC266;
  --glass-frost: rgba(255, 255, 255, 0.04);
  --deep-space-blue: #0B1C3D;
  --nebula-purple: rgba(108, 76, 255, 0.15);

  /* Main backgrounds - Gradient for depth! */
  --main-bg: linear-gradient(180deg, #050810 0%, #0a1628 40%, #0d1a35 70%, #120f2d 100%);
  --main-bg-solid: #0a1628;
  --main-bg-elevated: #0f2847;
  
  /* Accent colors - Cyan primary + Purple secondary */
  --main-accent: #00E7F6;
  --main-accent-secondary: #B326FF;
  
  /* Typography */
  --main-text: #ffffff;
  --main-text-secondary: #94a3b8;
  --main-text-tertiary: #64748b;
  
  /* Gradient text for headlines */
  --gradient-text-primary: linear-gradient(135deg, #00E7F6 0%, #B326FF 100%);
  --gradient-text-hero: linear-gradient(135deg, #00E7F6 0%, #6C4CFF 50%, #B326FF 100%);
  
  /* Cards - Glassmorphism */
  --card-bg: linear-gradient(135deg, rgba(15, 40, 71, 0.8) 0%, rgba(10, 22, 40, 0.9) 100%);
  --card-border: rgba(0, 231, 246, 0.15);
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 231, 246, 0.3);
  --card-radius: 16px;
  --card-hover-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 231, 246, 0.15);
  
  /* Header - Very dark, distinct from content */
  --header-bg: #050810;
  --header-text: #ffffff;
  --header-border-bottom: 1px solid rgba(0, 231, 246, 0.2);
  --header-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  --header-backdrop-filter: none;  /* Blue Steel: Dark themes use solid color, no blur */
  
  /* Footer - Fallback to header style if theme doesn't define footer vars */
  /* Note: Themes should define their own footer-bg, footer-text, etc. */
  --footer-bg: var(--header-bg);
  --footer-text: var(--header-text);
  --footer-border-top: 1px solid var(--border-color);
  --footer-link-color: #00E7F6;
  --footer-glow: radial-gradient(ellipse at center bottom, rgba(108, 76, 255, 0.15) 0%, transparent 70%);
  
  /* Ambient Atmosphere - Premium SaaS depth (cyan + purple interplay!) */
  --ambient-glow: radial-gradient(ellipse at 50% -20%, rgba(0, 231, 246, 0.12) 0%, rgba(108, 76, 255, 0.06) 30%, transparent 70%);
  
  /* Modals */
  --modal-bg: linear-gradient(135deg, rgba(15, 40, 71, 0.95) 0%, rgba(5, 10, 18, 0.98) 100%);
  --modal-border: rgba(0, 231, 246, 0.25);
  --modal-title: #ffffff;
  --modal-body-text: #cbd5e1;
  --modal-overlay: rgba(5, 10, 18, 0.85);
  
  /* Inputs */
  --input-bg: rgba(10, 22, 40, 0.6);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-text: #ffffff;
  --input-focus-border: #00E7F6;
  --input-focus-ring: 0 0 0 3px rgba(0, 231, 246, 0.2);
  
  /* Buttons */
  --button-bg: #00E7F6;
  --button-text: #050810;
  --button-hover-bg: #00fff7;
  --button-shadow: 0 4px 16px rgba(0, 231, 246, 0.3);
  
  /* Links */
  --link-color: #00E7F6;
  --link-hover-color: #00fff7;
  
  /* Borders */
  --border-color: rgba(255, 255, 255, 0.08);
  --divider-color: rgba(255, 255, 255, 0.06);
}

/* White Theme (Clean light like PayloadCMS) */
:root[data-theme="white"],
html[data-theme="white"],
[data-theme="white"] {
  /* Core colors */
  --void-black: #000000;
  --quantum-violet: #3b82f6;
  --ultraviolet-magenta: #8b5cf6;
  --pulse-cyan: #3b82f6;
  --ion-lime: #10b981;
  --signal-amber: #f59e0b;
  --glass-frost: rgba(0, 0, 0, 0.02);
  --deep-space-blue: #ffffff;

  /* Theme variables */
  --main-bg: #f9fafb;
  --main-bg-elevated: #ffffff;
  --main-accent: #3b82f6;
  --main-text: #111827;
  --main-text-secondary: #6b7280;
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
  --card-radius: 8px;
  --header-bg: #ffffff;
  --header-text: #111827;
  --header-backdrop-filter: saturate(1.1) blur(6px);  /* Blue Steel: Light themes use glassmorphism */
  --modal-bg: #ffffff;
  --modal-border: #e5e7eb;
  --modal-title: #111827;
  --modal-body-text: #6b7280;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-text: #111827;
  --button-bg: #3b82f6;
  --button-text: #ffffff;
  --button-hover-bg: #2563eb;
  --link-color: #3b82f6;
  --border-color: #e5e7eb;
  --divider-color: #f3f4f6;
  
  /* Light theme - no ambient glow needed */
  --ambient-glow: transparent;
  --footer-glow: transparent;
}

/* Black Theme (Modern dark like PayloadCMS) */
:root[data-theme="black"],
html[data-theme="black"],
[data-theme="black"] {
  /* Core colors */
  --void-black: #000000;
  --quantum-violet: #3b82f6;
  --ultraviolet-magenta: #8b5cf6;
  --pulse-cyan: #3b82f6;
  --ion-lime: #10b981;
  --signal-amber: #f59e0b;
  --glass-frost: rgba(255, 255, 255, 0.03);
  --deep-space-blue: #1a1a1a;

  /* Theme variables */
  --main-bg: #1a1a1a;
  --main-bg-elevated: #242424;
  --main-accent: #3b82f6;
  --main-text: #ffffff;
  --main-text-secondary: #a1a1aa;
  --card-bg: #242424;
  --card-border: #333333;
  --card-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px 0 rgba(0,0,0,0.3);
  --card-radius: 8px;
  --header-bg: #1f1f1f;
  --header-text: #ffffff;
  --modal-bg: #242424;
  --modal-border: #333333;
  --modal-title: #ffffff;
  --modal-body-text: #a1a1aa;
  --input-bg: #2a2a2a;
  --input-border: #404040;
  --input-text: #ffffff;
  --button-bg: #3b82f6;
  --button-text: #ffffff;
  --button-hover-bg: #2563eb;
  --link-color: #60a5fa;
  --border-color: #333333;
  --divider-color: #2a2a2a;
  
  /* Subtle ambient glow for dark theme */
  --ambient-glow: radial-gradient(ellipse at 50% -20%, rgba(59, 130, 246, 0.06) 0%, transparent 60%);
  --footer-glow: transparent;
}

/* Default to blue theme (NeonFlux Magnum) if no data-theme attribute */
:root {
  /* Core brand palette */
  --void-black: #050810;
  --quantum-violet: #6C4CFF;
  --ultraviolet-magenta: #B326FF;
  --pulse-cyan: #00E7F6;
  --ion-lime: #B6FF3C;
  --signal-amber: #FFC266;
  --glass-frost: rgba(255, 255, 255, 0.04);
  --deep-space-blue: #0B1C3D;
  --nebula-purple: rgba(108, 76, 255, 0.15);
  
  /* Main backgrounds */
  --main-bg: linear-gradient(180deg, #050810 0%, #0a1628 40%, #0d1a35 70%, #120f2d 100%);
  --main-bg-solid: #0a1628;
  --main-bg-elevated: #0f2847;
  --main-accent: #00E7F6;
  --main-accent-secondary: #B326FF;
  --main-text: #ffffff;
  --main-text-secondary: #94a3b8;
  --main-text-tertiary: #64748b;
  
  /* Gradient text */
  --gradient-text-primary: linear-gradient(135deg, #00E7F6 0%, #B326FF 100%);
  --gradient-text-hero: linear-gradient(135deg, #00E7F6 0%, #6C4CFF 50%, #B326FF 100%);
  
  /* Cards */
  --card-bg: linear-gradient(135deg, rgba(15, 40, 71, 0.8) 0%, rgba(10, 22, 40, 0.9) 100%);
  --card-border: rgba(0, 231, 246, 0.15);
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 231, 246, 0.3);
  --card-radius: 16px;
  
  /* Header - Very dark */
  --header-bg: #050810;
  --header-text: #ffffff;
  
  /* Footer - Purple atmospheric */
  --footer-bg: linear-gradient(180deg, #0a1628 0%, #120f2d 50%, #1a0f2e 100%);
  --footer-text: #94a3b8;
  --footer-border-top: 1px solid rgba(108, 76, 255, 0.2);
  --footer-link-color: #00E7F6;
  --footer-glow: radial-gradient(ellipse at center bottom, rgba(108, 76, 255, 0.15) 0%, transparent 70%);
  
  /* Ambient Atmosphere - Premium SaaS depth */
  --ambient-glow: radial-gradient(ellipse at 50% -20%, rgba(0, 231, 246, 0.12) 0%, rgba(108, 76, 255, 0.06) 30%, transparent 70%);
  
  /* Modals */
  --modal-bg: linear-gradient(135deg, rgba(15, 40, 71, 0.95) 0%, rgba(5, 10, 18, 0.98) 100%);
  --modal-border: rgba(0, 231, 246, 0.25);
  --modal-title: #ffffff;
  --modal-body-text: #cbd5e1;
  
  /* Inputs */
  --input-bg: rgba(10, 22, 40, 0.6);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-text: #ffffff;
  
  /* Buttons */
  --button-bg: #00E7F6;
  --button-text: #050810;
  --button-hover-bg: #00fff7;
  
  /* Links */
  --link-color: #00E7F6;
  --link-hover-color: #00fff7;
  
  /* Borders */
  --border-color: rgba(255, 255, 255, 0.08);
  --divider-color: rgba(255, 255, 255, 0.06);
}

html, body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--main-bg) !important;
  color: var(--main-text) !important;
  overflow-y: auto;
  overflow-x: hidden;
}

#root {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--main-bg);
}

/* Glass card styles - theme-aware */
.glass-card {
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-border);
  transition: border .2s ease, box-shadow .2s ease;
  padding: 16px;
}

[data-theme="blue"] .glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--main-accent), transparent);
  z-index: 10;
  pointer-events: none;
}

.glass-card:hover {
  border-color: var(--main-accent);
  box-shadow: var(--card-shadow);
}

[data-theme="blue"] .glass-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}

[data-theme="white"] .glass-card:hover {
  box-shadow: 0 1px 3px 0 rgba(60,64,67,0.4), 0 4px 8px 3px rgba(60,64,67,0.2);
}

[data-theme="black"] .glass-card:hover {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.8), 0 4px 12px 4px rgba(0,0,0,0.4);
}

/* Base glass-card styles that work with @empowernow/ui */
.emp-glass-card {
  background: var(--card-bg) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--card-border) !important;
  transition: border .2s ease, box-shadow .2s ease !important;
}

[data-theme="blue"] .emp-glass-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--pulse-cyan), var(--ultraviolet-magenta)) !important;
  z-index: 3 !important;
  border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
  pointer-events: none !important;
}

.emp-glass-card:hover {
  border-color: var(--main-accent) !important;
}

[data-theme="blue"] .emp-glass-card:hover {
  box-shadow: 0 6px 24px rgba(0, 231, 246, 0.2) !important;
}

[data-theme="white"] .emp-glass-card:hover {
  box-shadow: 0 1px 3px 0 rgba(60,64,67,0.4), 0 4px 8px 3px rgba(60,64,67,0.2) !important;
}

[data-theme="black"] .emp-glass-card:hover {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.8), 0 4px 12px 4px rgba(0,0,0,0.4) !important;
}

/* Ensure headings use proper colors */
h1, h2, h3, h4, h5, h6 {
  color: var(--main-text, #fff);
}

/* 🎯 WCAG: Page title color - use dedicated variable or fallback to main-text
 * Plugins should use --page-title-color for page headers
 * This ensures proper contrast on both light and dark themes */
:root {
  --page-title-color: var(--main-text);
  --section-title-color: var(--main-text);
}

/* Override gradient text to use page-title-color on light backgrounds if not explicitly set */
[data-theme] .page-title,
[data-theme] .section-title,
[data-theme] [class*="page-header"] h1,
[data-theme] [class*="page-header"] h2 {
  color: var(--page-title-color, var(--main-text)) !important;
}

/* Make sure any links are properly styled */
a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Header styles matching Visual Designer */
.glass-header {
  background: var(--header-bg) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); /* Safari support */
  border-bottom: 1px solid var(--card-border);
  padding: 0;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  overflow: hidden;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  min-width: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  max-width: 350px;
  overflow: hidden;
}

.logo img {
  height: 32px;
  vertical-align: middle;
  flex-shrink: 0;
}

.logo-text {
  margin-left: 12px;
  font-size: 22px;
  font-weight: 500;
  color: var(--pulse-cyan) !important;
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: ellipsis;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Global header overflow fixes */
* {
  box-sizing: border-box;
}

/* Ensure all header content respects container bounds */
header, nav {
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Fix for HeaderNav logo text visibility - targeted only to Experience text */

/* Targeted text visibility rules for Experience text only */

/* Ensure logo container shows its text */
:global(.logo),
:global(.nav-brand),
:global(.header-brand),
a[href="/"] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: white !important;
}

/* Only target the brand/logo text specifically */
a[href="/"] span {
  color: var(--pulse-cyan, #00E7F6) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  margin-left: 8px !important;
}

/* Hide only duplicate separators, not the user header */
.ant-dropdown-menu-item-divider + .ant-dropdown-menu-item-divider {
  display: none !important;
}

/* Hide extra empty menu items but preserve the user header */
.ant-dropdown-menu .ant-dropdown-menu-item:empty {
  display: none !important;
}

/* Force theme colors on all elements */
[data-theme] * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Main layout and body */
[data-theme] body,
[data-theme] #root,
[data-theme] .ant-layout,
[data-theme] .emp-theme-provider,
[data-theme] .emp-app {
  background: var(--main-bg);  /* Let theme control background */
  color: var(--main-text);     /* Let theme control text color */
}

/* Headers and footers - FORCE white text on headers! */
[data-theme] .glass-header,
[data-theme] header,
[data-theme] .ant-layout-header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--header-text, #ffffff) !important;
}

/* All text IN header must be white for contrast */
[data-theme] .glass-header *,
[data-theme] header *,
[data-theme] .ant-layout-header * {
  color: var(--header-text, #ffffff) !important;
}

/* Navigation links in header */
[data-theme] header a,
[data-theme] header nav a {
  color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme] header a:hover,
[data-theme] header nav a:hover {
  color: #ffffff !important;
}

/* Footer - Now independently themeable with fallbacks! */
[data-theme] .app-footer,
[data-theme] footer,
[data-theme] .ant-layout-footer {
  background: var(--footer-bg, var(--header-bg)) !important;
  border-top: var(--footer-border-top, 1px solid var(--border-color)) !important;
  color: var(--footer-text, var(--header-text, #ffffff)) !important;
}

/* Footer text uses footer-text variable with fallback */
[data-theme] .app-footer *,
[data-theme] footer *,
[data-theme] .ant-layout-footer * {
  color: var(--footer-text, var(--header-text, #ffffff)) !important;
}

/* Footer links get their own color */
[data-theme] .app-footer a,
[data-theme] footer a {
  color: var(--footer-link-color, var(--link-color)) !important;
}

/* Cards */
[data-theme] .glass-card,
[data-theme] .emp-glass-card,
[data-theme] .ant-card,
[data-theme] .emp-card,
[data-theme] .card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--main-text) !important;
}

[data-theme] .glass-card *,
[data-theme] .emp-glass-card *,
[data-theme] .ant-card *,
[data-theme] .emp-card * {
  color: var(--main-text) !important;
}

/* Form inputs and fields */
[data-theme] input,
[data-theme] textarea,
[data-theme] select,
[data-theme] .ant-input,
[data-theme] .ant-input-affix-wrapper,
[data-theme] .ant-select-selector,
[data-theme] .ant-picker,
[data-theme] .ant-input-number,
[data-theme] .ant-input-textarea {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

[data-theme] input::placeholder,
[data-theme] textarea::placeholder,
[data-theme] .ant-input::placeholder {
  color: var(--main-text-secondary) !important;
  opacity: 0.7;
}

/* Buttons */
[data-theme] .ant-btn-primary,
[data-theme] .emp-button-primary {
  background: var(--button-bg) !important;
  border-color: var(--button-bg) !important;
  color: var(--button-text) !important;
}

[data-theme] .ant-btn-primary:hover {
  background: var(--button-hover-bg) !important;
  border-color: var(--button-hover-bg) !important;
}

[data-theme] .ant-btn-default,
[data-theme] .ant-btn {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--main-text) !important;
}

/* Links */
[data-theme] a {
  color: var(--link-color) !important;
}

/* Tables */
[data-theme] .ant-table {
  background: transparent !important;
  color: var(--main-text) !important;
}

[data-theme] .ant-table-thead > tr > th {
  background: var(--table-header-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--main-text) !important;
}

[data-theme] .ant-table-tbody > tr > td {
  border-bottom: 1px solid var(--divider-color) !important;
  color: var(--main-text) !important;
}

[data-theme] .ant-table-tbody > tr:hover > td {
  background: var(--table-row-hover) !important;
}

/* Text elements - use theme text color */
[data-theme] h1,
[data-theme] h2,
[data-theme] h3,
[data-theme] h4,
[data-theme] h5,
[data-theme] h6,
[data-theme] p,
[data-theme] span:not(.ant-tag):not(.ant-badge),
[data-theme] div:not(.ant-message):not(.ant-notification),
[data-theme] label {
  color: var(--main-text);  /* Removed !important to allow inline styles */
}

/* Secondary text */
[data-theme] .text-secondary,
[data-theme] .ant-form-item-extra,
[data-theme] .ant-input-suffix,
[data-theme] .description {
  color: var(--main-text-secondary) !important;
}

/* Dividers and borders */
[data-theme] .ant-divider {
  border-color: var(--divider-color) !important;
}

[data-theme] hr {
  border-color: var(--divider-color) !important;
}

/* Modals */
[data-theme] .ant-modal-content {
  background: var(--modal-bg) !important;
  color: var(--main-text) !important;
}

[data-theme] .ant-modal-header {
  background: var(--modal-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

[data-theme] .ant-modal-title {
  color: var(--modal-title) !important;
}

/* Dropdowns */
[data-theme] .ant-dropdown-menu,
[data-theme] .ant-select-dropdown {
  background: var(--dropdown-bg) !important;
  border: 1px solid var(--dropdown-border) !important;
  z-index: 2000 !important;
}

[data-theme] .ant-dropdown-menu-item,
[data-theme] .ant-select-item {
  color: var(--main-text) !important;
}

[data-theme] .ant-dropdown-menu-item:hover,
[data-theme] .ant-select-item-option-active {
  background: var(--table-row-hover) !important;
}

/* Z-index hierarchy for overlays */
[data-theme] .ant-modal-mask,
[data-theme] .ant-modal-wrap {
  z-index: 5000 !important;
}

[data-theme] .ant-popover,
[data-theme] .ant-tooltip {
  z-index: 8000 !important;
}

/* Message notifications */
[data-theme] .ant-message {
  z-index: 9000 !important;
}

[data-theme] .ant-message-notice {
  padding: 10px 16px !important;
}

[data-theme] .ant-message-notice-content {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

[data-theme] .ant-message-success .anticon {
  color: var(--success-color) !important;
}

[data-theme] .ant-message-error .anticon {
  color: var(--error-color) !important;
}

[data-theme] .ant-message-warning .anticon {
  color: var(--warning-color) !important;
}

[data-theme] .ant-message-info .anticon {
  color: var(--info-color) !important;
}

[data-theme] .ant-message-success .ant-message-custom-content,
[data-theme] .ant-message-error .ant-message-custom-content,
[data-theme] .ant-message-warning .ant-message-custom-content,
[data-theme] .ant-message-info .ant-message-custom-content,
[data-theme] .ant-message-loading .ant-message-custom-content {
  color: var(--main-text) !important;
}

/* Theme-aware input styles */
input, textarea, select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
  border-radius: 6px;
  padding: 8px 12px;
  transition: all 0.2s ease;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--main-accent);
  box-shadow: 0 0 0 2px rgba(var(--main-accent), 0.2);
}

/* Theme-aware button styles */
button {
  background: var(--button-bg);
  color: var(--button-text);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

button:hover {
  background: var(--button-hover-bg);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Table styles */
table {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
}

th {
  background: var(--main-bg-elevated);
  color: var(--main-text);
  border-bottom: 1px solid var(--border-color);
}

td {
  border-bottom: 1px solid var(--divider-color);
  color: var(--main-text);
}

/* Scrollbar styling for all themes */
[data-theme="blue"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="blue"] ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="blue"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 231, 246, 0.3);
  border-radius: 4px;
}

[data-theme="blue"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 231, 246, 0.5);
}

[data-theme="white"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="white"] ::-webkit-scrollbar-track {
  background: #f1f3f4;
}

[data-theme="white"] ::-webkit-scrollbar-thumb {
  background: #dadce0;
  border-radius: 4px;
}

[data-theme="white"] ::-webkit-scrollbar-thumb:hover {
  background: #bdc1c6;
}

[data-theme="black"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="black"] ::-webkit-scrollbar-track {
  background: #3c4043;
}

[data-theme="black"] ::-webkit-scrollbar-thumb {
  background: #5f6368;
  border-radius: 4px;
}

[data-theme="black"] ::-webkit-scrollbar-thumb:hover {
  background: #80868b;
}/* Extended theme variables for all themes */

/* Blue Theme (NeonFlux) - Extended variables */
:root[data-theme="blue"],
html[data-theme="blue"],
[data-theme="blue"] {
  --error-color: #dc3545;
  --error-bg: rgba(220, 53, 69, 0.1);
  --error-border: rgba(220, 53, 69, 0.3);
  --success-color: #28a745;
  --success-bg: rgba(40, 167, 69, 0.1);
  --warning-color: #ffc107;
  --warning-bg: rgba(255, 193, 7, 0.1);
  --info-color: #17a2b8;
  --info-bg: rgba(23, 162, 184, 0.1);
  --disabled-bg: rgba(255, 255, 255, 0.05);
  --disabled-text: rgba(255, 255, 255, 0.5);
  --table-header-bg: rgba(11, 28, 61, 0.8);
  --table-row-bg: rgba(11, 28, 61, 0.3);
  --table-row-hover: rgba(11, 28, 61, 0.4);
  --table-row-selected: rgba(108, 76, 255, 0.4);
  --table-row-selected-hover: rgba(108, 76, 255, 0.5);
  --checkbox-bg: #0B1C3D;
  --checkbox-border: rgba(255, 255, 255, 0.3);
  --checkbox-checked-bg: #6c4cff;
  --radio-bg: #0B1C3D;
  --radio-border: rgba(255, 255, 255, 0.3);
  --radio-checked-bg: #6c4cff;
  --search-bg: rgba(255, 255, 255, 0.1);
  --search-border: rgba(255, 255, 255, 0.2);
  --search-text: rgba(255, 255, 255, 0.7);
  --dropdown-bg: rgba(45, 55, 75, 0.8);
  --dropdown-border: rgba(255, 255, 255, 0.2);
  --tag-bg: rgba(45, 55, 75, 0.3);
  --tag-border: rgba(255, 255, 255, 0.1);
  --icon-color: rgba(255, 255, 255, 0.6);
  --icon-active: #1890ff;
  --preview-bg: rgba(45, 55, 75, 0.4);
  --modal-overlay: rgba(0, 0, 0, 0.3);
  --selected-bg: #8b5cf6;
  --selected-text: var(--main-text);
}

/* White Theme (Google-like clean) - Extended variables */
:root[data-theme="white"],
html[data-theme="white"],
[data-theme="white"] {
  --error-color: #d93025;
  --error-bg: #fce8e6;
  --error-border: #d93025;
  --success-color: #1e8e3e;
  --success-bg: #e6f4ea;
  --warning-color: #f9ab00;
  --warning-bg: #fef7e0;
  --info-color: #1a73e8;
  --info-bg: #e8f0fe;
  --disabled-bg: #f1f3f4;
  --disabled-text: #80868b;
  --table-header-bg: #f8f9fa;
  --table-row-bg: #ffffff;
  --table-row-hover: #f8f9fa;
  --table-row-selected: #e8f0fe;
  --table-row-selected-hover: #d2e3fc;
  --checkbox-bg: #ffffff;
  --checkbox-border: #dadce0;
  --checkbox-checked-bg: #1a73e8;
  --radio-bg: #ffffff;
  --radio-border: #dadce0;
  --radio-checked-bg: #1a73e8;
  --search-bg: #f8f9fa;
  --search-border: #dadce0;
  --search-text: #5f6368;
  --dropdown-bg: #ffffff;
  --dropdown-border: #dadce0;
  --tag-bg: #f8f9fa;
  --tag-border: #e0e0e0;
  --icon-color: #5f6368;
  --icon-active: #1a73e8;
  --preview-bg: #f8f9fa;
  --modal-overlay: rgba(0, 0, 0, 0.3);
  --selected-bg: #1a73e8;
  --selected-text: #ffffff;
}

/* Black Theme (Modern dark like PayloadCMS) - Extended variables */
:root[data-theme="black"],
html[data-theme="black"],
[data-theme="black"] {
  --error-color: #ef4444;
  --error-bg: rgba(239, 68, 68, 0.1);
  --error-border: #dc2626;
  --success-color: #10b981;
  --success-bg: rgba(16, 185, 129, 0.1);
  --warning-color: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --info-color: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.1);
  --disabled-bg: #2a2a2a;
  --disabled-text: #71717a;
  --table-header-bg: #1f1f1f;
  --table-row-bg: #242424;
  --table-row-hover: #2a2a2a;
  --table-row-selected: rgba(59, 130, 246, 0.2);
  --table-row-selected-hover: rgba(59, 130, 246, 0.3);
  --checkbox-bg: #2a2a2a;
  --checkbox-border: #404040;
  --checkbox-checked-bg: #3b82f6;
  --radio-bg: #2a2a2a;
  --radio-border: #404040;
  --radio-checked-bg: #3b82f6;
  --search-bg: #2a2a2a;
  --search-border: #404040;
  --search-text: #a1a1aa;
  --dropdown-bg: #242424;
  --dropdown-border: #404040;
  --tag-bg: #2a2a2a;
  --tag-border: #404040;
  --icon-color: #a1a1aa;
  --icon-active: #3b82f6;
  --preview-bg: #2a2a2a;
  --modal-overlay: rgba(0, 0, 0, 0.7);
  --selected-bg: #3b82f6;
  --selected-text: #ffffff;
}

/* Default to blue theme variables if no data-theme attribute */
:root {
  --error-color: #dc3545;
  --error-bg: rgba(220, 53, 69, 0.1);
  --error-border: rgba(220, 53, 69, 0.3);
  --success-color: #28a745;
  --success-bg: rgba(40, 167, 69, 0.1);
  --warning-color: #ffc107;
  --warning-bg: rgba(255, 193, 7, 0.1);
  --info-color: #17a2b8;
  --info-bg: rgba(23, 162, 184, 0.1);
  --disabled-bg: rgba(255, 255, 255, 0.05);
  --disabled-text: rgba(255, 255, 255, 0.5);
  --table-header-bg: rgba(11, 28, 61, 0.8);
  --table-row-bg: rgba(11, 28, 61, 0.3);
  --table-row-hover: rgba(11, 28, 61, 0.4);
  --table-row-selected: rgba(108, 76, 255, 0.4);
  --table-row-selected-hover: rgba(108, 76, 255, 0.5);
  --checkbox-bg: #0B1C3D;
  --checkbox-border: rgba(255, 255, 255, 0.3);
  --checkbox-checked-bg: #6c4cff;
  --radio-bg: #0B1C3D;
  --radio-border: rgba(255, 255, 255, 0.3);
  --radio-checked-bg: #6c4cff;
  --search-bg: rgba(255, 255, 255, 0.1);
  --search-border: rgba(255, 255, 255, 0.2);
  --search-text: rgba(255, 255, 255, 0.7);
  --dropdown-bg: rgba(45, 55, 75, 0.8);
  --dropdown-border: rgba(255, 255, 255, 0.2);
  --tag-bg: rgba(45, 55, 75, 0.3);
  --tag-border: rgba(255, 255, 255, 0.1);
  --icon-color: rgba(255, 255, 255, 0.6);
  --icon-active: #1890ff;
  --preview-bg: rgba(45, 55, 75, 0.4);
  --modal-overlay: rgba(0, 0, 0, 0.3);
  --selected-bg: #8b5cf6;
  --selected-text: var(--main-text);
}
/* Shadow variables for all themes */
:root[data-theme="blue"],
html[data-theme="blue"],
[data-theme="blue"] {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-card-selected: 0 0 20px rgba(0, 231, 246, 0.5);
}

:root[data-theme="white"],
html[data-theme="white"],
[data-theme="white"] {
  --shadow-sm: 0 1px 2px 0 rgba(60, 64, 67, 0.3);
  --shadow-md: 0 1px 3px 0 rgba(60, 64, 67, 0.4), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  --shadow-lg: 0 1px 3px 0 rgba(60, 64, 67, 0.4), 0 4px 8px 3px rgba(60, 64, 67, 0.2);
  --shadow-xl: 0 2px 4px 0 rgba(60, 64, 67, 0.3), 0 8px 16px 4px rgba(60, 64, 67, 0.15);
  --shadow-card-selected: 0 0 20px rgba(26, 115, 232, 0.4);
}

:root[data-theme="black"],
html[data-theme="black"],
[data-theme="black"] {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.6), 0 4px 12px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 2px 4px 0 rgba(0, 0, 0, 0.8), 0 4px 12px 4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 8px 24px 8px rgba(0, 0, 0, 0.4);
  --shadow-card-selected: 0 0 20px rgba(138, 180, 248, 0.6);
}

:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-card-selected: 0 0 20px rgba(0, 231, 246, 0.5);
}