/* ==========================================================================
   KingsWifi - automatic dark theme
   --------------------------------------------------------------------------
   Default appearance stays light. When the device / browser is set to a dark
   colour scheme these rules remap the light Tailwind utilities (and the
   admin's custom components) onto a neutral black palette. No toggle is
   required - it follows the OS setting.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }

    html {
        background-color: #000000;
    }

    /* ---------------------------------------------------------------- */
    /* The brand loader goes pure black in dark mode                      */
    /* ---------------------------------------------------------------- */
    #globalLoader {
        background-color: #000000 !important;
    }
    #globalLoader .bg-slate-800 {
        background-color: #1f1f1f !important;
    }

    /* ---------------------------------------------------------------- */
    /* Neutral surfaces                                                  */
    /* ---------------------------------------------------------------- */
    .bg-white      { background-color: #0a0a0a !important; }
    .bg-slate-50   { background-color: #000000 !important; }
    .bg-slate-100  { background-color: #171717 !important; }
    .bg-slate-200  { background-color: #262626 !important; }

    .hover\:bg-slate-50:hover   { background-color: #141414 !important; }
    .hover\:bg-slate-100:hover  { background-color: #1f1f1f !important; }
    .hover\:bg-slate-200:hover  { background-color: #2e2e2e !important; }
    .focus\:bg-white:focus      { background-color: #0a0a0a !important; }

    /* Gradient tiles (from-white to-slate-50) */
    .from-white {
        --tw-gradient-from: #0a0a0a var(--tw-gradient-from-position) !important;
        --tw-gradient-to: rgb(10 10 10 / 0) var(--tw-gradient-to-position) !important;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
    }
    .to-slate-50 {
        --tw-gradient-to: #000000 var(--tw-gradient-to-position) !important;
    }

    /* ---------------------------------------------------------------- */
    /* Neutral text                                                      */
    /* ---------------------------------------------------------------- */
    .text-slate-800 { color: #fafafa !important; }
    .text-slate-700 { color: #d4d4d4 !important; }
    .text-slate-600 { color: #b0b0b0 !important; }
    .text-slate-500 { color: #9c9c9c !important; }
    .text-slate-400 { color: #8a8a8a !important; }
    .text-slate-300 { color: #6b6b6b !important; }

    .hover\:text-slate-600:hover { color: #d4d4d4 !important; }
    .hover\:text-slate-700:hover { color: #fafafa !important; }

    /* ---------------------------------------------------------------- */
    /* Borders                                                           */
    /* ---------------------------------------------------------------- */
    .border-slate-100 { border-color: #1f1f1f !important; }
    .border-slate-200 { border-color: #2a2a2a !important; }
    .divide-slate-50 > :not([hidden]) ~ :not([hidden]) { border-color: #1f1f1f !important; }

    /* ---------------------------------------------------------------- */
    /* Indigo accents                                                    */
    /* ---------------------------------------------------------------- */
    .bg-indigo-50    { background-color: #1e1b4b !important; }
    .bg-indigo-100   { background-color: #2b2a5e !important; }
    .bg-indigo-50\/30 { background-color: rgb(99 102 241 / 0.12) !important; }

    .hover\:bg-indigo-50:hover    { background-color: #262358 !important; }
    .hover\:bg-indigo-100:hover   { background-color: #33306b !important; }
    .hover\:bg-indigo-50\/30:hover { background-color: rgb(99 102 241 / 0.16) !important; }

    .text-indigo-500 { color: #818cf8 !important; }
    .text-indigo-600 { color: #a5b4fc !important; }
    .text-indigo-700 { color: #c7d2fe !important; }

    .hover\:text-indigo-600:hover { color: #c7d2fe !important; }
    .hover\:text-indigo-700:hover { color: #e0e7ff !important; }
    .group:hover .group-hover\:text-indigo-600 { color: #a5b4fc !important; }

    .border-indigo-100 { border-color: #2b2a5e !important; }
    .border-indigo-200 { border-color: #3a3778 !important; }
    .border-indigo-300 { border-color: #4a45a8 !important; }

    .hover\:border-indigo-100:hover { border-color: #2b2a5e !important; }
    .hover\:border-indigo-200:hover { border-color: #3a3778 !important; }
    .hover\:border-indigo-300:hover { border-color: #4a45a8 !important; }

    /* Indigo/emerald glows read as black shadows in dark mode */
    .shadow-indigo-100 { --tw-shadow-color: rgb(0 0 0 / 0.7) !important; }
    .shadow-indigo-200 { --tw-shadow-color: rgb(0 0 0 / 0.8) !important; }
    .shadow-emerald-100 { --tw-shadow-color: rgb(0 0 0 / 0.7) !important; }

    /* ---------------------------------------------------------------- */
    /* Emerald accents                                                   */
    /* ---------------------------------------------------------------- */
    .bg-emerald-50  { background-color: #022c22 !important; }
    .bg-emerald-100 { background-color: #06453a !important; }

    .hover\:bg-emerald-50:hover  { background-color: #06453a !important; }
    .hover\:bg-emerald-100:hover { background-color: #0a5c4c !important; }

    .text-emerald-500 { color: #34d399 !important; }
    .text-emerald-600 { color: #6ee7b7 !important; }
    .text-emerald-700 { color: #a7f3d0 !important; }

    .border-emerald-100 { border-color: #06453a !important; }
    .border-emerald-200 { border-color: #0a5c4c !important; }
    .hover\:border-emerald-200:hover { border-color: #0a5c4c !important; }

    /* ---------------------------------------------------------------- */
    /* Red accents                                                       */
    /* ---------------------------------------------------------------- */
    .bg-red-50  { background-color: #450a0a !important; }
    .bg-red-100 { background-color: #5c1414 !important; }

    .hover\:bg-red-50:hover  { background-color: #5c1414 !important; }
    .hover\:bg-red-100:hover { background-color: #7a2222 !important; }

    .text-red-400 { color: #f87171 !important; }
    .text-red-500 { color: #f87171 !important; }
    .text-red-600 { color: #f87171 !important; }
    .text-red-700 { color: #fca5a5 !important; }

    .hover\:text-red-500:hover { color: #f87171 !important; }
    .hover\:text-red-600:hover { color: #fca5a5 !important; }
    .hover\:text-red-700:hover { color: #fecaca !important; }

    .border-red-100 { border-color: #5c1414 !important; }
    .hover\:border-red-100:hover { border-color: #5c1414 !important; }
    .ring-red-100 { --tw-ring-color: #7f1d1d !important; }

    /* ---------------------------------------------------------------- */
    /* Amber / blue / purple / orange accents                            */
    /* ---------------------------------------------------------------- */
    .bg-amber-50  { background-color: #451a03 !important; }
    .bg-amber-100 { background-color: #5c2c08 !important; }
    .text-amber-600 { color: #fbbf24 !important; }
    .text-amber-700 { color: #fcd34d !important; }

    .bg-blue-50  { background-color: #172554 !important; }
    .text-blue-600 { color: #93c5fd !important; }
    .border-blue-100 { border-color: #1c2f66 !important; }

    .bg-purple-50  { background-color: #2e1065 !important; }
    .text-purple-600 { color: #c4b5fd !important; }
    .border-purple-100 { border-color: #3c1a70 !important; }

    .bg-orange-50  { background-color: #431407 !important; }
    .text-orange-600 { color: #fdba74 !important; }
    .border-orange-100 { border-color: #4a2008 !important; }

    /* ---------------------------------------------------------------- */
    /* Admin custom form components                                      */
    /* ---------------------------------------------------------------- */
    .custom-input,
    .custom-selector,
    .dropdown-trigger {
        background-color: #141414 !important;
        border-color: #2a2a2a !important;
        color: #fafafa !important;
    }

    .custom-input:focus,
    .custom-selector:focus,
    .dropdown-trigger:focus {
        background-color: #0a0a0a !important;
        border-color: #6366f1 !important;
    }

    .dropdown-menu {
        background: #0a0a0a !important;
        border-color: #2a2a2a !important;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.8) !important;
    }

    /* Active status chip keeps white text over the indigo fill */
    .pending-filter-btn.is-active { color: #ffffff !important; }

    .dropdown-item { color: #b0b0b0 !important; }
    .dropdown-item:hover { background-color: #1f1f1f !important; color: #fafafa !important; }
    .dropdown-item.selected { background-color: #2b2a5e !important; color: #c7d2fe !important; }

    input::placeholder,
    textarea::placeholder {
        color: #7a7a7a !important;
    }

    /* ---------------------------------------------------------------- */
    /* Scoped exceptions: the guest access card is a preview of the       */
    /* printed (always white) card, so it keeps its original look         */
    /* ---------------------------------------------------------------- */
    #guestAccessCard.bg-white,
    #guestAccessCard .bg-white {
        background-color: #ffffff !important;
    }
    #guestAccessCard.border-slate-200 {
        border-color: #e2e8f0 !important;
    }

    /* ---------------------------------------------------------------- */
    /* Dark scrollbars                                                   */
    /* ---------------------------------------------------------------- */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: #000000; }
    ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 8px; }
    ::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
}

/* ==========================================================================
   Light theme
   --------------------------------------------------------------------------
   The brand loader ships with a dark background so it blends into the dark UI.
   When the device is set to a light scheme it is re-skinned to match the light
   UI instead.
   ========================================================================== */

@media (prefers-color-scheme: light) {
    #globalLoader {
        background-color: #f8fafc !important;
    }
    #globalLoader h2 {
        color: #0f172a !important;
    }
    #globalLoader .text-slate-400 {
        color: #64748b !important;
    }
    #globalLoader .bg-slate-800 {
        background-color: #e2e8f0 !important;
    }
}