/* ============================= 
   Dark Mode Styles for Custom Components
   Uses Materialy v1.1 Template Dark Mode System
   ============================= */

/* Dark mode uses html[data-bs-theme="dark"] selector from Materialy template */

/* Header Dropdown Menu Dark Mode - FIX FOR TEXT VISIBILITY */
html[data-bs-theme="dark"] .dropdown-content {
    background-color: #1e222d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

html[data-bs-theme="dark"] .dropdown-content a {
    color: #d9e1ec !important;
}

html[data-bs-theme="dark"] .dropdown-content a:hover {
    background-color: rgba(59, 130, 246, 0.3) !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .dropdown-item {
    color: #d9e1ec !important;
}

html[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: rgba(59, 130, 246, 0.3) !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .user-info-section {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #d9e1ec;
}

html[data-bs-theme="dark"] .dropdown-content button.text-danger {
    color: #ff6b7a;
}

html[data-bs-theme="dark"] .dropdown-content button.text-danger:hover {
    background-color: rgba(220, 53, 69, 0.2);
    color: #ff6b7a;
}

/* Sidebar Navigation Dark Mode */
html[data-bs-theme="dark"] #sidebar {
    background-color: var(--bs-topbar-bg, #0f111a);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

html[data-bs-theme="dark"] #sidebar .nav-link {
    color: var(--bs-body-color, #d9e1ec);
    transition: background-color 0.2s, color 0.2s;
}

html[data-bs-theme="dark"] #sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

html[data-bs-theme="dark"] #sidebar .nav-link.active {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* Page Content Dark Mode */
html[data-bs-theme="dark"] .page-content {
    background-color: var(--bs-body-bg, #1e222d);
    color: var(--bs-body-color, #d9e1ec);
}

/* Card Components Dark Mode */
html[data-bs-theme="dark"] .card {
    background-color: var(--bs-card-bg, #151821);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

html[data-bs-theme="dark"] .card-header {
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom-color: rgba(255, 255, 255, 0.05);
    color: var(--bs-body-color, #d9e1ec);
}

/* Form Elements Dark Mode */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .form-control:hover,
html[data-bs-theme="dark"] .form-select:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #3b82f6;
    color: var(--bs-body-color, #d9e1ec);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

html[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--bs-text-muted, #aab0b9);
}

/* Form Check (Checkbox/Radio) Dark Mode */
html[data-bs-theme="dark"] .form-check-label {
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .form-check-input {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

html[data-bs-theme="dark"] .form-check-input:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

html[data-bs-theme="dark"] .form-check-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

/* Form Labels Dark Mode */
html[data-bs-theme="dark"] .form-label,
html[data-bs-theme="dark"] label {
    color: var(--bs-body-color, #d9e1ec);
}

/* Textarea Dark Mode */
html[data-bs-theme="dark"] textarea.form-control {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] textarea.form-control:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

/* Table Dark Mode */
html[data-bs-theme="dark"] .table {
    color: var(--bs-body-color, #d9e1ec);
    border-color: rgba(255, 255, 255, 0.05);
}

html[data-bs-theme="dark"] .table thead th {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .table tbody tr {
    border-color: rgba(255, 255, 255, 0.05);
}

html[data-bs-theme="dark"] .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

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

/* Modal Dark Mode */
html[data-bs-theme="dark"] .modal-content {
    background-color: var(--bs-card-bg, #151821);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .modal-header .modal-title {
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .modal-body {
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Button Outline Variants Dark Mode */
html[data-bs-theme="dark"] .btn-outline-secondary {
    color: #aab0b9;
    border-color: rgba(255, 255, 255, 0.2);
}

html[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #d9e1ec;
    border-color: rgba(255, 255, 255, 0.3);
}

html[data-bs-theme="dark"] .btn-outline-primary {
    color: #3b82f6;
    border-color: #3b82f6;
}

html[data-bs-theme="dark"] .btn-outline-primary:hover {
    background-color: #3b82f6;
    color: #ffffff;
}

/* Budget App Dark Mode */
html[data-bs-theme="dark"] .section-card {
    background-color: var(--bs-card-bg, #151821);
    border-color: rgba(255, 255, 255, 0.05);
}

html[data-bs-theme="dark"] .section-card h1,
html[data-bs-theme="dark"] .section-card h2 {
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] #workersTable,
html[data-bs-theme="dark"] #customIncomeTable,
html[data-bs-theme="dark"] #debtTable {
    background-color: transparent;
}

/* Budget App Inputs Dark Mode - Better Contrast */
html[data-bs-theme="dark"] input[type="text"],
html[data-bs-theme="dark"] input[type="number"] {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

html[data-bs-theme="dark"] input[type="text"]::placeholder,
html[data-bs-theme="dark"] input[type="number"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

html[data-bs-theme="dark"] input[type="text"]:hover,
html[data-bs-theme="dark"] input[type="number"]:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

html[data-bs-theme="dark"] input[type="text"]:focus,
html[data-bs-theme="dark"] input[type="number"]:focus {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

/* Savings App Sidebar Dark Mode - FIX TEXT VISIBILITY */
html[data-bs-theme="dark"] .sidebar {
    background-color: #0f111a !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-bs-theme="dark"] .sidebar.bg-dark {
    background-color: #0f111a !important;
}

html[data-bs-theme="dark"] .sidebar h4,
html[data-bs-theme="dark"] .sidebar .text-white {
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .sidebar a,
html[data-bs-theme="dark"] .sidebar a.text-white {
    color: #d9e1ec !important;
    text-decoration: none;
}

html[data-bs-theme="dark"] .sidebar a:hover,
html[data-bs-theme="dark"] .sidebar a.text-white:hover {
    color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
    padding-left: 10px;
    transition: all 0.2s ease;
}

/* Savings App Form Selects Dark Mode */
html[data-bs-theme="dark"] .form-select option,
html[data-bs-theme="dark"] select option {
    background-color: #1e222d;
    color: #d9e1ec;
    padding: 8px;
}

html[data-bs-theme="dark"] .form-select option:hover,
html[data-bs-theme="dark"] .form-select option:checked,
html[data-bs-theme="dark"] select option:hover,
html[data-bs-theme="dark"] select option:checked {
    background-color: rgba(59, 130, 246, 0.3);
    color: #ffffff;
}

/* Force visibility of select dropdown arrow in dark mode */
html[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d9e1ec' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Password Manager Dark Mode */
html[data-bs-theme="dark"] .password-display {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .password-display input[readonly] {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .strength-meter {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Password Generator Modal Specific Styles */
html[data-bs-theme="dark"] #passwordGeneratorModal .modal-body,
html[data-bs-theme="dark"] #passwordSettingsModal .modal-body {
    background-color: var(--bs-card-bg, #151821);
}

html[data-bs-theme="dark"] #passwords .password-display {
    padding: 10px;
    border-radius: 5px;
}

html[data-bs-theme="dark"] #passwords .form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--bs-body-color, #d9e1ec);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Developer Tools Dark Mode */
html[data-bs-theme="dark"] pre,
html[data-bs-theme="dark"] code {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

/* Calculator Dark Mode */
html[data-bs-theme="dark"] .calculator-display {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .calculator-button {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .calculator-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Task Manager Dark Mode */
html[data-bs-theme="dark"] .task-item {
    background-color: var(--bs-card-bg, #151821);
    border-color: rgba(255, 255, 255, 0.05);
}

html[data-bs-theme="dark"] .task-item:hover {
    background-color: rgba(255, 255, 255, 0.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html[data-bs-theme="dark"] .task-priority {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Project Management Dark Mode */
html[data-bs-theme="dark"] .category-header {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--bs-body-color, #d9e1ec);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-bs-theme="dark"] .deleted-task-card {
    background-color: rgba(255, 193, 7, 0.1);
    border-left-color: #ff6b7a;
}

/* Dashboard Dark Mode */
html[data-bs-theme="dark"] .app-card {
    background-color: var(--bs-card-bg, #151821);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .card-body h3 {
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .card-body p {
    color: var(--bs-text-muted, #aab0b9);
}

html[data-bs-theme="dark"] .dashboard-header p {
    color: var(--bs-text-muted, #aab0b9);
}

/* Dashboard card gradient headers - keep vibrant colors */
html[data-bs-theme="dark"] .card-header {
    color: white;
}

/* IP Tracker Dark Mode */
html[data-bs-theme="dark"] .stat-card {
    background-color: var(--bs-card-bg, #151821);
    border-color: rgba(255, 255, 255, 0.05);
}

html[data-bs-theme="dark"] .stat-card .stat-value {
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .stat-card .stat-label {
    color: var(--bs-text-muted, #aab0b9);
}

/* Badge Dark Mode */
html[data-bs-theme="dark"] .badge {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Alert Dark Mode */
html[data-bs-theme="dark"] .alert {
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-bs-theme="dark"] .alert-info {
    background-color: rgba(13, 110, 253, 0.1);
    color: #7cb5ff;
    border-color: rgba(13, 110, 253, 0.2);
}

html[data-bs-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    color: #75d899;
    border-color: rgba(25, 135, 84, 0.2);
}

html[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.2);
}

html[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: #ff6b7a;
    border-color: rgba(220, 53, 69, 0.2);
}

/* Bootstrap Dropdown Menu Dark Mode (for .dropdown-menu elements) */
html[data-bs-theme="dark"] .dropdown-menu {
    background-color: #1e222d;
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-bs-theme="dark"] .dropdown-menu .dropdown-item {
    color: #d9e1ec !important;
}

html[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus {
    background-color: rgba(59, 130, 246, 0.3) !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Breadcrumb Dark Mode */
html[data-bs-theme="dark"] .breadcrumb {
    background-color: rgba(255, 255, 255, 0.02);
}

html[data-bs-theme="dark"] .breadcrumb-item a {
    color: #3b82f6;
}

html[data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--bs-text-muted, #aab0b9);
}

/* Pagination Dark Mode */
html[data-bs-theme="dark"] .pagination .page-link {
    background-color: var(--bs-card-bg, #151821);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color, #d9e1ec);
}

html[data-bs-theme="dark"] .pagination .page-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

html[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

/* Scrollbar Dark Mode */
html[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Text Colors Dark Mode */
html[data-bs-theme="dark"] .text-muted {
    color: var(--bs-text-muted, #aab0b9);
}

html[data-bs-theme="dark"] h1, 
html[data-bs-theme="dark"] h2, 
html[data-bs-theme="dark"] h3, 
html[data-bs-theme="dark"] h4, 
html[data-bs-theme="dark"] h5, 
html[data-bs-theme="dark"] h6 {
    color: var(--bs-body-color, #d9e1ec);
}

/* Border utilities Dark Mode */
html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-start,
html[data-bs-theme="dark"] .border-end {
    border-color: rgba(255, 255, 255, 0.05);
}

/* Footer Dark Mode */
html[data-bs-theme="dark"] #footer-buttons {
    background: linear-gradient(135deg, #0f111a 0%, #151821 100%);
    border-top-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

html[data-bs-theme="dark"] .footer-copyright {
    background: linear-gradient(135deg, #0a0c10 0%, #0f111a 100%);
    border-top-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-text-muted, #aab0b9);
}

/* Dark mode transition for smooth switching */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

html * {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}