/**
 * Dark Mode Styles - COPILOT GESTORIA
 *
 * Best Practices Applied:
 * - No pure black (#000) - using #0d1117 for less eye strain
 * - No pure white text - using #e6edf3 for softer contrast
 * - WCAG AA compliant contrast ratios (4.5:1 minimum)
 * - Layered surfaces for depth perception
 * - Consistent with GitHub/VS Code dark themes
 *
 * Sources:
 * - https://design.dev/guides/dark-mode-css/
 * - https://getbootstrap.com/docs/5.3/customize/color-modes/
 */

/* ========================================
   CSS Variables - Light Theme (Default)
   ======================================== */
:root {
    /* Backgrounds */
    --bg-body: #f5f9fc;
    --bg-card: #ffffff;
    --bg-sidebar: #25233a;
    --bg-navbar: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f8f9fa;
    --bg-dropdown: #ffffff;
    --bg-modal: #ffffff;
    --bg-table-header: #f8f9fa;
    --bg-table-stripe: #f8f9fa;

    /* Text */
    --text-primary: #1e1e2d;
    --text-secondary: #6c757d;
    --text-muted: #8898aa;
    --text-inverse: #ffffff;

    /* Borders */
    --border-color: #ebecf1;
    --border-light: #e9ecef;

    /* Shadows */
    --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-dropdown: 0 0.5rem 1rem rgba(0,0,0,0.15);

    /* Brand colors (unchanged) */
    --primary: #667eea;
    --secondary: #764ba2;
    --success: #38cb89;
    --warning: #ffab00;
    --danger: #ef4b4b;
    --info: #5b7fff;
}

/* ========================================
   CSS Variables - Dark Theme
   ======================================== */
[data-theme="dark"] {
    /* Backgrounds - Layered for depth */
    --bg-body: #0d1117;
    --bg-card: #161b22;
    --bg-sidebar: #0d1117;
    --bg-navbar: #161b22;
    --bg-input: #21262d;
    --bg-hover: #21262d;
    --bg-dropdown: #1c2128;
    --bg-modal: #161b22;
    --bg-table-header: #21262d;
    --bg-table-stripe: #161b22;

    /* Text - Soft white for less strain */
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --text-inverse: #0d1117;

    /* Borders */
    --border-color: #30363d;
    --border-light: #21262d;

    /* Shadows - More subtle in dark mode */
    --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2);
    --shadow-dropdown: 0 0.5rem 1rem rgba(0,0,0,0.4);
}

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

/* ========================================
   App Container & Main Content
   ======================================== */
.app-content,
.main-content,
.container-fluid {
    background-color: var(--bg-body);
}

.page-header {
    background-color: var(--bg-body);
}

/* ========================================
   Cards
   ======================================== */
.card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-card);
}

.card-header {
    background-color: var(--bg-card) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary);
}

.card-body {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.card-footer {
    background-color: var(--bg-card) !important;
    border-top-color: var(--border-color) !important;
}

.card-title,
.card-header h5,
.card-header h6 {
    color: var(--text-primary) !important;
}

/* ========================================
   Navbar / Header
   ======================================== */
.app-header,
.header {
    background-color: var(--bg-navbar) !important;
    border-bottom-color: var(--border-color) !important;
}

.header-icon {
    color: var(--text-secondary) !important;
}

.header-icon:hover {
    color: var(--text-primary) !important;
}

/* ========================================
   Sidebar
   ======================================== */
[data-theme="dark"] .app-sidebar {
    background-color: var(--bg-sidebar) !important;
}

[data-theme="dark"] .side-menu li a {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .side-menu li a:hover,
[data-theme="dark"] .side-menu li a.active {
    color: var(--text-primary) !important;
}

/* ========================================
   Tables
   ======================================== */
.table {
    color: var(--text-primary);
}

.table thead th {
    background-color: var(--bg-table-header) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

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

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

.table-hover tbody tr:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary);
}

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

/* ========================================
   Forms & Inputs
   ======================================== */
.form-control {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.form-control:focus {
    background-color: var(--bg-input) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

.input-group-text {
    background-color: var(--bg-hover) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

select.form-control {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

.custom-select {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

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

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.dropdown-divider {
    border-top-color: var(--border-color) !important;
}

.dropdown-header {
    color: var(--text-secondary) !important;
}

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

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

.modal-header .modal-title {
    color: var(--text-primary) !important;
}

.modal-header .close {
    color: var(--text-secondary) !important;
}

.modal-body {
    color: var(--text-primary);
}

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

/* ========================================
   Alerts
   ======================================== */
[data-theme="dark"] .alert-info {
    background-color: rgba(91, 127, 255, 0.15) !important;
    border-color: rgba(91, 127, 255, 0.3) !important;
    color: #79a3ff !important;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 171, 0, 0.15) !important;
    border-color: rgba(255, 171, 0, 0.3) !important;
    color: #ffc107 !important;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(56, 203, 137, 0.15) !important;
    border-color: rgba(56, 203, 137, 0.3) !important;
    color: #5dd99a !important;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 75, 75, 0.15) !important;
    border-color: rgba(239, 75, 75, 0.3) !important;
    color: #f77 !important;
}

/* ========================================
   Badges
   ======================================== */
[data-theme="dark"] .badge-light {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* ========================================
   Breadcrumbs
   ======================================== */
.breadcrumb {
    background-color: transparent !important;
}

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

.breadcrumb-item.active {
    color: var(--text-muted) !important;
}

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

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

.page-item.disabled .page-link {
    background-color: var(--bg-card) !important;
    color: var(--text-muted) !important;
}

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

.list-group-item:hover {
    background-color: var(--bg-hover) !important;
}

/* ========================================
   Text Utilities
   ======================================== */
.text-dark {
    color: var(--text-primary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

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

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary);
}

[data-theme="dark"] p {
    color: var(--text-primary);
}

[data-theme="dark"] label {
    color: var(--text-primary);
}

[data-theme="dark"] .font-weight-bold,
[data-theme="dark"] .fw-bold {
    color: var(--text-primary);
}

/* ========================================
   Background Utilities Override
   ======================================== */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
}

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

/* ========================================
   Borders
   ======================================== */
[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: var(--border-color) !important;
}

/* ========================================
   Charts (Chart.js)
   ======================================== */
[data-theme="dark"] .chart-container {
    background-color: var(--bg-card);
}

/* ========================================
   Custom Dashboard Elements
   ======================================== */
[data-theme="dark"] .hover-shadow:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important;
}

[data-theme="dark"] .task-heading {
    color: var(--text-primary);
}

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

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

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* ========================================
   Smooth Transition for Theme Switch
   ======================================== */
body,
.card,
.app-header,
.app-sidebar,
.dropdown-menu,
.modal-content,
.form-control,
.table {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease;
}