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

:root {
    --omx-bg-base: #f4fbf7;
    --omx-pine-green: #072b1a;
    --omx-pine-dark: #052114;
    --omx-mint: #34d399;
    --omx-mint-hover: #10b981;
    --omx-mint-light: #ecfdf5;
    --omx-text-dark: #0f172a;
    --omx-text-muted: #64748b;
    --omx-border-light: #e6f0ea;
}

/* --------------------------------------------------------------------------
   1. MAIN CONTENT BACKGROUND & PATTERN TILING
   -------------------------------------------------------------------------- */
body.lw-authenticated-page,
body.lw-authenticated-page .main-content {
    background-color: #f4fbf7 !important;
    background-image: radial-gradient(rgba(16, 185, 129, 0.04) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   2. TOP NAVIGATION BAR (CLEAN WHITE & SHADOW)
   -------------------------------------------------------------------------- */
#navbar-main,
.navbar-top {
    background: #ffffff !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid var(--omx-border-light) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

#navbar-main .nav-link,
#navbar-main span,
#navbar-main strong,
#navbar-main a:not(.dropdown-item) {
    color: var(--omx-text-dark) !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;
    }
}

/* ==========================================================================
   7. DESKTOP SIDEBAR STYLING (min-width: 992px)
   ========================================================================== */
@media (min-width: 992px) {
    #sidenav-main.navbar-vertical {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 250px !important;
        max-width: 250px !important;
        z-index: 1030 !important;
        display: flex !important;
        flex-direction: column !important;
        background-color: #072b1a !important;
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.12) !important;
        padding: 0 !important;
    }

    #sidenav-collapse-main.navbar-collapse {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        padding: 0 10px !important;
        overflow-y: auto !important;
    }

    body.lw-authenticated-page .main-content {
        margin-left: 250px !important;
        width: calc(100% - 250px) !important;
        min-height: 100vh;
    }
}