body {
    background-color: #0f172a;
    color: #f8fafc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

[v-cloak] { display: none; }

.fade-enter-active, .fade-leave-active { transition: opacity 0.25s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

.slide-next-enter-active, .slide-prev-enter-active { transition: all 0.22s ease; }
.slide-next-leave-active, .slide-prev-leave-active { transition: all 0.18s ease; }
.slide-next-enter-from { opacity: 0; transform: translateX(40px); }
.slide-next-leave-to   { opacity: 0; transform: translateX(-40px); }
.slide-prev-enter-from { opacity: 0; transform: translateX(-40px); }
.slide-prev-leave-to   { opacity: 0; transform: translateX(40px); }

.toast-enter-active, .toast-leave-active { transition: all 0.3s ease; }
.toast-enter-from, .toast-leave-to { opacity: 0; transform: translateY(16px); }

/* ── A11y: visible focus states on interactive elements ──────────────── */
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible,
textarea:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* ── Light theme ─────────────────────────────────────────────────────── */
html.theme-light body { background-color: #f1f5f9; color: #0f172a; }
html.theme-light .bg-slate-900  { background-color: #ffffff !important; }
html.theme-light .bg-slate-800  { background-color: #f8fafc !important; }
html.theme-light .bg-slate-700  { background-color: #e2e8f0 !important; }
html.theme-light .border-slate-700,
html.theme-light .border-slate-600 { border-color: #cbd5e1 !important; }
html.theme-light .text-white     { color: #0f172a !important; }
html.theme-light .text-slate-300,
html.theme-light .text-slate-400 { color: #475569 !important; }
html.theme-light .text-slate-500 { color: #64748b !important; }
html.theme-light .bg-slate-800\/80,
html.theme-light .bg-slate-800\/50,
html.theme-light .bg-slate-800\/40 { background-color: rgba(241,245,249,0.8) !important; }
html.theme-light input, html.theme-light select, html.theme-light textarea {
    background-color: #ffffff !important; color: #0f172a !important;
}

/* ── Print (month view as a payslip) ─────────────────────────────────── */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .no-print { display: none !important; }
    .bg-slate-800, .bg-slate-900, .bg-slate-700 { background: #fff !important; }
    .text-white, .text-slate-300, .text-slate-400, .text-blue-400, .text-green-400 { color: #000 !important; }
    .border-slate-700, .border-slate-600 { border-color: #888 !important; }
    #app, .max-w-6xl { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
    button { display: none !important; }
    .shadow-2xl, .shadow-lg { box-shadow: none !important; }
    @page { margin: 1cm; }
}