/* Custom styles for Badminton Club Web App */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline-block;
}
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* ========================================================
   CHẾ ĐỘ TỐI (DARK MODE) TOÀN HỆ THỐNG
   ======================================================== */
html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

html.dark nav {
    background-color: #064e3b !important;
    border-bottom: 1px solid #047857;
}

html.dark .bg-white {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

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

html.dark .bg-slate-100 {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

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

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

html.dark .text-slate-800,
html.dark .text-slate-700 {
    color: #f8fafc !important;
}

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

html.dark .text-slate-400 {
    color: #64748b !important;
}

html.dark .border-slate-200,
html.dark .border-slate-100 {
    border-color: #334155 !important;
}

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important;
}

/* Form inputs & selects */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

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

/* Info boxes & alert tints */
html.dark .bg-emerald-50,
html.dark .bg-emerald-50\/50 {
    background-color: rgba(6, 78, 59, 0.4) !important;
    border-color: #065f46 !important;
}
html.dark .text-emerald-800,
html.dark .text-emerald-700 {
    color: #6ee7b7 !important;
}

html.dark .bg-amber-50 {
    background-color: rgba(120, 53, 15, 0.3) !important;
    border-color: #92400e !important;
}
html.dark .text-amber-800,
html.dark .text-amber-700 {
    color: #fde68a !important;
}

html.dark .bg-blue-50 {
    background-color: rgba(30, 58, 138, 0.3) !important;
    border-color: #1e40af !important;
}
html.dark .text-blue-800,
html.dark .text-blue-700 {
    color: #93c5fd !important;
}

html.dark .bg-red-50 {
    background-color: rgba(136, 19, 55, 0.3) !important;
    border-color: #9f1239 !important;
}
html.dark .text-red-800,
html.dark .text-red-700 {
    color: #fca5a5 !important;
}

/* Modals & Dropdowns */
html.dark #courtModal > div,
html.dark #guestModal > div,
html.dark #reopenModal > div,
html.dark #qrBankModal > div {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark footer {
    background-color: #0b1120 !important;
    border-color: #1e293b !important;
    color: #64748b !important;
}