/* ========================================================================= */
/* MOCHIHOST THEME SYSTEM — DARK & LIGHT MODE STYLES                         */
/* Signature Cappuccino & Matcha Theme with Midnight Dark Roast Palette       */
/* ========================================================================= */

/* Smooth color transition when toggling themes */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease !important;
}

html.dark {
    color-scheme: dark;
}

/* High-Contrast Text Selection Across All Pages */
::selection {
    background-color: #91A77B;
    color: #1A1512;
}
html.dark ::selection,
.dark ::selection {
    background-color: #A3B98D !important;
    color: #120F0D !important;
}

/* ------------------------------------------------------------------------- */
/* BODY & CORE BACKGROUNDS                                                   */
/* ------------------------------------------------------------------------- */
html.dark,
html.dark body {
    background-color: #181513 !important;
    color: #F4EDE4 !important;
}

/* Main background utilities */
html.dark .bg-\[\#F6F0E6\],
html.dark [class*="bg-[#F6F0E6]"] {
    background-color: #181513 !important;
}

html.dark .bg-\[\#E5D3BA\],
html.dark [class*="bg-[#E5D3BA]"] {
    background-color: #241E1A !important;
}

html.dark .bg-\[\#EFE3D1\],
html.dark [class*="bg-[#EFE3D1]"] {
    background-color: #2F2722 !important;
}

/* White background elements (except QR codes) */
html.dark .bg-white:not([class*="bg-white/"]):not(#qr-code-box):not(.qr-surface):not([id*="qrcode"]):not([id*="qr-container"]) {
    background-color: #2B231E !important;
    color: #F4EDE4 !important;
}

/* ------------------------------------------------------------------------- */
/* TEXT COLOR OVERRIDES                                                      */
/* ------------------------------------------------------------------------- */
html.dark .text-\[\#3E362F\],
html.dark [class*="text-[#3E362F]"] {
    color: #F4EDE4 !important;
}

html.dark .text-\[\#887867\],
html.dark [class*="text-[#887867]"] {
    color: #ABA093 !important;
}

/* ------------------------------------------------------------------------- */
/* HOVER STATES                                                              */
/* ------------------------------------------------------------------------- */
html.dark .hover\:bg-\[\#EFE3D1\]:hover,
html.dark [class*="hover:bg-[#EFE3D1]"]:hover,
html.dark [class*="hover:bg-[#efe3d1]"]:hover {
    background-color: #382F28 !important;
}

html.dark .hover\:bg-\[\#E5D3BA\]:hover,
html.dark [class*="hover:bg-[#E5D3BA]"]:hover,
html.dark [class*="hover:bg-[#d8c3a5]"]:hover {
    background-color: #2F2722 !important;
}

html.dark .hover\:bg-\[\#F6F0E6\]:hover,
html.dark [class*="hover:bg-[#F6F0E6]"]:hover {
    background-color: #241E1A !important;
}

html.dark .hover\:text-\[\#3E362F\]:hover,
html.dark [class*="hover:text-[#3E362F]"]:hover {
    color: #FFFFFF !important;
}

/* ------------------------------------------------------------------------- */
/* BORDERS & DIVIDERS                                                        */
/* ------------------------------------------------------------------------- */
html.dark [class*="border-[#887867]"],
html.dark [class*="border-[#E5D3BA]"],
html.dark [class*="border-[#e5d3ba]"] {
    border-color: rgba(171, 160, 147, 0.22) !important;
}

html.dark .divide-\[\#887867\]\/20 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-\[\#E5D3BA\] > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(171, 160, 147, 0.22) !important;
}

/* ------------------------------------------------------------------------- */
/* TACTILE 3D SHADOWS (Midnight Undertones)                                  */
/* ------------------------------------------------------------------------- */
html.dark [class*="shadow-[0_6px_0_#d1be9f]"],
html.dark [class*="shadow-[0_6px_0_#D1BE9F]"] {
    box-shadow: 0 6px 0 #120F0D !important;
}
html.dark [class*="shadow-[0_4px_0_#d1be9f]"],
html.dark [class*="shadow-[0_4px_0_#D1BE9F]"] {
    box-shadow: 0 4px 0 #120F0D !important;
}
html.dark [class*="shadow-[0_3px_0_#d1be9f]"],
html.dark [class*="shadow-[0_3px_0_#D1BE9F]"] {
    box-shadow: 0 3px 0 #120F0D !important;
}
html.dark [class*="shadow-[0_2px_0_#d1be9f]"],
html.dark [class*="shadow-[0_2px_0_#D1BE9F]"] {
    box-shadow: 0 2px 0 #120F0D !important;
}
html.dark [class*="shadow-[0_4px_0_#65785C]"],
html.dark [class*="shadow-[0_4px_0_#65785c]"] {
    box-shadow: 0 4px 0 #202A1D !important;
}
html.dark [class*="shadow-[0_3px_0_#65785C]"],
html.dark [class*="shadow-[0_3px_0_#65785c]"] {
    box-shadow: 0 3px 0 #202A1D !important;
}
html.dark [class*="shadow-[0_2px_0_#65785C]"],
html.dark [class*="shadow-[0_2px_0_#65785c]"] {
    box-shadow: 0 2px 0 #202A1D !important;
}

/* ------------------------------------------------------------------------- */
/* FORM INPUTS, TEXTAREAS, SELECTS                                           */
/* ------------------------------------------------------------------------- */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
html.dark select,
html.dark textarea {
    background-color: #27211D !important;
    color: #F4EDE4 !important;
    border-color: #3E342D !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #91A77B !important;
    outline: none !important;
}

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

/* ------------------------------------------------------------------------- */
/* SIDEBAR & NAVIGATION                                                      */
/* ------------------------------------------------------------------------- */
html.dark #sidebar {
    background-color: #201B17 !important;
    border-color: rgba(171, 160, 147, 0.18) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5) !important;
}

html.dark #sidebar .nav-item:not(.nav-active):hover {
    background-color: #2C2520 !important;
    color: #F4EDE4 !important;
}

html.dark .sidebar-tooltip {
    background-color: #2C2520 !important;
    color: #F4EDE4 !important;
    border: 1px solid #453A32 !important;
}

html.dark nav.md\:hidden {
    background-color: #201B17 !important;
    border-color: rgba(171, 160, 147, 0.2) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6) !important;
}

html.dark header.sticky,
html.dark header nav.pointer-events-auto {
    background-color: rgba(32, 27, 23, 0.95) !important;
    border-color: rgba(171, 160, 147, 0.2) !important;
}

/* ------------------------------------------------------------------------- */
/* MODALS & OVERLAYS                                                         */
/* ------------------------------------------------------------------------- */
html.dark #login-details-modal > div,
html.dark #line-guide-modal > div,
html.dark #aquapay-modal > div,
html.dark [id$="-modal"] > div {
    background-color: #241E1A !important;
    border-color: #3E342D !important;
    color: #F4EDE4 !important;
}

html.dark #mochi-toast {
    background-color: #241E1A !important;
    border-color: #3E342D !important;
}

/* ------------------------------------------------------------------------- */
/* TABLES & DATA LISTS                                                       */
/* ------------------------------------------------------------------------- */
html.dark table thead th {
    background-color: #2B241F !important;
    color: #F4EDE4 !important;
    border-color: #3A312A !important;
}

html.dark table tbody tr {
    border-color: #2C2520 !important;
}

html.dark table tbody tr:hover {
    background-color: #2B241F !important;
}

/* ------------------------------------------------------------------------- */
/* QR CODE PROTECTION (Must stay light for scanners)                         */
/* ------------------------------------------------------------------------- */
html.dark #qr-code-box,
html.dark .qr-surface,
html.dark #aquapay-qr-container,
html.dark [id*="qrcode"] {
    background-color: #FFFFFF !important;
    padding: 10px !important;
    border-radius: 16px !important;
}

/* ------------------------------------------------------------------------- */
/* FOOTER PANORAMA MULTI-DIRECTIONAL MASKS IN DARK MODE                      */
/* ------------------------------------------------------------------------- */
html.dark .footer-panorama-gradient-top,
html.dark [class*="bg-gradient-to-b from-[#F6F0E6]"] {
    background-image: linear-gradient(to bottom, #181513 0%, rgba(24, 21, 19, 0.75) 50%, transparent 100%) !important;
}

html.dark .footer-panorama-gradient-bottom,
html.dark [class*="bg-gradient-to-t from-[#F6F0E6]"] {
    background-image: linear-gradient(to top, #181513 0%, rgba(24, 21, 19, 0.8) 50%, transparent 100%) !important;
}

html.dark .footer-panorama-gradient-left,
html.dark [class*="bg-gradient-to-r from-[#F6F0E6]"] {
    background-image: linear-gradient(to right, #181513 0%, rgba(24, 21, 19, 0.7) 50%, transparent 100%) !important;
}

html.dark .footer-panorama-gradient-right,
html.dark [class*="bg-gradient-to-l from-[#F6F0E6]"] {
    background-image: linear-gradient(to left, #181513 0%, rgba(24, 21, 19, 0.7) 50%, transparent 100%) !important;
}

/* ------------------------------------------------------------------------- */
/* SCROLLBAR                                                                 */
/* ------------------------------------------------------------------------- */
html.dark ::-webkit-scrollbar-track {
    background: #181513 !important;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #382F28 !important;
    border: 2px solid #181513 !important;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #52453B !important;
}

/* ------------------------------------------------------------------------- */
/* THEME TOGGLE BUTTON ANIMATION                                             */
/* ------------------------------------------------------------------------- */
.mochi-theme-toggle-btn svg {
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mochi-theme-toggle-btn:hover svg {
    transform: rotate(15deg) scale(1.1);
}

/* ------------------------------------------------------------------------- */
/* UPTIME BARS (PRETTY TICKS)                                                */
/* ------------------------------------------------------------------------- */
.mochi-uptime-track {
    display: flex !important;
    align-items: stretch !important;
    gap: 3px !important;
    height: 44px !important;
    padding: 6px 8px !important;
    border-radius: 16px !important;
    background-color: #F6F0E6 !important;
    border: 1.5px solid rgba(136, 120, 103, 0.25) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

html.dark .mochi-uptime-track {
    background-color: #181513 !important;
    border-color: rgba(171, 160, 147, 0.25) !important;
}

.uptime-tick {
    display: block !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    min-width: 2px !important;
    background-color: #65785C !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease !important;
}

.uptime-tick:hover {
    background-color: #91A77B !important;
    transform: scaleY(1.22) scaleX(1.1) !important;
    box-shadow: 0 0 6px rgba(145, 167, 123, 0.8) !important;
    z-index: 10 !important;
}

html.dark .uptime-tick {
    background-color: #7CA06F !important;
}

html.dark .uptime-tick:hover {
    background-color: #A4CC94 !important;
    box-shadow: 0 0 8px rgba(164, 204, 148, 0.9) !important;
}

/* ------------------------------------------------------------------------- */
/* ORDER SETUP MODAL LOADER SPINNER                                         */
/* ------------------------------------------------------------------------- */
.order-spinner-ring {
    border-width: 3px !important;
    border-style: solid !important;
    border-color: rgba(145, 167, 123, 0.25) !important;
    border-top-color: #65785C !important;
    border-radius: 9999px !important;
    animation: spin 1s linear infinite !important;
}

html.dark .order-spinner-ring {
    border-color: rgba(145, 167, 123, 0.2) !important;
    border-top-color: #91A77B !important;
}

/* ------------------------------------------------------------------------- */
/* SUSPENDED & DANGER ALERT DARK THEME STYLING                               */
/* ------------------------------------------------------------------------- */
html.dark .bg-\[\#fff5f5\],
html.dark [class*="bg-[#fff5f5]"] {
    background-color: #271616 !important;
}

html.dark .bg-\[\#fef2f2\],
html.dark [class*="bg-[#fef2f2]"] {
    background-color: #2D1919 !important;
}

html.dark .bg-\[\#fee2e2\],
html.dark [class*="bg-[#fee2e2]"] {
    background-color: #481C1C !important;
}

html.dark .text-\[\#991b1b\],
html.dark [class*="text-[#991b1b]"] {
    color: #FCA5A5 !important;
}

html.dark .text-\[\#7f1d1d\],
html.dark [class*="text-[#7f1d1d]"] {
    color: #FECACA !important;
}

html.dark .text-\[\#dc2626\],
html.dark [class*="text-[#dc2626]"] {
    color: #F87171 !important;
}

html.dark .border-\[\#f87171\],
html.dark [class*="border-[#f87171]"] {
    border-color: rgba(248, 113, 113, 0.45) !important;
}

html.dark [class*="border-[#ef4444]"] {
    border-color: rgba(239, 68, 68, 0.5) !important;
}

html.dark .suspend-banner {
    background-color: #2D1919 !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
    color: #FCA5A5 !important;
}

html.dark .suspend-card {
    background-color: #271616 !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}