/* Overtime Tracker - Custom Styles */

/* Smooth transitions for interactive elements */
input[type="time"],
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="time"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Timesheet row styles */
.row-weekend {
    background-color: #f0f4ff;
}

.row-holiday {
    background-color: #fef3c7;
}

.row-dayoff {
    background-color: #f0fdf4;
}

.row-today {
    background-color: #ecfdf5;
    border-left: 3px solid #10b981;
}

/* Save status indicators */
.save-indicator {
    transition: opacity 0.3s ease;
}

.save-indicator.saving {
    opacity: 1;
}

.save-indicator.saved {
    opacity: 1;
    animation: fadeOut 2s forwards 1s;
}

@keyframes fadeOut {
    to { opacity: 0; }
}

/* Sticky table header */
.timesheet-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f9fafb;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Print styles */
@media print {
    nav, footer, .no-print { display: none !important; }
    main { max-width: 100% !important; padding: 0 !important; }
}

/* ═══════════════════════════════════════════
   DARK MODE
   Comprehensive overrides via html.dark
   ═══════════════════════════════════════════ */

html.dark {
    color-scheme: dark;
}

/* ── Cards / Panels ── */
html.dark .bg-white {
    background-color: #1e293b !important;
}

html.dark .bg-gray-50 {
    background-color: #0f172a !important;
}

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

/* ── Borders ── */
html.dark .border-gray-200,
html.dark .border-gray-100,
html.dark .border-gray-300 {
    border-color: #334155 !important;
}

html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
    border-color: #1e293b !important;
}

/* ── Text Colors ── */
html.dark .text-gray-900 {
    color: #f1f5f9 !important;
}

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

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

html.dark .text-gray-600 {
    color: #94a3b8 !important;
}

html.dark .text-gray-500 {
    color: #64748b !important;
}

html.dark .text-gray-400 {
    color: #94a3b8 !important;
}

html.dark .text-gray-300 {
    color: #64748b !important;
}

/* ── Form Inputs ── */
html.dark input[type="time"],
html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="file"],
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark input[type="time"]:focus,
html.dark input[type="text"]:focus,
html.dark input[type="password"]:focus,
html.dark input[type="email"]:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #475569 !important;
}

html.dark input:disabled,
html.dark select:disabled {
    background-color: #1e293b !important;
    opacity: 0.5;
}

/* ── Tables ── */
html.dark .timesheet-table thead th {
    background-color: #1e293b !important;
}

html.dark table thead.bg-gray-50 th,
html.dark table thead.bg-gray-50 {
    background-color: #1e293b !important;
}

html.dark tr:hover {
    background-color: rgba(51, 65, 85, 0.5) !important;
}

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

/* Timesheet row styles - dark mode */
html.dark .row-weekend {
    background-color: #1e1b4b !important;
}

html.dark .row-holiday {
    background-color: #422006 !important;
}

html.dark .row-dayoff {
    background-color: #052e16 !important;
}

html.dark .row-today {
    background-color: #064e3b !important;
    border-left-color: #34d399;
}

/* ── Shadows ── */
html.dark .shadow-sm,
html.dark .shadow-xl,
html.dark .shadow-lg,
html.dark .shadow-2xl {
    --tw-shadow-color: rgba(0, 0, 0, 0.3);
}

/* ── Badges / Pills ── */
html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.15) !important; }
html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.15) !important; }
html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.15) !important; }
html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.15) !important; }
html.dark .bg-cyan-100 { background-color: rgba(34, 211, 238, 0.15) !important; }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.15) !important; }
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15) !important; }
html.dark .bg-gray-100.text-gray-600 { background-color: rgba(100, 116, 139, 0.15) !important; }
html.dark .bg-gray-100.text-gray-500 { background-color: rgba(100, 116, 139, 0.15) !important; }

/* ── Action Buttons Backgrounds ── */
html.dark .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.1) !important;
}

html.dark .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

html.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

html.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

html.dark .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.1) !important;
}

html.dark .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

/* ── Borders for action buttons ── */
html.dark .border-indigo-200,
html.dark .border-indigo-300 {
    border-color: rgba(99, 102, 241, 0.3) !important;
}

html.dark .border-green-200 {
    border-color: rgba(34, 197, 94, 0.3) !important;
}

html.dark .border-emerald-200 {
    border-color: rgba(16, 185, 129, 0.3) !important;
}

html.dark .border-red-200 {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ── Hover States ── */
html.dark .hover\:bg-gray-50:hover {
    background-color: #334155 !important;
}

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

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

html.dark .hover\:bg-red-50:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

html.dark .hover\:bg-indigo-100:hover {
    background-color: rgba(99, 102, 241, 0.2) !important;
}

/* ── Scrollbar - Dark ── */
html.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ── Modals / Overlays ── */
html.dark .bg-gray-900\/50 {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* ── Bulk Action Bar ── */
html.dark #bulk-bar .bg-indigo-600 {
    background-color: #3730a3 !important;
}

html.dark #bulk-bar .bg-indigo-500 {
    background-color: #312e81 !important;
}

/* ── Nav icon hover overrides ── */
html.dark .hover\:text-gray-600:hover {
    color: #e2e8f0 !important;
}

html.dark .hover\:text-yellow-500:hover {
    color: #eab308 !important;
}

html.dark .hover\:text-red-500:hover {
    color: #ef4444 !important;
}

html.dark .hover\:text-indigo-600:hover {
    color: #818cf8 !important;
}

/* ── Checkboxes ── */
html.dark input[type="checkbox"] {
    background-color: #0f172a !important;
    border-color: #475569 !important;
}

/* ── Table footer / tfoot ── */
html.dark tfoot.bg-gray-50,
html.dark tfoot {
    background-color: #1e293b !important;
}

/* ── Border widths (keep color) ── */
html.dark .border-t-2 {
    border-color: #475569 !important;
}

/* ── Canvas (Chart.js) backgrounds ── */
html.dark canvas {
    border-radius: 0.5rem;
}

/* ── Theme transition ── */
html.transitioning,
html.transitioning *,
html.transitioning *::before,
html.transitioning *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}