/* Dark mode for specific areas that were still light */
.dark-mode .navbar {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color);
}

.dark-mode .navbar-brand,
.dark-mode .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

.dark-mode .navbar-toggler {
    border-color: var(--border-color);
}

.dark-mode .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%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dark mode for main content background */
.dark-mode .main-content,
.dark-mode .container-fluid,
.dark-mode .container {
    background-color: var(--bg-primary) !important;
}

/* Dark mode for add section card */
.dark-mode .add-section-card {
    background-color: var(--bg-secondary) !important;
    border: 2px dashed var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .add-section-card:hover {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--primary-color) !important;
}

/* Dark mode for section headers */
.dark-mode .section-header {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .section-title {
    color: var(--text-primary) !important;
}

/* Dark mode for menu item cards */
.dark-mode .menu-item .card {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .menu-item .card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 12px var(--shadow-color) !important;
}

/* Dark mode for default icons (fork and knife) */
.dark-mode .default-icon {
    color: var(--text-muted) !important;
}

.dark-mode .menu-item-icon {
    color: var(--text-muted) !important;
}

/* Dark mode for buttons */
.dark-mode .btn {
    color: var(--text-primary) !important;
}

.dark-mode .btn-outline-secondary {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .btn-outline-secondary:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode for form controls */
.dark-mode .form-control {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .form-control:focus {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25) !important;
}

/* Dark mode for modals */
.dark-mode .modal-content {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .modal-header {
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .modal-footer {
    border-top: 1px solid var(--border-color) !important;
}

.dark-mode .modal-title {
    color: var(--text-primary) !important;
}

.dark-mode .btn-close {
    filter: invert(1) !important;
}

/* Dark mode for dropdowns */
.dark-mode .dropdown-menu {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .dropdown-item {
    color: var(--text-primary) !important;
}

.dark-mode .dropdown-item:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode for alerts */
.dark-mode .alert {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dark mode for text colors */
.dark-mode .text-muted {
    color: var(--text-muted) !important;
}

.dark-mode .text-dark {
    color: var(--text-primary) !important;
}

.dark-mode .text-light {
    color: var(--text-secondary) !important;
}

/* Dark mode for borders */
.dark-mode .border {
    border-color: var(--border-color) !important;
}

.dark-mode .border-top {
    border-top-color: var(--border-color) !important;
}

.dark-mode .border-bottom {
    border-bottom-color: var(--border-color) !important;
}

.dark-mode .border-start {
    border-left-color: var(--border-color) !important;
}

.dark-mode .border-end {
    border-right-color: var(--border-color) !important;
}

/* Dark mode for specific admin elements */
.dark-mode .admin-header {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .admin-sidebar {
    background-color: var(--bg-secondary) !important;
    border-right: 1px solid var(--border-color) !important;
}

.dark-mode .admin-main {
    background-color: var(--bg-primary) !important;
}

/* Dark mode for language selector */
.dark-mode .language-selector {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .language-selector .btn {
    color: var(--text-primary) !important;
}

.dark-mode .language-selector .btn.active {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Dark mode for restaurant name area */
.dark-mode .restaurant-name {
    color: var(--text-primary) !important;
}

/* Dark mode for action buttons */
.dark-mode .action-btn {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .action-btn:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode for price display */
.dark-mode .price-display {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode for add item button */
.dark-mode .add-item-btn {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .add-item-btn:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode for specific components in admin dashboard */
.dark-mode .card-body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .list-group-item {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .list-group-item:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Dark mode for menu item image placeholders */
.dark-mode .menu-item img[src*="placeholder"] {
    filter: brightness(0.7) !important;
}

/* Dark mode for cutlery icons */
.dark-mode .fa-utensils,
.dark-mode .cutlery-icon {
    color: var(--text-muted) !important;
}

/* Dark mode for input groups */
.dark-mode .input-group-text {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dark mode for badges */
.dark-mode .badge {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode for progress bars */
.dark-mode .progress {
    background-color: var(--bg-tertiary) !important;
}

.dark-mode .progress-bar {
    background-color: var(--primary-color) !important;
}

/* Dark mode for tabs */
.dark-mode .nav-tabs {
    border-bottom-color: var(--border-color) !important;
}

.dark-mode .nav-tabs .nav-link {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode for tooltips */
.dark-mode .tooltip-inner {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode for popovers */
.dark-mode .popover {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .popover-header {
    background-color: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .popover-body {
    color: var(--text-primary) !important;
}

/* Dark mode for navbar - more specific targeting */
.dark-mode .navbar-light {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .navbar-light .navbar-brand {
    color: var(--text-primary) !important;
}

.dark-mode .navbar-light .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

.dark-mode .navbar-light .navbar-toggler {
    border-color: var(--border-color) !important;
}

.dark-mode .navbar-light .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%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Dark mode for header area */
.dark-mode .header-area,
.dark-mode .top-bar,
.dark-mode .main-header {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Dark mode for language selector buttons */
.dark-mode .language-selector .btn {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .language-selector .btn.active {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Dark mode for restaurant name area */
.dark-mode .restaurant-name,
.dark-mode .restaurant-title {
    color: var(--text-primary) !important;
}

/* Dark mode for main content area - ensure no light backgrounds */
.dark-mode .main-content,
.dark-mode .content-area,
.dark-mode .page-content {
    background-color: var(--bg-primary) !important;
}

/* Dark mode for menu item cards - make them gray instead of dark */
.dark-mode .menu-item .card {
    background-color: #4a4a4a !important; /* Gray instead of very dark */
    border: 1px solid #5a5a5a !important;
    color: var(--text-primary) !important;
}

.dark-mode .menu-item .card:hover {
    background-color: #5a5a5a !important; /* Slightly lighter gray on hover */
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 12px var(--shadow-color) !important;
}

/* Dark mode for add section card */
.dark-mode .add-section-card {
    background-color: #4a4a4a !important; /* Gray instead of very dark */
    border: 2px dashed #6a6a6a !important;
    color: var(--text-primary) !important;
}

.dark-mode .add-section-card:hover {
    background-color: #5a5a5a !important;
    border-color: var(--primary-color) !important;
}

/* Dark mode for section headers */
.dark-mode .section-header {
    background-color: #4a4a4a !important; /* Gray instead of very dark */
    border: 1px solid #5a5a5a !important;
    color: var(--text-primary) !important;
}

/* Dark mode for image placeholders */
.dark-mode .menu-item .card .image-placeholder,
.dark-mode .menu-item .card .placeholder-image {
    background-color: #3a3a3a !important; /* Dark gray for image placeholders */
    border: 1px solid #4a4a4a !important;
}

/* Dark mode for specific admin dashboard elements */
.dark-mode .admin-dashboard {
    background-color: var(--bg-primary) !important;
}

.dark-mode .dashboard-content {
    background-color: var(--bg-primary) !important;
}

/* Dark mode for any remaining light areas */
.dark-mode .bg-light {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .bg-white {
    background-color: var(--bg-secondary) !important;
}

/* Dark mode for specific Bootstrap classes that might be causing light areas */
.dark-mode .container,
.dark-mode .container-fluid {
    background-color: var(--bg-primary) !important;
}

.dark-mode .row {
    background-color: transparent !important;
}

.dark-mode .col,
.dark-mode .col-* {
    background-color: transparent !important;
}

/* Dark mode for specific elements that might be causing the light sidebar */
.dark-mode .sidebar,
.dark-mode .side-nav,
.dark-mode .navigation {
    background-color: var(--bg-secondary) !important;
    border-right: 1px solid var(--border-color) !important;
}

/* Dark mode for any remaining light backgrounds */
.dark-mode * {
    background-color: inherit !important;
}

.dark-mode .bg-transparent {
    background-color: transparent !important;
}

/* More specific targeting for navbar and header issues */
.dark-mode .navbar {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .navbar .container,
.dark-mode .navbar .container-fluid {
    background-color: transparent !important;
}

.dark-mode .navbar .navbar-brand {
    color: var(--text-primary) !important;
}

.dark-mode .navbar .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

.dark-mode .navbar .navbar-toggler {
    border-color: var(--border-color) !important;
}

.dark-mode .navbar .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%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Target specific navbar classes that might be causing issues */
.dark-mode .navbar-expand-lg {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .navbar-expand-md {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .navbar-expand-sm {
    background-color: var(--bg-secondary) !important;
}

/* Dark mode for body and html to ensure no light backgrounds */
.dark-mode body {
    background-color: var(--bg-primary) !important;
}

.dark-mode html {
    background-color: var(--bg-primary) !important;
}

/* Dark mode for specific admin template elements */
.dark-mode .admin-template {
    background-color: var(--bg-primary) !important;
}

.dark-mode .admin-template .navbar {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .admin-template .main-content {
    background-color: var(--bg-primary) !important;
}

/* Dark mode for any div elements that might have light backgrounds */
.dark-mode div {
    background-color: inherit !important;
}

.dark-mode div.bg-light {
    background-color: var(--bg-secondary) !important;
}

.dark-mode div.bg-white {
    background-color: var(--bg-secondary) !important;
}

/* Dark mode for specific menu item card elements */
.dark-mode .menu-item {
    background-color: transparent !important;
}

.dark-mode .menu-item .card-body {
    background-color: #4a4a4a !important; /* Gray for card body */
}

.dark-mode .menu-item .card-header {
    background-color: #3a3a3a !important; /* Darker gray for card header */
}

/* Dark mode for image placeholders in menu items */
.dark-mode .menu-item img {
    background-color: #3a3a3a !important;
    border: 1px solid #4a4a4a !important;
}

/* Dark mode for any remaining light elements */
.dark-mode .light,
.dark-mode .bg-light,
.dark-mode .bg-white,
.dark-mode .bg-light-gray {
    background-color: var(--bg-secondary) !important;
}

/* Force dark mode on all elements with light backgrounds */
.dark-mode [class*="bg-light"],
.dark-mode [class*="bg-white"],
.dark-mode [class*="light"] {
    background-color: var(--bg-secondary) !important;
}

/* Ultra-specific targeting for stubborn elements */
.dark-mode .navbar.navbar-light {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .navbar.navbar-expand-lg.navbar-light {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .navbar.navbar-expand-md.navbar-light {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .navbar.navbar-expand-sm.navbar-light {
    background-color: var(--bg-secondary) !important;
}

/* Target any element with specific background colors */
.dark-mode [style*="background-color: white"],
.dark-mode [style*="background-color: #fff"],
.dark-mode [style*="background-color: #ffffff"],
.dark-mode [style*="background-color: #f8f9fa"],
.dark-mode [style*="background-color: #e9ecef"] {
    background-color: var(--bg-secondary) !important;
}

/* Force dark mode on all possible navbar variations */
.dark-mode nav {
    background-color: var(--bg-secondary) !important;
}

.dark-mode header {
    background-color: var(--bg-secondary) !important;
}

/* Dark mode for any remaining light areas in the main content */
.dark-mode .main-content > * {
    background-color: transparent !important;
}

.dark-mode .main-content .container,
.dark-mode .main-content .container-fluid {
    background-color: transparent !important;
}

/* Dark mode for specific admin dashboard layout */
.dark-mode .admin-layout {
    background-color: var(--bg-primary) !important;
}

.dark-mode .admin-layout .navbar {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .admin-layout .sidebar {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .admin-layout .main-content {
    background-color: var(--bg-primary) !important;
}

/* Override any inline styles that might be causing light backgrounds */
.dark-mode [style] {
    background-color: inherit !important;
}

/* Force dark mode on body and all its children */
.dark-mode body,
.dark-mode body * {
    background-color: inherit !important;
}

/* Specific overrides for common light background classes */
.dark-mode .bg-light,
.dark-mode .bg-white,
.dark-mode .bg-light-gray,
.dark-mode .bg-gray-100,
.dark-mode .bg-gray-200,
.dark-mode .bg-gray-300 {
    background-color: var(--bg-secondary) !important;
}

/* Dark mode for any remaining card elements */
.dark-mode .card {
    background-color: #4a4a4a !important; /* Gray instead of very dark */
    border-color: #5a5a5a !important;
}

.dark-mode .card-header {
    background-color: #3a3a3a !important;
    border-bottom-color: #5a5a5a !important;
}

.dark-mode .card-body {
    background-color: #4a4a4a !important;
}

.dark-mode .card-footer {
    background-color: #3a3a3a !important;
    border-top-color: #5a5a5a !important;
}