/* 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;
    }
}

    /* Ensure basic typography for Markdown content */
    .prose h1 {
        font-size: 2.25rem; /* Tailwind text-4xl */
        font-weight: 700;   /* Tailwind font-bold */
        margin-top: 2rem;
        margin-bottom: 1rem;
        color: var(--text-color); /* Use theme text color */
    }

    .prose h2 {
        font-size: 1.875rem; /* Tailwind text-3xl */
        font-weight: 700;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        color: var(--text-color);
    }

    .prose h3 {
        font-size: 1.5rem; /* Tailwind text-2xl */
        font-weight: 700;
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
        color: var(--text-color);
    }

    .prose strong {
        font-weight: 700; /* Ensure bolding */
    }

    .prose ul, .prose ol {
        list-style-position: outside;
        margin-left: 1.5em; /* Indent lists */
        padding-left: 0;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .prose ul li {
        list-style-type: disc; /* Default bullet */
    }

    .prose ol li {
        list-style-type: decimal; /* Default numbering */
    }

    .prose p {
        margin-top: 1em;
        margin-bottom: 1em;
        line-height: 1.75; /* Tailwind leading-relaxed */
    }

    /* Dark mode adjustments for prose */
    html.dark .prose h1,
    html.dark .prose h2,
    html.dark .prose h3,
    html.dark .prose strong,
    html.dark .prose p,
    html.dark .prose ul,
    html.dark .prose ol,
    html.dark .prose li {
        color: #e5e7eb; /* Light text for dark mode */
    }