/* ==========================================================================
   vSAFE-27: SAFIRA UNIFIED DESIGN SYSTEM (PREMIUM DARK SIDEBAR + LIGHT CONTENT)
   ========================================================================== */

/* 1. CSS VARIABLES & THEME TOKENS */
body.dashboard-context {
  --saas-bg: #f8fafc !important; /* Soft off-white content background */
  --saas-surface: #ffffff !important; /* Pure white card surface */
  --saas-border: #e2e8f0 !important; /* Subtle gray border */
  --saas-text-primary: #0f172a !important; /* Slate 900 primary text */
  --saas-text-secondary: #334155 !important; /* Slate 700 secondary text */
  --saas-text-muted: #64748b !important; /* Slate 500 helper text */
  
  --saas-primary: #2563eb !important; /* Brand Blue */
  --saas-primary-hover: #1d4ed8 !important; /* Hover Blue */
  --saas-success: #10b981 !important; /* Emerald 500 */
  --saas-warning: #f59e0b !important; /* Amber 500 */
  --saas-danger: #ef4444 !important; /* Red 500 */
  
  --sidebar-width: 260px !important;
  --topbar-height: 70px !important;
  
  background-color: var(--saas-bg) !important;
}

/* 2. BASE RESET & LAYOUT WRAPPER */
body.dashboard-context,
body.dashboard-context * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif !important;
  box-sizing: border-box;
}

body.dashboard-context .dashboard-layout {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  background-color: var(--saas-bg) !important;
}

/* 3. STICKY LIGHT TOPBAR (NAVBAR) */
body.dashboard-context .navbar,
body.is-panel-page .navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--saas-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  z-index: 1001 !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

body.dashboard-context .navbar .nav-inner,
body.is-panel-page .navbar .nav-inner {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Topbar Logo divider alignment */
body.dashboard-context .navbar .brand,
body.is-panel-page .navbar .brand {
  width: calc(var(--sidebar-width) - 24px) !important;
  display: flex !important;
  align-items: center !important;
  border-right: 1px solid var(--saas-border) !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.dashboard-context .navbar .brand img,
body.is-panel-page .navbar .brand img {
  max-height: 32px !important;
  width: auto !important;
  display: block !important;
}

/* Topbar Inner Components */
body.dashboard-context .dashboard-search-wrap input {
  background: #f1f5f9 !important;
  border: 1px solid var(--saas-border) !important;
  color: var(--saas-text-primary) !important;
  font-size: 13.5px !important;
  border-radius: 10px !important;
}

body.dashboard-context .dashboard-search-wrap input::placeholder {
  color: var(--saas-text-muted) !important;
}

body.dashboard-context .navbar .user-chip,
body.dashboard-context .navbar .btn-density-topbar,
body.dashboard-context .navbar .top-notification-trigger {
  background: #f1f5f9 !important;
  border: 1px solid var(--saas-border) !important;
  color: var(--saas-text-primary) !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  padding: 0 12px !important;
}

body.dashboard-context .navbar .user-chip b {
  color: var(--saas-text-primary) !important;
  font-size: 13px !important;
}

/* User topbar dropdown */
body.dashboard-context #userTopbarDropdown {
  background: #ffffff !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

body.dashboard-context #userTopbarDropdown a {
  color: var(--saas-text-secondary) !important;
  font-size: 13.5px !important;
}

body.dashboard-context #userTopbarDropdown a:hover {
  background: #f1f5f9 !important;
  color: var(--saas-text-primary) !important;
}

/* 4. PREMIUM DARK SIDEBAR */
body.dashboard-context .sidebar,
body.is-panel-page .sidebar {
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  position: fixed !important;
  top: var(--topbar-height) !important;
  left: 0 !important;
  height: calc(100vh - var(--topbar-height)) !important;
  z-index: 1000 !important;
  background: #0b0f19 !important; /* Deep Premium Navy-Black */
  border-right: 1px solid #1e293b !important;
  box-sizing: border-box !important;
  padding: 16px 12px 24px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important;  /* IE 10+ */
}

body.dashboard-context .sidebar::-webkit-scrollbar {
  display: none !important; /* Chrome/Safari */
}

/* Sidebar with no-navbar fallback */
body.dashboard-context:not(:has(.navbar)) .sidebar,
body.is-panel-page:not(:has(.navbar)) .sidebar {
  top: 0 !important;
  height: 100vh !important;
}

/* Hide brand logo in sidebar on desktop (rendered in topbar) */
body.dashboard-context .sidebar-brand {
  display: none !important;
}

/* Sidebar Titles & Sections */
body.dashboard-context .sidebar-title,
body.dashboard-context .sidebar-section-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #475569 !important;
  margin: 16px 12px 6px 12px !important;
  display: block !important;
}

body.dashboard-context .sidebar-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  color: #94a3b8 !important; /* Slate light */
  font-weight: 600 !important;
  font-size: 13.5px !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  margin-bottom: 4px !important;
}

body.dashboard-context .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

body.dashboard-context .sidebar-link.is-active,
body.dashboard-context .sidebar-link.active {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #38bdf8 !important; /* Bright blue text */
  font-weight: 700 !important;
}

body.dashboard-context .sidebar-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 15px !important;
  color: inherit !important;
}

/* Sidebar cards premium styling */
body.dashboard-context .sidebar-upgrade-card,
body.dashboard-context .sidebar-help-card,
body.dashboard-context .sidebar-verification-card {
  background: #121824 !important; /* Navy Slate Card */
  border: 1px solid #1e293b !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin: 12px 10px 0 10px !important;
}

body.dashboard-context .sidebar-upgrade-card b,
body.dashboard-context .sidebar-help-card b {
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.dashboard-context .sidebar-upgrade-card p,
body.dashboard-context .sidebar-help-card p {
  color: #94a3b8 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  margin: 4px 0 8px 0 !important;
}

body.dashboard-context .sidebar-upgrade-card a,
body.dashboard-context .sidebar-help-card span {
  display: block !important;
  color: #ffffff !important;
  background: var(--saas-primary) !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  text-align: center !important;
}

body.dashboard-context .sidebar-help-card span {
  background: #1e293b !important;
  margin-top: 4px !important;
}

/* 5. MAIN CONTENT AREA */
body.dashboard-context .dashboard-main {
  margin-left: var(--sidebar-width) !important;
  width: calc(100% - var(--sidebar-width)) !important;
  margin-top: var(--topbar-height) !important;
  min-height: calc(100vh - var(--topbar-height)) !important;
  padding: 32px !important;
  background-color: var(--saas-bg) !important;
  box-sizing: border-box !important;
  display: block !important;
}

body.dashboard-context:not(:has(.navbar)) .dashboard-main {
  margin-top: 0 !important;
  min-height: 100vh !important;
}

/* Page titles */
body.dashboard-context .sf-dashboard-header {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--saas-text-primary) !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 20px 0 !important;
}

/* 6. UNIFIED PANELS & CARDS (LIGHT SURFACE) */
body.dashboard-context .panel,
body.dashboard-context .card,
body.dashboard-context .dash-card {
  background: var(--saas-surface) !important; /* Pure White Card */
  border: 1px solid var(--saas-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-sizing: border-box !important;
}

/* Typography contrast */
body.dashboard-context h1,
body.dashboard-context h2,
body.dashboard-context h3,
body.dashboard-context h4,
body.dashboard-context h5 {
  color: var(--saas-text-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

body.dashboard-context p,
body.dashboard-context span,
body.dashboard-context label,
body.dashboard-context td,
body.dashboard-context li {
  color: var(--saas-text-secondary) !important;
  font-size: 14px !important;
}

/* 7. UNIFIED STATISTIC CARDS & GRID */
body.dashboard-context .stats-grid,
body.dashboard-context .dash-metric-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
}

/* Responsive grid rules */
@media screen and (max-width: 1024px) {
  body.dashboard-context .stats-grid,
  body.dashboard-context .dash-metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 600px) {
  body.dashboard-context .stats-grid,
  body.dashboard-context .dash-metric-strip {
    grid-template-columns: 1fr !important;
  }
}

/* Statistic Card style */
body.dashboard-context .dash-metric-card {
  background: var(--saas-surface) !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 105px !important;
}

body.dashboard-context .dash-metric-card small {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--saas-text-muted) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

body.dashboard-context .dash-metric-card b {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--saas-text-primary) !important;
  display: block !important;
  line-height: 1.1 !important;
}

body.dashboard-context .dash-metric-card span {
  font-size: 11.5px !important;
  color: var(--saas-text-muted) !important;
  display: block !important;
  margin-top: 4px !important;
}

body.dashboard-context .dash-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

/* 8. FORM INPUTS & TEXTAREAS */
body.dashboard-context input[type="text"],
body.dashboard-context input[type="email"],
body.dashboard-context input[type="password"],
body.dashboard-context input[type="number"],
body.dashboard-context select,
body.dashboard-context textarea {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--saas-text-primary) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.dashboard-context input[type="text"]:focus,
body.dashboard-context input[type="email"]:focus,
body.dashboard-context input[type="password"]:focus,
body.dashboard-context input[type="number"]:focus,
body.dashboard-context select:focus,
body.dashboard-context textarea:focus {
  border-color: var(--saas-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  outline: none !important;
}

body.dashboard-context select option {
  background: #ffffff !important;
  color: var(--saas-text-primary) !important;
}

/* 9. TABLES & RESPONSIBILITY */
body.dashboard-context .sf-table-wrapper {
  background: #ffffff !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: 12px !important;
  overflow-x: auto !important; /* Table scroll wrapper inside container */
  margin-top: 16px !important;
  margin-bottom: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.dashboard-context table {
  width: 100% !important;
  border-collapse: collapse !important;
  text-align: left !important;
}

body.dashboard-context table th {
  background: #f8fafc !important;
  color: var(--saas-text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--saas-border) !important;
}

body.dashboard-context table td {
  padding: 14px 16px !important;
  font-size: 13.5px !important;
  color: var(--saas-text-secondary) !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
}

body.dashboard-context table tr:last-child td {
  border-bottom: none !important;
}

body.dashboard-context table tr:hover td {
  background: #f8fafc !important;
}

/* 10. UNIFIED BUTTON STYLING */
body.dashboard-context .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 42px !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: none !important;
}

body.dashboard-context .btn-primary,
body.dashboard-context .btn-blue {
  background: var(--saas-primary) !important;
  color: #ffffff !important;
}

body.dashboard-context .btn-primary:hover,
body.dashboard-context .btn-blue:hover {
  background: var(--saas-primary-hover) !important;
}

body.dashboard-context .btn-secondary,
body.dashboard-context .btn-light,
body.dashboard-context .btn-outline {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--saas-text-secondary) !important;
}

body.dashboard-context .btn-secondary:hover,
body.dashboard-context .btn-light:hover,
body.dashboard-context .btn-outline:hover {
  background: #e2e8f0 !important;
  color: var(--saas-text-primary) !important;
}

body.dashboard-context .btn-danger {
  background: var(--saas-danger) !important;
  color: #ffffff !important;
}

body.dashboard-context .btn-danger:hover {
  background: #dc2626 !important;
}

/* Quick Actions buttons */
body.dashboard-context .btn-quick-primary {
  background: var(--saas-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
}

body.dashboard-context .btn-quick-primary:hover {
  background: var(--saas-primary-hover) !important;
}

body.dashboard-context .btn-quick-secondary {
  background: #f1f5f9 !important;
  color: var(--saas-text-secondary) !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 600 !important;
}

body.dashboard-context .btn-quick-secondary:hover {
  background: #e2e8f0 !important;
  color: var(--saas-text-primary) !important;
}

/* 11. RESPONSIVE MOBILE DRAWER (max-width: 980px) */
@media screen and (max-width: 980px) {
  body.dashboard-context .sidebar,
  body.is-panel-page .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: 100vh !important;
    transform: translateX(-105%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 9999 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    padding-top: 24px !important;
  }
  
  body.dashboard-context.mobile-menu-open .sidebar,
  body.is-panel-page.mobile-menu-open .sidebar {
    transform: translateX(0) !important;
  }
  
  /* Show brand logo in drawer sidebar for mobile */
  body.dashboard-context .sidebar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 60px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #1e293b !important;
    padding-bottom: 12px !important;
  }
  
  body.dashboard-context .sidebar-brand img {
    max-height: 32px !important;
    width: auto !important;
  }
  
  body.dashboard-context .dashboard-main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 16px !important;
    min-height: auto !important;
    margin-top: 60px !important; /* Mobile header bar spacing */
  }
  
  /* Overlay Backdrop for Mobile Menu Drawer */
  body.dashboard-context.mobile-menu-open::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(9, 14, 26, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 9998 !important;
  }
  
  /* Prevent horizontal screen scrolling */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}
  --saas-radius-sm: 6px;
  
  --saas-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --saas-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.02), 0 8px 24px rgba(149, 157, 165, 0.04);
}

/* 1. GLOBAL LAYOUT & TYPOGRAPHY RESET */
body.dashboard-context {
  background: var(--saas-bg) !important;
  color: var(--saas-text-primary) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Responsive Sidebar Variable Overrides */
body.dashboard-context {
  --sidebar-width: 280px !important;
}

@media screen and (min-width: 1400px) {
  body.dashboard-context {
    --sidebar-width: 290px !important;
  }
}

@media screen and (max-width: 1200px) {
  body.dashboard-context {
    --sidebar-width: 260px !important;
  }
}

@media screen and (max-width: 980px) {
  body.dashboard-context {
    --sidebar-width: 280px !important; /* Mobile slide-out drawer width */
  }
}

body.dashboard-context .dashboard-layout {
  display: grid !important;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
}

body.dashboard-context .dashboard-main {
  grid-column: 2 !important;
  margin-left: 0 !important;
  width: 100% !important;
  background: var(--saas-bg) !important;
}

/* Page titles */
body.dashboard-context h1, 
body.dashboard-context h2, 
body.dashboard-context h3 {
  color: var(--saas-text-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* 2. SIDEBAR STYLING - Premium white sidebar */
body.dashboard-context .sidebar {
  background: var(--saas-surface) !important;
  border-right: 1px solid var(--saas-border) !important;
  box-shadow: none !important;
  padding: 24px 12px !important;
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  position: fixed !important;
  top: 0 !important;
  height: 100vh !important;
  z-index: 1000 !important; /* Ensure logo/sidebar is above background elements but below modal dialogs */
}

body.dashboard-context .sidebar-compact {
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  position: fixed !important;
  top: 0 !important;
  height: 100vh !important;
}

body.dashboard-context .sidebar-close-btn {
  display: none !important;
}

/* Sidebar Section Headers */
body.dashboard-context .sidebar-title,
body.dashboard-context .sidebar-section-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--saas-text-muted) !important;
  margin: 24px 10px 10px 10px !important;
  padding: 0 !important;
}

/* Sidebar Menu Links */
body.dashboard-context .sidebar-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 10px !important;
  border-radius: var(--saas-radius-md) !important;
  color: var(--saas-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
  margin-bottom: 4px !important;
  text-decoration: none !important;
  border-left: none !important;
  background: transparent !important;
}

body.dashboard-context .sidebar-label {
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
  max-width: none !important;
  display: inline-block !important;
}

body.dashboard-context .sidebar-link:hover {
  background: #f1f5f9 !important;
  color: var(--saas-text-primary) !important;
}

body.dashboard-context .sidebar-link.is-active,
body.dashboard-context .sidebar-link.active {
  background: var(--saas-info-bg) !important;
  color: var(--saas-primary) !important;
  font-weight: 700 !important;
}

/* Eliminate orange/yellow sidebar indicators */
body.dashboard-context .sidebar-link::before,
body.dashboard-context .sidebar-link::after {
  display: none !important;
  content: none !important;
}

/* Unboxing Sidebar Icons */
body.dashboard-context .sidebar-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  background: transparent !important;
  color: var(--saas-text-secondary) !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  border: none !important;
}

body.dashboard-context .sidebar-link:hover .sidebar-ico {
  color: var(--saas-text-primary) !important;
}

body.dashboard-context .sidebar-link.is-active .sidebar-ico,
body.dashboard-context .sidebar-link.active .sidebar-ico {
  background: transparent !important;
  color: var(--saas-primary) !important;
}

/* Logout Divider & Styling */
body.dashboard-context .sidebar-logout-section {
  border-top: 1px solid var(--saas-border) !important;
  padding-top: 12px !important;
  margin-top: 20px !important;
}

body.dashboard-context .sidebar-link.sidebar-logout {
  color: #ef4444 !important;
}

body.dashboard-context .sidebar-link.sidebar-logout .sidebar-ico {
  color: #ef4444 !important;
}

body.dashboard-context .sidebar-link.sidebar-logout:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

/* 3. SIDEBAR PROMO CARDS (High Contrast) */
body.dashboard-context .sidebar-upgrade-card,
body.dashboard-context .sidebar-help-card,
body.dashboard-context .sidebar-verification-card {
  background: #f8fafc !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-lg) !important;
  padding: 16px !important;
  margin: 20px 8px 0 8px !important;
  box-shadow: none !important;
}

body.dashboard-context .sidebar-help-card b {
  color: var(--saas-text-primary) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 6px !important;
}

body.dashboard-context .sidebar-help-card p {
  color: var(--saas-text-secondary) !important;
  font-size: 12.5px !important;
  margin: 0 0 8px 0 !important;
}

body.dashboard-context .sidebar-help-card span {
  color: var(--saas-primary) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

body.dashboard-context .sidebar-upgrade-card b {
  color: var(--saas-text-primary) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 6px !important;
}

body.dashboard-context .sidebar-upgrade-card p {
  color: var(--saas-text-secondary) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  margin: 0 0 10px 0 !important;
}

body.dashboard-context .sidebar-upgrade-card a {
  display: inline-block !important;
  color: #ffffff !important;
  background: var(--saas-primary) !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: var(--saas-radius-sm) !important;
  text-decoration: none !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.dashboard-context .sidebar-upgrade-card a:hover {
  background: var(--saas-primary-hover) !important;
}

/* 4. TOPBAR / NAVBAR STYLING */
body.dashboard-context .navbar {
  background: var(--saas-surface) !important;
  border-bottom: 1px solid var(--saas-border) !important;
  box-shadow: none !important;
  height: 70px !important;
  padding: 0 24px !important;
}

body.dashboard-context .navbar .user-chip {
  background: #f8fafc !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-md) !important;
  padding: 6px 12px !important;
}

body.dashboard-context .navbar .user-chip:hover {
  background: #f1f5f9 !important;
}

/* 5. CARDS & KPI WIDGETS */
body.dashboard-context .panel,
body.dashboard-context .dash-card,
body.dashboard-context .card {
  background: var(--saas-surface) !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-lg) !important;
  box-shadow: var(--saas-shadow-md) !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

/* Overriding thick colored accents */
body.is-panel-page .dash-metric-card,
body.is-panel-page [style*="border-left: 4px solid"] {
  border: 1px solid var(--saas-border) !important;
  border-left: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-lg) !important;
  background: var(--saas-surface) !important;
  box-shadow: var(--saas-shadow-md) !important;
  padding: 20px !important;
}

body.dashboard-context .dash-metric-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 110px !important;
}

body.dashboard-context .dash-metric-card small {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--saas-text-secondary) !important;
}

body.dashboard-context .dash-metric-card b {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--saas-text-primary) !important;
  margin: 4px 0 !important;
  display: block !important;
}

body.dashboard-context .dash-metric-card span {
  font-size: 12.5px !important;
  color: var(--saas-text-muted) !important;
}

/* KPI Icons */
body.dashboard-context .dash-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--saas-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  flex-shrink: 0 !important;
}

body.dashboard-context .dash-icon svg {
  width: 22px !important;
  height: 22px !important;
}

body.dashboard-context .dash-icon-blue {
  background: #eff6ff !important;
  color: #2563eb !important;
}

body.dashboard-context .dash-icon-green {
  background: #ecfdf3 !important;
  color: #027a48 !important;
}

body.dashboard-context .dash-icon-purple {
  background: #f5f3ff !important;
  color: #7c3aed !important;
}

body.dashboard-context .dash-icon-orange {
  background: #fff7ed !important;
  color: #ea580c !important;
}

body.dashboard-context .dash-icon-teal {
  background: #f0fdfa !important;
  color: #0d9488 !important;
}

body.dashboard-context .dash-icon-red {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

/* Notice Cards Global Cleanup */
body.dashboard-context .notice-card {
  background: var(--saas-info-bg) !important;
  color: var(--saas-info-text) !important;
  border: 1px solid #bfdbfe !important;
  border-left: 1px solid #bfdbfe !important;
  border-radius: var(--saas-radius-md) !important;
  padding: 16px !important;
  margin-bottom: 24px !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
}

/* 6. TABLES STYLING */
body.dashboard-context .sf-table-wrapper,
body.dashboard-context .table-responsive,
body.dashboard-context .table-card {
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-lg) !important;
  overflow: hidden !important;
  background: var(--saas-surface) !important;
  box-shadow: var(--saas-shadow-md) !important;
  margin-top: 16px !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
}

body.dashboard-context table,
body.dashboard-context .dash-table,
body.dashboard-context .sf-table {
  width: 100% !important;
  border-collapse: collapse !important;
  text-align: left !important;
  background: var(--saas-surface) !important;
  margin: 0 !important;
}

body.dashboard-context table th,
body.dashboard-context .dash-table th,
body.dashboard-context .sf-table th {
  background: #f8fafc !important;
  color: var(--saas-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--saas-border) !important;
}

body.dashboard-context table td,
body.dashboard-context .dash-table td,
body.dashboard-context .sf-table td {
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  color: var(--saas-text-primary) !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
}

body.dashboard-context table tr:last-child td,
body.dashboard-context .dash-table tr:last-child td,
body.dashboard-context .sf-table tr:last-child td {
  border-bottom: none !important;
}

body.dashboard-context table tr:hover td,
body.dashboard-context .dash-table tr:hover td,
body.dashboard-context .sf-table tr:hover td {
  background: #f8fafc !important;
}

/* Inline action forms in table cells */
body.dashboard-context table td form {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
}

body.dashboard-context table td form select,
body.dashboard-context table td form input {
  height: 30px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  border-radius: var(--saas-radius-sm) !important;
  width: auto !important;
  min-width: 90px !important;
  box-shadow: var(--saas-shadow-sm) !important;
}

body.dashboard-context table td form button {
  height: 30px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: var(--saas-radius-sm) !important;
  background: var(--saas-primary) !important;
  border: 1px solid var(--saas-primary) !important;
  color: #ffffff !important;
  cursor: pointer !important;
}

body.dashboard-context table td form button:hover {
  background: var(--saas-primary-hover) !important;
}

/* 7. BUTTONS */
body.dashboard-context .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: var(--saas-radius-md) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

body.dashboard-context .btn-primary,
body.dashboard-context .btn-gold,
body.dashboard-context .btn-dark,
body.dashboard-context .btn-blue {
  background: var(--saas-primary) !important;
  border: 1px solid var(--saas-primary) !important;
  color: #ffffff !important;
  box-shadow: var(--saas-shadow-sm) !important;
}

body.dashboard-context .btn-primary:hover,
body.dashboard-context .btn-gold:hover,
body.dashboard-context .btn-dark:hover,
body.dashboard-context .btn-blue:hover {
  background: var(--saas-primary-hover) !important;
  border-color: var(--saas-primary-hover) !important;
}

body.dashboard-context .btn-secondary,
body.dashboard-context .btn-light,
body.dashboard-context .btn-outline,
body.dashboard-context .btn-ghost {
  background: var(--saas-surface) !important;
  border: 1px solid var(--saas-border) !important;
  color: var(--saas-text-secondary) !important;
  box-shadow: var(--saas-shadow-sm) !important;
}

body.dashboard-context .btn-secondary:hover,
body.dashboard-context .btn-light:hover,
body.dashboard-context .btn-outline:hover,
body.dashboard-context .btn-ghost:hover {
  background: #f9fafb !important;
  color: var(--saas-text-primary) !important;
  border-color: #cbd5e1 !important;
}

body.dashboard-context .btn.mini {
  height: 32px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
}

/* 8. FORM FIELDS & SEARCH/FILTERS */
body.dashboard-context .form-control,
body.dashboard-context input[type="text"],
body.dashboard-context input[type="email"],
body.dashboard-context input[type="password"],
body.dashboard-context input[type="number"],
body.dashboard-context select,
body.dashboard-context textarea {
  width: 100% !important;
  background: var(--saas-surface) !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-md) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: var(--saas-text-primary) !important;
  box-shadow: var(--saas-shadow-sm) !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

body.dashboard-context .form-control:focus,
body.dashboard-context input[type="text"]:focus,
body.dashboard-context select:focus,
body.dashboard-context textarea:focus {
  outline: none !important;
  border-color: var(--saas-primary) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
}

body.dashboard-context label {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--saas-text-secondary) !important;
  margin-bottom: 6px !important;
  display: inline-block !important;
}

/* Forms Grid */
body.dashboard-context .form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  background: var(--saas-surface) !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-lg) !important;
  padding: 24px !important;
  box-shadow: var(--saas-shadow-md) !important;
}

body.dashboard-context .form-grid label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body.dashboard-context .form-grid label textarea {
  min-height: 100px !important;
}

body.dashboard-context .form-grid .full,
body.dashboard-context .form-grid .action-row,
body.dashboard-context .form-grid button,
body.dashboard-context .form-grid div.form-actions {
  grid-column: 1 / -1 !important;
}

/* Filter bar rows */
body.dashboard-context .filterbar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
  background: var(--saas-surface) !important;
  padding: 16px !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-lg) !important;
  box-shadow: var(--saas-shadow-sm) !important;
}

body.dashboard-context .filterbar input,
body.dashboard-context .filterbar select,
body.dashboard-context .filterbar button {
  height: 42px !important;
  margin: 0 !important;
}

/* 9. BADGES */
body.dashboard-context .badge,
body.dashboard-context .status-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  border: none !important;
}

body.dashboard-context .badge-success,
body.dashboard-context .badge-aktif,
body.dashboard-context .badge-verified,
body.dashboard-context .badge-approved,
body.dashboard-context .badge-online,
body.dashboard-context .status-badge[class*="success"],
body.dashboard-context .status-badge[class*="active"],
body.dashboard-context .status-badge[class*="paid"] {
  background: var(--saas-success-bg) !important;
  color: var(--saas-success-text) !important;
  border: 1px solid var(--saas-success-border) !important;
}

body.dashboard-context .badge-warning,
body.dashboard-context .badge-pending,
body.dashboard-context .badge-proses,
body.dashboard-context .status-badge[class*="warning"],
body.dashboard-context .status-badge[class*="pending"] {
  background: var(--saas-warning-bg) !important;
  color: var(--saas-warning-text) !important;
  border: 1px solid #fed7aa !important;
}

body.dashboard-context .badge-danger,
body.dashboard-context .badge-blocked,
body.dashboard-context .badge-rejected,
body.dashboard-context .badge-diblokir,
body.dashboard-context .status-badge[class*="danger"],
body.dashboard-context .status-badge[class*="blocked"],
body.dashboard-context .status-badge[class*="banned"],
body.dashboard-context .status-badge[class*="suspended"] {
  background: var(--saas-danger-bg) !important;
  color: var(--saas-danger-text) !important;
  border: 1px solid #fecaca !important;
}

body.dashboard-context .badge-info,
body.dashboard-context .badge-basic,
body.dashboard-context .badge-premium,
body.dashboard-context .status-badge[class*="info"],
body.dashboard-context .status-badge[class*="new"] {
  background: var(--saas-info-bg) !important;
  color: var(--saas-info-text) !important;
  border: 1px solid #bfdbfe !important;
}

/* 10. EMPTY STATES */
body.dashboard-context .sf110-empty {
  text-align: center !important;
  padding: 40px 24px !important;
  background: #f8fafc !important;
  border: 1px dashed var(--saas-border) !important;
  border-radius: var(--saas-radius-lg) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 16px 0 !important;
}

body.dashboard-context .sf110-empty i {
  font-size: 28px !important;
  color: var(--saas-text-muted) !important;
  margin-bottom: 12px !important;
  font-style: normal !important;
  display: block !important;
}

body.dashboard-context .sf110-empty b {
  font-size: 15px !important;
  color: var(--saas-text-primary) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

body.dashboard-context .sf110-empty p {
  font-size: 13.5px !important;
  color: var(--saas-text-secondary) !important;
  margin: 0 0 16px 0 !important;
}

/* 11. PAGINATION */
body.dashboard-context .pagination,
body.dashboard-context .sf-pagination {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}

body.dashboard-context .pagination a,
body.dashboard-context .pagination span,
body.dashboard-context .sf-pagination a,
body.dashboard-context .sf-pagination span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--saas-radius-md) !important;
  border: 1px solid var(--saas-border) !important;
  background: var(--saas-surface) !important;
  color: var(--saas-text-secondary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}

body.dashboard-context .pagination a:hover,
body.dashboard-context .sf-pagination a:hover {
  background: #f1f5f9 !important;
  color: var(--saas-text-primary) !important;
}

body.dashboard-context .pagination .active,
body.dashboard-context .pagination .current,
body.dashboard-context .sf-pagination .active {
  background: var(--saas-primary) !important;
  color: #ffffff !important;
  border-color: var(--saas-primary) !important;
}

/* 12. DETAILS ACTIONS DROPDOWNS OVERLAY */
body.dashboard-context details.sf-row-action {
  position: relative !important;
  display: inline-block !important;
}

body.dashboard-context details.sf-row-action summary {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: #ffffff !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 8px !important;
  color: #344054 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
}

body.dashboard-context details.sf-row-action summary::-webkit-details-marker {
  display: none !important;
}

body.dashboard-context details.sf-row-action summary::after {
  content: '▼' !important;
  font-size: 9px !important;
  color: #64748b !important;
}

body.dashboard-context details.sf-row-action[open] summary::after {
  content: '▲' !important;
}

body.dashboard-context details.sf-row-action .sf-row-action-panel {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 4px) !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
  padding: 12px !important;
  z-index: 100 !important;
  min-width: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* 13. RESPONSIVE LAYOUT OVERRIDES */
body.dashboard-context .sidebar-brand {
  display: flex !important;
  visibility: visible !important;
}

@media screen and (max-width: 1200px) {
  .buyer-layout-grid,
  .admin-dash-grid,
  body.dashboard-context .dashboard-main > div[style*="1.3fr"],
  body.dashboard-context .dashboard-main > div[style*="1.4fr"],
  body.dashboard-context .dashboard-main > div[style*="1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

@media screen and (max-width: 980px) {
  body.dashboard-context .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
  }
  
  body.dashboard-context .sidebar.open,
  body.dashboard-context.mobile-menu-open .sidebar {
    transform: translateX(0) !important;
  }
  
  body.dashboard-context .sidebar-close-btn {
    display: flex !important;
    position: absolute !important;
    right: 16px !important;
    top: 16px !important;
    width: 32px !important;
    height: 32px !important;
    background: #f1f5f9 !important;
    border: none !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    color: #475569 !important;
    cursor: pointer !important;
    z-index: 1001 !important;
  }

  body.dashboard-context .dashboard-main {
    grid-column: 1 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
  }
  
  .stats-grid,
  .analytics-metrics-grid,
  .admin-dash-grid,
  .buyer-layout-grid,
  body.dashboard-context .stats-grid,
  body.dashboard-context .analytics-metrics-grid,
  body.dashboard-context .admin-dash-grid,
  body.dashboard-context .buyer-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  
  body.dashboard-context .form-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .filter-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  
  /* Quick Actions Stack */
  body.dashboard-context .sf-quick-actions,
  body.dashboard-context div[style*="display: flex; flex-direction: column; gap: 14px;"],
  body.dashboard-context .dashboard-main div[style*="display: flex; gap: 16px; flex-wrap: wrap;"] {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    display: flex !important;
  }
  body.dashboard-context .sf-quick-actions a,
  body.dashboard-context div[style*="display: flex; flex-direction: column; gap: 14px;"] a,
  body.dashboard-context .dashboard-main div[style*="display: flex; gap: 16px; flex-wrap: wrap;"] a,
  body.dashboard-context .dashboard-main div[style*="display: flex; gap: 16px; flex-wrap: wrap;"] button {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

@media screen and (max-width: 600px) {
  .stats-grid,
  .analytics-metrics-grid,
  .admin-dash-grid,
  .buyer-layout-grid,
  body.dashboard-context .stats-grid,
  body.dashboard-context .analytics-metrics-grid,
  body.dashboard-context .admin-dash-grid,
  body.dashboard-context .buyer-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* 14. CUSTOM PREMIUM SCROLLBARS */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 999px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* Hide scrollbar on sidebar but keep scrollable */
body.dashboard-context .sidebar {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
body.dashboard-context .sidebar::-webkit-scrollbar {
  display: none !important;
}

/* 15. SUPER SETTINGS PAGE SPACING POLISH */
body.dashboard-context .form-grid {
  background: var(--saas-surface) !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-lg) !important;
  padding: 32px !important;
  box-shadow: var(--saas-shadow-md) !important;
  margin-top: 20px !important;
}
@media screen and (max-width: 768px) {
  body.dashboard-context .form-grid {
    padding: 16px !important;
  }
}

/* 16. FULL TABLE/LIST & FORM PAGE REPAINT - Premium SaaS styling */
body.dashboard-context .dashboard-main table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 0 !important;
  background: var(--saas-surface) !important;
}
body.dashboard-context .dashboard-main th {
  background: #f8fafc !important;
  color: var(--saas-text-secondary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 16px 20px !important;
  border-bottom: 2px solid var(--saas-border) !important;
  border-top: none !important;
}
body.dashboard-context .dashboard-main td {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--saas-border) !important;
  font-size: 13.5px !important;
  color: var(--saas-text-primary) !important;
  vertical-align: middle !important;
}
body.dashboard-context .dashboard-main tr:hover {
  background: #f8fafc !important;
}
body.dashboard-context .sf-table-wrapper {
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-lg) !important;
  overflow: hidden !important;
  background: var(--saas-surface) !important;
  box-shadow: var(--saas-shadow-sm) !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
body.dashboard-context .filterbar,
body.dashboard-context .filter-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--saas-surface) !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-md) !important;
  padding: 12px 16px !important;
  margin-bottom: 24px !important;
  box-shadow: var(--saas-shadow-sm) !important;
  flex-wrap: wrap !important;
}
body.dashboard-context .filterbar input,
body.dashboard-context .filterbar select,
body.dashboard-context .filter-row input,
body.dashboard-context .filter-row select {
  padding: 8px 12px !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-sm) !important;
  background: var(--saas-surface) !important;
  color: var(--saas-text-primary) !important;
  font-size: 13.5px !important;
  outline: none !important;
  min-width: 160px !important;
  transition: border-color 0.2s ease !important;
}
body.dashboard-context .filterbar input:focus,
body.dashboard-context .filterbar select:focus,
body.dashboard-context .filter-row input:focus,
body.dashboard-context .filter-row select:focus {
  border-color: var(--saas-primary) !important;
}
body.dashboard-context input[type="text"],
body.dashboard-context input[type="email"],
body.dashboard-context input[type="password"],
body.dashboard-context input[type="number"],
body.dashboard-context select,
body.dashboard-context textarea {
  padding: 10px 14px !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-md) !important;
  background: var(--saas-surface) !important;
  color: var(--saas-text-primary) !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}
body.dashboard-context input:focus,
body.dashboard-context select:focus,
body.dashboard-context textarea:focus {
  border-color: var(--saas-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* 17. RESPONSIVE GRID LAYOUT AND SPACING POLISH */
@media screen and (max-width: 980px) {
  body.dashboard-context .stats-grid,
  body.dashboard-context .admin-dash-grid,
  body.dashboard-context .analytics-metrics-grid,
  body.dashboard-context .package-grid,
  body.dashboard-context .form-grid,
  body.dashboard-context .supplier-three-col-grid,
  body.dashboard-context .stats-grid-supplier,
  body.dashboard-context .buyer-layout-grid,
  body.dashboard-context div[style*="display: grid; grid-template-columns"],
  body.dashboard-context div[style*="display:grid; grid-template-columns"],
  body.dashboard-context section[style*="display: grid; grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* 18. PUBLIC PAGES CONTAINER SECTION SPACING */
body.safira-premium-ui:not(.is-panel-page) .container.section {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/* =========================================================
   vSAFE-FINAL: PREMIUM DARK THEME OVERRIDES FOR DASHBOARDS
   ========================================================= */
body.dashboard-context {
  --saas-bg: #090e1a !important; /* Deep dark blue-black */
  --saas-surface: #121824 !important; /* Premium navy-gray card surface */
  --saas-border: #1e293b !important; /* Subtle dark border */
  --saas-text-primary: #f8fafc !important; /* Soft white */
  --saas-text-secondary: #94a3b8 !important; /* Slate gray */
  --saas-text-muted: #64748b !important; /* Muted gray */
  
  --saas-success-bg: rgba(16, 185, 129, 0.1) !important;
  --saas-success-text: #34d399 !important;
  --saas-success-border: rgba(16, 185, 129, 0.2) !important;
  
  --saas-warning-bg: rgba(245, 158, 11, 0.1) !important;
  --saas-warning-text: #fbbf24 !important;
  
  --saas-danger-bg: rgba(239, 68, 68, 0.1) !important;
  --saas-danger-text: #f87171 !important;
  
  --saas-info-bg: rgba(37, 99, 235, 0.1) !important;
  --saas-info-text: #60a5fa !important;
}

/* General overrides to enforce dark backgrounds on containers */
body.dashboard-context #buyerPremiumProfileForm,
body.dashboard-context .dashboard-shell,
body.dashboard-context .dashboard-layout,
body.dashboard-context .dashboard-main,
body.dashboard-context .dashboard-content,
body.dashboard-context .panel,
body.dashboard-context .card,
body.dashboard-context .dash-card {
  background: var(--saas-surface) !important;
  border-color: var(--saas-border) !important;
  color: var(--saas-text-primary) !important;
}

/* Overriding light gradients in inline style panels (e.g. Welcome Card) */
body.dashboard-context .panel[style*="linear-gradient"],
body.dashboard-context div[style*="linear-gradient"],
body.dashboard-context label[style*="linear-gradient"] {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border-color: var(--saas-border) !important;
  color: #ffffff !important;
}

/* Welcome Card Title Contrast */
body.dashboard-context .panel[style*="linear-gradient"] h3,
body.dashboard-context div[style*="linear-gradient"] h1,
body.dashboard-context div[style*="linear-gradient"] h2,
body.dashboard-context div[style*="linear-gradient"] h3,
body.dashboard-context div[style*="linear-gradient"] p {
  color: #ffffff !important;
}

/* Sidebar Dark overrides */
body.dashboard-context .sidebar {
  background: #0f172a !important; /* Deep sidebar background */
  border-right: 1px solid #1e293b !important;
}
body.dashboard-context .sidebar-brand {
  border-bottom: 1px solid #1e293b !important;
  padding-bottom: 16px !important;
}
body.dashboard-context .sidebar-title,
body.dashboard-context .sidebar-section-title {
  color: #64748b !important;
}
body.dashboard-context .sidebar-link {
  color: #94a3b8 !important;
}
body.dashboard-context .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
}
body.dashboard-context .sidebar-link.is-active,
body.dashboard-context .sidebar-link.active {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #38bdf8 !important;
}
body.dashboard-context .sidebar-ico {
  color: #64748b !important;
}
body.dashboard-context .sidebar-link.is-active .sidebar-ico,
body.dashboard-context .sidebar-link.active .sidebar-ico {
  color: #38bdf8 !important;
}
body.dashboard-context .sidebar-upgrade-card,
body.dashboard-context .sidebar-help-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}
body.dashboard-context .sidebar-upgrade-card b,
body.dashboard-context .sidebar-help-card b {
  color: #ffffff !important;
}
body.dashboard-context .sidebar-upgrade-card p,
body.dashboard-context .sidebar-help-card p {
  color: #94a3b8 !important;
}

/* Header & Search Bar */
body.dashboard-context header.navbar {
  background: #0f172a !important;
  border-bottom: 1px solid #1e293b !important;
}
body.dashboard-context .dashboard-search-wrap input {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

/* Tables Dark overrides */
body.dashboard-context table th,
body.dashboard-context .dash-table th,
body.dashboard-context .sf-table th {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-bottom: 1px solid #334155 !important;
}
body.dashboard-context table tr:hover td,
body.dashboard-context .dash-table tr:hover td,
body.dashboard-context .sf-table tr:hover td {
  background: rgba(255, 255, 255, 0.02) !important;
}
body.dashboard-context table td,
body.dashboard-context .dash-table td,
body.dashboard-context .sf-table td {
  border-bottom: 1px solid #1e293b !important;
  color: #cbd5e1 !important;
}

/* Form element text colors */
body.dashboard-context input[type="text"],
body.dashboard-context input[type="email"],
body.dashboard-context input[type="password"],
body.dashboard-context input[type="number"],
body.dashboard-context select,
body.dashboard-context textarea {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}
body.dashboard-context select option {
  background: #121824 !important;
  color: #ffffff !important;
}

/* Info badges, status badges, details tags */
body.dashboard-context .notice-card,
body.dashboard-context .alert {
  border-radius: var(--saas-radius-md) !important;
}
body.dashboard-context .notice-card {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #cbd5e1 !important;
}
body.dashboard-context details.sf-row-action .sf-row-action-panel {
  background: #121824 !important;
  border-color: #334155 !important;
}

/* Fix inline styles on list items */
body.dashboard-context div[style*="background:#fff"],
body.dashboard-context div[style*="background: #fff"],
body.dashboard-context li[style*="background:#fff"],
body.dashboard-context li[style*="background: #fff"] {
  background: var(--saas-surface) !important;
  border-color: var(--saas-border) !important;
  color: var(--saas-text-primary) !important;
}
/* Case-insensitive and whitespace-insensitive overrides for unreadable text inside dark panels/cards */
body.dashboard-context .panel h1,
body.dashboard-context .panel h2,
body.dashboard-context .panel h3,
body.dashboard-context .panel h4,
body.dashboard-context .panel h5,
body.dashboard-context .panel p,
body.dashboard-context .panel span,
body.dashboard-context .panel b,
body.dashboard-context .panel strong,
body.dashboard-context .panel small,
body.dashboard-context .panel td,
body.dashboard-context .panel th,
body.dashboard-context .panel li,
body.dashboard-context .card h1,
body.dashboard-context .card h2,
body.dashboard-context .card h3,
body.dashboard-context .card p,
body.dashboard-context .card span,
body.dashboard-context .card b,
body.dashboard-context .card strong,
body.dashboard-context .card td,
body.dashboard-context .card th,
body.dashboard-context .card li,
body.dashboard-context .dash-card h1,
body.dashboard-context .dash-card h2,
body.dashboard-context .dash-card h3,
body.dashboard-context .dash-card p,
body.dashboard-context .dash-card span,
body.dashboard-context .dash-card b,
body.dashboard-context .dash-card strong,
body.dashboard-context .dash-card td,
body.dashboard-context .dash-card th,
body.dashboard-context .dash-card li {
  color: var(--saas-text-primary) !important;
}

/* Secondary/muted text overrides inside panels/cards (case-insensitive) */
body.dashboard-context .panel p,
body.dashboard-context .panel small,
body.dashboard-context .panel span[style*="color:#64748b" i],
body.dashboard-context .panel span[style*="color: #64748b" i],
body.dashboard-context .panel small[style*="color:#64748b" i],
body.dashboard-context .panel small[style*="color: #64748b" i],
body.dashboard-context .panel p[style*="color:#64748b" i],
body.dashboard-context .panel p[style*="color: #64748b" i],
body.dashboard-context .card p,
body.dashboard-context .card small,
body.dashboard-context .card span[style*="color:#64748b" i],
body.dashboard-context .card span[style*="color: #64748b" i],
body.dashboard-context .card small[style*="color:#64748b" i],
body.dashboard-context .card small[style*="color: #64748b" i],
body.dashboard-context .card p[style*="color:#64748b" i],
body.dashboard-context .card p[style*="color: #64748b" i] {
  color: var(--saas-text-secondary) !important;
}

/* =========================================================
   vSAFE-PANEL-FINAL: FULL DASHBOARD LAYOUT CONSISTENCY REPAIR
   ========================================================= */

body.dashboard-context {
  --sidebar-width: 260px !important;
  --topbar-height: 64px !important;
}

/* 1. STRUCTURAL WRAPPER & DESKTOP ALIGNMENT */
body.dashboard-context .dashboard-layout {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  background: var(--saas-bg) !important;
}

/* Sidebar default topbar case */
body.dashboard-context .sidebar,
body.is-panel-page .sidebar {
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  position: fixed !important;
  top: var(--topbar-height) !important;
  left: 0 !important;
  height: calc(100vh - var(--topbar-height)) !important;
  z-index: 1000 !important;
  background: #0b0f19 !important; /* Cohesive Premium Dark */
  border-right: 1px solid #1e293b !important;
  box-sizing: border-box !important;
  padding: 16px 12px 24px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Sidebar override WITHOUT topbar case */
body.dashboard-context:not(:has(.navbar)) .sidebar,
body.is-panel-page:not(:has(.navbar)) .sidebar {
  top: 0 !important;
  height: 100vh !important;
}

/* Main Content default topbar case */
body.dashboard-context .dashboard-main {
  margin-left: var(--sidebar-width) !important;
  width: calc(100% - var(--sidebar-width)) !important;
  box-sizing: border-box !important;
  padding: 32px !important;
  background: var(--saas-bg) !important;
  min-height: calc(100vh - var(--topbar-height)) !important;
  display: block !important;
}

/* Main Content override WITHOUT topbar case */
body.dashboard-context:not(:has(.navbar)) .dashboard-main {
  min-height: 100vh !important;
}

/* 2. HEADER/NAVBAR UNIFICATION */
body.dashboard-context .navbar,
body.is-panel-page .navbar {
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  background: #0b0f19 !important;
  border-bottom: 1px solid #1e293b !important;
  box-shadow: none !important;
  padding: 0 24px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1001 !important;
  box-sizing: border-box !important;
}

body.dashboard-context .navbar .nav-inner,
body.is-panel-page .navbar .nav-inner {
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

/* Topbar Inner Components */
body.dashboard-context .dashboard-search-wrap input {
  background: #121824 !important;
  border: 1px solid #1e293b !important;
  color: #ffffff !important;
}

body.dashboard-context .navbar .user-chip,
body.dashboard-context .navbar .btn-density-topbar,
body.dashboard-context .navbar .top-notification-trigger {
  background: #121824 !important;
  border: 1px solid #1e293b !important;
  color: #ffffff !important;
}

body.dashboard-context .navbar .user-chip b,
body.dashboard-context .navbar .btn-density-topbar span,
body.dashboard-context .navbar .top-notification-trigger span {
  color: #ffffff !important;
}

/* Dropdown menu background & contrast */
body.dashboard-context #userTopbarDropdown {
  background: #121824 !important;
  border: 1px solid #1e293b !important;
}

body.dashboard-context #userTopbarDropdown a {
  color: #cbd5e1 !important;
}

body.dashboard-context #userTopbarDropdown a:hover {
  background: #1e293b !important;
  color: #ffffff !important;
}

/* 3. SIDEBAR COMPONENTS & DISCIPLINE */
body.dashboard-context .sidebar-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 60px !important;
  padding: 0 12px 16px 12px !important;
  border-bottom: 1px solid #1e293b !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
}

body.dashboard-context .sidebar-logo {
  max-height: 32px !important;
  width: auto !important;
  display: block !important;
}

body.dashboard-context .sidebar-title,
body.dashboard-context .sidebar-section-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #475569 !important;
  margin: 20px 12px 8px 12px !important;
  padding: 0 !important;
  display: block !important;
}

body.dashboard-context .sidebar-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  margin-bottom: 4px !important;
  box-sizing: border-box !important;
}

body.dashboard-context .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

body.dashboard-context .sidebar-link.is-active,
body.dashboard-context .sidebar-link.active {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #38bdf8 !important;
  font-weight: 700 !important;
}

body.dashboard-context .sidebar-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  color: inherit !important;
  font-size: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.dashboard-context .sidebar-label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block !important;
}

/* Sidebar scrollbar hide rules */
body.dashboard-context .sidebar {
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.dashboard-context .sidebar::-webkit-scrollbar {
  display: none !important;
}

/* Sidebar cards premium contrast */
body.dashboard-context .sidebar-upgrade-card,
body.dashboard-context .sidebar-help-card,
body.dashboard-context .sidebar-verification-card {
  background: #121824 !important;
  border: 1px solid #1e293b !important;
  border-radius: 12px !important;
  padding: 14px !important;
  margin: 16px 10px 0 10px !important;
  box-sizing: border-box !important;
}

body.dashboard-context .sidebar-upgrade-card b,
body.dashboard-context .sidebar-help-card b {
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

body.dashboard-context .sidebar-upgrade-card p,
body.dashboard-context .sidebar-help-card p {
  color: #94a3b8 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

body.dashboard-context .sidebar-upgrade-card a,
body.dashboard-context .sidebar-help-card span {
  display: block !important;
  color: #ffffff !important;
  background: var(--saas-primary) !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

body.dashboard-context .sidebar-help-card span {
  background: #1e293b !important;
  margin-top: 4px !important;
}

/* 4. STATISTICS CARDS & GRIDS UNIFICATION */
body.dashboard-context .stats-grid,
body.dashboard-context .dash-metric-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
}

@media screen and (max-width: 1024px) {
  body.dashboard-context .stats-grid,
  body.dashboard-context .dash-metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 600px) {
  body.dashboard-context .stats-grid,
  body.dashboard-context .dash-metric-strip {
    grid-template-columns: 1fr !important;
  }
}

/* Card aesthetics */
body.dashboard-context .dash-metric-card {
  background: var(--saas-surface) !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 110px !important;
}

body.dashboard-context .dash-metric-card small {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--saas-text-secondary) !important;
  display: block !important;
  margin-bottom: 6px !important;
}

body.dashboard-context .dash-metric-card b {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--saas-text-primary) !important;
  display: block !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

body.dashboard-context .dash-metric-card span {
  font-size: 12px !important;
  color: var(--saas-text-muted) !important;
  display: block !important;
  margin-top: 4px !important;
}

body.dashboard-context .dash-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* 5. TYPOGRAPHY & GENERAL SPACING */
body.dashboard-context,
body.dashboard-context * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif !important;
}

body.dashboard-context h1,
body.dashboard-context h2,
body.dashboard-context h3,
body.dashboard-context h4 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

body.dashboard-context h1 { font-size: 24px !important; }
body.dashboard-context h2 { font-size: 20px !important; margin-top: 24px !important; margin-bottom: 16px !important; }
body.dashboard-context h3 { font-size: 16px !important; margin-bottom: 12px !important; }

/* Contextual Text Colors inside Dark panels/cards */
body.dashboard-context .panel h1,
body.dashboard-context .panel h2,
body.dashboard-context .panel h3,
body.dashboard-context .panel h4,
body.dashboard-context .panel h5,
body.dashboard-context .panel b,
body.dashboard-context .panel strong,
body.dashboard-context .card h1,
body.dashboard-context .card h2,
body.dashboard-context .card h3,
body.dashboard-context .card b,
body.dashboard-context .card strong,
body.dashboard-context .dash-card h1,
body.dashboard-context .dash-card h2,
body.dashboard-context .dash-card h3,
body.dashboard-context .dash-card b,
body.dashboard-context .dash-card strong {
  color: #ffffff !important;
}

body.dashboard-context .panel p,
body.dashboard-context .panel span,
body.dashboard-context .panel small,
body.dashboard-context .panel li,
body.dashboard-context .card p,
body.dashboard-context .card span,
body.dashboard-context .card small,
body.dashboard-context .card li,
body.dashboard-context .dash-card p,
body.dashboard-context .dash-card span,
body.dashboard-context .dash-card small,
body.dashboard-context .dash-card li {
  color: #94a3b8 !important;
}

/* Specific protection for light components to keep dark text readability */
body.dashboard-context [style*="background:#fff" i] h1,
body.dashboard-context [style*="background:#fff" i] h2,
body.dashboard-context [style*="background:#fff" i] h3,
body.dashboard-context [style*="background:#fff" i] p,
body.dashboard-context [style*="background:#fff" i] span,
body.dashboard-context [style*="background:#fff" i] b,
body.dashboard-context [style*="background:#fff" i] strong,
body.dashboard-context [style*="background:#fff" i] small,
body.dashboard-context [style*="background: #fff" i] h1,
body.dashboard-context [style*="background: #fff" i] h2,
body.dashboard-context [style*="background: #fff" i] h3,
body.dashboard-context [style*="background: #fff" i] p,
body.dashboard-context [style*="background: #fff" i] span,
body.dashboard-context [style*="background: #fff" i] b,
body.dashboard-context [style*="background: #fff" i] strong,
body.dashboard-context [style*="background: #fff" i] small,
body.dashboard-context [style*="background-color:#fff" i] h1,
body.dashboard-context [style*="background-color:#fff" i] h2,
body.dashboard-context [style*="background-color:#fff" i] h3,
body.dashboard-context [style*="background-color:#fff" i] p,
body.dashboard-context [style*="background-color:#fff" i] span,
body.dashboard-context [style*="background-color:#fff" i] b,
body.dashboard-context [style*="background-color:#fff" i] strong,
body.dashboard-context [style*="background-color:#fff" i] small,
body.dashboard-context [style*="background-color: #fff" i] h1,
body.dashboard-context [style*="background-color: #fff" i] h2,
body.dashboard-context [style*="background-color: #fff" i] h3,
body.dashboard-context [style*="background-color: #fff" i] p,
body.dashboard-context [style*="background-color: #fff" i] span,
body.dashboard-context [style*="background-color: #fff" i] b,
body.dashboard-context [style*="background-color: #fff" i] strong,
body.dashboard-context [style*="background-color: #fff" i] small,
body.dashboard-context .alert.warning h1,
body.dashboard-context .alert.warning h2,
body.dashboard-context .alert.warning h3,
body.dashboard-context .alert.warning p,
body.dashboard-context .alert.warning span,
body.dashboard-context .alert.warning b,
body.dashboard-context .alert.warning strong,
body.dashboard-context .alert.warning small {
  color: #0f172a !important;
}

/* 6. GENERAL TABLES & RESPONSIVENESS */
body.dashboard-context .sf-table-wrapper {
  background: var(--saas-surface) !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: 12px !important;
  overflow-x: auto !important;
  margin-top: 16px !important;
  margin-bottom: 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.dashboard-context table {
  width: 100% !important;
  border-collapse: collapse !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

body.dashboard-context table th {
  background: #0b0f19 !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--saas-border) !important;
}

body.dashboard-context table td {
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  color: #cbd5e1 !important;
  border-bottom: 1px solid var(--saas-border) !important;
  vertical-align: middle !important;
}

body.dashboard-context table tr:last-child td {
  border-bottom: none !important;
}

body.dashboard-context table tr:hover td {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* 7. UNIFIED BUTTONS & FORM ELEMENTS */
body.dashboard-context .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  border: none !important;
}

body.dashboard-context .btn-primary,
body.dashboard-context .btn-gold,
body.dashboard-context .btn-blue {
  background: var(--saas-primary) !important;
  color: #ffffff !important;
}

body.dashboard-context .btn-primary:hover,
body.dashboard-context .btn-gold:hover,
body.dashboard-context .btn-blue:hover {
  background: var(--saas-primary-hover) !important;
}

body.dashboard-context .btn-secondary,
body.dashboard-context .btn-light,
body.dashboard-context .btn-outline {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

body.dashboard-context .btn-secondary:hover,
body.dashboard-context .btn-light:hover,
body.dashboard-context .btn-outline:hover {
  background: #334155 !important;
}

body.dashboard-context .btn-danger {
  background: #ef4444 !important;
  color: #ffffff !important;
}

body.dashboard-context .btn-danger:hover {
  background: #dc2626 !important;
}

body.dashboard-context .btn.mini {
  height: 32px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  border-radius: 6px !important;
}

/* 8. MOBILE VIEW drawer & offcanvas layout (max-width: 980px) */
@media screen and (max-width: 980px) {
  body.dashboard-context .sidebar,
  body.is-panel-page .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: 100vh !important;
    transform: translateX(-105%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 9999 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    padding-top: 24px !important;
  }
  
  body.dashboard-context.mobile-menu-open .sidebar,
  body.is-panel-page.mobile-menu-open .sidebar {
    transform: translateX(0) !important;
  }
  
  body.dashboard-context .dashboard-main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 16px !important;
    min-height: auto !important;
  }
  
  /* Mobile menu overlay backdrop */
  body.dashboard-context.mobile-menu-open::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(9, 14, 26, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 9998 !important;
  }
  
  /* Prevent horizontal page overflow */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}