/* Dark Mode CSS for TreeMaPPs Admin Pages */

/* CSS Custom Properties for Dark Mode */
:root {
    /* Light Mode Colors */
    --bg-primary: linear-gradient(135deg, #ffffff 0%, #e8f5e9 50%, #c8e6c9 100%);
    --bg-secondary: white;
    --text-primary: #333;
    --text-secondary: #666;
    --text-accent: #2c5530;
    --sidebar-bg: rgba(53, 122, 53, 0.95);
    --sidebar-text: white;
    --border-color: #e9ecef;
    --shadow: rgba(0,0,0,0.05);
    --shadow-hover: rgba(0,0,0,0.12);
    --card-bg: white;
    --header-bg: white;
    --dropdown-bg: white;
    --dropdown-border: #e9ecef;
    --notification-bg: white;
    --modal-bg: rgba(255, 255, 255, 0.95);
    --input-bg: white;
    --input-border: #ced4da;
    --table-bg: white;
    --table-stripe: #f8f9fa;
    --btn-primary: linear-gradient(45deg, #43A047, #4CAF50);
    --btn-secondary: #6c757d;
    --hover-bg: #f8f9fa;
}

/* Dark Mode Colors */
[data-theme="dark"] {
    --bg-primary: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #404040 100%);
    --bg-secondary: #2d2d2d;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-accent: #66bb6a;
    --sidebar-bg: rgba(33, 82, 33, 0.95);
    --sidebar-text: #e0e0e0;
    --border-color: #404040;
    --shadow: rgba(0,0,0,0.3);
    --shadow-hover: rgba(0,0,0,0.5);
    --card-bg: #363636;
    --header-bg: #2d2d2d;
    --dropdown-bg: #363636;
    --dropdown-border: #404040;
    --notification-bg: #363636;
    --modal-bg: rgba(45, 45, 45, 0.95);
    --input-bg: #404040;
    --input-border: #555;
    --table-bg: #363636;
    --table-stripe: #404040;
    --btn-primary: linear-gradient(45deg, #388E3C, #43A047);
    --btn-secondary: #495057;
    --hover-bg: #404040;
}

/* Base styles that use variables */
body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Sidebar styles */
.sidebar {
    background: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
    transition: background 0.3s ease;
}

/* Cards and containers */
.card, .page-header, .main-content .container, .content-wrapper {
    background: var(--card-bg) !important;
    box-shadow: 0 2px 10px var(--shadow) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 25px var(--shadow-hover) !important;
}

/* Text colors - More specific selectors to avoid conflicts */
.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.page-header h1, .page-header h2, .page-header h3, .page-header h4, .page-header h5, .page-header h6 {
    color: var(--text-accent);
    transition: color 0.3s ease;
}

.main-content p, .main-content span:not(.sidebar *), .main-content div:not(.sidebar *),
.card p, .card span, .card div,
.table td, .table th {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.text-muted, .text-secondary, small {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

/* Form elements - More specific targeting */
.main-content input, .main-content select, .main-content textarea,
.card input, .card select, .card textarea,
.search-container input, .search-container select {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.main-content input:focus, .main-content select:focus, .main-content textarea:focus,
.card input:focus, .card select:focus, .card textarea:focus {
    background: var(--input-bg);
    border-color: var(--text-accent);
    color: var(--text-primary);
}

/* Buttons */
.btn-primary {
    background: var(--btn-primary) !important;
    border-color: transparent !important;
}

.btn-secondary {
    background: var(--btn-secondary) !important;
    border-color: var(--btn-secondary) !important;
}

/* Tables */
table, .table {
    background: var(--table-bg) !important;
    color: var(--text-primary) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: var(--table-stripe) !important;
}

.table th, .table td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Modals */
.modal-content, .modal-dialog .modal-content {
    background: var(--modal-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.modal-header {
    border-color: var(--border-color) !important;
}

.modal-footer {
    border-color: var(--border-color) !important;
}

/* Dropdowns */
.dropdown-menu {
    background: var(--dropdown-bg) !important;
    border-color: var(--border-color) !important;
}

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

.dropdown-item:hover {
    background: var(--text-accent) !important;
    color: white !important;
}

/* Navigation - More specific targeting */
.sidebar .nav-link, .main-content .nav-link {
    color: var(--text-primary);
}

.sidebar .nav-link.active, .main-content .nav-link.active {
    color: var(--text-accent);
}

/* Alerts */
.alert {
    border-color: var(--border-color) !important;
}

.alert-success {
    background: var(--card-bg) !important;
    color: var(--text-accent) !important;
}

.alert-danger {
    background: var(--card-bg) !important;
    color: #e74c3c !important;
}

.alert-warning {
    background: var(--card-bg) !important;
    color: #f39c12 !important;
}

.alert-info {
    background: var(--card-bg) !important;
    color: #3498db !important;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--text-accent);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

.dark-mode-toggle:active {
    transform: scale(0.95);
}

/* Dark mode toggle icon animation */
.dark-mode-toggle i {
    transition: transform 0.3s ease;
}

[data-theme="dark"] .dark-mode-toggle i.bi-sun-fill {
    transform: rotate(180deg);
}

[data-theme="light"] .dark-mode-toggle i.bi-moon-fill {
    transform: rotate(180deg);
}

/* Additional styling for specific components */
.breadcrumb {
    background: var(--card-bg) !important;
}

.breadcrumb-item a {
    color: var(--text-accent) !important;
}

.pagination .page-link {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.pagination .page-link:hover {
    background: var(--text-accent) !important;
    color: white !important;
}

.pagination .page-item.active .page-link {
    background: var(--text-accent) !important;
    border-color: var(--text-accent) !important;
}

/* Badge styling */
.badge {
    color: white !important;
}

.badge-success {
    background: var(--text-accent) !important;
}

/* Progress bars */
.progress {
    background: var(--border-color) !important;
}

.progress-bar {
    background: var(--text-accent) !important;
}

/* List groups */
.list-group-item {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Text color utilities for both light and dark mode */
.text-warning {
    color: #f39c12 !important;
}

.text-info {
    color: #3498db !important;
}

.text-success {
    color: #27ae60 !important;
}

[data-theme="dark"] .text-warning {
    color: #f1c40f !important;
}

[data-theme="dark"] .text-info {
    color: #5dade2 !important;
}

[data-theme="dark"] .text-success {
    color: #58d68d !important;
}

/* Outline button styles for dark mode */
.btn-outline-warning {
    color: #f39c12 !important;
    border-color: #f39c12 !important;
    background: transparent !important;
}

.btn-outline-warning:hover {
    background: #f39c12 !important;
    color: white !important;
}

.btn-outline-danger {
    color: #e74c3c !important;
    border-color: #e74c3c !important;
    background: transparent !important;
}

.btn-outline-danger:hover {
    background: #e74c3c !important;
    color: white !important;
}

[data-theme="dark"] .btn-outline-warning {
    color: #f1c40f !important;
    border-color: #f1c40f !important;
    background: transparent !important;
}

[data-theme="dark"] .btn-outline-warning:hover {
    background: #f1c40f !important;
    color: #2d2d2d !important;
}

[data-theme="dark"] .btn-outline-danger {
    color: #ec7063 !important;
    border-color: #ec7063 !important;
    background: transparent !important;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background: #ec7063 !important;
    color: #2d2d2d !important;
}

/* Background utilities for dark mode */
.bg-light {
    background-color: #f8f9fa !important;
}

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

/* Badge primary styling */
.badge-primary {
    background-color: #007bff !important;
    color: white !important;
}

[data-theme="dark"] .badge-primary {
    background-color: #0d6efd !important;
    color: white !important;
}

/* Quarterly logs specific styling */
.quarterly-logs {
    background: transparent;
}

.quarterly-log-item {
    transition: all 0.3s ease;
}

[data-theme="dark"] .quarterly-log-item {
    border-color: var(--border-color) !important;
    background: var(--card-bg) !important;
}

.quarterly-log-item:hover {
    box-shadow: 0 4px 15px var(--shadow-hover) !important;
}

/* View quarterly image icon */
.view-quarterly-image {
    transition: color 0.3s ease;
}

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

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

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

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

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

/* Notification Panel Dark Mode Styles */
[data-theme="dark"] .notification-panel {
    background: var(--notification-bg) !important;
    box-shadow: -5px 0 25px var(--shadow) !important;
}

[data-theme="dark"] .notification-panel-header {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .notification-panel-header h6 {
    color: var(--text-accent) !important;
}

[data-theme="dark"] .notification-panel-footer {
    background-color: var(--card-bg) !important;
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .notification-item {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--border-color) !important;
}

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

[data-theme="dark"] .notification-item.unread {
    background-color: rgba(102, 187, 106, 0.1) !important;
}

/* Remove white backgrounds in notification panel elements */
[data-theme="dark"] .notification-content,
[data-theme="dark"] .notification-content *,
[data-theme="dark"] .notification-actions,
[data-theme="dark"] .notification-actions * {
    background-color: transparent !important;
}

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

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

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

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

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

[data-theme="dark"] .notification-action-btn.mark-read-btn {
    color: #66bb6a !important;
}

[data-theme="dark"] .notification-action-btn.mark-read-btn:hover {
    background-color: rgba(102, 187, 106, 0.15) !important;
}

[data-theme="dark"] .notification-action-btn.dismiss-btn {
    color: #ef5350 !important;
}

[data-theme="dark"] .notification-action-btn.dismiss-btn:hover {
    background-color: rgba(239, 83, 80, 0.15) !important;
}

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

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

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

[data-theme="dark"] .view-all-link {
    color: var(--text-accent) !important;
    background-color: rgba(102, 187, 106, 0.1) !important;
}

[data-theme="dark"] .view-all-link:hover {
    background-color: rgba(102, 187, 106, 0.2) !important;
    color: var(--text-accent) !important;
}

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

[data-theme="dark"] .mark-all-read-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

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

[data-theme="dark"] .notification-panel-close:hover {
    color: #ef5350 !important;
}

/* Notification Icon Colors for Dark Mode */
[data-theme="dark"] .notification-icon.event {
    background-color: rgba(149, 117, 205, 0.15) !important;
    color: #9575cd !important;
}

[data-theme="dark"] .notification-icon.alert {
    background-color: rgba(239, 83, 80, 0.15) !important;
    color: #ef5350 !important;
}

[data-theme="dark"] .notification-icon.reminder {
    background-color: rgba(255, 183, 77, 0.15) !important;
    color: #ffb74d !important;
}

[data-theme="dark"] .notification-icon.confirmation {
    background-color: rgba(102, 187, 106, 0.15) !important;
    color: #66bb6a !important;
}

[data-theme="dark"] .notification-icon.message {
    background-color: rgba(100, 181, 246, 0.15) !important;
    color: #64b5f6 !important;
}

/* Notification Action Icons Dark Mode */
[data-theme="dark"] .notification-action-btn i.bi-check-circle {
    color: #66bb6a !important;
}

[data-theme="dark"] .notification-action-btn i.bi-x-circle {
    color: #ef5350 !important;
}

[data-theme="dark"] .notification-action-btn:hover i.bi-check-circle {
    color: #81c784 !important;
}

[data-theme="dark"] .notification-action-btn:hover i.bi-x-circle {
    color: #f44336 !important;
}