/* === HostMop Dark Mode Client Area Fixes === */
/* Fix: Card headers showing #f5f5f5 white in dark mode */
[data-theme="dark"] .card-sidebar .card-header,
[data-bs-theme="dark"] .card-sidebar .card-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Fix: Close button black text on dark bg */
[data-theme="dark"] .close,
[data-bs-theme="dark"] .close {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
}

/* Fix: Accent card borders barely visible */
[data-theme="dark"] .card-accent-gold {
    border-left: 3px solid #f0b73a !important;
}
[data-theme="dark"] .card-accent-blue {
    border-left: 3px solid #4f6ef7 !important;
}
[data-theme="dark"] .card-accent-asbestos {
    border-left: 3px solid #8c8c8c !important;
}
[data-theme="dark"] .card-accent-emerald {
    border-left: 3px solid #22c55e !important;
}

/* Fix: btn-success green should use brand blue */
[data-theme="dark"] .btn-success,
[data-bs-theme="dark"] .btn-success {
    background-color: #4f6ef7 !important;
    border-color: #4f6ef7 !important;
}

/* Fix: Update button styling */
[data-theme="dark"] .btn-success.btn-sm,
[data-bs-theme="dark"] .btn-success.btn-sm {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Fix: Sidebar menu item hover states */
[data-theme="dark"] .sidebar-menu-item-wrapper:hover,
[data-bs-theme="dark"] .sidebar-menu-item-wrapper:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Fix: Active sidebar items */
[data-theme="dark"] .sidebar-menu-item-wrapper.active,
[data-bs-theme="dark"] .sidebar-menu-item-wrapper.active {
    background-color: rgba(79, 110, 247, 0.15) !important;
    border-left: 2px solid #4f6ef7 !important;
}

/* Fix: Panel body dark bg consistency */
[data-theme="dark"] .card .card-body,
[data-theme="dark"] .card .panel-body,
[data-bs-theme="dark"] .card .card-body,
[data-bs-theme="dark"] .card .panel-body {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Fix: Input fields dark background */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="password"] {
    background-color: #1e2030 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Fix: Table styling in dark mode */
[data-theme="dark"] .table,
[data-bs-theme="dark"] .table {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Fix: Alert dark styling */
[data-theme="dark"] .alert,
[data-bs-theme="dark"] .alert {
    border: none !important;
    border-radius: 8px !important;
}

/* Fix: Badge styling */
[data-theme="dark"] .badge-success,
[data-bs-theme="dark"] .badge-success {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #22c55e !important;
}
[data-theme="dark"] .badge-warning,
[data-bs-theme="dark"] .badge-warning {
    background-color: rgba(240, 183, 58, 0.2) !important;
    color: #f0b73a !important;
}
[data-theme="dark"] .badge-danger,
[data-bs-theme="dark"] .badge-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

/* Fix: Breadcrumb styling */
[data-theme="dark"] .breadcrumb,
[data-bs-theme="dark"] .breadcrumb {
    background-color: transparent !important;
}

/* Fix: Pagination */
[data-theme="dark"] .pagination .page-link,
[data-bs-theme="dark"] .pagination .page-link {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .pagination .active .page-link,
[data-bs-theme="dark"] .pagination .active .page-link {
    background-color: #4f6ef7 !important;
    border-color: #4f6ef7 !important;
    color: #fff !important;
}


/* === Modal dark theme === */
[data-theme="dark"] .modal-content,
[data-bs-theme="dark"] .modal-content {
    background-color: #1a1d29 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .modal-body,
[data-bs-theme="dark"] .modal-body {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .modal-title,
[data-bs-theme="dark"] .modal-title {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* === Lightbox dark theme === */
[data-theme="dark"] .lb-outerContainer,
[data-bs-theme="dark"] .lb-outerContainer {
    background-color: #1a1d29 !important;
}

[data-theme="dark"] .lb-data .lb-caption,
[data-theme="dark"] .lb-data .lb-number,
[data-bs-theme="dark"] .lb-data .lb-caption,
[data-bs-theme="dark"] .lb-data .lb-number {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* === Panel borders - consistent with borderless design === */
[data-theme="dark"] .panel,
[data-bs-theme="dark"] .panel {
    border: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .panel-heading,
[data-bs-theme="dark"] .panel-heading {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* === Service status badges === */
[data-theme="dark"] .label-success,
[data-bs-theme="dark"] .label-success {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #22c55e !important;
}

[data-theme="dark"] .label-warning,
[data-bs-theme="dark"] .label-warning {
    background-color: rgba(240, 183, 58, 0.2) !important;
    color: #f0b73a !important;
}

[data-theme="dark"] .label-danger,
[data-bs-theme="dark"] .label-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

/* === Well/thumbnail dark === */
[data-theme="dark"] .well,
[data-bs-theme="dark"] .well {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .thumbnail,
[data-bs-theme="dark"] .thumbnail {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: #1a1d29 !important;
}

/* === Dropdown menus dark === */
[data-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #1a1d29 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .dropdown-item,
[data-bs-theme="dark"] .dropdown-item,
[data-theme="dark"] .dropdown-menu li a,
[data-bs-theme="dark"] .dropdown-menu li a {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu li a:hover,
[data-bs-theme="dark"] .dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

/* === Tooltip and popover dark === */
[data-theme="dark"] .tooltip-inner,
[data-bs-theme="dark"] .tooltip-inner {
    background-color: #2a2d3a !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* === List group dark === */
[data-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .list-group-item {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* === Nav tabs dark === */
[data-theme="dark"] .nav-tabs,
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .nav-tabs .nav-link,
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: #4f6ef7 !important;
    border-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) transparent !important;
    background-color: transparent !important;
}

/* === Progress bars dark === */
[data-theme="dark"] .progress,
[data-bs-theme="dark"] .progress {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* === Client area specific sidebar cards === */
[data-theme="dark"] .card.card-sidebar,
[data-bs-theme="dark"] .card.card-sidebar {
    background-color: #1a1d29 !important;
    border: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .card.card-sidebar .card-header,
[data-bs-theme="dark"] .card.card-sidebar .card-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .card.card-sidebar .card-body,
[data-bs-theme="dark"] .card.card-sidebar .card-body {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* === Domain check input on dashboard === */
[data-theme="dark"] .domain-check-input,
[data-bs-theme="dark"] .domain-check-input {
    background-color: #1e2030 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* === Client area main content panels === */
[data-theme="dark"] .card.card-accent,
[data-bs-theme="dark"] .card.card-accent {
    background-color: #1a1d29 !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* === Consistent accent card header styling === */
[data-theme="dark"] .card.card-accent .card-header,
[data-bs-theme="dark"] .card.card-accent .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}