/**
 * Dark Mode Styles
 * Based on Chrome's dark mode color scheme
 * Organized by component type for better maintainability
 */

/* Color Variables - Chrome Dark Mode Palette */
:root {
    --chrome-dark-bg: #202124;
    --chrome-dark-surface: #292a2d;
    --chrome-dark-surface-2: #35363a;
    --chrome-dark-text-primary: #e8eaed;
    --chrome-dark-text-secondary: #9aa0a6;
    --chrome-dark-border: #3c4043;
    --chrome-dark-button: #0d6efd;
    --chrome-dark-divider: #5f6368;
    --chrome-dark-hover: rgba(232, 234, 237, 0.08);
    --chrome-dark-card: #292a2d;
    --chrome-dark-row-odd: transparent; /* Transparent for odd rows */
    --chrome-dark-row-even: #2e3033; /* Lighter shade for even rows */
}

/* Base Elements */
[data-bs-theme="dark"] body {
    background-color: var(--chrome-dark-bg);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .card {
    background-color: var(--chrome-dark-surface);
    border-color: var(--chrome-dark-border);
}

[data-bs-theme="dark"] hr {
    border-color: var(--chrome-dark-divider);
}

[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--chrome-dark-surface);
    border-color: var(--chrome-dark-border);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: var(--chrome-dark-hover);
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--chrome-dark-divider);
}

[data-bs-theme="dark"] canvas {
    filter: invert(1) hue-rotate(180deg);
    background-color: transparent;
}

/* Table Styles */
[data-bs-theme="dark"] .table {
    color: var(--chrome-dark-text-primary);
    border-color: var(--chrome-dark-border);
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--chrome-dark-hover);
    color: var(--chrome-dark-text-primary);
}

/* Form Controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .media-library-input {
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
    border-color: var(--chrome-dark-border);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(138, 180, 248, 0.25);
}

[data-bs-theme="dark"] .form-control[readonly] {
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-secondary);
    border-color: var(--chrome-dark-border);
}

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


/* DataTables - Enhanced Styling with correct class targeting */
/* Update CSS variables to match Chrome's dark mode */
[data-bs-theme="dark"] {
    --dt-row-hover: 255, 255, 255;
    --dt-row-stripe: 255, 255, 255;
    --dt-column-ordering: 255, 255, 255;
    --dt-html-background: #202124;
}

/* Basic DataTable structure */
[data-bs-theme="dark"] table.dataTable {
    color: var(--chrome-dark-text-primary);
    border-color: var(--chrome-dark-border);
}

/* Table Header styling - Making headers transparent */
[data-bs-theme="dark"] table.dataTable > thead > tr > th,
[data-bs-theme="dark"] table.dataTable > thead > tr > td {
    background-color: transparent;
    color: var(--chrome-dark-text-primary);
    border-bottom: 1px solid var(--chrome-dark-border);
    font-weight: 600;
}

/* Table Row Styling - Specific for odd/even classes with increased contrast */
[data-bs-theme="dark"] table.dataTable tbody tr.odd {
    background-color: var(--chrome-dark-row-odd);
}

[data-bs-theme="dark"] table.dataTable tbody tr.even {
    background-color: var(--chrome-dark-row-even);
}

[data-bs-theme="dark"] table.dataTable tbody tr:hover {
    background-color: #3c4043;
}

/* Fix for DataTables striped styling */
[data-bs-theme="dark"] table.dataTable.stripe tbody tr.odd, 
[data-bs-theme="dark"] table.dataTable.display tbody tr.odd {
    background-color: var(--chrome-dark-row-odd);
}

[data-bs-theme="dark"] table.dataTable.stripe tbody tr.even, 
[data-bs-theme="dark"] table.dataTable.display tbody tr.even {
    background-color: var(--chrome-dark-row-even);
}

/* Override Bootstrap stripe styles */
[data-bs-theme="dark"] table.dataTable.table-striped > tbody > tr.odd > * {
    background-color: var(--chrome-dark-row-odd) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] table.dataTable.table-striped > tbody > tr.even > * {
    background-color: var(--chrome-dark-row-even) !important;
    box-shadow: none !important;
}

/* Striped rows - override box-shadow approach with direct background color */
[data-bs-theme="dark"] table.dataTable.stripe > tbody > tr:nth-child(odd) > *, 
[data-bs-theme="dark"] table.dataTable.display > tbody > tr:nth-child(odd) > * {
    box-shadow: none;
    background-color: var(--chrome-dark-row-odd);
}

[data-bs-theme="dark"] table.dataTable.stripe > tbody > tr:nth-child(even) > *, 
[data-bs-theme="dark"] table.dataTable.display > tbody > tr:nth-child(even) > * {
    box-shadow: none;
    background-color: var(--chrome-dark-row-even);
}

/* Hover effect - override with direct background color */
[data-bs-theme="dark"] table.dataTable.hover > tbody > tr:hover > *, 
[data-bs-theme="dark"] table.dataTable.display > tbody > tr:hover > * {
    box-shadow: none;
    background-color: #3c4043;
}

/* Selected rows */
[data-bs-theme="dark"] table.dataTable > tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px rgba(138, 180, 248, 0.9) !important;
    color: #202124 !important;
}

/* Column ordering */
[data-bs-theme="dark"] table.dataTable.order-column > tbody tr > .sorting_1,
[data-bs-theme="dark"] table.dataTable.order-column > tbody tr > .sorting_2,
[data-bs-theme="dark"] table.dataTable.order-column > tbody tr > .sorting_3, 
[data-bs-theme="dark"] table.dataTable.display > tbody tr > .sorting_1,
[data-bs-theme="dark"] table.dataTable.display > tbody tr > .sorting_2,
[data-bs-theme="dark"] table.dataTable.display > tbody tr > .sorting_3 {
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.019);
}

/* Sort columns styling */
[data-bs-theme="dark"] table.dataTable thead > tr > th.dt-orderable-asc:hover, 
[data-bs-theme="dark"] table.dataTable thead > tr > th.dt-orderable-desc:hover,
[data-bs-theme="dark"] table.dataTable thead > tr > td.dt-orderable-asc:hover,
[data-bs-theme="dark"] table.dataTable thead > tr > td.dt-orderable-desc:hover {
    outline: 2px solid rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, 
[data-bs-theme="dark"] table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
[data-bs-theme="dark"] table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
[data-bs-theme="dark"] table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    opacity: 0.8;
    color: var(--chrome-dark-text-primary);
}

/* Control elements styling */
[data-bs-theme="dark"] div.dt-container {
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] div.dt-container .dt-search input,
[data-bs-theme="dark"] div.dt-container .dt-input {
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
    border: 1px solid var(--chrome-dark-border);
}

/* DataTables Bootstrap Pagination */
[data-bs-theme="dark"] .pagination .page-item .page-link {
    background-color: transparent; /* Transparent for default buttons */
    color: var(--chrome-dark-text-primary); /* Default text color */
    border-color: var(--chrome-dark-border);
}

[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: #0d6efd; /* Primary blue for active page */
    color: #fff; /* White text */
    border-color: #0d6efd;
}

[data-bs-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: transparent; /* Transparent for disabled buttons */
    color: rgba(255, 255, 255, 0.5); /* Lighter white for disabled */
    border-color: var(--chrome-dark-border);
    opacity: 0.6;
}

[data-bs-theme="dark"] .pagination .page-item:not(.disabled):not(.active) .page-link:hover {
    background-color: var(--chrome-dark-hover); /* Hover effect */
    color: var(--chrome-dark-text-primary);
    border-color: var(--chrome-dark-border);
}

/* Navbar */
[data-bs-theme="dark"] .navbar {
    background-color: var(--chrome-dark-surface);
    border-color: var(--chrome-dark-border);
}

[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .nav-link {
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .nav-link:hover {
    color: #0d6efd;
}

/* Carousel/Home Screen */
[data-bs-theme="dark"] .carousel-indicators li {
    background-color: var(--chrome-dark-text-primary) !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none; /* Remove the default background image */
    background-color: transparent; /* Set the background color to transparent */
}

/* Modal */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--chrome-dark-surface);
    border-color: var(--chrome-dark-border);
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: var(--chrome-dark-divider);
}

/* Media Library */
[data-bs-theme="dark"] .media-library,
[data-bs-theme="dark"] .media-library-item,
[data-bs-theme="dark"] .media-library-add,
[data-bs-theme="dark"] .media-library-empty,
[data-bs-theme="dark"] .media-library-dropzone,
[data-bs-theme="dark"] .media-library-dropzone-add,
[data-bs-theme="dark"] .media-library-progress-wrap,
[data-bs-theme="dark"] .media-library-progress-wrap-loading,
[data-bs-theme="dark"] .media-library-filled,
[data-bs-theme="dark"] .media-library-hidden {
    background-color: transparent;
}

/* Mapbox */
[data-bs-theme="dark"] .mapboxgl-popup-content {
    color: #000000; /* Keep this as is for map readability */
}

/* Comments System */
[data-bs-theme="dark"] .comments {
    background-color: var(--chrome-dark-surface);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .comments .comments-header {
    border-bottom: 1px solid var(--chrome-dark-divider);
}

[data-bs-theme="dark"] .comments .comments-subscription-trigger {
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .comments .comments-subscription-item {
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .comments .comments-comment {
    border: 1px solid var(--chrome-dark-border);
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .comments .comments-comment-inner {
    border-top: 1px solid var(--chrome-dark-divider);
    color: var(--chrome-dark-text-secondary);
}

[data-bs-theme="dark"] .comments .comments-comment-header {
    border-bottom: 1px solid var(--chrome-dark-divider);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .comments .comments-comment-header a {
    color: #0d6efd;
}

[data-bs-theme="dark"] .comments .comments-comment-header-actions a {
    color: #0d6efd;
}

[data-bs-theme="dark"] .comments .comments-no-comment-yet {
    color: var(--chrome-dark-text-secondary);
}

[data-bs-theme="dark"] .comments .comments-approval {
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .comments .comments-approval-buttons .comments-button {
    background-color: var(--chrome-dark-surface-2);
    color: #0d6efd;
}

[data-bs-theme="dark"] .comments .comments-form .comments-form-inner {
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .comments .comments-reactions .comments-reaction {
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .comments .comments-reaction-picker .comments-reaction-picker-trigger {
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .comments .comments-reaction-picker .comments-reaction-picker-reactions .comments-reaction-picker-reaction {
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .comments .comments-reaction-picker .comments-reaction-picker-reactions .comments-reaction-picker-reaction.is-reacted {
    background-color: var(--chrome-dark-surface-2);
    color: #0d6efd;
}

[data-bs-theme="dark"] .comments-panel {
    background-color: var(--chrome-dark-surface);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .comments .comments-nested {
    background-color: var(--chrome-dark-surface-2);
}

[data-bs-theme="dark"] .card.p-3 {
    background-color: var(--chrome-dark-surface-2); /* Match comment input background */
    color: var(--chrome-dark-text-primary); /* Ensure text is readable */
    border-color: var(--chrome-dark-border); /* Match border color */
}

/* Read-only input field styling with increased specificity */
[data-bs-theme="dark"] input[readonly],
[data-bs-theme="dark"] textarea[readonly],
[data-bs-theme="dark"] select[readonly] {
    background-color: var(--chrome-dark-surface-2) !important; /* Light gray background */
    
    
    cursor: not-allowed !important; /* Indicate non-editable */
}

[data-bs-theme="dark"] input[readonly]:focus,
[data-bs-theme="dark"] textarea[readonly]:focus,
[data-bs-theme="dark"] select[readonly]:focus {
    box-shadow: none !important; /* Remove focus shadow */
    border-color: #ced4da !important; /* Keep border consistent */
}

/* Subscriptions component */
[data-bs-theme="dark"] .subscription-component .subscriber-section {
    background-color:var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
    border: var(--chrome-dark-border);
}

[data-bs-theme="dark"] .subscription-component .dropdown-item.highlighted {
    background-color: var(--chrome-dark-hover) !important; /* Subtle highlight background */
    color: var(--chrome-dark-text-primary) !important; /* Primary text color */
    border-left: 4px solid #0d6efd !important; /* Primary blue border to make it stand out */
}

[data-bs-theme="dark"] .subscription-component .dropdown-item.highlighted:hover {
    background-color: #0b5ed7; /* Slightly darker blue on hover */
    color: #fff; /* White text on hover */
}

[data-bs-theme="dark"] .subscription-component .dropdown-item:hover {
    background-color: var(--chrome-dark-hover) !important; /* Subtle highlight background */
    color: var(--chrome-dark-text-primary) !important; /* Primary text color */
    border-left: 4px solid #0d6efd !important; /* Primary blue border to make it stand out */
}

/* activity log */
[data-bs-theme="dark"] .change-label {
    color: var(--chrome-dark-text-secondary);
}

[data-bs-theme="dark"] .new-value {
    color: #4caf50; /* Adjusted green for dark mode */
}

[data-bs-theme="dark"] .old-value {
    color: #f44336; /* Adjusted red for dark mode */
}

[data-bs-theme="dark"] .accordion-item {
    background-color: var(--chrome-dark-surface);
    border-color: var(--chrome-dark-border);
}

[data-bs-theme="dark"] .accordion-button {
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--chrome-dark-surface);
    color: var(--chrome-dark-text-primary);
}

[data-bs-theme="dark"] .accordion-body {
    background-color: var(--chrome-dark-surface-2);
    color: var(--chrome-dark-text-primary);
}