/**
 * Darker Grey Theme for Sidebar, Header, and Container
 * Applies darker grey styling for better readability
 */

/* Apply darker grey theme - works with both light and dark theme attributes */
:root {
  /* Darker Grey Sidebar - narrower */
  --pc-sidebar-background: #ced4da;
  --pc-sidebar-color: #000000;
  --pc-sidebar-color-rgb: 0, 0, 0;
  --pc-sidebar-caption-color: #343a40;
  --pc-sidebar-shadow: none;
  
  /* Darker Grey Header */
  --pc-header-background: #ced4da;
  --pc-header-color: #000000;
  --pc-header-shadow: none;
  --pc-header-submenu-background: #dee2e6;
  --pc-header-submenu-color: #343a40;
  
  /* Darker grey active/hover background */
  --pc-active-background: rgba(0, 0, 0, 0.12);
  
  /* Override blue active color with grey/black */
  --pc-sidebar-active-color: #000000 !important;
  
  /* Override Bootstrap primary color to prevent blue from being used */
  --bs-primary: #000000 !important;
}

/* Also override on body and html to ensure it applies everywhere */
body,
html,
[data-pc-theme="light"],
[data-pc-theme="dark"],
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --pc-sidebar-active-color: #000000 !important;
  --bs-primary: #000000 !important;
}

/* Make sidebar width - 240px to fit text width */
/* Set width only when sidebar is NOT hidden - let template's JavaScript handle the toggle */
.pc-sidebar:not(.pc-sidebar-hide) {
  width: 240px;
}

.pc-sidebar:not(.pc-sidebar-hide) .navbar-wrapper {
  width: 240px;
}

/* Let template handle the hidden state - don't override */
/* Template uses: .pc-sidebar.pc-sidebar-hide { width: 0; } */

/* Update mobile breakpoints for sidebar */
@media (max-width: 1024px) {
  .pc-sidebar {
    width: 240px;
    left: -240px;
  }
  
  .pc-sidebar .navbar-wrapper {
    width: 240px;
  }
  
  .pc-sidebar.mob-sidebar-active {
    left: 0;
  }
  
  /* On mobile, sidebar is hidden by default (left: -240px) - extend frame elements to left edge */
  /* CRITICAL: Force all elements to left edge (0px) - no white space */
  .pc-header {
    left: 0 !important;
    right: 0 !important;
  }
  
  .pc-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .pc-footer {
    left: 0 !important;
    right: 0 !important;
  }
  
  /* Override any template defaults that might reserve sidebar space on mobile */
  body .pc-header {
    left: 0 !important;
  }
  
  body .pc-container {
    margin-left: 0 !important;
  }
  
  body .pc-footer {
    left: 0 !important;
  }
}

@media (min-width: 1025px) {
  .navbar-overlay .pc-sidebar:not(.pc-over-menu-active) {
    left: -240px !important;
  }
}

/* Darker Grey Container Background */
.pc-container {
  background-color: #dee2e6;
}

.pc-content {
  background-color: #dee2e6;
}

/* Fix hover states for sidebar collapse and popup buttons - darker grey */
/* Ensure hover works properly and doesn't persist after click */
.pc-header .pc-h-item.pc-sidebar-collapse .pc-head-link::before,
.pc-header .pc-h-item.pc-sidebar-popup .pc-head-link::before {
  background: transparent !important;
  transform: scale(0) !important;
}

.pc-header .pc-h-item.pc-sidebar-collapse .pc-head-link:hover::before,
.pc-header .pc-h-item.pc-sidebar-popup .pc-head-link:hover::before {
  background: rgba(0, 0, 0, 0.18) !important;
  transform: scale(1) !important;
}

/* Reset active and focus states - don't let them override hover */
.pc-header .pc-h-item.pc-sidebar-collapse .pc-head-link:active::before,
.pc-header .pc-h-item.pc-sidebar-popup .pc-head-link:active::before {
  background: transparent !important;
  transform: scale(0) !important;
}

.pc-header .pc-h-item.pc-sidebar-collapse .pc-head-link:focus::before,
.pc-header .pc-h-item.pc-sidebar-popup .pc-head-link:focus::before {
  background: transparent !important;
  transform: scale(0) !important;
  outline: none !important;
}

/* But allow hover to work even when active/focus */
.pc-header .pc-h-item.pc-sidebar-collapse .pc-head-link:hover:active::before,
.pc-header .pc-h-item.pc-sidebar-popup .pc-head-link:hover:active::before,
.pc-header .pc-h-item.pc-sidebar-collapse .pc-head-link:hover:focus::before,
.pc-header .pc-h-item.pc-sidebar-popup .pc-head-link:hover:focus::before {
  background: rgba(0, 0, 0, 0.18) !important;
  transform: scale(1) !important;
}

.pc-header .pc-h-item.pc-sidebar-collapse .pc-head-link i,
.pc-header .pc-h-item.pc-sidebar-popup .pc-head-link i {
  color: #000000 !important;
}

.pc-header .pc-h-item.pc-sidebar-collapse .pc-head-link:hover i,
.pc-header .pc-h-item.pc-sidebar-popup .pc-head-link:hover i {
  color: #000000 !important;
}

/* Fix user profile hover state - darker grey */
/* Ensure hover works properly and doesn't persist after click */
.pc-header .header-user-profile .pc-head-link::before {
  background: transparent !important;
  transform: scale(0) !important;
}

.pc-header .header-user-profile .pc-head-link:hover::before {
  background: rgba(0, 0, 0, 0.18) !important;
  transform: scale(1) !important;
}

/* Reset active and focus states - don't let them override hover */
.pc-header .header-user-profile .pc-head-link:active::before {
  background: transparent !important;
  transform: scale(0) !important;
}

.pc-header .header-user-profile .pc-head-link:focus::before {
  background: transparent !important;
  transform: scale(0) !important;
  outline: none !important;
}

/* But allow hover to work even when active/focus */
.pc-header .header-user-profile .pc-head-link:hover:active::before,
.pc-header .header-user-profile .pc-head-link:hover:focus::before {
  background: rgba(0, 0, 0, 0.18) !important;
  transform: scale(1) !important;
}

.pc-header .header-user-profile .pc-head-link {
  color: #000000 !important;
}

.pc-header .header-user-profile .pc-head-link:hover {
  color: #000000 !important;
}

/* Additional styling for better appearance */
.pc-sidebar .pc-link:hover {
  background-color: rgba(0, 0, 0, 0.12);
}

/* Reduce spacing between icon and text in sidebar to save space */
.pc-sidebar .pc-micon {
  margin-right: 5px !important; /* Tightened from 8px to 5px */
}

/* Tighten left padding of sidebar links (space between icon and left edge) */
.pc-sidebar .pc-link {
  padding-left: 16px !important; /* Reduced from 24px to 16px */
  padding-top: 6px !important; /* Reduced from 10px to 6px - tightens space between list items */
  padding-bottom: 6px !important; /* Reduced from 10px to 6px - tightens space between list items */
}

/* Fix top-level sidebar items active/clicked state - remove blue colors */
/* Use the EXACT same pattern as submenu active items (which work) but for top-level */
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link {
  font-weight: 500 !important;
  color: #000000 !important;
}

/* Match the submenu pattern for :before */
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link:before {
  opacity: 0.1 !important;
  background: #000000 !important;
}

/* Match the submenu pattern for ::after (vertical line) */
.pc-sidebar .pc-navbar > .pc-item.active:not(.pc-hasmenu) > .pc-link::after {
  content: "" !important;
  position: absolute !important;
  top: 0px !important;
  right: 0px !important;
  width: 2px !important;
  height: 100% !important;
  background: #000000 !important;
}

/* For non-menu items, match the submenu pattern */
.pc-sidebar .pc-navbar > .pc-item.active:not(.pc-hasmenu) > .pc-link:before {
  opacity: 0.1 !important;
  background: #000000 !important;
}

/* Force ALL elements inside active links to be black - comprehensive override */
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link *,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link span,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link .pc-micon,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link .pc-micon *,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link .pc-mtext,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link i,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link i::before,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link svg,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link svg *,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link .ti,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link .ti::before {
  color: #000000 !important;
  fill: #000000 !important;
  stroke: #000000 !important;
}

/* SVG specific overrides */
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link svg path,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link svg circle,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link svg rect,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link svg line,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link svg polygon {
  fill: #000000 !important;
  stroke: #000000 !important;
}

/* Fix submenu (Level 2.2, 3.3, etc.) to match grey theme - remove blue colors */
/* Level 2 submenu (e.g., Level 2.1) - 58px left padding, match primary level height (6px top/bottom) */
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-link {
  color: #000000 !important;
  padding: 6px 30px 6px 58px !important; /* Match primary level: 6px top/bottom */
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item:hover > .pc-link {
  color: #000000 !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item.pc-trigger > .pc-link,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item.active > .pc-link,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item:focus > .pc-link {
  color: #000000 !important;
  font-weight: 500;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item.pc-trigger > .pc-link::before,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item.active > .pc-link::before,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item:focus > .pc-link::before {
  background: rgba(0, 0, 0, 0.1) !important;
  opacity: 1 !important;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item.pc-trigger > .pc-link::after,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item.active > .pc-link::after,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item:focus > .pc-link::after {
  background: #000000 !important;
}

/* Nested submenus (Level 3, Level 4) */
/* Level 3 submenu (e.g., Level 3.1) - 80px left padding, match primary level height (6px top/bottom) */
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-submenu .pc-link {
  color: #000000 !important;
  padding: 6px 30px 6px 80px !important; /* Match primary level: 6px top/bottom */
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-submenu .pc-item:hover > .pc-link {
  color: #000000 !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-submenu .pc-item.pc-trigger > .pc-link,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-submenu .pc-item.active > .pc-link {
  color: #000000 !important;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-submenu .pc-item.pc-trigger > .pc-link::after,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-submenu .pc-item.active > .pc-link::after {
  background: #000000 !important;
}

/* Level 4 submenu (e.g., Level 4.1) - 95px left padding, match primary level height (6px top/bottom) */
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-submenu .pc-submenu .pc-link {
  color: #000000 !important;
  padding: 6px 30px 6px 95px !important; /* Match primary level: 6px top/bottom */
}

.pc-header .pc-head-link:hover {
  color: #000000;
}

/* Grey theme for Search Bar - brighter */
.pc-header .header-search {
  background-color: #f1f3f5;
  border-radius: 6px;
}

.pc-header .header-search .form-control {
  background-color: #f1f3f5;
  border-color: #ced4da;
  color: #000000;
}

.pc-header .header-search .form-control:focus {
  background-color: #f1f3f5;
  border-color: #adb5bd;
  color: #000000;
}

.pc-header .header-search .icon-search {
  color: #6c757d;
}

/* Grey theme for Cards */
.card {
  background-color: #e9ecef;
  border-color: #ced4da;
}

.card-body {
  background-color: #e9ecef;
  color: #000000;
}

.card-body h1,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5,
.card-body h6,
.card-body p,
.card-body span {
  color: #000000;
}

/* Grey theme for Tables */
.table {
  background-color: #e9ecef;
  color: #000000;
}

.table thead th {
  background-color: #dee2e6;
  color: #000000;
  border-color: #ced4da;
  font-weight: 600;
}

.table tbody td {
  background-color: #e9ecef;
  color: #000000;
  border-color: #ced4da;
}

.table-hover > tbody > tr:hover > * {
  background-color: #dee2e6;
  color: #000000;
}

.table-borderless tbody td,
.table-borderless thead th {
  border-color: transparent;
}

/* Grey theme for Chart containers - slightly darker */
/* Chart background - match card background color */
.card .card-body [id*="chart"],
.card .card-body [id*="Chart"],
.apexcharts-canvas,
.apexcharts-svg,
[id*="chart"],
[id*="Chart"] {
  background-color: #e9ecef !important; /* Match card background */
}

/* Grey theme for Dropdown menus */
.pc-header .pc-h-dropdown {
  background-color: #e9ecef;
  border-color: #ced4da;
}

.pc-header .pc-h-dropdown .dropdown-item {
  color: #000000;
}

.pc-header .pc-h-dropdown .dropdown-item:hover {
  background-color: #dee2e6;
  color: #000000;
}

/* Fix Profile and Setting buttons in user dropdown - remove blue theme */
.pc-header .dropdown-user-profile .drp-tabs .nav-link {
  color: #000000 !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

.pc-header .dropdown-user-profile .drp-tabs .nav-link:hover {
  color: #000000 !important;
  background-color: #dee2e6 !important;
  border-color: transparent !important;
}

.pc-header .dropdown-user-profile .drp-tabs .nav-link.active {
  color: #000000 !important;
  background-color: #dee2e6 !important;
  border-color: transparent !important;
}

.pc-header .dropdown-user-profile .drp-tabs .nav-link.active::after {
  background-color: #000000 !important;
}

.pc-header .dropdown-user-profile .drp-tabs .nav-link i {
  color: #000000 !important;
}

.pc-header .dropdown-user-profile .drp-tabs .nav-link.active i {
  color: #000000 !important;
}

.pc-header .dropdown-user-profile .drp-tabs .nav-link:hover i {
  color: #000000 !important;
}

/* Make general text darker throughout */
html {
  height: 100% !important;
  overflow: hidden !important; /* Prevent scrolling */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body {
  color: #000000;
  height: 100vh !important; /* Match viewport height exactly */
  overflow: hidden !important; /* Prevent scrolling */
  margin: 0 !important;
  padding: 0 !important;
}

.pc-content {
  color: #000000;
}

.pc-content h1,
.pc-content h2,
.pc-content h3,
.pc-content h4,
.pc-content h5,
.pc-content h6,
.pc-content p {
  color: #000000;
}

/* Remove mask/overlay effect on content container when sidebar is hidden */
/* CRITICAL: When sidebar is hidden, container MUST extend to left edge (0px) */
.pc-sidebar.pc-sidebar-hide ~ .pc-container {
  position: relative !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Force container to left edge - override all template defaults */
.pc-sidebar.pc-sidebar-hide ~ .pc-container,
.pc-sidebar[style*="width: 0"] ~ .pc-container,
.pc-sidebar[style*="width:0"] ~ .pc-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.pc-sidebar.pc-sidebar-hide ~ .pc-container::before,
.pc-sidebar.pc-sidebar-hide ~ .pc-container::after {
  display: none !important;
}

/* Fix header transition - prevent white background flash */
/* Extend header to align with sidebar on left, add right margin for frame */
.pc-header {
  background: var(--pc-header-background) !important;
  transition: left 0.15s ease, right 0.15s ease, background-color 0.15s ease !important;
  left: 240px !important;
  right: 0 !important;
}

/* When sidebar is hidden, header must extend to left edge (0px) - no white space */
/* CRITICAL: Force header to left edge when sidebar is hidden */
.pc-sidebar.pc-sidebar-hide ~ .pc-header {
  background: var(--pc-header-background) !important;
  left: 0 !important;
  right: 0 !important;
}

/* Force header to left edge - override all template defaults */
.pc-sidebar.pc-sidebar-hide ~ .pc-header,
.pc-sidebar[style*="width: 0"] ~ .pc-header,
.pc-sidebar[style*="width:0"] ~ .pc-header {
  left: 0 !important;
  right: 0 !important;
}

/* On mobile, sidebar is hidden by default - header extends to left edge */
@media (max-width: 1024px) {
  .pc-header {
    left: 0 !important;
    right: 0 !important;
  }
  
  /* Override any template defaults that might reserve sidebar space */
  body .pc-header {
    left: 0 !important;
  }
}

/* Ensure header wrapper maintains background during transition */
.pc-header .header-wrapper {
  background: transparent;
}

/* Overlay for mobile - transparent but clickable to close sidebar */
/* Make overlay transparent so it doesn't mask content, but keep click functionality */
/* Use default cursor (not pointer) so it doesn't look clickable */
.pc-menu-overlay {
  background-color: transparent !important;
  opacity: 0 !important;
  pointer-events: auto !important;
  cursor: default !important;
}

/* Remove border lines for sidebar and top bar */
.pc-sidebar {
  box-shadow: none !important;
  border: none !important;
}

.pc-header {
  box-shadow: none !important;
  border: none !important;
}

/* Ensure container background is consistent during transition, adjust for narrower sidebar */
/* Extend container to align with sidebar on left */
/* Add even padding on all sides for spacing */
/* Make container height relative to viewport */
.pc-container {
  transition: margin-left 0.15s ease, margin-right 0.15s ease, background-color 0.15s ease !important;
  background-color: #dee2e6 !important;
  margin-left: 240px !important;
  margin-right: 0 !important;
  padding: 15px !important; /* Even padding on all sides (top, right, bottom, left) */
  margin-bottom: 0 !important;
  height: calc(100vh - 15px) !important; /* Exact height relative to viewport, account for footer */
  max-height: calc(100vh - 15px) !important; /* Prevent overflow */
  overflow-y: auto !important; /* Allow scrolling within container if content exceeds */
  overflow-x: hidden !important;
}

/* Add even padding to content area */
.pc-container .pc-content {
  padding: 0 !important; /* Let container handle padding */
  margin: 0 !important;
}

/* Add even spacing for cards - scale larger */
.pc-container .card {
  margin: 0 0 15px 0 !important; /* Even bottom margin between cards */
  border-radius: 4px !important; /* Slight border radius */
}

/* Add even padding to card body for spacing */
.pc-container .card .card-body {
  padding: 15px !important; /* Even padding on all sides */
}

/* When sidebar is hidden, container must extend to left edge (0px) - no white space */
.pc-sidebar.pc-sidebar-hide ~ .pc-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* On mobile, sidebar is hidden by default - container extends to left edge */
@media (max-width: 1024px) {
  .pc-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Override any template defaults that might reserve sidebar space */
  body .pc-container {
    margin-left: 0 !important;
  }
}


/* Footer styling - fixed at bottom to function as frame */
/* Extend footer to align with sidebar on left */
.pc-footer {
  background-color: #ced4da !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: none !important;
  transition: left 0.15s ease, right 0.15s ease, background-color 0.15s ease !important;
  min-height: 15px !important;
  height: 15px !important;
  padding: 0 !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 240px !important;
  right: 0 !important;
  z-index: 995 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

/* Hide footer content but keep frame structure */
.pc-footer .footer-wrapper {
  display: none !important;
}

/* When sidebar is hidden, footer must extend to left edge (0px) - no white space */
.pc-sidebar.pc-sidebar-hide ~ .pc-footer {
  left: 0 !important;
  right: 0 !important;
}

/* Force footer to left edge - override all template defaults */
.pc-sidebar.pc-sidebar-hide ~ .pc-footer,
.pc-sidebar[style*="width: 0"] ~ .pc-footer,
.pc-sidebar[style*="width:0"] ~ .pc-footer {
  left: 0 !important;
  right: 0 !important;
}

/* On mobile, sidebar is hidden by default - footer extends to left edge */
@media (max-width: 1024px) {
  .pc-footer {
    left: 0 !important;
    right: 0 !important;
  }
  
  /* Override any template defaults that might reserve sidebar space */
  body .pc-footer {
    left: 0 !important;
  }
}

/* Right margin bar - same thickness as footer (15px) */
/* Right margin bar removed */

/* ============================================
   Authentication Pages (Login/Register/Index) Grey Theme
   ============================================ */

/* Body and HTML background - must be set first for auth pages */
body:has(.auth-main),
html:has(.auth-main),
body .auth-main {
  background-color: #ced4da !important;
  background: #ced4da !important;
}

/* For browsers that don't support :has() */
body.auth-main-page {
  background-color: #ced4da !important;
  background: #ced4da !important;
}

/* Auth main container - match navbar grey background */
.auth-main {
  background-color: #ced4da !important;
  background: #ced4da !important;
}

/* Auth wrapper */
.auth-main .auth-wrapper {
  background-color: #ced4da !important;
  background: #ced4da !important;
}

/* Auth form - remove background SVG image, use solid grey color */
.auth-main .auth-wrapper.v3 .auth-form {
  background: #ced4da !important; /* Match navbar grey - override SVG */
  background-color: #ced4da !important;
  background-image: none !important; /* Remove SVG background image */
  background-repeat: no-repeat !important;
  background-size: auto !important;
  background-position: center !important;
}

/* Additional specificity to override compiled CSS */
body .auth-main .auth-wrapper.v3 .auth-form,
html body .auth-main .auth-wrapper.v3 .auth-form {
  background: #ced4da !important;
  background-color: #ced4da !important;
  background-image: none !important;
}

/* Remove or minimize the masking overlay - no blur, just transparent */
.auth-main .auth-wrapper.v3 .auth-form:after {
  background: transparent !important; /* Remove white/grey overlay */
  backdrop-filter: none !important; /* Remove blur */
  -webkit-backdrop-filter: none !important;
  opacity: 0 !important; /* Make it completely transparent */
  display: none !important; /* Completely hide it */
}

/* Auth card styling - match dashboard card style */
.auth-main .auth-wrapper .auth-form .card {
  background-color: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Auth card body */
.auth-main .auth-wrapper .auth-form .card .card-body {
  background-color: #ffffff !important;
}

/* Auth header logo area */
.auth-main .auth-wrapper .auth-header {
  background-color: transparent !important;
}

/* Auth footer - match grey theme */
.auth-main .auth-wrapper .auth-footer {
  background-color: transparent !important;
  color: #000000 !important;
}

.auth-main .auth-wrapper .auth-footer a {
  color: #000000 !important;
}

.auth-main .auth-wrapper .auth-footer .footer-link a {
  color: #000000 !important;
}

.auth-main .auth-wrapper .auth-footer .footer-link a:hover {
  color: #343a40 !important;
}

/* Form labels - black text */
.auth-main .auth-wrapper .auth-form .form-label {
  color: #000000 !important;
}

/* Form inputs - match grey theme */
.auth-main .auth-wrapper .auth-form .form-control {
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
  color: #000000 !important;
}

.auth-main .auth-wrapper .auth-form .form-control:focus {
  border-color: #ced4da !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1) !important;
}

/* Form check labels */
.auth-main .auth-wrapper .auth-form .form-check-label {
  color: #343a40 !important;
}

/* Headings - black text */
.auth-main .auth-wrapper .auth-form h3,
.auth-main .auth-wrapper .auth-form h5 {
  color: #000000 !important;
}

/* Links - black text with hover (no blue) */
.auth-main .auth-wrapper .auth-form .link-primary {
  color: #000000 !important;
}

.auth-main .auth-wrapper .auth-form .link-primary:hover {
  color: #343a40 !important;
  text-decoration: underline;
}

/* Text-primary class - change from blue to black/grey */
.auth-main .auth-wrapper .auth-form .text-primary,
.auth-main .text-primary {
  color: #000000 !important;
}

.auth-main .auth-wrapper .auth-form .text-primary:hover,
.auth-main .text-primary:hover {
  color: #343a40 !important;
}

/* Text-white class - change to black/grey for readability on grey background */
.auth-main .auth-wrapper .auth-form .text-white,
.auth-main .text-white {
  color: #000000 !important;
}

body.landing-page .text-white {
  color: #000000 !important;
}

/* Landing page header text - change all white text to black */
body.landing-page header h1,
body.landing-page header h1.text-white,
body.landing-page header h5,
body.landing-page header h5.text-white,
body.landing-page header .text-white {
  color: #000000 !important;
}

/* Landing page navbar - Dashboard link text */
body.landing-page .navbar .nav-link,
body.landing-page .navbar-dark .nav-link,
body.landing-page .navbar .navbar-nav .nav-link {
  color: #000000 !important;
}

body.landing-page .navbar .nav-link:hover {
  color: #343a40 !important;
}

/* Landing page navbar toggle button - change white icon to black, no border */
body.landing-page .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

body.landing-page .navbar-toggler {
  border: none !important;
  border-color: transparent !important;
}

/* Change focus/active effect to match button effect color */
body.landing-page .navbar-toggler:focus {
  background-color: rgba(0, 0, 0, 0.18) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15) !important;
  outline: none !important;
}

body.landing-page .navbar-toggler:active {
  background-color: rgba(0, 0, 0, 0.18) !important;
  outline: none !important;
}

body.landing-page .navbar-toggler:focus-visible {
  background-color: rgba(0, 0, 0, 0.18) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15) !important;
  outline: none !important;
}

/* Text muted - darker grey */
.auth-main .auth-wrapper .auth-form .text-muted {
  color: #6c757d !important;
}

/* Separator styling */
.auth-main .auth-wrapper .saprator span {
  background-color: #ced4da !important;
  color: #000000 !important;
}

.auth-main .auth-wrapper .saprator:after {
  background-color: #dee2e6 !important;
}

/* Buttons - match user profile hover effect (rgba(0, 0, 0, 0.18)) - no border */
.auth-main .auth-wrapper .auth-form .btn-primary {
  background-color: rgba(0, 0, 0, 0.18) !important;
  border: none !important;
  border-color: transparent !important;
  color: #000000 !important;
}

.auth-main .auth-wrapper .auth-form .btn-primary:hover {
  background-color: rgba(0, 0, 0, 0.25) !important;
  border: none !important;
  border-color: transparent !important;
  color: #000000 !important;
}

.auth-main .auth-wrapper .auth-form .btn-primary:focus {
  background-color: rgba(0, 0, 0, 0.25) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15) !important;
  color: #000000 !important;
}

.auth-main .auth-wrapper .auth-form .btn-primary:active {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: none !important;
  border-color: transparent !important;
  color: #000000 !important;
}

.auth-main .auth-wrapper .auth-form .btn-light-primary {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #000000 !important;
}

.auth-main .auth-wrapper .auth-form .btn-light-primary:hover {
  background-color: #e9ecef !important;
  border-color: #ced4da !important;
  color: #000000 !important;
}

/* Social login buttons text */
.auth-main .auth-wrapper .auth-form .btn-light-primary.text-muted {
  color: #000000 !important;
}

/* Index/Landing page - match navbar grey background */
body.landing-page {
  background-color: #ced4da !important;
}

body.landing-page header {
  background-color: #ced4da !important;
}

/* Landing page buttons - Purchase Now and Live Preview (btn-primary) - no border */
body.landing-page .btn-primary {
  background-color: rgba(0, 0, 0, 0.18) !important;
  border: none !important;
  border-color: transparent !important;
  color: #000000 !important;
}

body.landing-page .btn-primary:hover {
  background-color: rgba(0, 0, 0, 0.25) !important;
  border: none !important;
  border-color: transparent !important;
  color: #000000 !important;
}

body.landing-page .btn-primary:focus {
  background-color: rgba(0, 0, 0, 0.25) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15) !important;
  color: #000000 !important;
}

body.landing-page .btn-primary:active {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: none !important;
  border-color: transparent !important;
  color: #000000 !important;
}

/* Explore Components (btn-outline-primary) - keep border unchanged */
body.landing-page .btn-outline-primary {
  border-color: rgba(0, 0, 0, 0.3) !important;
  color: #000000 !important;
  background-color: transparent !important;
}

body.landing-page .btn-outline-primary:hover {
  background-color: rgba(0, 0, 0, 0.18) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
  color: #000000 !important;
}

/* Landing page navbar */
body.landing-page .navbar {
  background-color: #ced4da !important;
}

/* Landing page text-primary class - change from blue to black */
body.landing-page .text-primary {
  color: #000000 !important;
}

body.landing-page .text-primary:hover {
  color: #343a40 !important;
}

/* Center buttons and add spacing on small screens */
body.landing-page header .button-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
}

@media (max-width: 768px) {
  body.landing-page header .button-container {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  body.landing-page header .button-container .btn {
    width: auto !important;
    min-width: 200px !important;
    margin: 0 !important;
  }
  
  body.landing-page header .button-container .btn-outline-primary {
    margin-right: 0 !important;
  }
}

/* Force user profile dropdown to align right on mobile */
@media (max-width: 767.98px) {
  .header-user-profile .dropdown-menu.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin-right: 0 !important;
    margin-left: auto !important;
  }
  
  .header-user-profile .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    transform: none !important;
  }
}