/* Dark Mode Variables and Styles */

:root {
    /* Light mode colors (default) */
  --bg-primary: rgb(250, 250, 250);
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8fafc;
    --text-color-dark: #1f2937;
    --text-color-light: #9aa3ab;
    --text-color-muted: #6b7280;
    --border-color: #3333331c;
  --border-color-light: #e5e7eb;
    --hover-bg: rgba(0, 110, 255, 0.12);
    --sidebar-bg: #ffffff;
    --modal-bg: #ffffff;
    --input-bg: #fff;
    --input-border: #d1d5db;
    --shadow-color: rgba(2, 6, 23, 0.35);
 --card-bg: #ffffff;
    --table-border: #f1f5f9;
    --table-hover: #f8fafc;
    --reports-bg: #f8fafc;
    --calendar-day-bg: #ffffff;
  --calendar-day-border: #ebeef0;
    --calendar-today-bg: #eef7ff;
    --calendar-entry-bg: rgba(34, 197, 94, 0.06);
    --stat-bg: #f8fafc;
    --timeslot-hour-bg: #fafafa;
  --timeslot-border: #f0f0f0;
    --timeslot-grid-border: #f6f6f6;
    
    /* Time slot event colors - Light mode */
    --time-slot-bg: #dbeafe;
    --time-slot-border: #2563eb;
 --time-slot-text: #1e40af;
    --time-slot-text-sub: #1e3a8a;
    --time-slot-bg-hover: #bfdbfe;
    --time-slot-non-billable-bg: #d1fae5;
    --time-slot-non-billable-border: #059669;
    --time-slot-non-billable-text: #065f46;
}

[data-theme="dark"] {
    /* Dark mode colors - GitHub inspired */
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --text-color-dark: #c9d1d9;
    --text-color-light: #8b949e;
    --text-color-muted: #8b949e;
    --border-color: #30363d;
    --border-color-light: #30363d;
    --hover-bg: rgba(110, 118, 129, 0.1);
--sidebar-bg: #161b22;
    --modal-bg: #161b22;
    --input-bg: #0d1117;
    --input-border: #30363d;
    --shadow-color: rgba(1, 4, 9, 0.85);
    --card-bg: #161b22;
    --table-border: #21262d;
--table-hover: #1c2128;
    --reports-bg: #0d1117;
    --calendar-day-bg: #161b22;
    --calendar-day-border: #30363d;
    --calendar-today-bg: #1c2d41;
    --calendar-entry-bg: rgba(46, 160, 67, 0.15);
    --stat-bg: #21262d;
    --timeslot-hour-bg: #161b22;
    --timeslot-border: #30363d;
    --timeslot-grid-border: #21262d;
    
    /* Time slot event colors - Dark mode with bright, readable text */
    --time-slot-bg: #1f6feb;
    --time-slot-border: #388bfd;
  --time-slot-text: #ffffff;
    --time-slot-text-sub: #e6edf3;
    --time-slot-bg-hover: #388bfd;
 --time-slot-non-billable-bg: #238636;
 --time-slot-non-billable-border: #2ea043;
    --time-slot-non-billable-text: #ffffff;
}

/* Apply theme colors to body and main elements */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-color-dark);
}

main {
    background-color: var(--bg-primary) !important;
}

/* Sidebar */
.sidebar-root {
    background-color: var(--sidebar-bg);
    border-right-color: var(--border-color);
}

.sidebar-header,
nav {
    border-bottom-color: var(--border-color);
}

.sidebar-footer {
    border-top-color: var(--border-color);
}

/* Sidebar text colors */
.sidebar-brand h1,
.sidebar-customer-name {
    color: var(--text-color-dark);
}

.sidebar-project-counter,
.sidebar-project-item {
    color: var(--text-color-light);
}

/* Buttons */
.btn {
    color: var(--text-color-dark);
}

.btn-icon {
    color: var(--text-color-light);
}

.btn-icon:hover {
  color: var(--text-color-dark);
}

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

[data-theme="dark"] .btn.btn-icon:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Modal */
.modal {
 background: var(--modal-bg);
    color: var(--text-color-dark);
    box-shadow: 0 10px 30px var(--shadow-color);
}

.modal h4 {
    color: var(--text-color-dark);
}

/* Inputs and selects - COMPREHENSIVE COVERAGE */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input.sidebar-search-input {
    background: var(--input-bg) !important;
 border-color: var(--input-border) !important;
    color: var(--text-color-dark) !important;
}

/* Modal inputs specifically */
[data-theme="dark"] .modal input[type="datetime-local"],
[data-theme="dark"] .modal select,
[data-theme="dark"] .modal input[type="text"],
[data-theme="dark"] .modal input[type="number"],
[data-theme="dark"] .modal input[type="date"],
[data-theme="dark"] .modal textarea {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color-dark) !important;
}

/* Time entry description textarea */
[data-theme="dark"] .modal textarea.time-entry-description,
[data-theme="dark"] .time-entry-description {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color-light) !important;
    color: var(--text-color-dark) !important;
}

/* Placeholder text */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-color-light) !important;
    opacity: 0.7;
}

/* Date/datetime picker calendar icon and text */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Form elements */
.btn-secondary {
    border-color: var(--border-color-light);
    color: var(--text-color-dark);
}

[data-theme="dark"] .btn-secondary {
    background: var(--bg-tertiary);
}

/* Sidebar search */
[data-theme="dark"] input.sidebar-search-input {
    background-color: #334155 !important;
}

.sidebar-search-icon,
.sidebar-clear-btn {
    color: var(--text-color-light);
}

/* Project items */
.sidebar-project-container {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .sidebar-project-container {
  background-color: transparent;
}

.sidebar-project-item {
    color: var(--text-color-dark);
}

/* Autocomplete dropdown */
.autocomplete-dropdown {
    background: var(--modal-bg);
    border-color: var(--border-color-light);
}

.autocomplete-item h5 {
  color: var(--text-color-dark);
}

.autocomplete-sub {
    color: var(--text-color-muted);
}

.autocomplete-item.selected,
.autocomplete-item:hover {
    background: var(--hover-bg);
}

/* Autocomplete dropdown - Dark mode specific with higher specificity */
[data-theme="dark"] .autocomplete-wrapper .autocomplete-dropdown,
[data-theme="dark"] .autocomplete-dropdown {
    background: var(--modal-bg) !important;
    border-color: var(--border-color-light) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .autocomplete-item h5 {
    color: var(--text-color-dark);
}

[data-theme="dark"] .autocomplete-sub {
    color: var(--text-color-muted);
}

[data-theme="dark"] .autocomplete-item.selected,
[data-theme="dark"] .autocomplete-item:hover {
 background: var(--hover-bg);
}

[data-theme="dark"] .autocomplete-dropdown::-webkit-scrollbar-thumb {
  background: var(--border-color-light);
}

/* Quickstart search */
.quickstart-search-item.selected,
.quickstart-search-item:hover {
    background: var(--hover-bg);
}

.quickstart-search-sub {
    color: var(--text-color-muted);
}

/* Quickstart modal inputs and form elements */
[data-theme="dark"] .quickstart-search-input,
[data-theme="dark"] .quickstart-description,
[data-theme="dark"] .quickstart-support {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color-dark) !important;
}

[data-theme="dark"] .quickstart-billable {
    color: var(--text-color-dark);
}

[data-theme="dark"] .quickstart-search input[type="text"] {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color-dark) !important;
}

/* Dark mode toggle styling */
.darkmode-toggle {
    width: 100%;
    justify-content: flex-start;
    transition: all 0.2s ease;
}

.darkmode-toggle:hover {
    background: var(--hover-bg);
}

.darkmode-toggle i {
    font-size: 1.1em;
}

/* Cards and Projects */
[data-theme="dark"] .card,
[data-theme="dark"] .table-projects {
    background: var(--card-bg);
    color: var(--text-color-dark);
}

[data-theme="dark"] .project-title {
    color: var(--text-color-dark);
}

[data-theme="dark"] .project-description p,
[data-theme="dark"] .due-row {
    color: var(--text-color-light);
}

[data-theme="dark"] .meta-label,
[data-theme="dark"] .section-label {
    color: var(--text-color-muted);
}

/* Tables */
[data-theme="dark"] .table-projects th {
  background: var(--card-bg);
    color: var(--text-color-muted);
    border-bottom-color: var(--table-border);
}

[data-theme="dark"] .table-projects td {
    border-bottom-color: var(--table-border);
 color: var(--text-color-dark);
}

[data-theme="dark"] .table-projects tbody tr:hover {
    background-color: var(--table-hover);
}

/* Page backgrounds */
[data-theme="dark"] .page-projects {
    background: var(--bg-primary);
}

/* Time entry details */
[data-theme="dark"] .time-entry-level {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color-dark) !important;
}

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

/* Skeleton loading in dark mode */
[data-theme="dark"] .skeleton-line,
[data-theme="dark"] .skeleton-block,
[data-theme="dark"] .skeleton-action {
    background: linear-gradient(90deg, rgba(51,65,85,1) 8%, rgba(71,85,105,1) 18%, rgba(51,65,85,1) 33%);
    background-size: 200% 100%;
}

/* Label chips */
[data-theme="dark"] .label-chip {
    background: var(--bg-tertiary);
    color: var(--text-color-dark);
}

/* Delete button dark mode */
[data-theme="dark] .btn-delete {
    color: var(--text-color-dark);
}

[data-theme="dark"] .btn-delete:not(:disabled):hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Scrollbar styling for dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
  height: 10px;
}

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

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

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

/* Links */
[data-theme="dark"] .trello-link {
    color: #60a5fa;
}

[data-theme="dark"] .trello-link:hover {
    color: #93c5fd;
}

/* Ensure proper contrast for active states */
[data-theme="dark"] .sidebar-project-item.active {
    background-color: var(--project-active-bg);
 color: var(--text-color-dark);
}

/* Timer bar in dark mode */
[data-theme="dark"] .active-timer-bar {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* Modal backdrop */
[data-theme="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

/* Select dropdowns */
[data-theme="dark"] select option {
    background: var(--bg-secondary);
    color: var(--text-color-dark);
}

/* Focus states */
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
  border-color: #60a5fa !important;
    outline: none;
}

/* Invalid field states in dark mode */
[data-theme="dark"] .invalid-field {
    border-color: #ef4444 !important;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

/* Ensure good contrast for filters and labels */
[data-theme="dark"] .filters label {
    color: var(--text-color-muted);
}

/* Additional table header styling */
[data-theme="dark"] .table-projects thead th {
background: var(--card-bg);
}

/* Form labels in dark mode */
[data-theme="dark"] label,
[data-theme="dark"] .modal label,
[data-theme="dark"] .edit-project-form label {
    color: var(--text-color-muted) !important;
}

/* Checkboxes in dark mode */
[data-theme="dark"] input[type="checkbox"] {
    accent-color: #3b82f6;
}

/* Ensure all edit forms have proper input styling */
[data-theme="dark"] .edit-project-form input.form-control,
[data-theme="dark"] .edit-project-form textarea.form-control,
[data-theme="dark"] .edit-project-form select.form-select {
    background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
    color: var(--text-color-dark) !important;
}

/* Disabled inputs */
[data-theme="dark"] input:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] select:disabled {
    background: var(--bg-tertiary) !important;
    color: var(--text-color-muted) !important;
    opacity: 0.6;
}

/* ====== REPORTS PAGE DARK MODE ====== */

/* Reports container */
html[data-theme="dark"] .reports-container {
background-color: var(--reports-bg) !important;
}

/* Reports title */
html[data-theme="dark"] .reports-title {
 color: var(--text-color-dark) !important;
}

/* Report Grid Layout - Force override hardcoded white backgrounds with maximum specificity */
html[data-theme="dark"] .reports-grid .report-card,
html[data-theme="dark"] .report-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .reports-grid .report-card:hover,
html[data-theme="dark"] .report-card:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) !important;
    background: var(--bg-tertiary) !important;
}

html[data-theme="dark"] .report-card .report-info h3,
html[data-theme="dark"] .report-info h3 {
    color: var(--text-color-dark) !important;
}

html[data-theme="dark"] .report-card .report-info p,
html[data-theme="dark"] .report-info p {
    color: var(--text-color-light) !important;
}

/* Report Back Header */
html[data-theme="dark"] .report-back-header h2 {
    color: var(--text-color-dark) !important;
}

html[data-theme="dark"] .report-back-header .btn {
    color: var(--text-color-dark) !important;
}

html[data-theme="dark"] .report-back-header .btn:hover {
    background: var(--hover-bg) !important;
}

/* Coming Soon Placeholder */
html[data-theme="dark"] .coming-soon {
    background: var(--card-bg) !important;
}

html[data-theme="dark"] .coming-soon i {
    color: var(--text-color-light) !important;
}

html[data-theme="dark"] .coming-soon p {
    color: var(--text-color-light) !important;
}

/* Date selectors */
html[data-theme="dark"] .selector-group label {
    color: var(--text-color-muted) !important;
}

html[data-theme="dark"] .month-select,
html[data-theme="dark"] .year-select,
html[data-theme="dark"] .user-select,
html[data-theme="dark"] #user-select,
html[data-theme="dark"] #view-mode {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color-dark) !important;
}

/* Calendar container */
html[data-theme="dark"] .calendar-container {
    background-color: var(--card-bg) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Calendar navigation */
html[data-theme="dark"] .nav-btn {
    color: var(--text-color-dark) !important;
}

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

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

/* Calendar weekdays */
html[data-theme="dark"] .calendar-weekdays .weekday,
html[data-theme="dark"] .weekday {
    color: var(--text-color-muted) !important;
}

/* Calendar days */
html[data-theme="dark"] .calendar-day {
    background-color: var(--calendar-day-bg) !important;
    border-color: var(--calendar-day-border) !important;
}

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

html[data-theme="dark"] .calendar-day.today {
  background: var(--calendar-today-bg) !important;
    border-color: #3b82f6 !important;
}

html[data-theme="dark"] .calendar-day.has-entries {
    background-color: var(--calendar-entry-bg) !important;
}

html[data-theme="dark"] .calendar-day.other-month {
    background-color: var(--bg-tertiary) !important;
    opacity: 0.5;
}

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

html[data-theme="dark"] .other-month .day-number {
    color: var(--text-color-light) !important;
}

html[data-theme="dark"] .day-hours {
    color: #34d399 !important;
}

html[data-theme="dark"] .day-entry {
    background-color: rgba(59, 130, 246, 0.8) !important;
    color: white !important;
}

/* Timeslot/Week view */
html[data-theme="dark"] .timeslot-header {
border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .timeslot-header .day {
    color: var(--text-color-muted) !important;
}

html[data-theme="dark"] .timeslot-hours {
    background: var(--timeslot-hour-bg) !important;
    border-right-color: var(--timeslot-border) !important;
}

html[data-theme="dark"] .hour-label {
    color: var(--text-color-light) !important;
    border-bottom-color: var(--timeslot-grid-border) !important;
}

html[data-theme="dark"] .timeslot-day {
    border-left-color: var(--timeslot-border) !important;
}

html[data-theme="dark"] .timeslot-grid .timeslot-cell {
    border-bottom-color: var(--timeslot-grid-border) !important;
}

html[data-theme="dark"] .timeslot-grid .timeslot-cell.end-cell {
    border-bottom-color: var(--timeslot-grid-border) !important;
}

html[data-theme="dark"] .time-slot-event {
    background: rgba(59, 130, 246, 0.25) !important;
    border-left-color: #3b82f6 !important;
}

html[data-theme="dark"] .time-slot-event .title {
    color: #93c5fd !important;
}

html[data-theme="dark"] .time-slot-event .sub {
    color: #93c5fd !important;
}

html[data-theme="dark"] .time-slot-event:hover {
    background-color: rgba(59, 130, 246, 0.35) !important;
}

html[data-theme="dark"] .time-slot-non-billable {
    border-left-color: #34d399 !important;
    background: rgba(52, 211, 153, 0.15) !important;
}

/* Report summary */
html[data-theme="dark"] .report-summary {
  background-color: var(--card-bg) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

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

html[data-theme="dark"] .stat-item {
    background-color: var(--stat-bg) !important;
    border-left-color: #3b82f6 !important;
}

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

html[data-theme="dark"] .stat-value {
    color: #34d399 !important;
}

/* Entry modal - Reports specific */
html[data-theme="dark"] .entry-modal-backdrop {
 background: rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] .entry-modal {
    background: var(--modal-bg) !important;
    color: var(--text-color-dark) !important;
}

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

html[data-theme="dark"] .entry-modal .meta {
    color: var(--text-color-light) !important;
}

html[data-theme="dark"] .entry-modal .close-btn {
    color: var(--text-color-light) !important;
}

html[data-theme="dark"] .entry-modal .close-btn:hover {
    color: var(--text-color-dark) !important;
}

html[data-theme="dark"] .entry-modal .meta-row {
    color: var(--text-color-dark) !important;
}

html[data-theme="dark"] .entry-modal .desc {
background: var(--bg-tertiary) !important;
    border-color: var(--border-color-light) !important;
    color: var(--text-color-dark) !important;
}

html[data-theme="dark"] .badge {
    background: var(--bg-tertiary) !important;
    color: #60a5fa !important;
    border-color: var(--border-color-light) !important;
}

/* Inline styles override - use higher specificity */
html[data-theme="dark"] article {
    color: var(--text-color-dark) !important;
}

/* CSS variables used in inline styles */
html[data-theme="dark"] {
    --accent: #3b82f6;
    --accent-weak: rgba(59, 130, 246, 0.25);
    --muted: #94a3b8;
    --bg: #1e293b;
    --card: #1e293b;
}