/* ==========================================================================
   DARK MODE OVERRIDES - MIMICKING FILE TRACKER (Tailwind Gray Palette)
   ========================================================================== */

html.dark {
    /* Tailwind Gray-900 */
    --bg-main: #111827 !important;

    /* Tailwind Gray-800 */
    --bg-white: #1f2937 !important;
    --card-bg: #1f2937 !important;
    --bg-surface: #1f2937 !important;

    /* Tailwind Gray-700 */
    --border-color: #374151 !important;

    /* Tailwind Gray-50 */
    --text-primary: #f9fafb !important;

    /* Tailwind Gray-400 */
    --text-secondary: #9ca3af !important;

    /* Tailwind Gray-500 */
    --text-muted: #6b7280 !important;

    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
    --chart-blue: #60a5fa !important;
    /* Blue-400 */
}

html.dark body {
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
}

/* 
   Apply dark background to all container-like elements 
   Matching File Tracker's "bg-white dark:bg-gray-800" usage
*/
html.dark .card,
html.dark .modal,
html.dark .stat-card,
html.dark .chart-card,
html.dark .analytics-dashboard,
html.dark .analytics-controls,
html.dark .auth-card,
html.dark .navbar,
html.dark .dropdown-menu {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* 
   Inputs: mimic "bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600" 
*/
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea,
html.dark .analytics-select {
    background-color: #374151 !important;
    /* Gray-700 */
    color: #f9fafb !important;
    /* Gray-50 */
    border-color: #4b5563 !important;
    /* Gray-600 */
}

html.dark .form-input:focus,
html.dark .form-select:focus,
html.dark .form-textarea:focus {
    border-color: var(--primary) !important;
    background-color: #4b5563 !important;
    /* Gray-600 on focus/hover often */
}

/* Tables */
html.dark .table th,
html.dark .table td {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

html.dark .table tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Links */
html.dark a:not(.btn) {
    color: #60a5fa;
    /* Blue-400 */
}

html.dark a:not(.btn):hover {
    color: #93c5fd;
    /* Blue-300 */
}

/* Quill Editor Fixes for Dark Mode */
html.dark .ql-toolbar {
    background-color: #374151 !important;
    /* Gray-700 */
    border-color: var(--border-color) !important;
}

html.dark .ql-container {
    background-color: #1f2937 !important;
    /* Gray-800 */
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html.dark .ql-stroke {
    stroke: #e5e7eb !important;
}

/* Gray-200 */
html.dark .ql-fill {
    fill: #e5e7eb !important;
}

html.dark .ql-picker {
    color: #e5e7eb !important;
}

/* Scrollbars */
html.dark ::-webkit-scrollbar-track {
    background: #111827;
    /* Gray-900 */
}

html.dark ::-webkit-scrollbar-thumb {
    background: #4b5563;
    /* Gray-600 */
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
    /* Gray-500 */
}