/* ==========================================================================
   PHARMAPLUS MAIL V3.2.4
   DARK-MODE NAVIGATION PALETTE
   ========================================================================== */

/*
 * Evidence-based cascade correction:
 *
 * - V3.2 defines an authenticated dark navigation background (#0B4519).
 * - V3.2.1 loads later and intentionally forces the mobile drawer back to
 *   light-mode brand greens (#0F5C22 / #0D4F1D).
 * - V3.2.3 loads later again and forces the Dome Labs credit background to
 *   #0D4F1D.
 *
 * Therefore the dark-mode drawer is branded, but its palette is not
 * consistently dark.  This final layer changes ONLY html.dark-mode
 * navigation colors; geometry and Roundcube behavior are untouched.
 */

html.dark-mode {
    --pp-dark-nav-main: #0B3F18;
    --pp-dark-nav-lower: #092F13;
    --pp-dark-nav-hover: #155626;
    --pp-dark-nav-selected: #1D6930;
    --pp-dark-nav-text: #EEF6F0;
    --pp-dark-nav-muted: rgba(238,246,240,.70);
    --pp-dark-nav-border: rgba(255,255,255,.08);
    --pp-dark-nav-accent: #86D995;
}

/* --------------------------------------------------------------------------
   01. DESKTOP + SHARED DARK NAVIGATION
   -------------------------------------------------------------------------- */

html.dark-mode body:not(.task-login) #layout-menu,
html.dark-mode body:not(.task-login) #layout-menu .popover-header,
html.dark-mode body:not(.task-login) #taskmenu,
html.dark-mode body:not(.task-login) #taskmenu > .action-buttons {
    background: var(--pp-dark-nav-main) !important;
}

html.dark-mode body:not(.task-login) #layout-menu {
    border-right-color: rgba(255,255,255,.07) !important;
    box-shadow: none !important;
}

html.dark-mode body:not(.task-login) #layout-menu .popover-header {
    border-bottom-color: var(--pp-dark-nav-border) !important;
}

html.dark-mode body:not(.task-login) #taskmenu a {
    color: var(--pp-dark-nav-muted) !important;
    border-left-color: transparent !important;
}

html.dark-mode body:not(.task-login) #taskmenu a:hover,
html.dark-mode body:not(.task-login) #taskmenu a:focus {
    color: var(--pp-dark-nav-text) !important;
    background: var(--pp-dark-nav-hover) !important;
}

html.dark-mode body:not(.task-login) #taskmenu a.selected,
html.dark-mode body:not(.task-login) #taskmenu a.selected:hover,
html.dark-mode body:not(.task-login) #taskmenu a.selected:focus {
    color: #FFFFFF !important;
    background: var(--pp-dark-nav-selected) !important;
    border-left-color: var(--pp-dark-nav-accent) !important;
}

html.dark-mode body:not(.task-login) #taskmenu .action-buttons a {
    color: #BDE9C5 !important;
}

html.dark-mode body:not(.task-login) #taskmenu .special-buttons {
    background: var(--pp-dark-nav-lower) !important;
}

html.dark-mode body:not(.task-login) #taskmenu .special-buttons a:not(.logout) {
    color: var(--pp-dark-nav-muted) !important;
    background: transparent !important;
}

html.dark-mode body:not(.task-login) #taskmenu .special-buttons a:not(.logout):hover,
html.dark-mode body:not(.task-login) #taskmenu .special-buttons a:not(.logout):focus {
    color: var(--pp-dark-nav-text) !important;
    background: var(--pp-dark-nav-hover) !important;
}

html.dark-mode body:not(.task-login) #taskmenu a.logout {
    color: #FF9AA1 !important;
    background: transparent !important;
}

html.dark-mode body:not(.task-login) #taskmenu a.logout:hover,
html.dark-mode body:not(.task-login) #taskmenu a.logout:focus {
    color: #FFC0C4 !important;
    background: rgba(240,45,58,.13) !important;
}

/* Dome Labs attribution belongs to the darker utility/footer zone. */
html.dark-mode body:not(.task-login) #taskmenu .pp-platform-credit,
html.dark-mode body:not(.task-login) #taskmenu .special-buttons .pp-platform-credit {
    color: rgba(238,246,240,.50) !important;
    background: var(--pp-dark-nav-lower) !important;
    border-top-color: var(--pp-dark-nav-border) !important;
    border-bottom-color: var(--pp-dark-nav-border) !important;
}

html.dark-mode body:not(.task-login) #taskmenu .pp-platform-credit strong {
    color: rgba(238,246,240,.78) !important;
}

/* --------------------------------------------------------------------------
   02. PHONE / TABLET DRAWER
   V3.2.1 owns geometry. V3.2.4 changes colors only.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
    html.dark-mode body:not(.task-login) #layout-menu.popover,
    html.dark-mode.layout-phone body:not(.task-login) #layout-menu.popover,
    html.dark-mode.layout-small body:not(.task-login) #layout-menu.popover,
    html.dark-mode body:not(.task-login) #layout-menu.popover .popover-header,
    html.dark-mode body:not(.task-login) #layout-menu.popover #taskmenu {
        background: var(--pp-dark-nav-main) !important;
    }

    html.dark-mode body:not(.task-login) #layout-menu.popover {
        border-right-color: rgba(255,255,255,.08) !important;
        box-shadow: 8px 0 24px rgba(0,0,0,.32) !important;
    }

    html.dark-mode body:not(.task-login) #layout-menu.popover .popover-header {
        border-bottom-color: var(--pp-dark-nav-border) !important;
    }

    html.dark-mode body:not(.task-login) #layout-menu.popover
    #taskmenu > a,
    html.dark-mode body:not(.task-login) #layout-menu.popover
    #taskmenu > .action-buttons > a,
    html.dark-mode body:not(.task-login) #layout-menu.popover
    #taskmenu > .special-buttons > a {
        color: var(--pp-dark-nav-muted) !important;
        background: transparent !important;
        border-bottom-color: var(--pp-dark-nav-border) !important;
    }

    html.dark-mode body:not(.task-login) #layout-menu.popover #taskmenu a:hover,
    html.dark-mode body:not(.task-login) #layout-menu.popover #taskmenu a:focus {
        color: var(--pp-dark-nav-text) !important;
        background: var(--pp-dark-nav-hover) !important;
    }

    html.dark-mode body:not(.task-login) #layout-menu.popover #taskmenu a.selected,
    html.dark-mode body:not(.task-login) #layout-menu.popover #taskmenu a.selected:hover,
    html.dark-mode body:not(.task-login) #layout-menu.popover #taskmenu a.selected:focus {
        color: #FFFFFF !important;
        background: var(--pp-dark-nav-selected) !important;
        border-left-color: var(--pp-dark-nav-accent) !important;
    }

    html.dark-mode body:not(.task-login) #layout-menu.popover
    #taskmenu > .special-buttons {
        background: var(--pp-dark-nav-lower) !important;
    }

    html.dark-mode body:not(.task-login) #layout-menu.popover
    #taskmenu > .special-buttons > .pp-platform-credit {
        color: rgba(238,246,240,.50) !important;
        background: var(--pp-dark-nav-lower) !important;
        border-top-color: var(--pp-dark-nav-border) !important;
        border-bottom-color: var(--pp-dark-nav-border) !important;
    }

    html.dark-mode body:not(.task-login) #layout-menu.popover
    #taskmenu > .special-buttons > .pp-platform-credit strong {
        color: rgba(238,246,240,.78) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.dark-mode body:not(.task-login) #layout-menu,
    html.dark-mode body:not(.task-login) #taskmenu a {
        transition: none !important;
    }
}