/* Additional styles that aren't covered by Tailwind */
.status-pending, .status-in_progress, .status-completed {
    border-left-width: 4px;
}

/* Base dark mode styles (will be applied when html.dark is present) */
html.dark {
    --primary-color: #60a5fa; /* Lighter primary for dark mode (e.g., blue-400) */
    --secondary-color: #374151; /* Darker secondary for dark mode */
    --tertiary-color: #4b5563; /* Darker tertiary */
    --dark-color: #93c5fd; /* Lighter dark color */
}

/* General overrides for dark mode */
html.dark body {
    background-color: #1f2937; /* Dark background */
    color: #e5e7eb; /* Light text */
}

/* Specific component overrides */
html.dark .bg-white {
    background-color: #374151; /* Darker card backgrounds */
    border-color: #4b5563; /* Darker borders for cards */
}

html.dark .bg-gray-50 { /* Used for comments, hover states, input backgrounds */
    background-color: #4b5563;
    border-color: #6b7280;
}

html.dark .text-gray-500 { color: #9ca3af; }
html.dark .text-gray-600 { color: #d1d5db; }
html.dark .text-gray-700 { color: #e5e7eb; }
html.dark .text-gray-800 { color: #f3f4f6; }

/* Input fields, textareas, selects */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #4b5563;
    color: #f3f4f6;
    border-color: #6b7280;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: var(--primary-color); /* Uses the lighter primary from :root */
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5); /* blue-400 with opacity */
    outline: none;
}

/* Specific text/backgrounds that rely on primary/secondary/tertiary/dark colors */
html.dark .bg-primary { background-color: var(--primary-color); } /* Header, some buttons */
html.dark .bg-secondary { background-color: var(--secondary-color); } /* Footer */
html.dark .text-primary { color: var(--primary-color); } /* Titles, links */
html.dark .border-primary { border-color: var(--primary-color); }
html.dark .hover\:bg-primary-dark:hover { background-color: var(--dark-color); } /* Darker hover for buttons */

/* Status badges adjustment for dark mode readability */
html.dark .status-pending { background-color: #fbbf24; color: #1f2937; border-left-color: #f59e0b; } /* Yellow-400 / Gray-900 */
html.dark .status-in_progress { background-color: #60a5fa; color: #1f2937; border-left-color: #3b82f6; } /* Blue-400 / Gray-900 */
html.dark .status-completed { background-color: #34d399; color: #1f2937; border-left-color: #16a34a; } /* Green-400 / Gray-900 */

/* Adjust search bar specific styles for dark mode */
html.dark .lg\:max-w-xs .bg-gray-700 { /* Targeting the search input's container or input directly */
    background-color: #4b5563; /* Darker background for search input */
    color: #e5e7eb; /* Lighter text color */
}
html.dark .lg\:max-w-xs .placeholder-gray-400::placeholder {
    color: #9ca3af; /* Adjust placeholder color */
}
html.dark .lg\:max-w-xs .focus\:bg-white:focus { /* When search input is focused */
    background-color: #6b7280; /* Slightly lighter focused background */
    color: #f3f4f6; /* Keep text light */
    border-color: #93c5fd; /* Light blue border */
}
html.dark .lg\:max-w-xs .focus\:text-gray-900:focus { /* Override default focus text color */
    color: #f3f4f6;
}
html.dark .lg\:max-w-xs .text-gray-400 { /* Search icon color */
    color: #d1d5db;
}

/* Sidebar specific adjustments */
html.dark aside {
    background-color: #374151; /* Darker sidebar background */
    border-color: #4b5563; /* Darker sidebar border */
}
html.dark aside .text-gray-600 { /* Sidebar links */
    color: #d1d5db;
}
html.dark aside .hover\:bg-gray-100:hover { /* Sidebar link hover */
    background-color: #4b5563;
    color: #f3f4f6;
}
html.dark aside .bg-primary.text-white { /* Active sidebar link */
    background-color: #3b82f6; /* Tailwind blue-500 for active tab */
    color: #ffffff;
}
html.dark aside svg.h-6.w-6 { /* Sidebar icons */
    color: #9ca3af;
}

/* Other specific elements if needed */
html.dark .border-l-4.status-pending { border-left-color: #f59e0b; }
html.dark .border-l-4.status-in_progress { border-left-color: #3b82f6; }
html.dark .border-l-4.status-completed { border-left-color: #16a34a; }

/* Print styles */
@media print {
    header, footer, aside, .no-print {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-size: 12pt;
    }

    .break-after {
        page-break-after: always;
    }
}