/* Dark Theme Additional Styles */

/* Dark theme for main content area */
[data-theme="dark"] main {
    background-color: var(--color--background);
    color: var(--color-black);
}

[data-theme="dark"] .main-content,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .page-content {
    background-color: var(--color--background);
    color: var(--color-black);
}

/* Dark theme for specific components */
[data-theme="dark"] .service-card,
[data-theme="dark"] .order-card,
[data-theme="dark"] .cabinet-card {
    background-color: var(--color-white);
    border-color: var(--color-stroke);
    color: var(--color-black);
}

[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .order-card:hover,
[data-theme="dark"] .cabinet-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.15);
}

/* Dark theme for navigation */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .panel-menu {
    background-color: var(--color-white);
    border-color: var(--color-stroke);
}

[data-theme="dark"] .sidebar a,
[data-theme="dark"] .panel-menu a {
    color: var(--color-black);
}

[data-theme="dark"] .sidebar a:hover,
[data-theme="dark"] .panel-menu a:hover {
    color: var(--color-primary);
    background-color: var(--color-grey-background);
}

[data-theme="dark"] .sidebar a.active,
[data-theme="dark"] .panel-menu a.active {
    background-color: var(--color-primary-100);
    color: var(--color-primary);
}

/* Dark theme for forms */
[data-theme="dark"] .form-group label {
    color: var(--color-black);
}

[data-theme="dark"] .form-control {
    background-color: var(--color-grey-background);
    color: var(--color-black);
    border-color: var(--color-stroke);
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--color-grey-background);
    color: var(--color-black);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-100);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--color-grey);
}

/* Dark theme for status indicators */
[data-theme="dark"] .status-success {
    background-color: var(--color-green-150);
    color: var(--color-green);
}

[data-theme="dark"] .status-warning {
    background-color: var(--color-orange-100);
    color: var(--color-orange);
}

[data-theme="dark"] .status-error {
    background-color: var(--color-red-100);
    color: var(--color-red);
}

[data-theme="dark"] .status-info {
    background-color: var(--color-primary-100);
    color: var(--color-primary);
}

/* Dark theme for progress bars */
[data-theme="dark"] .progress {
    background-color: var(--color-grey-light);
}

[data-theme="dark"] .progress-bar {
    background-color: var(--color-primary);
}

/* Dark theme for pagination */
[data-theme="dark"] .pagination .page-link {
    background-color: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-stroke);
}

[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--color-grey-background);
    color: var(--color-black);
    border-color: var(--color-stroke);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Dark theme for tooltips */
[data-theme="dark"] .tooltip .tooltip-inner {
    background-color: var(--color-black);
    color: var(--color-white);
}

[data-theme="dark"] .tooltip .arrow::before {
    border-top-color: var(--color-black);
}

/* Dark theme for badges */
[data-theme="dark"] .badge {
    background-color: var(--color-primary);
    color: var(--color-white);
}

[data-theme="dark"] .badge-secondary {
    background-color: var(--color-grey);
    color: var(--color-white);
}

/* Dark theme for code blocks */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background-color: var(--color-grey-background);
    color: var(--color-black);
    border-color: var(--color-stroke);
}

/* Dark theme for scrollbars */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-grey-background);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-grey);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* Dark theme for selection */
[data-theme="dark"] ::selection {
    background-color: var(--color-primary-100);
    color: var(--color-black);
}

/* Dark theme for focus states */
[data-theme="dark"] *:focus {
    outline-color: var(--color-primary);
}

/* Dark theme for disabled elements */
[data-theme="dark"] .disabled,
[data-theme="dark"] [disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark theme for loading states */
[data-theme="dark"] .loading {
    background-color: var(--color-grey-background);
    color: var(--color-grey);
}

/* Dark theme for empty states */
[data-theme="dark"] .empty-state {
    color: var(--color-grey);
}

[data-theme="dark"] .empty-state svg {
    fill: var(--color-grey);
}

/* Dark theme for dividers */
[data-theme="dark"] hr {
    border-color: var(--color-stroke);
}

/* Dark theme for shadows */
[data-theme="dark"] .shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .shadow-lg {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Dark theme for borders */
[data-theme="dark"] .border {
    border-color: var(--color-stroke);
}

[data-theme="dark"] .border-top {
    border-top-color: var(--color-stroke);
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--color-stroke);
}

[data-theme="dark"] .border-left {
    border-left-color: var(--color-stroke);
}

[data-theme="dark"] .border-right {
    border-right-color: var(--color-stroke);
}

/* Dark theme for footer */
[data-theme="dark"] footer {
    background-color: var(--color-grey-background);
    color: var(--color-black);
    border-top: 1px solid var(--color-stroke);
}

[data-theme="dark"] footer a {
    color: var(--color-black);
}

[data-theme="dark"] footer a:hover {
    color: var(--color-primary);
}

/* Dark theme for sections and blocks */
[data-theme="dark"] .section,
[data-theme="dark"] .block,
[data-theme="dark"] .wrapper {
    background-color: var(--color--background);
    color: var(--color-black);
}

/* Dark theme for icons and images */
[data-theme="dark"] .icon,
[data-theme="dark"] svg {
    fill: var(--color-black);
}

[data-theme="dark"] .icon:hover,
[data-theme="dark"] svg:hover {
    fill: var(--color-primary);
}

/* Dark theme for text elements */
[data-theme="dark"] .text-muted {
    color: var(--color-grey) !important;
}

[data-theme="dark"] .text-primary {
    color: var(--color-primary) !important;
}

[data-theme="dark"] .text-secondary {
    color: var(--color-grey) !important;
}

/* Dark theme for backgrounds */
[data-theme="dark"] .bg-light {
    background-color: var(--color-grey-background) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--color-white) !important;
}

[data-theme="dark"] .bg-primary {
    background-color: var(--color-primary) !important;
}

/* Dark theme for borders */
[data-theme="dark"] .border-light {
    border-color: var(--color-stroke) !important;
}

[data-theme="dark"] .border-primary {
    border-color: var(--color-primary) !important;
}

/* Dark theme for service menu dropdown */
[data-theme="dark"] .menu--dropdown .menu--list {
    background-color: var(--color-white) !important;
    border-top-color: var(--color-stroke) !important;
}

[data-theme="dark"] .menu--dropdown .serviceMap_group__e7UHS {
    color: var(--color-black);
}

[data-theme="dark"] .menu--dropdown .serviceMap_title__tAlxF {
    color: var(--color-black);
}

[data-theme="dark"] .menu--dropdown .serviceMap_mainTitle__Uhb6F {
    color: var(--color-black);
}

[data-theme="dark"] .menu--dropdown .serviceMap_mainTitle__Uhb6F:hover {
    color: var(--color-primary);
}

[data-theme="dark"] .menu--dropdown .serviceMap_btn__nvE9h {
    color: var(--color-black);
}

[data-theme="dark"] .menu--dropdown .serviceMap_btn__nvE9h:hover {
    color: var(--color-primary);
    background-color: var(--color-grey-background);
}

/* Dark theme for mobile filters */
[data-theme="dark"] .mobile-filter-container {
    background-color: var(--color-white);
    border-color: var(--color-stroke);
}

[data-theme="dark"] .mobile-filter {
    background-color: var(--color-white);
}

[data-theme="dark"] .filter-section {
    background-color: transparent;
}

[data-theme="dark"] .filter-label {
    color: var(--color-black);
    font-weight: 500;
}

[data-theme="dark"] .filter-dropdown {
    background-color: transparent;
}

[data-theme="dark"] .filter-input {
    background-color: var(--color-grey-background);
    border-color: var(--color-stroke);
    color: var(--color-black);
}

[data-theme="dark"] .filter-input:hover {
    border-color: var(--color-primary);
}

[data-theme="dark"] .filter-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-100);
}

[data-theme="dark"] .filter-selected {
    color: var(--color-black);
}

[data-theme="dark"] .filter-text {
    color: var(--color-black);
}

[data-theme="dark"] .filter-icon {
    color: var(--color-grey);
}

[data-theme="dark"] .filter-arrow {
    color: var(--color-grey);
}

[data-theme="dark"] .filter-dropdown-menu {
    background-color: var(--color-white);
    border-color: var(--color-stroke);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .filter-option {
    color: var(--color-black);
    background-color: transparent;
}

[data-theme="dark"] .filter-option:hover {
    background-color: var(--color-grey-background);
    color: var(--color-black);
}

[data-theme="dark"] .filter-option:active {
    background-color: var(--color-primary-100);
    color: var(--color-primary);
}

[data-theme="dark"] .filter-option-icon {
    color: var(--color-grey);
}

[data-theme="dark"] .filter-option:hover .filter-option-icon {
    color: var(--color-primary);
}