/* ===================================================================
   CONTACT DIRECTORY - DARK THEME STYLES
   Comprehensive dark theme support for all views
   =================================================================== */

/* ==================== BASE DARK THEME ==================== */
body.theme-dark {
    background: linear-gradient(135deg, #1a1f2e 0%, #2d3748 50%, #1e293b 100%);
    color: #e2e8f0;
}

body.theme-dark .container {
    color: #e2e8f0;
}

/* ==================== HEADER ==================== */
body.theme-dark .header {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
}

body.theme-dark .header h1 {
    color: #f1f5f9 !important;
}

body.theme-dark .header p {
    color: #cbd5e1 !important;
}

/* ==================== NAVIGATION BAR & STATS ==================== */
body.theme-dark .navigation-bar {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%);
    border-color: rgba(148, 163, 184, 0.3);
}

body.theme-dark .nav-btn {
    background: rgba(51, 65, 85, 0.8);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.3);
}

body.theme-dark .nav-btn:hover {
    background: rgba(71, 85, 105, 0.9);
    border-color: rgba(96, 165, 250, 0.4);
}

body.theme-dark .nav-btn.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

/* Stats Row */
body.theme-dark .stats-row {
    color: #e2e8f0;
}

body.theme-dark .stat-mini {
    background: rgba(51, 65, 85, 0.8);
    border-color: rgba(148, 163, 184, 0.3);
}

body.theme-dark .stat-mini .stat-number {
    color: #f1f5f9 !important;
}

body.theme-dark .stat-mini .stat-label {
    color: #94a3b8 !important;
}

/* ==================== CONTROLS SECTION ==================== */
body.theme-dark .controls {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%);
    border-color: rgba(148, 163, 184, 0.3);
}

body.theme-dark .search-box {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(148, 163, 184, 0.3);
}

body.theme-dark .search-box input {
    background: transparent;
    color: #e2e8f0 !important;
}

body.theme-dark .search-box input::placeholder {
    color: #94a3b8;
}

body.theme-dark .search-box i {
    color: #94a3b8;
}

/* ==================== DIRECTORY VIEW - TABLE ==================== */
body.theme-dark .table-container,
body.theme-dark #tableView {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(148, 163, 184, 0.3);
}

body.theme-dark table,
body.theme-dark #standardTable {
    background: rgba(30, 41, 59, 0.9);
}

body.theme-dark table thead th,
body.theme-dark #standardTable thead th {
    background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
    color: #f1f5f9 !important;
    border-color: rgba(148, 163, 184, 0.3);
}

body.theme-dark table tbody td,
body.theme-dark #standardTable tbody td,
body.theme-dark #tableBody td {
    background: rgba(30, 41, 59, 0.6);
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.2);
}

body.theme-dark table tbody tr:hover td,
body.theme-dark #standardTable tbody tr:hover td,
body.theme-dark #tableBody tr:hover td {
    background: rgba(51, 65, 85, 0.8);
}

body.theme-dark table tbody tr:nth-child(even) td,
body.theme-dark #tableBody tr:nth-child(even) td {
    background: rgba(51, 65, 85, 0.4);
}

/* Status badges in table */
body.theme-dark .status-active {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.4);
}

body.theme-dark .status-inactive {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.4);
}

/* ==================== CELLULAR VIEW (REPORT VIEW) ==================== */
body.theme-dark #reportView,
body.theme-dark .report-view {
    background: rgba(30, 41, 59, 0.9);
}

body.theme-dark .report-item,
body.theme-dark .cellular-item,
body.theme-dark .contact-report-item {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.9) 100%);
    border-color: rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
}

body.theme-dark .report-item:hover,
body.theme-dark .cellular-item:hover {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.95) 0%, rgba(100, 116, 139, 0.9) 100%);
    border-color: rgba(96, 165, 250, 0.4);
}

/* Cellular view header row */
body.theme-dark .report-item-header,
body.theme-dark .cellular-header,
body.theme-dark .report-header-row {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(148, 163, 184, 0.2);
}

/* Labels in cellular view */
body.theme-dark .report-label,
body.theme-dark .cellular-label,
body.theme-dark .detail-label,
body.theme-dark .field-label {
    color: #94a3b8 !important;
}

/* Values in cellular view */
body.theme-dark .report-value,
body.theme-dark .cellular-value,
body.theme-dark .detail-value,
body.theme-dark .field-value {
    color: #f1f5f9 !important;
}

/* Organization, Phone, Contact Name in header */
body.theme-dark .report-item .organization-name,
body.theme-dark .report-item .org-name,
body.theme-dark .cellular-item .organization {
    color: #60a5fa !important;
}

body.theme-dark .report-item .phone-number,
body.theme-dark .cellular-item .phone {
    color: #86efac !important;
}

body.theme-dark .report-item .contact-name,
body.theme-dark .cellular-item .contact-name {
    color: #f1f5f9 !important;
}

/* Details section in cellular view */
body.theme-dark .report-item-details,
body.theme-dark .cellular-details,
body.theme-dark .contact-details {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.2);
}

body.theme-dark .report-field,
body.theme-dark .detail-row {
    border-color: rgba(148, 163, 184, 0.2);
}

body.theme-dark .report-details-left {
    border-right-color: rgba(148, 163, 184, 0.2);
}

/* Account ID, Date */
body.theme-dark .account-id,
body.theme-dark .date-field {
    color: #cbd5e1 !important;
}

/* Email, Website links */
body.theme-dark .report-item a,
body.theme-dark .cellular-item a,
body.theme-dark .contact-details a {
    color: #60a5fa !important;
}

body.theme-dark .report-item a:hover,
body.theme-dark .cellular-item a:hover {
    color: #93c5fd !important;
}

/* Status in details */
body.theme-dark .status-active-report {
    color: #34d399 !important;
}

body.theme-dark .status-inactive-report {
    color: #f87171 !important;
}

/* ==================== CARD VIEW ==================== */
body.theme-dark #cardView,
body.theme-dark .cards-container {
    background: transparent;
}

/* Recent Contacts info section */
body.theme-dark .recent-contacts-header,
body.theme-dark .cards-info,
body.theme-dark .card-view-header,
body.theme-dark #cardView > div:first-child,
body.theme-dark .recent-contacts-section {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.9) 100%) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: #e2e8f0 !important;
}

body.theme-dark .recent-contacts-header h3,
body.theme-dark .cards-info h3,
body.theme-dark #cardView h3 {
    color: #f1f5f9 !important;
}

body.theme-dark .recent-contacts-header p,
body.theme-dark .cards-info p,
body.theme-dark #cardView > div:first-child p,
body.theme-dark .card-view-subtitle {
    color: #cbd5e1 !important;
}

body.theme-dark .recent-contacts-header span,
body.theme-dark .cards-info span,
body.theme-dark #cardView > div:first-child span,
body.theme-dark .total-records,
body.theme-dark .filter-info {
    color: #94a3b8 !important;
}

/* Icons in the info section */
body.theme-dark .recent-contacts-header i,
body.theme-dark .cards-info i,
body.theme-dark #cardView > div:first-child i {
    color: #60a5fa !important;
}

/* ===== FIX: Recent Contacts info box with white background ===== */
/* Target the info box that appears in Card View */
body.theme-dark .info-box,
body.theme-dark .alert-info-box,
body.theme-dark .cards-header,
body.theme-dark .card-view-info,
body.theme-dark div[style*="background: white"],
body.theme-dark div[style*="background: #fff"],
body.theme-dark div[style*="background-color: white"],
body.theme-dark #cardView .info-section {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.9) 100%) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #e2e8f0 !important;
}

/* Target all text inside the info box */
body.theme-dark .info-box *,
body.theme-dark .alert-info-box *,
body.theme-dark .cards-header *,
body.theme-dark .card-view-info *,
body.theme-dark #cardView .info-section * {
    color: inherit !important;
}

body.theme-dark .info-box h3,
body.theme-dark .alert-info-box h3,
body.theme-dark .cards-header h3 {
    color: #60a5fa !important;
}

body.theme-dark .info-box p,
body.theme-dark .alert-info-box p,
body.theme-dark .cards-header p {
    color: #cbd5e1 !important;
}

body.theme-dark .info-box span,
body.theme-dark .alert-info-box span,
body.theme-dark .cards-header span {
    color: #94a3b8 !important;
}

/* ===== CATCH-ALL: Force dark theme on any light backgrounds in Card View ===== */
body.theme-dark #cardView > div {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.9) 100%) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

body.theme-dark #cardView > div:not(.contact-card):not(.business-card) {
    color: #e2e8f0 !important;
}

body.theme-dark #cardView > div:not(.contact-card):not(.business-card) h3 {
    color: #60a5fa !important;
}

body.theme-dark #cardView > div:not(.contact-card):not(.business-card) p {
    color: #cbd5e1 !important;
}

body.theme-dark #cardView > div:not(.contact-card):not(.business-card) span {
    color: #94a3b8 !important;
}

body.theme-dark #cardView > div:not(.contact-card):not(.business-card) i {
    color: #60a5fa !important;
}

/* ===== Target alert/info boxes with left border (Recent Contacts section) ===== */
body.theme-dark div[style*="border-left"],
body.theme-dark .alert,
body.theme-dark .info-message,
body.theme-dark .notification-box {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.9) 100%) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #e2e8f0 !important;
}

body.theme-dark div[style*="border-left"] h3,
body.theme-dark div[style*="border-left"] strong {
    color: #60a5fa !important;
}

body.theme-dark div[style*="border-left"] p,
body.theme-dark div[style*="border-left"] span {
    color: #cbd5e1 !important;
}

/* ===== NUCLEAR OPTION: Target the cards grid container's siblings ===== */
/* The info section appears before the cards grid */
body.theme-dark #cardView .cards-grid ~ div,
body.theme-dark #cardView div:has(+ .cards-grid),
body.theme-dark #cardView div:has(+ .contact-cards),
body.theme-dark #cardView div:first-of-type:not(.contact-card):not(.business-card):not(.cards-grid) {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.9) 100%) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #e2e8f0 !important;
}

/* Force dark theme on any element with inline white/light background */
body.theme-dark #cardView div[style*="background"]:not(.contact-card):not(.business-card) {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.9) 100%) !important;
}

body.theme-dark #cardView div[style*="background"]:not(.contact-card):not(.business-card) * {
    color: #e2e8f0 !important;
}

body.theme-dark #cardView div[style*="background"]:not(.contact-card):not(.business-card) h3,
body.theme-dark #cardView div[style*="background"]:not(.contact-card):not(.business-card) strong {
    color: #60a5fa !important;
}

/* Ensure icons are blue */
body.theme-dark #cardView div[style*="background"]:not(.contact-card):not(.business-card) i.fa-info-circle,
body.theme-dark #cardView div[style*="background"]:not(.contact-card):not(.business-card) i.fas,
body.theme-dark #cardView div[style*="background"]:not(.contact-card):not(.business-card) i.fa {
    color: #60a5fa !important;
}

/* ===== SPECIFIC: Target .cards-container first child (Recent Contacts info section) ===== */
body.theme-dark .cards-container > div:first-child {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.9) 100%) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    border-left: 4px solid #60a5fa !important;
    color: #e2e8f0 !important;
}

body.theme-dark .cards-container > div:first-child h3 {
    color: #60a5fa !important;
}

body.theme-dark .cards-container > div:first-child p {
    color: #cbd5e1 !important;
}

body.theme-dark .cards-container > div:first-child span {
    color: #94a3b8 !important;
}

body.theme-dark .cards-container > div:first-child i {
    color: #60a5fa !important;
}

body.theme-dark .contact-card,
body.theme-dark .business-card {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.9) 100%);
    border-color: rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
}

body.theme-dark .contact-card:hover,
body.theme-dark .business-card:hover {
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

body.theme-dark .contact-card h3,
body.theme-dark .business-card .card-name {
    color: #f1f5f9 !important;
}

body.theme-dark .contact-card .organization,
body.theme-dark .business-card .card-org {
    color: #60a5fa !important;
}

body.theme-dark .contact-card .phone,
body.theme-dark .business-card .card-phone {
    color: #86efac !important;
}

body.theme-dark .contact-card .email,
body.theme-dark .business-card .card-email {
    color: #93c5fd !important;
}

body.theme-dark .contact-card .detail-row,
body.theme-dark .business-card .card-detail {
    border-color: rgba(148, 163, 184, 0.2);
}

body.theme-dark .contact-card .label,
body.theme-dark .business-card .detail-label {
    color: #94a3b8 !important;
}

body.theme-dark .contact-card .value,
body.theme-dark .business-card .detail-value {
    color: #e2e8f0 !important;
}

/* ==================== MODALS ==================== */
body.theme-dark .modal-content,
body.theme-dark .modal-dialog {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
}

body.theme-dark .modal-header {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    border-bottom-color: rgba(148, 163, 184, 0.3);
}

body.theme-dark .modal-header h2,
body.theme-dark .modal-header h3,
body.theme-dark .modal-title {
    color: #f1f5f9 !important;
}

body.theme-dark .modal-body {
    background: transparent;
    color: #e2e8f0;
}

body.theme-dark .modal-body label {
    color: #e2e8f0 !important;
}

body.theme-dark .modal-body input,
body.theme-dark .modal-body select,
body.theme-dark .modal-body textarea {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: #e2e8f0 !important;
}

body.theme-dark .modal-body input:focus,
body.theme-dark .modal-body select:focus,
body.theme-dark .modal-body textarea:focus {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: #60a5fa !important;
}

body.theme-dark .modal-body input::placeholder {
    color: #94a3b8 !important;
}

body.theme-dark .modal-footer {
    background: rgba(30, 41, 59, 0.5);
    border-top-color: rgba(148, 163, 184, 0.2);
}

/* Close button */
body.theme-dark .modal-close,
body.theme-dark .close-btn {
    color: #e2e8f0;
}

body.theme-dark .modal-close:hover,
body.theme-dark .close-btn:hover {
    color: #f1f5f9;
}

/* ==================== FORM SECTIONS ==================== */
body.theme-dark .form-section,
body.theme-dark .form-group {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.2);
}

body.theme-dark .form-section h4,
body.theme-dark .section-title {
    color: #60a5fa !important;
}

/* ==================== ALERTS ==================== */
body.theme-dark .alert-info {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #e2e8f0 !important;
    border-left-color: #60a5fa !important;
}

body.theme-dark .alert-success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #e2e8f0 !important;
    border-left-color: #34d399 !important;
}

body.theme-dark .alert-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #e2e8f0 !important;
    border-left-color: #fbbf24 !important;
}

body.theme-dark .alert-error,
body.theme-dark .alert-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #e2e8f0 !important;
    border-left-color: #f87171 !important;
}

/* ==================== BULK DELETE MODAL ==================== */
body.theme-dark .bulk-delete-modal {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

body.theme-dark .bulk-delete-list {
    background: rgba(30, 41, 59, 0.6);
}

body.theme-dark .bulk-delete-item {
    background: rgba(51, 65, 85, 0.6);
    border-color: rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
}

body.theme-dark .bulk-delete-item:hover {
    background: rgba(71, 85, 105, 0.8);
}

/* ==================== CONTACT USAGE INDICATOR ==================== */
body.theme-dark .contact-usage-indicator {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
}

/* ==================== SCROLLBARS ==================== */
body.theme-dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.theme-dark ::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.5);
}

body.theme-dark ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

body.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ==================== MISC ELEMENTS ==================== */
body.theme-dark hr {
    border-color: rgba(148, 163, 184, 0.2);
}

body.theme-dark .divider {
    background: rgba(148, 163, 184, 0.2);
}

/* Fix any remaining text visibility issues */
body.theme-dark span,
body.theme-dark p,
body.theme-dark div {
    color: inherit;
}

/* Ensure table text is always visible */
body.theme-dark td span,
body.theme-dark td div,
body.theme-dark td p {
    color: #e2e8f0 !important;
}

/* Fix for inline styled elements */
body.theme-dark [style*="color: #"] {
    filter: brightness(1.3);
}