/* Premium Admin Dashboard - Carbon Fiber Glassmorphism Theme */
/* Complete redesign based on ADMIN_USERS_LIST_DESIGN.json */

/* ============================================
   CSS Variables & Color System
   ============================================ */
:root {
  /* Carbon Black Background */
  --carbon-base: #000000 !important;
  --carbon-alternate: #0B0F14 !important;
  
  /* Override Tabler variables */
  --tblr-body-bg: #000000 !important;
  --tblr-body-color: #ffffff !important;
  --tblr-border-color: rgba(255, 255, 255, 0.1) !important;
  
  /* Glass Panel Colors */
  --glass-bg: rgba(20, 20, 20, 0.9);
  --glass-bg-bright: rgba(10, 10, 10, 0.5);
  --glass-bg-hover: rgba(58, 190, 255, 0.1);
  
  /* Neon Accent Colors */
  --neon-blue: #3ABEFF;
  --neon-cyan: #4FC3F7;
  --neon-blue-rgb: 58, 190, 255;
  
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.9);
  --text-tertiary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-placeholder: rgba(255, 255, 255, 0.4);
  
  /* Borders */
  --border-glass: rgba(255, 255, 255, 0.1);
  --border-bright: rgba(255, 255, 255, 0.15);
  --border-neon: rgba(58, 190, 255, 0.3);
  --border-neon-bright: rgba(58, 190, 255, 0.4);
  --border-table: rgba(255, 255, 255, 0.05);
  
  /* Shadows & Glows */
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(58, 190, 255, 0.1);
  --shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(58, 190, 255, 0.2);
  --shadow-neon: 0 0 20px rgba(58, 190, 255, 0.3), 0 0 40px rgba(58, 190, 255, 0.1);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --shadow-inset-dark: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  
  /* Tabler Overrides */
  --tblr-body-bg: var(--carbon-base);
  --tblr-body-color: var(--text-primary);
  --tblr-border-color: var(--border-glass);
  --tblr-secondary: var(--neon-blue);
  --tblr-secondary-fg: var(--text-primary);
  --tblr-secondary-rgb: var(--neon-blue-rgb);
}

/* ============================================
   Base Styles - Carbon Fiber Background
   ============================================ */
html,
body {
  background: var(--carbon-base) !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrapper {
  background: var(--carbon-base) !important;
}

/* ============================================
   Sidebar - Glassmorphic Navigation (Left Side)
   ============================================ */
.sidebar,
.sidebar.show {
  background: rgba(11, 15, 20, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-right: 1px solid var(--border-glass) !important;
  border-left: none !important;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3) !important;
  z-index: 10 !important; /* Lower z-index so it doesn't overlay content */
  position: fixed !important;
  left: 0 !important; /* Sidebar on LEFT */
  right: auto !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  width: 260px !important;
}

/* Ensure dropdown submenu items don't get cut off */
.sidebar .nav-item.dropdown ul,
.sidebar-nav .nav-item.dropdown ul {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.sidebar .nav-item.dropdown ul li,
.sidebar-nav .nav-item.dropdown ul li {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.sidebar .nav-item.dropdown ul li .nav-link,
.sidebar-nav .nav-item.dropdown ul li .nav-link {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  text-overflow: clip !important;
}

/* FINAL FIX: Use attribute selectors to target dropdown submenu items */
.sidebar [class*="dropdown"] ul li a,
.sidebar-nav [class*="dropdown"] ul li a,
.sidebar [class*="dropdown"] ul li .nav-link,
.sidebar-nav [class*="dropdown"] ul li .nav-link {
  padding-left: 4px !important; /* Minimal padding */
  padding-right: 4px !important; /* Minimal padding */
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-indent: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  text-overflow: clip !important;
  font-size: 0.875rem !important; /* Slightly smaller font */
}

.sidebar [class*="dropdown"] ul,
.sidebar-nav [class*="dropdown"] ul {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.sidebar [class*="dropdown"] ul li,
.sidebar-nav [class*="dropdown"] ul li {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.sidebar-overlay {
  z-index: 9 !important; /* Below sidebar */
  position: fixed !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

.sidebar-brand {
  background: transparent !important;
  border-bottom: 1px solid var(--border-glass) !important;
  padding: 1.5rem 1rem;
}

.sidebar-nav .nav-link {
  color: var(--text-secondary) !important;
  border-radius: 8px;
  margin: 4px 8px;
  padding: 12px 16px;
  transition: all 0.2s ease-out;
  position: relative;
  border-left: 2px solid transparent; /* Left border for left sidebar */
  border-right: none;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* SUBTLE FIX: Reduce padding on submenu items only, keep sidebar width normal */
.sidebar-nav .nav-item.dropdown ul li .nav-link,
.sidebar-nav .nav-item.dropdown ul li a,
.sidebar .nav-item.dropdown ul li .nav-link,
.sidebar .nav-item.dropdown ul li a,
.sidebar-nav ul ul li .nav-link,
.sidebar-nav ul ul li a,
.sidebar ul ul li .nav-link,
.sidebar ul ul li a {
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
}

.sidebar-nav .nav-item.dropdown ul,
.sidebar .nav-item.dropdown ul,
.sidebar-nav ul ul,
.sidebar ul ul {
  padding-left: 0 !important;
  padding-right: 4px !important;
}

.sidebar-nav .nav-item.dropdown ul li,
.sidebar .nav-item.dropdown ul li,
.sidebar-nav ul ul li,
.sidebar ul ul li {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* CRITICAL FIX: Override for submenu items - reduce padding significantly */
/* Target ALL possible dropdown submenu structures */
.sidebar-nav .nav-item.dropdown .nav-item .nav-link,
.sidebar-nav .nav-item.dropdown ul li .nav-link,
.sidebar .nav-item.dropdown .nav-item .nav-link,
.sidebar .nav-item.dropdown ul li .nav-link,
.sidebar .nav-item.dropdown ul .nav-link,
.sidebar-nav .nav-item.dropdown ul .nav-link,
.sidebar .nav-item.dropdown li .nav-link,
.sidebar-nav .nav-item.dropdown li .nav-link,
.sidebar .nav-item.dropdown[data-collapsed] ul li .nav-link,
.sidebar-nav .nav-item.dropdown[data-collapsed] ul li .nav-link,
.sidebar .nav-item.dropdown.force-collapsed ul li .nav-link,
.sidebar-nav .nav-item.dropdown.force-collapsed ul li .nav-link {
  padding-left: 8px !important;
  padding-right: 12px !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* Target the ul container inside dropdown to remove its padding */
.sidebar .nav-item.dropdown ul,
.sidebar-nav .nav-item.dropdown ul,
.sidebar .nav-item.dropdown > ul,
.sidebar-nav .nav-item.dropdown > ul {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  list-style: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Target li elements inside dropdown */
.sidebar .nav-item.dropdown ul li,
.sidebar-nav .nav-item.dropdown ul li,
.sidebar .nav-item.dropdown li,
.sidebar-nav .nav-item.dropdown li {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.sidebar-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-primary) !important;
  transform: translateX(2px); /* Move right on hover for left sidebar */
}

.sidebar-nav .nav-link.active {
  background: rgba(58, 190, 255, 0.1) !important;
  border-left: 2px solid var(--neon-blue) !important; /* Left border for left sidebar */
  border-right: none !important;
  color: var(--neon-blue) !important;
  box-shadow: inset 0 0 20px rgba(58, 190, 255, 0.1);
}

/* ============================================
   Features Menu Submenu - Move items to left for readability
   ============================================ */
/* Target dropdown submenu items - Starlette Admin uses .dropdown class */
.sidebar .nav-item.dropdown .nav-item .nav-link,
.sidebar-nav .nav-item.dropdown .nav-item .nav-link,
.sidebar .nav-item.dropdown ul .nav-link,
.sidebar-nav .nav-item.dropdown ul .nav-link,
.sidebar .nav-item.dropdown li .nav-link,
.sidebar-nav .nav-item.dropdown li .nav-link,
.sidebar .nav-item.dropdown .nav-link,
.sidebar-nav .nav-item.dropdown .nav-link {
  padding-left: 8px !important; /* Reduced padding to move items left */
  margin-left: 0 !important; /* Remove left margin */
  padding-right: 12px !important;
}

/* Target ALL possible submenu item selectors - comprehensive approach */
.sidebar .nav-item .nav-item .nav-link,
.sidebar-nav .nav-item .nav-item .nav-link,
.sidebar .nav-item .collapse .nav-link,
.sidebar-nav .nav-item .collapse .nav-link,
.sidebar .nav-item .nav-collapse .nav-link,
.sidebar-nav .nav-item .nav-collapse .nav-link,
.sidebar .nav-item .nav .nav-link,
.sidebar-nav .nav-item .nav .nav-link,
.sidebar .nav .nav-item .nav-link,
.sidebar-nav .nav .nav-item .nav-link,
.sidebar .collapse .nav-item .nav-link,
.sidebar-nav .collapse .nav-item .nav-link {
  padding-left: 8px !important; /* Reduced padding to move items left */
  margin-left: 0 !important; /* Remove left margin */
  padding-right: 12px !important;
}

/* Target collapsed/expanded submenu items */
.sidebar .nav-item .collapse.show .nav-link,
.sidebar-nav .nav-item .collapse.show .nav-link,
.sidebar .nav-item .nav-collapse.show .nav-link,
.sidebar-nav .nav-item .nav-collapse.show .nav-link,
.sidebar .nav-item[aria-expanded="true"] + .nav .nav-link,
.sidebar-nav .nav-item[aria-expanded="true"] + .nav .nav-link,
.sidebar .nav-item[aria-expanded="true"] ~ .nav .nav-link,
.sidebar-nav .nav-item[aria-expanded="true"] ~ .nav .nav-link,
.sidebar .nav-item .collapse .nav-item .nav-link,
.sidebar-nav .nav-item .collapse .nav-item .nav-link {
  padding-left: 8px !important;
  margin-left: 0 !important;
  padding-right: 12px !important;
}

/* Target nested nav containers to remove extra padding */
.sidebar .nav-item .nav,
.sidebar-nav .nav-item .nav,
.sidebar .nav-item .collapse,
.sidebar-nav .nav-item .collapse,
.sidebar .nav-item .nav-collapse,
.sidebar-nav .nav-item .nav-collapse {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* More specific: Target submenu items that are direct children */
.sidebar .nav-item > .nav > .nav-item > .nav-link,
.sidebar-nav .nav-item > .nav > .nav-item > .nav-link,
.sidebar .nav-item > .collapse > .nav > .nav-item > .nav-link,
.sidebar-nav .nav-item > .collapse > .nav > .nav-item > .nav-link {
  padding-left: 8px !important;
  margin-left: 0 !important;
  padding-right: 12px !important;
}

/* Target any nested link inside sidebar nav */
.sidebar .nav .nav .nav-link,
.sidebar-nav .nav .nav .nav-link,
.sidebar .nav-item .nav-item,
.sidebar-nav .nav-item .nav-item {
  padding-left: 8px !important;
  margin-left: 0 !important;
}

/* Force override for any submenu items */
.sidebar [class*="nav"] [class*="nav"] .nav-link,
.sidebar-nav [class*="nav"] [class*="nav"] .nav-link {
  padding-left: 8px !important;
  margin-left: 0 !important;
  padding-right: 12px !important;
}

/* ULTRA-AGGRESSIVE: Target ANY nested structure in sidebar */
.sidebar ul ul .nav-link,
.sidebar-nav ul ul .nav-link,
.sidebar li li .nav-link,
.sidebar-nav li li .nav-link,
.sidebar .nav-item ul .nav-link,
.sidebar-nav .nav-item ul .nav-link,
.sidebar .nav-item li .nav-link,
.sidebar-nav .nav-item li .nav-link,
.sidebar ul ul a,
.sidebar-nav ul ul a,
.sidebar li li a,
.sidebar-nav li li a {
  padding-left: 4px !important;
  padding-right: 4px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  text-overflow: clip !important;
  font-size: 0.875rem !important;
  display: block !important;
}

.sidebar ul ul,
.sidebar-nav ul ul,
.sidebar .nav-item ul,
.sidebar-nav .nav-item ul {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.sidebar ul ul li,
.sidebar-nav ul ul li,
.sidebar .nav-item ul li,
.sidebar-nav .nav-item ul li {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Target dropdown menu items in sidebar */
.sidebar .dropdown-menu .nav-link,
.sidebar-nav .dropdown-menu .nav-link,
.sidebar .dropdown-item,
.sidebar-nav .dropdown-item {
  padding-left: 8px !important;
  margin-left: 0 !important;
  padding-right: 12px !important;
}

/* CRITICAL: Target Features submenu - very specific and visible test */
/* This targets any link that appears after a nav-item containing "Features" text */
.sidebar .nav-item:has(a:contains("Features")) ~ .nav-item .nav-link,
.sidebar-nav .nav-item:has(a:contains("Features")) ~ .nav-item .nav-link,
.sidebar .nav-item:has(.nav-link:contains("Features")) ~ .nav-item .nav-link,
.sidebar-nav .nav-item:has(.nav-link:contains("Features")) ~ .nav-item .nav-link {
  padding-left: 8px !important;
  margin-left: 0 !important;
  padding-right: 12px !important;
}

/* Alternative: Target by finding parent with Features and styling children */
.sidebar .nav-item:has(a[href*="feature"]) .nav-item .nav-link,
.sidebar-nav .nav-item:has(a[href*="feature"]) .nav-item .nav-link,
.sidebar .nav-item:has(a[title*="Feature"]) .nav-item .nav-link,
.sidebar-nav .nav-item:has(a[title*="Feature"]) .nav-item .nav-link {
  padding-left: 8px !important;
  margin-left: 0 !important;
  padding-right: 12px !important;
}

/* Last resort: Target ALL second-level nav items in sidebar (will affect all submenus) */
.sidebar .nav > .nav-item > .nav > .nav-item > .nav-link,
.sidebar-nav .nav > .nav-item > .nav > .nav-item > .nav-link,
.sidebar .nav-item .nav-item .nav-link,
.sidebar-nav .nav-item .nav-item .nav-link {
  padding-left: 8px !important;
  margin-left: 0 !important;
  padding-right: 12px !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* CRITICAL FIX: Target dropdown menu items directly - Starlette Admin structure */
.sidebar .nav-item.dropdown ul li .nav-link,
.sidebar-nav .nav-item.dropdown ul li .nav-link,
.sidebar .nav-item.dropdown .nav-item .nav-link,
.sidebar-nav .nav-item.dropdown .nav-item .nav-link,
.sidebar .nav-item.dropdown[data-collapsed] ul .nav-link,
.sidebar-nav .nav-item.dropdown[data-collapsed] ul .nav-link,
.sidebar .nav-item.dropdown:not(.force-collapsed) ul .nav-link,
.sidebar-nav .nav-item.dropdown:not(.force-collapsed) ul .nav-link {
  padding-left: 8px !important;
  margin-left: 0 !important;
  padding-right: 12px !important;
  text-indent: 0 !important;
}

/* Target the ul/container inside dropdown to remove its padding */
.sidebar .nav-item.dropdown ul,
.sidebar-nav .nav-item.dropdown ul,
.sidebar .nav-item.dropdown .nav,
.sidebar-nav .nav-item.dropdown .nav {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Target li items inside dropdown */
.sidebar .nav-item.dropdown ul li,
.sidebar-nav .nav-item.dropdown ul li,
.sidebar .nav-item.dropdown .nav-item,
.sidebar-nav .nav-item.dropdown .nav-item {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* ULTRA-SPECIFIC: Target based on console output structure */
.sidebar .nav-item.dropdown[data-collapsed] ul li .nav-link,
.sidebar-nav .nav-item.dropdown[data-collapsed] ul li .nav-link,
.sidebar .nav-item.dropdown.force-collapsed ul li .nav-link,
.sidebar-nav .nav-item.dropdown.force-collapsed ul li .nav-link,
.sidebar .nav-item.dropdown[data-initially-collapsed] ul li .nav-link,
.sidebar-nav .nav-item.dropdown[data-initially-collapsed] ul li .nav-link {
  padding-left: 8px !important;
  margin-left: 0 !important;
  padding-right: 12px !important;
  text-indent: 0 !important;
}

/* Target the ul element inside dropdown nav-item */
.sidebar .nav-item.dropdown > ul,
.sidebar-nav .nav-item.dropdown > ul,
.sidebar .nav-item.dropdown ul,
.sidebar-nav .nav-item.dropdown ul {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
}

/* Ensure no text-indent on submenu items */
.sidebar .nav-item.dropdown ul .nav-link,
.sidebar-nav .nav-item.dropdown ul .nav-link {
  text-indent: 0 !important;
  padding-left: 8px !important;
  margin-left: 0 !important;
}

/* ============================================
   Page Wrapper & Content
   ============================================ */
.page-wrapper,
.wrapper {
  position: relative !important;
  z-index: 1 !important; /* Same level as sidebar, but content comes after in DOM */
  background: transparent !important;
  min-height: 100vh !important;
  isolation: isolate !important; /* Create new stacking context */
}

/* Exception: Login page should be full-width - no sidebar margin */
/* This must come AFTER the general rule to override it */
@media (min-width: 768px) {
  body:has(.login-container) .page-wrapper,
  body:has(.login-container) .wrapper,
  body:has(.login-panel) .page-wrapper,
  body:has(.login-panel) .wrapper,
  .page-wrapper:has(.login-container),
  .wrapper:has(.login-container),
  .page-wrapper:has(.login-panel),
  .wrapper:has(.login-panel),
  /* Also target body directly if login-container is a direct child */
  body > .page-wrapper:has(+ .login-container),
  body > .wrapper:has(+ .login-container) {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Desktop: Add margin for sidebar on LEFT */
@media (min-width: 768px) {
  .page-wrapper,
  .wrapper {
    margin-left: 260px !important; /* Account for LEFT sidebar */
    margin-right: 0 !important;
    padding-left: 0 !important; /* Remove gap between sidebar and content */
    padding-right: 2rem !important;
    width: calc(100% - 260px) !important; /* Account for sidebar width */
    max-width: calc(100% - 260px) !important;
    box-sizing: border-box !important;
    overflow-x: visible !important; /* Don't clip content */
  }
  
  /* Remove any additional padding/margin from nested containers */
  .page-wrapper > *,
  .wrapper > *,
  .page-wrapper .container,
  .wrapper .container,
  .page-wrapper [class*="container"],
  .wrapper [class*="container"] {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* Mobile: No margin, sidebar overlays */
@media (max-width: 767px) {
  .page-wrapper,
  .wrapper {
    margin-left: 0 !important;
  }
}

.page-body,
.page-content {
  position: relative !important;
  z-index: 1 !important;
  margin-left: 0 !important;
  padding-left: 0 !important; /* Remove gap between sidebar and content */
  padding-right: 1.5rem !important;
  background: transparent !important;
  width: 100% !important;
  min-width: 0 !important; /* Allow flex item to shrink */
  overflow-x: visible !important; /* Don't clip content horizontally */
  overflow-y: auto !important; /* Allow vertical scrolling */
  box-sizing: border-box !important;
}

.content {
  z-index: 1 !important;
  position: relative !important;
  margin-left: 0 !important;
  padding-left: 0 !important; /* Remove gap between sidebar and content */
  padding-right: 1.5rem !important;
  background: transparent !important;
  width: 100% !important;
  min-width: 0 !important; /* Allow flex item to shrink */
  overflow-x: visible !important; /* Don't clip content horizontally */
  box-sizing: border-box !important;
}

/* Ensure modals and dropdowns appear above sidebar */
.modal,
.modal-backdrop,
.modal-dialog {
  z-index: 1050 !important; /* Above sidebar (z-index: 10) */
}

.dropdown-menu,
.dropdown,
[class*="dropdown"] {
  z-index: 1000 !important; /* Above sidebar (z-index: 10) */
}

/* Ensure content area respects sidebar on desktop */
@media (min-width: 768px) {
  .page-wrapper:has(.sidebar.show),
  .wrapper:has(.sidebar.show) {
    margin-left: 260px !important; /* Account for LEFT sidebar */
    padding-left: 0 !important; /* Remove gap between sidebar and content */
    padding-right: 2rem !important;
  }
  
  /* Exception: Login page should be full-width */
  .page-wrapper:has(.sidebar.show):has([class*="login"]),
  .wrapper:has(.sidebar.show):has([class*="login"]),
  body:has([class*="login"]) .page-wrapper:has(.sidebar.show),
  body:has([class*="login"]) .wrapper:has(.sidebar.show) {
    margin-left: 0 !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================
   Page Header - Title & Breadcrumbs
   ============================================ */
.page-header {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 0 12px 0 !important; /* Remove gap between sidebar and content */
  margin-bottom: 24px !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  min-width: 0 !important; /* Allow flex item to shrink */
  overflow: visible !important; /* Don't clip content */
}

.page-title {
  color: #ffffff !important;
  font-weight: bold !important;
  font-size: 1.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important; /* Prevent title from wrapping */
  overflow: visible !important; /* Don't clip text */
  text-overflow: clip !important; /* Don't truncate */
  min-width: 0 !important; /* Allow to shrink if needed */
}

h1.page-title,
h2.page-title,
.page-header h1,
.page-header h2 {
  color: #ffffff !important;
  font-weight: bold !important;
  font-size: 1.75rem !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
}

/* Breadcrumbs */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: small !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.breadcrumb-item,
.breadcrumb-item a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

.breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.95) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: " / " !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 0 4px !important;
}

/* ============================================
   Primary Button - "+ New User"
   ============================================ */
.btn-primary,
.btn.btn-primary,
a.btn-primary,
button.btn-primary {
  background: linear-gradient(135deg, #3ABEFF 0%, #4FC3F7 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(58, 190, 255, 0.3) !important;
  transition: all 0.2s ease-out !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  background: linear-gradient(135deg, #4FC3F7 0%, #3ABEFF 100%) !important;
  box-shadow: 0 6px 20px rgba(58, 190, 255, 0.4) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(58, 190, 255, 0.3) !important;
}

/* ============================================
   Search Input
   ============================================ */
input[type="search"],
.form-control[type="search"],
.search-input {
  background: rgba(10, 10, 10, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 10px 40px 10px 16px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  outline: none !important;
  transition: all 0.2s ease-out !important;
  width: 100% !important;
  max-width: 300px !important;
}

input[type="search"]::placeholder,
.form-control[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

input[type="search"]:focus,
.form-control[type="search"]:focus {
  border-color: rgba(58, 190, 255, 0.5) !important;
  background: rgba(15, 15, 15, 0.9) !important;
  box-shadow: 
    0 0 0 3px rgba(58, 190, 255, 0.1),
    0 0 20px rgba(58, 190, 255, 0.2) !important;
}

/* ============================================
   Data Table - Glassmorphic Container
   ============================================ */
/* Force ALL table-related elements to be transparent - NO WHITE */
.datagrid,
.datagrid-wrapper,
.datagrid-container,
.datagrid-table,
.datagrid-header,
.datagrid-body,
.datagrid-footer,
.datagrid-body > *,
.datagrid-body > div,
.datagrid-body > table,
.table-responsive,
.table-container,
.table-wrapper,
table,
table tbody,
table thead,
table tfoot {
  background: transparent !important;
  background-color: transparent !important;
}

/* Only the outer container gets the glassmorphic background */
.datagrid,
.datagrid-wrapper,
.table-responsive,
.table-container {
  background: rgba(20, 20, 20, 0.9) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(58, 190, 255, 0.1) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  /* Remove any fixed heights that cause white blocks */
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

/* Ensure datagrid body is completely transparent and auto-sized */
.datagrid-body,
.datagrid tbody,
table tbody {
  background: transparent !important;
  background-color: transparent !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: none !important;
  flex-grow: 0 !important;
}

/* Ensure table itself is transparent and auto-sized */
.datagrid-table,
.datagrid table,
table {
  background: transparent !important;
  background-color: transparent !important;
  border-collapse: collapse !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
}

/* Force remove any white backgrounds */
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ensure all page content areas are transparent */
.page-content,
.content-wrapper,
.main-content,
.page-body {
  background: transparent !important;
  background-color: transparent !important;
}

/* Remove any flex properties causing large empty spaces */
.datagrid-body,
.datagrid-wrapper,
.datagrid-container {
  display: block !important;
  flex: none !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* Ensure table containers don't have fixed heights */
.datagrid,
.datagrid-wrapper,
.datagrid-body,
.table-responsive,
.table-container {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Remove any white-space or padding causing large blocks */
.datagrid-body,
.datagrid-body > *,
table tbody {
  white-space: normal !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Table Headers */
.table thead th,
.datagrid thead th,
table thead th {
  background: rgba(20, 20, 20, 0.9) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}

.table thead th a,
.datagrid thead th a {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Table Rows */
.table tbody tr,
.datagrid tbody tr,
table tbody tr,
.datagrid-body tr {
  background: rgba(10, 10, 10, 0.5) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: all 0.2s ease-out !important;
}

.table tbody tr:hover,
.datagrid tbody tr:hover,
table tbody tr:hover,
.datagrid-body tr:hover {
  background: rgba(58, 190, 255, 0.1) !important;
  cursor: pointer !important;
}

/* Ensure no white backgrounds anywhere in table structure */
.datagrid-body,
.datagrid-body > *,
.datagrid tbody,
table tbody,
.datagrid-table tbody {
  background: transparent !important;
  background-color: transparent !important;
}

/* Table Cells */
.table tbody td,
.datagrid tbody td,
table tbody td {
  color: #ffffff !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  vertical-align: middle !important;
}

/* Empty State */
.table tbody tr:only-child td[colspan],
.datagrid-empty,
.empty-state {
  color: rgba(255, 255, 255, 0.5) !important;
  text-align: center !important;
  padding: 48px 24px !important;
  font-size: 14px !important;
}

/* ============================================
   Pagination
   ============================================ */
.pagination,
.page-pagination {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  margin-top: 16px !important;
  flex-wrap: wrap !important;
}

.pagination .page-link,
.pagination a,
.pagination button {
  background: rgba(20, 20, 20, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s ease-out !important;
  font-size: 14px !important;
}

.pagination .page-link:hover,
.pagination a:hover,
.pagination button:hover {
  background: rgba(58, 190, 255, 0.2) !important;
  border-color: rgba(58, 190, 255, 0.4) !important;
  color: #3ABEFF !important;
}

.pagination .page-item.active .page-link,
.pagination .active a,
.pagination .active button {
  background: linear-gradient(135deg, #3ABEFF 0%, #4FC3F7 100%) !important;
  border-color: #3ABEFF !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(58, 190, 255, 0.3) !important;
}

.pagination .page-item.disabled .page-link,
.pagination .disabled a,
.pagination .disabled button {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ============================================
   Form Controls
   ============================================ */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
textarea,
select {
  background: rgba(10, 10, 10, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  outline: none !important;
  transition: all 0.2s ease-out !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  background: rgba(15, 15, 15, 0.9) !important;
  border-color: rgba(58, 190, 255, 0.5) !important;
  box-shadow: 
    0 0 0 3px rgba(58, 190, 255, 0.1),
    0 0 20px rgba(58, 190, 255, 0.2) !important;
}

/* ============================================
   Cards - Transparent by default
   ============================================ */
.card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.card-body {
  padding: 0 !important;
}

.card-header {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================
   Action Buttons
   ============================================ */
.btn-success,
.btn.btn-success {
  background: rgba(76, 175, 80, 0.2) !important;
  border: 1px solid rgba(76, 175, 80, 0.4) !important;
  color: #4CAF50 !important;
}

.btn-warning,
.btn.btn-warning {
  background: rgba(255, 152, 0, 0.2) !important;
  border: 1px solid rgba(255, 152, 0, 0.4) !important;
  color: #FF9800 !important;
}

.btn-danger,
.btn.btn-danger {
  background: rgba(244, 67, 54, 0.2) !important;
  border: 1px solid rgba(244, 67, 54, 0.4) !important;
  color: #F44336 !important;
}

/* ============================================
   Badges & Status Indicators
   ============================================ */
.badge {
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid;
}

.badge.bg-success,
.badge.bg-green {
  background: rgba(76, 175, 80, 0.2) !important;
  border-color: rgba(76, 175, 80, 0.4) !important;
  color: #4CAF50 !important;
}

.badge.bg-danger,
.badge.bg-red {
  background: rgba(244, 67, 54, 0.2) !important;
  border-color: rgba(244, 67, 54, 0.4) !important;
  color: #F44336 !important;
}

/* ============================================
   Global Override: Reduce Left Padding for All Content
   ============================================ */
/* Force minimal left padding on main content containers */
.page-body,
.page-content,
.content,
.page-wrapper > .content,
.wrapper > .content,
[class*="-container"]:not(.sidebar-container):not(.modal-container):not(.dropdown-container),
.page-wrapper .container-fluid,
.wrapper .container-fluid,
.page-wrapper .container,
.wrapper .container {
  padding-left: 0 !important; /* Remove gap between sidebar and content */
  margin-left: 0 !important;
}

/* Target all direct children of page-wrapper and wrapper */
.page-wrapper > div:not(.sidebar),
.wrapper > div:not(.sidebar),
.page-wrapper > section:not(.sidebar),
.wrapper > section:not(.sidebar) {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* CRITICAL: Remove all left padding/margin from dashboard and main content areas */
.page-wrapper .page-body,
.page-wrapper .page-content,
.page-wrapper .content,
.page-wrapper .main-content,
.wrapper .page-body,
.wrapper .page-content,
.wrapper .content,
.wrapper .main-content,
.page-wrapper [class*="dashboard"],
.wrapper [class*="dashboard"],
.page-wrapper [class*="main"],
.wrapper [class*="main"],
.page-wrapper [class*="verification"],
.wrapper [class*="verification"],
.page-wrapper [class*="history"],
.wrapper [class*="history"],
.page-wrapper [class*="fact-check"],
.wrapper [class*="fact-check"],
.page-wrapper [class*="queue"],
.wrapper [class*="queue"],
.page-wrapper [class*="container"]:not(.sidebar-container),
.wrapper [class*="container"]:not(.sidebar-container) {
  padding-left: 0 !important;
  margin-left: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Remove padding from any row or column containers */
.page-wrapper .row,
.wrapper .row,
.page-wrapper [class*="col-"],
.wrapper [class*="col-"] {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Target the actual content area that might have Bootstrap or other framework padding */
.page-wrapper > .page-body > *,
.page-wrapper > .page-content > *,
.page-wrapper > .content > *,
.wrapper > .page-body > *,
.wrapper > .page-content > *,
.wrapper > .content > * {
  padding-left: 0 !important;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  .page-title {
    font-size: 1.5rem !important;
  }
  
  .datagrid,
  .table-responsive {
    overflow-x: auto !important;
  }
  
  .table {
    min-width: 800px !important;
  }
}

/* ============================================
   CRITICAL FIX: Universal Fast Scrolling - Works Anywhere on Page
   ============================================ */
/* Enable fast, smooth scrolling everywhere */
html {
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  overflow: auto !important;
  height: 100% !important;
}

body {
  overflow: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: 100% !important;
  -webkit-overflow-scrolling: touch !important;
  /* Fast scrolling */
  scroll-behavior: smooth !important;
  /* GPU acceleration for smooth scrolling */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: scroll-position;
}

/* Main wrapper - don't create nested scroll */
.wrapper {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 100vh !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
}

/* Page body - use natural page scroll, not nested scroll */
.page-body,
.page-content,
.content,
[class*="content"] {
  overflow: visible !important; /* Use page scroll, not container scroll */
  overflow-x: visible !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  /* Allow scrolling even if content doesn't overflow */
  min-height: 0 !important;
  max-height: none !important;
}

/* Containers - use natural page scroll unless specifically needed for nested content */
[class*="container"]:not(.sidebar):not(.modal):not(.dropdown-menu):not(.verification-history-container):not(.creator-verification-detail-container):not(.fact-check-container):not(.verification-queue-container):not(.tag-review-detail-container):not(.tag-review-container):not(.media-library-container):not(.email-templates-container):not(.tag-management-container):not(.content-moderation-container):not(.user-moderation-container):not(.communication-container):not(.youtube-overview-container):not(.youtube-import-container):not(.bulk-import-container):not(.video-source-management-container):not(.quiz-preview-detail-container):not(.quiz-preview-container):not(.export-import-container):not(.import-history-container):not(.playlist-management-container):not(.engagement-analytics-container):not(.video-quality-container):not(.auto-import-rules-container):not(.audit-dashboard-container):not(.paper-management-container):not(.duplicates-container):not(.integrations-container):not(.maintenance-container):not(.system-config-container):not(.import-pipeline-container):not(.workflows-container):not(.predictions-container):not(.communications-container):not(.privacy-compliance-container):not(.experiments-container):not(.report-builder-container):not(.performance-container):not(.api-management-container):not(.data-quality-container):not(.cache-management-container):not(.access-control-container):not(.queue-management-container):not(.creator-onboarding-container):not(.feature-flags-container):not(.logs-container):not(.mobile-analytics-container):not(.iframe-container) {
  overflow: visible !important; /* Default to visible for natural page scroll */
  overflow-x: visible !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  /* Don't restrict height */
  max-height: none !important;
  height: auto !important;
}

/* All containers should use natural page scroll */
.container,
.container-fluid,
.container-tight,
[class*="-container"]:not(.sidebar-container):not(.modal-container):not(.dropdown-container):not(.verification-history-container):not(.creator-verification-detail-container):not(.fact-check-container):not(.verification-queue-container):not(.tag-review-detail-container):not(.tag-review-container):not(.media-library-container):not(.email-templates-container):not(.tag-management-container):not(.content-moderation-container):not(.user-moderation-container):not(.communication-container):not(.youtube-overview-container):not(.youtube-import-container):not(.bulk-import-container):not(.video-source-management-container):not(.quiz-preview-detail-container):not(.quiz-preview-container):not(.export-import-container):not(.import-history-container):not(.playlist-management-container):not(.engagement-analytics-container):not(.video-quality-container):not(.auto-import-rules-container):not(.audit-dashboard-container):not(.paper-management-container):not(.duplicates-container):not(.integrations-container):not(.maintenance-container):not(.system-config-container):not(.import-pipeline-container):not(.workflows-container):not(.predictions-container):not(.communications-container):not(.privacy-compliance-container):not(.experiments-container):not(.report-builder-container):not(.performance-container):not(.api-management-container):not(.data-quality-container):not(.cache-management-container):not(.access-control-container):not(.queue-management-container):not(.creator-onboarding-container):not(.feature-flags-container):not(.logs-container):not(.mobile-analytics-container):not(.iframe-container) {
  overflow: visible !important; /* Use page scroll, not container scroll */
  overflow-x: visible !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  /* Don't restrict height */
  max-height: none !important;
  height: auto !important;
}

/* Cards and sections - allow scrolling */
.card,
.glass-card,
.stat-card,
[class*="-card"],
[class*="-section"],
[class*="-item"] {
  overflow: visible !important;
  /* Allow parent to handle scrolling */
  position: relative;
}

/* Tables - allow scrolling */
.table-responsive,
.table-wrapper,
.datagrid-wrapper {
  overflow: auto !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  /* Fast scrolling */
  scroll-padding: 1rem;
  max-height: none !important;
}

/* Lists - allow scrolling */
.list-group,
.queue-list,
.history-list,
[class*="-list"] {
  overflow: visible !important;
  /* Let parent handle scrolling */
}

/* Forms - allow scrolling */
.form-container,
.form-section,
[class*="-form"] {
  overflow: visible !important;
}

/* Modals - allow scrolling */
.modal-body,
.modal-content {
  overflow: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  max-height: 90vh !important;
}

/* Dropdowns - allow scrolling */
.dropdown-menu {
  overflow: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  max-height: 300px !important;
}

/* Fix for elements that block scrolling */
* {
  /* Allow touch scrolling */
  touch-action: pan-y pan-x !important;
  /* Prevent blocking */
  pointer-events: auto !important;
}

/* Background elements shouldn't block scrolling */
[class*="container"]::before,
[class*="container"]::after,
[class*="-container"]::before,
[class*="-container"]::after {
  pointer-events: none !important;
  touch-action: none !important;
}

/* Ensure sidebar doesn't block main content scrolling */
.sidebar {
  touch-action: pan-y !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Main content area - use natural page scroll */
.page-wrapper > .content,
.wrapper > .content,
.page-body {
  overflow: visible !important; /* Use page scroll, not container scroll */
  overflow-x: visible !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  height: auto !important; /* Let content determine height */
  min-height: auto !important;
  /* Fast scrolling */
  scroll-padding-top: 1rem;
}

/* Fix for dashboard and admin pages - use natural page scroll */
.dashboard-container {
  overflow: visible !important; /* Use page scroll, not container scroll */
  overflow-x: visible !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  /* Don't restrict height */
  max-height: none !important;
  height: auto !important;
  min-height: auto !important; /* Let content determine height */
}

/* Other containers - use natural page scroll */
[class*="-container"]:not(.sidebar):not(.modal):not(.verification-history-container):not(.creator-verification-detail-container):not(.fact-check-container):not(.verification-queue-container):not(.tag-review-detail-container):not(.tag-review-container):not(.media-library-container):not(.email-templates-container):not(.tag-management-container):not(.content-moderation-container):not(.user-moderation-container):not(.communication-container):not(.youtube-overview-container):not(.youtube-import-container):not(.bulk-import-container):not(.video-source-management-container):not(.quiz-preview-detail-container):not(.quiz-preview-container):not(.export-import-container):not(.import-history-container):not(.playlist-management-container):not(.engagement-analytics-container):not(.video-quality-container):not(.auto-import-rules-container):not(.audit-dashboard-container):not(.paper-management-container):not(.duplicates-container):not(.integrations-container):not(.maintenance-container):not(.system-config-container):not(.import-pipeline-container):not(.workflows-container):not(.predictions-container):not(.communications-container):not(.privacy-compliance-container):not(.experiments-container):not(.report-builder-container):not(.performance-container):not(.api-management-container):not(.data-quality-container):not(.cache-management-container):not(.access-control-container):not(.queue-management-container):not(.creator-onboarding-container):not(.feature-flags-container):not(.logs-container):not(.mobile-analytics-container):not(.iframe-container) {
  overflow: visible !important; /* Use page scroll, not container scroll */
  overflow-x: visible !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  /* Don't restrict height */
  max-height: none !important;
  height: auto !important;
  min-height: auto !important; /* Let content determine height */
}

/* Fast scroll wheel support */
* {
  /* Smooth scrolling */
  scroll-behavior: smooth !important;
  /* Fast scroll */
  scroll-snap-type: none !important;
}

/* Users List Page - Starlette Admin auto-generated page */
/* Fix layout for /admin/users/list - Target all Starlette Admin list pages */
.page-body .datagrid-wrapper,
.page-body .datagrid-container,
.content .datagrid-wrapper,
.content .datagrid-container,
.page-content .datagrid-wrapper,
.page-content .datagrid-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

/* Ensure page-body and content have proper layout on list pages */
.page-body:has(.datagrid-wrapper),
.page-body:has(.datagrid-container),
.content:has(.datagrid-wrapper),
.content:has(.datagrid-container) {
  padding-left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Starlette Admin list page header */
.page-body .page-header,
.content .page-header,
.page-content .page-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Starlette Admin list page actions/toolbar */
.page-body .page-header + *,
.content .page-header + *,
.page-body .toolbar,
.content .toolbar {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Optimize scroll performance */
html,
body,
.wrapper,
.page-body,
.content,
[class*="container"] {
  /* GPU acceleration */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Optimize scrolling */
  will-change: scroll-position;
  /* Smooth scrolling */
  -webkit-overflow-scrolling: touch !important;
}

/* Prevent scroll blocking by fixed elements */
.fixed-top,
.fixed-bottom,
[class*="fixed"] {
  /* Don't block scrolling */
  pointer-events: none !important;
}

.fixed-top > *,
.fixed-bottom > *,
[class*="fixed"] > * {
  pointer-events: auto !important;
}
/* Fix for all hover effects that cause glitching when moving mouse */
* {
  /* Force GPU acceleration for all transforms */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Prevent layout shifts */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Optimize rendering */
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

/* Replace translateY hover effects with stable alternatives */
.glass-card:hover,
.stat-card:hover,
.queue-item:hover,
.history-item:hover,
.tag-item:hover,
.filters-section:hover,
.content-section:hover,
.actions-section:hover,
.verification-info-section:hover,
.creator-section:hover,
.video-section:hover,
.current-tags-section:hover,
.suggested-tags-section:hover,
.bulk-actions:hover,
[class*="-card"]:hover,
[class*="-item"]:hover,
[class*="-section"]:hover {
  /* Remove translateY to prevent glitches */
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  /* Use opacity and box-shadow instead for smooth hover */
  transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  /* Prevent repaints */
  will-change: opacity, box-shadow, border-color !important;
}

/* Fix button hover glitches */
button:hover,
.btn:hover,
[class*="btn"]:hover,
a:hover {
  /* Use stable transforms */
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  /* Smooth transitions */
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important;
  /* Prevent will-change overuse */
  will-change: auto !important;
}

/* Optimize backdrop-filter to prevent glitches */
[class*="glass"],
[class*="card"],
[class*="section"] {
  /* Reduce backdrop-filter intensity for better performance */
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  /* Force GPU layer */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Prevent repaints */
  contain: layout style paint;
  /* Smooth transitions */
  transition: backdrop-filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Fix z-index stacking issues */
.glass-card,
.stat-card,
.queue-item,
.history-item,
.tag-item {
  position: relative;
  z-index: 1;
  /* Prevent z-index changes on hover */
  isolation: isolate;
}

.glass-card:hover,
.stat-card:hover,
.queue-item:hover,
.history-item:hover,
.tag-item:hover {
  z-index: 2;
  /* Prevent z-index glitches */
  isolation: isolate;
}

/* Prevent tooltip/popup glitches */
[data-bs-toggle="tooltip"],
[data-bs-toggle="popover"],
.tooltip,
.popover {
  /* Force GPU layer */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Smooth transitions */
  transition: opacity 0.15s ease, transform 0.15s ease !important;
  /* Prevent repaints */
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Fix for Starlette Admin tooltips */
.tooltip-inner,
.popover-body {
  /* Prevent text glitches */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Optimize animations to prevent glitches */
@keyframes starfieldMove,
@keyframes logoGlow3D {
  /* Use transform3d for GPU acceleration */
  from, to {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}

/* Prevent hover state conflicts */
*:hover {
  /* Ensure only one transform property */
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

/* Fix for form controls */
input:hover,
select:hover,
textarea:hover {
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

/* Prevent glitches in tables */
.table tbody tr:hover {
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  transition: background-color 0.15s ease !important;
}

/* Fix pagination hover glitches */
.pagination button:hover,
.pagination a:hover {
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Optimize badge hover effects */
.badge:hover,
[class*="badge"]:hover {
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

/* Prevent modal glitches */
.modal,
.modal-dialog,
.modal-content {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: opacity 0.2s ease !important;
}

/* Fix dropdown menu glitches */
.dropdown-menu,
.dropdown-item {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: background-color 0.15s ease !important;
}

.dropdown-item:hover {
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

/* Critical: Prevent all translateY transforms that cause glitches - HIGH SPECIFICITY */
body .glass-card:hover,
body .stat-card:hover,
body .queue-item:hover,
body .history-item:hover,
body .tag-item:hover,
body .filters-section:hover,
body .content-section:hover,
body .actions-section:hover,
body .verification-info-section:hover,
body .creator-section:hover,
body .video-section:hover,
body .current-tags-section:hover,
body .suggested-tags-section:hover,
body .bulk-actions:hover,
body [class*="-card"]:hover,
body [class*="-item"]:hover,
body [class*="-section"]:hover {
  /* NO translateY - causes glitches */
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  /* Use opacity and shadow changes instead */
  opacity: 1 !important;
  box-shadow: 
    0 8px 32px 0 rgba(0, 0, 0, 0.3),
    0 0 20px rgba(6, 182, 212, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Button hover effects - stable - HIGH SPECIFICITY */
body button:hover:not(:disabled),
body .btn:hover:not(:disabled),
body [class*="btn"]:hover:not(:disabled),
body .btn-review:hover:not(:disabled),
body .btn-view:hover:not(:disabled),
body .btn-apply-filters:hover:not(:disabled),
body .btn-save:hover:not(:disabled),
body .btn-action:hover:not(:disabled),
body .btn-tag-action:hover:not(:disabled),
body .btn-bulk:hover:not(:disabled),
body .btn-download:hover:not(:disabled),
body .back-button:hover {
  /* NO translateY */
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  /* Use opacity and shadow instead */
  opacity: 0.95 !important;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4) !important;
}