/* ==========================================================================
   OMX FLOW - Premium Dark Green WhatsApp-Style Pattern Theme
   ========================================================================== */

:root {
    --omx-bg-base: #0b2a2a;
    --omx-bg-overlay: rgba(6, 28, 24, 0.55);
    --omx-bg-image: url('../imgs/omx-bg-pattern.svg');
    --omx-text-on-bg: #ffffff;
    --omx-text-body-on-bg: #cfe6dc;
    --omx-text-muted-on-bg: #a9c7bc;
}

/* --------------------------------------------------------------------------
   1. MAIN CONTENT BACKGROUND & PATTERN TILING
   -------------------------------------------------------------------------- */
body.lw-authenticated-page,
body.lw-authenticated-page .main-content {
    background-color: var(--omx-bg-base) !important;
    background-image: 
        linear-gradient(var(--omx-bg-overlay), var(--omx-bg-overlay)),
        var(--omx-bg-image) !important;
    background-repeat: repeat !important;
    background-size: 420px 420px !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* Mobile responsive - scroll background to avoid mobile lag */
@media (max-width: 768px) {
    body.lw-authenticated-page,
    body.lw-authenticated-page .main-content {
        background-attachment: scroll !important;
    }
}

/* Ensure outer header backgrounds fit dark theme without hardcoded bright blues */
.header.bg-gradient-primary,
.header.bg-primary {
    background: transparent !important;
}

/* --------------------------------------------------------------------------
   2. TOP NAVIGATION BAR (GLASSMORPHISM ON DESKTOP)
   -------------------------------------------------------------------------- */
#navbar-main,
.navbar-top {
    background: rgba(8, 36, 32, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

#navbar-main .nav-link,
#navbar-main span,
#navbar-main strong,
#navbar-main a:not(.dropdown-item) {
    color: var(--omx-text-on-bg) !important;
}

#navbar-main .dropdown-menu {
    background-color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

#navbar-main .dropdown-menu .dropdown-item,
#navbar-main .dropdown-menu .dropdown-item span,
#navbar-main .dropdown-menu .dropdown-item strong,
#navbar-main .dropdown-menu .dropdown-header {
    color: #2c3e50 !important;
}

/* --------------------------------------------------------------------------
   3. READABILITY & CARDS PRESERVATION
   -------------------------------------------------------------------------- */
/* Lift white cards off the dark pattern background */
.main-content .card {
    background-color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    border-radius: 0.5rem !important;
}

/* Keep tables, modals, forms, dropdowns crisp and readable */
.modal-content,
.dropdown-menu,
.popover,
.select2-dropdown {
    background-color: #ffffff !important;
}

.table-responsive,
.dataTables_wrapper {
    background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   4. DIRECT PAGE HEADINGS & HEADER TEXT (CONTRAST)
   -------------------------------------------------------------------------- */
.main-content > .header h1,
.main-content > .header .h1,
.main-content > .header h2,
.main-content > .header h3,
.main-content > .header h4,
.main-content > .header p,
.main-content > .header span,
.header-body h1,
.header-body .h1,
.header-body h2,
.header-body h3,
.header-body h4,
.header-body p,
.header-body span:not(.badge),
.main-content .page-title,
.main-content .breadcrumb-item,
.main-content .breadcrumb-item a {
    color: var(--omx-text-on-bg) !important;
}

.header-body p,
.header-body .description,
.header-body .text-muted,
.main-content .text-muted:not(.card *):not(.modal *):not(.table *) {
    color: var(--omx-text-muted-on-bg) !important;
}

/* --------------------------------------------------------------------------
   5. LIVE CHAT AREA EXCLUSION
   -------------------------------------------------------------------------- */
/* Chat panel keeps its own chat wallpaper & background colors */
.lw-whatsapp-chat-container,
#lwWhatsAppChatBox,
.chat-messages-container,
.wa-chat-container {
    background-color: #efeae2 !important; /* WhatsApp standard chat bg */
}

/* ==========================================================================
   6. MOBILE SIDEBAR FIX (max-width: 991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Main container on mobile */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Top navbar header container on mobile */
    #sidenav-main.navbar-vertical {
        position: relative;
        z-index: 1040;
        background-color: #073B2C !important;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    #sidenav-main .container-fluid {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #sidenav-main .navbar-toggler {
        color: #ffffff !important;
        border: none !important;
        padding: 6px 10px !important;
        font-size: 1.25rem !important;
        outline: none !important;
        box-shadow: none !important;
    }

    #sidenav-main .navbar-brand {
        margin-right: 0 !important;
        padding: 0 !important;
        display: inline-block !important;
    }

    #sidenav-main .navbar-brand img {
        max-height: 36px !important;
    }

    /* Off-canvas Drawer Container */
    #sidenav-collapse-main.navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 82% !important;
        max-width: 300px !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1060 !important;
        background-color: #073B2C !important;
        background-image: linear-gradient(180deg, #073B2C 0%, #03251C 100%) !important;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: env(safe-area-inset-top, 20px) 15px env(safe-area-inset-bottom, 20px) 15px !important;
        display: flex !important;
        flex-direction: column !important;

        /* Drawer closed state */
        transform: translateX(-105%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Drawer Open State ONLY when .show is present */
    #sidenav-collapse-main.navbar-collapse.show {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Collapse Header Inside Drawer */
    .navbar-collapse-header {
        padding-bottom: 15px !important;
        margin-bottom: 15px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .navbar-collapse-header .collapse-close .navbar-toggler {
        color: #ffffff !important;
    }

    /* Navigation Links inside Mobile Drawer */
    #sidenav-collapse-main .navbar-nav .nav-link {
        color: #e2f1ec !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
        margin: 3px 0 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
    }

    #sidenav-collapse-main .navbar-nav .nav-link:hover,
    #sidenav-collapse-main .navbar-nav .nav-link:focus {
        background-color: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
    }

    #sidenav-collapse-main .navbar-nav .nav-link.active {
        background-color: #00C878 !important;
        color: #ffffff !important;
        font-weight: 600 !important;
    }

    #sidenav-collapse-main .navbar-nav .nav-link i {
        color: #ffffff !important;
        margin-right: 12px !important;
    }

    /* Submenu Expandable Lists */
    #sidenav-collapse-main .lw-expandable-nav {
        padding-left: 15px !important;
    }

    #sidenav-collapse-main .nav-link-ul {
        color: #b0d4c8 !important;
        font-size: 13px !important;
    }

    #sidenav-collapse-main .nav-link-ul.active {
        color: #00C878 !important;
    }

    /* Mobile Backdrop Overlay - strictly hidden in closed state, plain rgba without blur */
    .omx-sidebar-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 1055 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
    }

    /* Backdrop active ONLY when drawer has .show */
    #sidenav-collapse-main.show ~ .omx-sidebar-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}