/* static/style.css */

/* Include Tailwind CSS from CDN */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Custom styles can go here if needed */
body {
    font-family: "Inter", sans-serif;
}

/* Ensure rounded corners on all elements as per guidelines */
.rounded-lg,
.rounded-md {
    border-radius: 0.5rem;
}

/* For form inputs and buttons */
.shadow.appearance-none.border.rounded,
.bg-blue-600,
.bg-green-600,
.bg-blue-500,
.bg-green-500,
.bg-red-500 {
    border-radius: 0.375rem;
}

/* Add basic focus styles for accessibility */
input:focus,
select:focus,
button:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

/* Dark mode focus styles */
.dark input:focus,
.dark select:focus,
.dark button:focus,
.dark textarea:focus {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5);
}

/* Add dropdown arrows to all select elements */
select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ==================== DARK MODE STYLES ==================== */

/* Dark mode input and form elements */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="tel"],
.dark input[type="url"],
.dark textarea,
.dark select {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.dark input[type="text"]::placeholder,
.dark input[type="email"]::placeholder,
.dark input[type="password"]::placeholder,
.dark textarea::placeholder {
    color: #9ca3af;
}

/* Dark mode for disabled inputs */
.dark input:disabled,
.dark select:disabled,
.dark textarea:disabled {
    background-color: #1f2937;
    color: #6b7280;
    cursor: not-allowed;
}

/* Dark mode select dropdown arrow (white arrow for dark backgrounds) */
.dark select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Dark mode tables */
.dark table {
    color: #f9fafb;
}

.dark thead {
    background-color: #374151;
    color: #f9fafb;
}

.dark tbody tr {
    border-color: #4b5563;
}

.dark tbody tr:hover {
    background-color: #374151;
}

.dark th,
.dark td {
    border-color: #4b5563;
}

/* Dark mode cards and containers */
.dark .card,
.dark .container,
.dark .panel {
    background-color: #1f2937;
    color: #f9fafb;
}

/* Dark mode links */
.dark a {
    color: #60a5fa;
}

.dark a:hover {
    color: #93c5fd;
}

/* Dark mode buttons - ensure proper contrast */
.dark button:not(.bg-blue-600):not(.bg-green-600):not(.bg-red-600):not(.bg-yellow-600) {
    background-color: #374151;
    color: #f9fafb;
}

/* Dark mode for specific button types */
.dark .btn-primary {
    background-color: #3b82f6;
    color: white;
}

.dark .btn-primary:hover {
    background-color: #2563eb;
}

.dark .btn-secondary {
    background-color: #6b7280;
    color: white;
}

.dark .btn-secondary:hover {
    background-color: #4b5563;
}

/* Dark mode badges and labels */
.dark .badge,
.dark .label {
    background-color: #374151;
    color: #f9fafb;
}

/* Dark mode for alerts and notifications */
.dark .alert {
    background-color: #1f2937;
    border-color: #4b5563;
    color: #f9fafb;
}

/* Dark mode modals */
.dark .modal,
.dark .modal-content {
    background-color: #1f2937;
    color: #f9fafb;
}

.dark .modal-header {
    border-color: #4b5563;
}

.dark .modal-footer {
    border-color: #4b5563;
}

/* Dark mode for checkboxes and radio buttons */
.dark input[type="checkbox"],
.dark input[type="radio"] {
    border-color: #6b7280;
    background-color: #374151;
}

.dark input[type="checkbox"]:checked,
.dark input[type="radio"]:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

.dark ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 6px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Dark mode for code blocks */
.dark code,
.dark pre {
    background-color: #1f2937;
    color: #f9fafb;
    border-color: #4b5563;
}

/* Dark mode borders */
.dark .border,
.dark [class*="border-"] {
    border-color: #4b5563;
}

/* Dark mode dividers */
.dark hr {
    border-color: #4b5563;
}

/* Ensure text contrast in dark mode */
.dark .text-gray-900 {
    color: #f9fafb !important;
}

.dark .text-gray-800 {
    color: #e5e7eb !important;
}

.dark .text-gray-700 {
    color: #d1d5db !important;
}

.dark .text-gray-600 {
    color: #9ca3af !important;
}

/* Override light backgrounds in dark mode */
.dark .bg-white {
    background-color: #1f2937 !important;
}

.dark .bg-gray-50 {
    background-color: #111827 !important;
}

.dark .bg-gray-100 {
    background-color: #1f2937 !important;
}

.dark .bg-gray-200 {
    background-color: #374151 !important;
}

/* Dark mode hover states for interactive elements */
.dark .hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #4b5563 !important;
}

.dark .hover\:bg-gray-200:hover {
    background-color: #6b7280 !important;
}

/* Dark mode for form validation */
.dark .invalid-feedback {
    color: #fca5a5;
}

.dark .valid-feedback {
    color: #86efac;
}

/* Smooth transitions for dark mode */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}