:root {
    --jiwaka-deep-green: #063B00;
    --jiwaka-green: #266210;
    --jiwaka-lime: #90B800;
    --jiwaka-gold: #E1E100;
    --jiwaka-white: #FFFFFF;
}

/* Main application header */
#layout-menu {
    background: var(--jiwaka-deep-green);
}

/* Selected navigation */
#layout-menu .selected,
#layout-menu a:hover {
    background-color: var(--jiwaka-green);
}

/* Primary buttons */
.btn-primary,
button.btn-primary {
    background-color: var(--jiwaka-green);
    border-color: var(--jiwaka-green);
}

.btn-primary:hover,
button.btn-primary:hover {
    background-color: var(--jiwaka-deep-green);
    border-color: var(--jiwaka-gold);
}

/* Links and highlights */
a {
    color: var(--jiwaka-green);
}

a:hover {
    color: var(--jiwaka-deep-green);
}

/* Login page */
body.task-login {
    background:
        linear-gradient(
            135deg,
            var(--jiwaka-deep-green) 0%,
            var(--jiwaka-green) 60%,
            #143b0b 100%
        );
}

.task-login #layout-content {
    background: rgba(255,255,255,.97);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

/* Gold accent */
.task-login #logo {
    border-bottom: 3px solid var(--jiwaka-gold);
    padding-bottom: 12px;
}

.task-login .btn-primary {
    background: var(--jiwaka-deep-green);
    border-color: var(--jiwaka-gold);
}

.task-login .btn-primary:hover {
    background: var(--jiwaka-green);
}

/* Focus states */
.form-control:focus {
    border-color: var(--jiwaka-lime);
    box-shadow: 0 0 0 .2rem rgba(144,184,0,.18);
}


/* =========================================================
   JIWAKA.NET DARK MODE
   Gold / Deep Yellow Theme
   ========================================================= */

html.dark-mode {
    --jiwaka-dark-gold: #B89B00;
    --jiwaka-deep-yellow: #C9AD00;
    --jiwaka-bright-gold: #E1E100;
    --jiwaka-dark-green: #063B00;
    --jiwaka-green: #266210;
    --jiwaka-white: #FFFFFF;
}

/* Main application navigation */
html.dark-mode #layout-menu {
    background-color: var(--jiwaka-deep-yellow);
}

/* Navigation icons/text */
html.dark-mode #layout-menu a {
    color: var(--jiwaka-dark-green);
}

/* Selected and hovered navigation */
html.dark-mode #layout-menu .selected,
html.dark-mode #layout-menu a:hover {
    background-color: var(--jiwaka-bright-gold);
    color: var(--jiwaka-dark-green);
}

/* Main content areas */
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list {
    border-color: var(--jiwaka-dark-gold);
}

/* Headers */
html.dark-mode .header {
    background-color: var(--jiwaka-deep-yellow);
    color: var(--jiwaka-dark-green);
}

/* Primary buttons */
html.dark-mode .btn-primary,
html.dark-mode button.btn-primary {
    background-color: var(--jiwaka-deep-yellow);
    border-color: var(--jiwaka-bright-gold);
    color: var(--jiwaka-dark-green);
    font-weight: 600;
}

html.dark-mode .btn-primary:hover,
html.dark-mode button.btn-primary:hover {
    background-color: var(--jiwaka-bright-gold);
    border-color: var(--jiwaka-dark-green);
    color: var(--jiwaka-dark-green);
}

/* Links */
html.dark-mode a {
    color: var(--jiwaka-bright-gold);
}

/* Login screen */
html.dark-mode body.task-login {
    background:
        linear-gradient(
            135deg,
            #806C00 0%,
            #B89B00 45%,
            #E1E100 100%
        );
}

/* Login panel */
html.dark-mode .task-login #layout-content {
    border: 2px solid var(--jiwaka-bright-gold);
}

/* Form focus */
html.dark-mode .form-control:focus {
    border-color: var(--jiwaka-bright-gold);
    box-shadow: 0 0 0 .2rem rgba(225,225,0,.20);
}


/* =========================================================
   JIWAKA.NET GOLD MODE - FINAL OVERRIDES
   Overrides Elastic Dark Mode
   ========================================================= */

html.dark-mode body {
    background-color: #172116;
    color: #F7F4D0;
}

/* LEFT MAIN NAVIGATION - DEEP GOLD */
html.dark-mode #layout-menu {
    background: #C5A900 !important;
    border-right: 1px solid #E1E100;
}

html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-menu a {
    color: #063B00 !important;
}

html.dark-mode #layout-menu a:hover,
html.dark-mode #layout-menu .selected a,
html.dark-mode #layout-menu .selected {
    background: #E1E100 !important;
    color: #063B00 !important;
}

/* FOLDER SIDEBAR */
html.dark-mode #layout-sidebar {
    background: #172116 !important;
    color: #F7F4D0;
    border-right: 1px solid #8F7C00;
}

/* MESSAGE LIST */
html.dark-mode #layout-list {
    background: #1D281C !important;
    border-right: 1px solid #A58E00;
}

/* MESSAGE / PREVIEW AREA */
html.dark-mode #layout-content {
    background: #202A20 !important;
}

/* TOOLBARS */
html.dark-mode .header,
html.dark-mode .toolbar,
html.dark-mode #layout-list > .header,
html.dark-mode #layout-content > .header,
html.dark-mode #layout-sidebar > .header {
    background: #253025 !important;
    border-color: #8F7C00 !important;
    color: #F7F4D0 !important;
}

/* FOLDER ROWS */
html.dark-mode .listing li,
html.dark-mode .listing tbody td {
    border-color: #394637 !important;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td {
    background-color: #625700 !important;
}

/* MESSAGE LIST HOVER */
html.dark-mode .listing li:hover,
html.dark-mode .listing tr:hover td {
    background-color: #354133;
}

/* LINKS AND ACTIVE ITEMS */
html.dark-mode a {
    color: #E1E100;
}

html.dark-mode a:hover {
    color: #FFF76A;
}

/* INPUTS */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .form-control {
    background-color: #111A11 !important;
    border-color: #756700 !important;
    color: #FFFFFF !important;
}

html.dark-mode .form-control:focus {
    border-color: #E1E100 !important;
    box-shadow: 0 0 0 .2rem rgba(225,225,0,.16) !important;
}

/* PRIMARY ACTION BUTTONS */
html.dark-mode .btn-primary {
    background: #C5A900 !important;
    border-color: #E1E100 !important;
    color: #063B00 !important;
}

html.dark-mode .btn-primary:hover {
    background: #E1E100 !important;
    border-color: #FFF76A !important;
}

/* SCROLLBARS - SUPPORTED BROWSERS */
html.dark-mode * {
    scrollbar-color: #8F7C00 #172116;
}

/* GOLD SELECTION ACCENT */
html.dark-mode ::selection {
    background: #E1E100;
    color: #063B00;
}


/* =========================================================
   JIWAKA.NET OFFICIAL LOGO
   ========================================================= */

#logo {
    object-fit: contain;
}

/* Login logo */
body.task-login #logo {
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    margin: 0 auto 12px auto;
    display: block;
    border-bottom: none !important;
}

/* Application navigation logo */
#layout-menu #logo {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain;
}

/* Give the login screen a branded heading */
body.task-login #layout-content:before {
    content: "JIWAKA.NET";
    display: block;
    text-align: center;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #063B00;
    margin-top: 4px;
}

/* WebMail subtitle */
body.task-login #layout-content:after {
    content: "WebMail";
    display: block;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    color: #266210;
    letter-spacing: .12em;
    margin-top: 6px;
}


/* =========================================================
   JIWAKA.NET FULL LOGIN PAGE
   ========================================================= */

body.task-login {
    margin: 0 !important;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 75% 55%,
            rgba(225,225,0,.16),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #063B00 0%,
            #0A4505 38%,
            #062D02 70%,
            #031D00 100%
        ) !important;
    overflow-x: hidden;
}

#jiwaka-login-page {
    position: relative;
    min-height: 100vh;
    color: #fff;
    padding: 50px 20px 40px;
    box-sizing: border-box;
}

/* Decorative top border */
.jiwaka-top-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 16px;
    background:
        repeating-linear-gradient(
            135deg,
            #E1E100 0 14px,
            #063B00 14px 28px,
            #D62020 28px 42px,
            #FFFFFF 42px 56px
        );
    border-bottom: 3px solid #E1E100;
}

/* Optional light/dark indicator */
.jiwaka-theme-switch {
    position: absolute;
    right: 35px;
    top: 38px;
    border: 2px solid rgba(255,255,255,.85);
    border-radius: 30px;
    overflow: hidden;
    font-weight: 600;
    z-index: 5;
}

.jiwaka-theme-switch span {
    display: inline-block;
    padding: 9px 14px;
}

.jiwaka-theme-switch span:last-child {
    background: #E1E100;
    color: #063B00;
}

/* Main centered area */
.jiwaka-login-shell {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

/* Official logo */
body.task-login #logo {
    display: block;
    width: 150px !important;
    height: 150px !important;
    object-fit: contain;
    margin: 10px auto 8px !important;
    border: 0 !important;
    background: transparent !important;
}

/* Main wordmark */
.jiwaka-wordmark {
    font-size: clamp(3rem, 7vw, 5.8rem);
    line-height: 1;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    color: #FFD52A;
    letter-spacing: .01em;
    text-shadow:
        0 2px 0 #6B4800,
        0 4px 12px rgba(0,0,0,.55);
    margin-top: 4px;
}

.jiwaka-wordmark span {
    color: #FFE15A;
}

.jiwaka-webmail-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    margin-top: 10px;
    color: #fff;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: .38em;
}

.jiwaka-webmail-title span {
    width: 65px;
    height: 2px;
    background: #E1E100;
}

.jiwaka-tagline {
    margin-top: 13px;
    font-size: 1rem;
    font-style: italic;
    color: #F5F5F5;
}

.jiwaka-tagline b {
    color: #E1E100;
    padding: 0 12px;
}

/* Remove old temporary pseudo branding */
body.task-login #layout-content:before,
body.task-login #layout-content:after {
    content: none !important;
    display: none !important;
}

/* Login form container */
body.task-login .jiwaka-login-box {
    width: 100%;
    max-width: 540px;
    margin: 34px auto 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Fields */
body.task-login .form-control {
    min-height: 56px;
    background: rgba(0,12,5,.88) !important;
    color: #fff !important;
    border: 2px solid #E1E100 !important;
    border-radius: 10px !important;
    font-size: 1.05rem;
}

body.task-login .form-control::placeholder {
    color: rgba(255,255,255,.72);
}

/* Roundcube input groups */
body.task-login .input-group-text {
    background: #087A16 !important;
    color: #fff !important;
    border: 2px solid #E1E100 !important;
    border-right: 0 !important;
}

/* Login button */
body.task-login .btn-primary {
    min-height: 58px;
    background:
        linear-gradient(
            180deg,
            #FFE23D 0%,
            #E4BF00 100%
        ) !important;
    color: #063B00 !important;
    border: 2px solid #FFF56A !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    text-transform: uppercase;
    box-shadow:
        0 3px 10px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.55);
}

body.task-login .btn-primary:hover {
    background:
        linear-gradient(
            180deg,
            #FFF064 0%,
            #F1D300 100%
        ) !important;
}

/* Footer */
body.task-login #login-footer {
    margin-top: 17px;
    color: #fff;
}

body.task-login #login-footer a {
    color: #E1E100 !important;
    font-weight: 700;
}

/* Decorative divider */
.jiwaka-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 28px auto 14px;
    max-width: 470px;
    color: #E1E100;
}

.jiwaka-divider span {
    flex: 1;
    height: 2px;
    background: #E1E100;
}

.jiwaka-divider b {
    font-size: 1.1rem;
}

/* Footer identity */
.jiwaka-pride {
    margin-top: 8px;
    color: #fff;
    font-size: 1.35rem;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
}

.jiwaka-pride b {
    color: #E1E100;
    margin: 0 8px;
}

/* Responsive */
@media (max-width: 700px) {

    #jiwaka-login-page {
        padding-top: 65px;
    }

    .jiwaka-theme-switch {
        right: 15px;
        top: 26px;
        font-size: .8rem;
    }

    body.task-login #logo {
        width: 115px !important;
        height: 115px !important;
    }

    .jiwaka-tagline {
        font-size: .85rem;
    }

    .jiwaka-webmail-title {
        letter-spacing: .2em;
    }

}


/* =========================================================
   JIWAKA.NET APPLICATION THEME
   Authenticated WebMail
   ========================================================= */

body:not(.task-login) {
    --jw-deep: #063B00;
    --jw-green: #266210;
    --jw-lime: #90B800;
    --jw-gold: #E1E100;
    --jw-gold-dark: #C4A900;
    --jw-red: #C92020;
    --jw-white: #FFFFFF;
    --jw-soft: #F7F8F3;
}

/* LEFT APPLICATION RAIL */
body:not(.task-login) #layout-menu {
    background:
        linear-gradient(
            180deg,
            #063B00 0%,
            #084600 55%,
            #032900 100%
        ) !important;

    border-right: 1px solid rgba(225,225,0,.45);
}

/* menu links */
body:not(.task-login) #layout-menu a {
    color: #fff !important;
}

/* active/hover */
body:not(.task-login) #layout-menu .selected,
body:not(.task-login) #layout-menu a:hover {
    background: #E1E100 !important;
    color: #063B00 !important;
}

/* selected icons/text */
body:not(.task-login) #layout-menu .selected a,
body:not(.task-login) #layout-menu .selected span {
    color: #063B00 !important;
}


/* =========================================================
   TOP HEADERS / TOOLBARS
   ========================================================= */

body:not(.task-login) .header,
body:not(.task-login) .toolbar,
body:not(.task-login) #layout-list > .header,
body:not(.task-login) #layout-content > .header,
body:not(.task-login) #layout-sidebar > .header {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f7ef 100%
        ) !important;

    border-color: #d9e4d4 !important;
}


/* user/account header */
body:not(.task-login) #layout-sidebar .header {
    border-bottom: 2px solid #E1E100 !important;
}


/* =========================================================
   FOLDER SIDEBAR
   ========================================================= */

body:not(.task-login) #layout-sidebar {
    background: #fbfcf8 !important;

    border-right: 1px solid #dbe4d6 !important;
}

/* folder rows */
body:not(.task-login) #mailboxlist li a {
    color: #173812 !important;
}

/* selected folder */
body:not(.task-login) #mailboxlist li.selected > a {
    background: #eaf5df !important;

    color: #063B00 !important;

    border-left: 4px solid #90B800 !important;

    font-weight: 700;
}

/* hover */
body:not(.task-login) #mailboxlist li a:hover {
    background: #f0f7e9 !important;
}


/* =========================================================
   MESSAGE LIST
   ========================================================= */

body:not(.task-login) #layout-list {
    background: #fff !important;

    border-right: 1px solid #dce5d8 !important;
}

body:not(.task-login) .messagelist tr td,
body:not(.task-login) .listing li {
    border-color: #edf0ea !important;
}

/* selected message */
body:not(.task-login) .messagelist tr.selected td,
body:not(.task-login) .listing li.selected {
    background: #eef6d8 !important;

    color: #063B00 !important;
}

/* hover */
body:not(.task-login) .messagelist tr:hover td {
    background: #f6f9ef !important;
}


/* =========================================================
   SEARCH / INPUTS
   ========================================================= */

body:not(.task-login) input,
body:not(.task-login) textarea,
body:not(.task-login) select,
body:not(.task-login) .form-control {
    border-color: #cbd9c4 !important;
}

body:not(.task-login) .form-control:focus {
    border-color: #90B800 !important;

    box-shadow:
        0 0 0 .18rem
        rgba(144,184,0,.15) !important;
}


/* =========================================================
   PRIMARY BUTTONS
   ========================================================= */

body:not(.task-login) .btn-primary {
    background:
        linear-gradient(
            180deg,
            #266210,
            #164d08
        ) !important;

    border-color: #90B800 !important;

    color: #fff !important;
}

body:not(.task-login) .btn-primary:hover {
    background: #063B00 !important;

    border-color: #E1E100 !important;
}


/* =========================================================
   LINKS / ACCENTS
   ========================================================= */

body:not(.task-login) a {
    color: #266210;
}

body:not(.task-login) a:hover {
    color: #063B00;
}


/* =========================================================
   MESSAGE VIEW
   Keep email content neutral/readable
   ========================================================= */

body:not(.task-login) #message-content,
body:not(.task-login) .message-part,
body:not(.task-login) iframe {
    background: #fff !important;
}


/* =========================================================
   JIWAKA GOLD MODE
   Uses Roundcube Dark Mode switch
   ========================================================= */

html.dark-mode body:not(.task-login) #layout-menu {
    background:
        linear-gradient(
            180deg,
            #C4A900 0%,
            #E1E100 100%
        ) !important;
}

html.dark-mode body:not(.task-login) #layout-menu a {
    color: #063B00 !important;
}

html.dark-mode body:not(.task-login) #layout-sidebar {
    background: #142112 !important;
}

html.dark-mode body:not(.task-login) #layout-list {
    background: #192718 !important;
}

html.dark-mode body:not(.task-login) #layout-content {
    background: #1d291c !important;
}

html.dark-mode body:not(.task-login) .header,
html.dark-mode body:not(.task-login) .toolbar {
    background: #202d1f !important;

    border-color: #817300 !important;
}

html.dark-mode body:not(.task-login) .messagelist tr.selected td,
html.dark-mode body:not(.task-login) .listing li.selected {
    background: #665a00 !important;

    color: #fff !important;
}


/* =========================================================
   JIWAKA.NET — LEFT RAIL / FOLDER VISIBILITY FIX
   ========================================================= */

/* ---------------------------------------------------------
   MAIN LEFT APP RAIL
   --------------------------------------------------------- */

body:not(.task-login) #layout-menu {
    background:
        linear-gradient(
            180deg,
            #063B00 0%,
            #084600 55%,
            #032900 100%
        ) !important;

    border-right: 1px solid #90B800 !important;
}

/* All menu items */
body:not(.task-login) #layout-menu a,
body:not(.task-login) #layout-menu .button,
body:not(.task-login) #layout-menu span,
body:not(.task-login) #layout-menu .inner {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* Menu icons */
body:not(.task-login) #layout-menu a::before,
body:not(.task-login) #layout-menu .button::before,
body:not(.task-login) #layout-menu i {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* Hover */
body:not(.task-login) #layout-menu a:hover,
body:not(.task-login) #layout-menu .button:hover {
    background: #266210 !important;
    color: #FFFFFF !important;
}

/* Active item */
body:not(.task-login) #layout-menu .selected,
body:not(.task-login) #layout-menu .selected > a,
body:not(.task-login) #layout-menu a.selected {
    background: #E1E100 !important;
    color: #063B00 !important;
}

/* Active item icons/text */
body:not(.task-login) #layout-menu .selected *,
body:not(.task-login) #layout-menu .selected::before,
body:not(.task-login) #layout-menu a.selected::before {
    color: #063B00 !important;
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   LOWER LEFT ITEMS
   Dark Mode / About / Logout
   --------------------------------------------------------- */

body:not(.task-login) #layout-menu .special-buttons a,
body:not(.task-login) #layout-menu .special-buttons span,
body:not(.task-login) #layout-menu .footer a,
body:not(.task-login) #layout-menu .footer span {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

body:not(.task-login) #layout-menu .special-buttons a:hover,
body:not(.task-login) #layout-menu .footer a:hover {
    color: #E1E100 !important;
}

/* Logout stays visible */
body:not(.task-login) #layout-menu a.logout,
body:not(.task-login) #layout-menu .logout {
    color: #FFB3B3 !important;
}

body:not(.task-login) #layout-menu a.logout:hover,
body:not(.task-login) #layout-menu .logout:hover {
    color: #FFFFFF !important;
    background: #8A1717 !important;
}


/* ---------------------------------------------------------
   FOLDER SIDEBAR
   Inbox / Drafts / Sent / Junk / Trash / Archive
   --------------------------------------------------------- */

body:not(.task-login) #layout-sidebar {
    background: #FAFCF7 !important;
    color: #173812 !important;

    border-right: 1px solid #D5E3CF !important;
}

/* Account header */
body:not(.task-login) #layout-sidebar .header,
body:not(.task-login) #layout-sidebar .header a,
body:not(.task-login) #layout-sidebar .header span {
    color: #063B00 !important;
    font-weight: 700 !important;
}

/* All mailbox folder rows */
body:not(.task-login) #mailboxlist li,
body:not(.task-login) #mailboxlist li a {
    color: #173812 !important;
    opacity: 1 !important;
}

/* Folder icons */
body:not(.task-login) #mailboxlist li a::before,
body:not(.task-login) #mailboxlist li i {
    color: #266210 !important;
    opacity: 1 !important;
}

/* Normal folder text */
body:not(.task-login) #mailboxlist li a {
    font-weight: 600 !important;
}

/* Folder hover */
body:not(.task-login) #mailboxlist li a:hover {
    background: #EEF6E8 !important;
    color: #063B00 !important;
}

/* Selected folder */
body:not(.task-login) #mailboxlist li.selected,
body:not(.task-login) #mailboxlist li.selected > a {
    background: #E9F3D9 !important;
    color: #063B00 !important;
    font-weight: 800 !important;
}

/* Selected folder gold/lime marker */
body:not(.task-login) #mailboxlist li.selected > a {
    border-left: 4px solid #90B800 !important;
}

/* Unread count / badge */
body:not(.task-login) #mailboxlist .unreadcount,
body:not(.task-login) #mailboxlist .badge {
    background: #E1E100 !important;
    color: #063B00 !important;

    font-weight: 800 !important;
}


/* ---------------------------------------------------------
   LEFT PANE SEARCH / FOLDER HEADER AREA
   --------------------------------------------------------- */

body:not(.task-login) #layout-sidebar .searchbar,
body:not(.task-login) #layout-list .searchbar {
    color: #173812 !important;
}

body:not(.task-login) #layout-sidebar input,
body:not(.task-login) #layout-list input {
    color: #173812 !important;
}


/* ---------------------------------------------------------
   TOOLBAR LABELS
   Select / Threads / Options / Refresh / Reply etc.
   --------------------------------------------------------- */

body:not(.task-login) .toolbar a,
body:not(.task-login) .toolbar button,
body:not(.task-login) .toolbar span,
body:not(.task-login) .toolbar i {
    color: #244220 !important;
    opacity: 1 !important;
}

/* Disabled toolbar items */
body:not(.task-login) .toolbar .disabled,
body:not(.task-login) .toolbar a.disabled,
body:not(.task-login) .toolbar button:disabled {
    color: #9DA99A !important;
    opacity: .65 !important;
}


/* ---------------------------------------------------------
   GOLD MODE / DARK MODE CONTRAST
   --------------------------------------------------------- */

html.dark-mode body:not(.task-login) #layout-menu {
    background:
        linear-gradient(
            180deg,
            #C5A900 0%,
            #E1E100 100%
        ) !important;
}

/* Gold mode menu text must be dark green */
html.dark-mode body:not(.task-login) #layout-menu a,
html.dark-mode body:not(.task-login) #layout-menu span,
html.dark-mode body:not(.task-login) #layout-menu i,
html.dark-mode body:not(.task-login) #layout-menu a::before {
    color: #063B00 !important;
}

/* Gold mode active rail item */
html.dark-mode body:not(.task-login) #layout-menu .selected,
html.dark-mode body:not(.task-login) #layout-menu .selected > a {
    background: #FFF15A !important;
    color: #063B00 !important;
}

/* Dark-mode folders */
html.dark-mode body:not(.task-login) #layout-sidebar {
    background: #142112 !important;
    color: #F7F4D0 !important;
}

html.dark-mode body:not(.task-login) #layout-sidebar .header,
html.dark-mode body:not(.task-login) #layout-sidebar .header a,
html.dark-mode body:not(.task-login) #layout-sidebar .header span,
html.dark-mode body:not(.task-login) #mailboxlist li,
html.dark-mode body:not(.task-login) #mailboxlist li a {
    color: #F7F4D0 !important;
}

/* Folder icons in Gold Mode */
html.dark-mode body:not(.task-login) #mailboxlist li a::before,
html.dark-mode body:not(.task-login) #mailboxlist li i {
    color: #E1E100 !important;
}

/* Selected folder Gold Mode */
html.dark-mode body:not(.task-login) #mailboxlist li.selected,
html.dark-mode body:not(.task-login) #mailboxlist li.selected > a {
    background: #5E5300 !important;
    color: #FFFFFF !important;
}


/* ============================================================
   JIWAKA.NET
   DEFINITIVE LEFT TASK BAR FIX
   MUST REMAIN NEAR END OF jiwaka.css
   ============================================================ */


/* ============================================================
   WHOLE LEFT COLUMN
   ============================================================ */

html body:not(.task-login) #layout-menu {
    background: #063B00 !important;
    border-right: 1px solid #90B800 !important;
    color: #FFFFFF !important;
}


/* ============================================================
   MAIN ROUNDCUBE TASK MENU
   Mail / Contacts / Help / Settings / Compose
   ============================================================ */

html body:not(.task-login) #layout-menu #taskmenu,
html body:not(.task-login) #taskmenu {
    background: #063B00 !important;
}


/* Every task button starts GREEN */
html body:not(.task-login) #taskmenu a,
html body:not(.task-login) #taskmenu a.button,
html body:not(.task-login) #layout-menu #taskmenu a,
html body:not(.task-login) #layout-menu #taskmenu .button {
    background: #063B00 !important;

    color: #FFFFFF !important;

    opacity: 1 !important;

    border: 0 !important;

    text-shadow: none !important;
}


/* Any internal label/span */
html body:not(.task-login) #taskmenu a span,
html body:not(.task-login) #taskmenu a .inner,
html body:not(.task-login) #taskmenu .button span,
html body:not(.task-login) #taskmenu .button .inner {
    color: #FFFFFF !important;
    opacity: 1 !important;
}


/* FontAwesome / pseudo icons */
html body:not(.task-login) #taskmenu a::before,
html body:not(.task-login) #taskmenu .button::before,
html body:not(.task-login) #taskmenu a::after,
html body:not(.task-login) #taskmenu i {
    color: #FFFFFF !important;
    opacity: 1 !important;
}


/* ============================================================
   CURRENT / SELECTED TASK
   Gold background + dark-green text
   ============================================================ */

html body:not(.task-login) #taskmenu a.selected,
html body:not(.task-login) #taskmenu .selected,
html body:not(.task-login) #taskmenu .selected > a,
html body:not(.task-login) #layout-menu #taskmenu a.selected {
    background: #E1E100 !important;

    color: #063B00 !important;

    opacity: 1 !important;
}


/* Selected label */
html body:not(.task-login) #taskmenu a.selected span,
html body:not(.task-login) #taskmenu .selected span,
html body:not(.task-login) #taskmenu a.selected .inner,
html body:not(.task-login) #taskmenu .selected .inner {
    color: #063B00 !important;
    opacity: 1 !important;
}


/* Selected icon */
html body:not(.task-login) #taskmenu a.selected::before,
html body:not(.task-login) #taskmenu .selected::before,
html body:not(.task-login) #taskmenu .selected > a::before,
html body:not(.task-login) #taskmenu a.selected i {
    color: #063B00 !important;
    opacity: 1 !important;
}


/* ============================================================
   HOVER
   ============================================================ */

html body:not(.task-login) #taskmenu a:hover,
html body:not(.task-login) #taskmenu a.button:hover {
    background: #266210 !important;

    color: #FFFFFF !important;
}

html body:not(.task-login) #taskmenu a:hover span,
html body:not(.task-login) #taskmenu a:hover .inner,
html body:not(.task-login) #taskmenu a:hover::before {
    color: #FFFFFF !important;
}


/* Keep selected button gold even on hover */
html body:not(.task-login) #taskmenu a.selected:hover,
html body:not(.task-login) #taskmenu .selected > a:hover {
    background: #E1E100 !important;
    color: #063B00 !important;
}


/* ============================================================
   COMPOSE
   Make Compose deliberately prominent
   ============================================================ */

html body:not(.task-login) #taskmenu a.compose,
html body:not(.task-login) #taskmenu .compose {
    background: #266210 !important;
    color: #FFFFFF !important;
}

html body:not(.task-login) #taskmenu a.compose::before,
html body:not(.task-login) #taskmenu a.compose span {
    color: #FFFFFF !important;
}


/* ============================================================
   REMOVE ALL ACCIDENTAL WHITE TASK BACKGROUNDS
   ============================================================ */

html body:not(.task-login) #layout-menu #taskmenu > *,
html body:not(.task-login) #layout-menu #taskmenu li {
    background-color: transparent !important;
}


/*
   Then explicitly put green back on clickable buttons.
   This selector comes AFTER the transparent parent rule.
*/
html body:not(.task-login) #layout-menu #taskmenu a.button,
html body:not(.task-login) #layout-menu #taskmenu > a {
    background-color: #063B00 !important;
}


/* Selected overrides again */
html body:not(.task-login) #layout-menu #taskmenu a.selected {
    background-color: #E1E100 !important;
}


/* ============================================================
   LOGO AREA
   ============================================================ */

html body:not(.task-login) #layout-menu #logo,
html body:not(.task-login) #layout-menu .logo {
    background-color: #063B00 !important;
}


/* ============================================================
   LOWER SPECIAL BUTTONS
   Dark Mode / About / Logout
   ============================================================ */

html body:not(.task-login) #layout-menu .special-buttons,
html body:not(.task-login) #layout-menu .footer {
    background: #26353A !important;
}


/* Every bottom button */
html body:not(.task-login) #layout-menu .special-buttons a,
html body:not(.task-login) #layout-menu .footer a {
    background: #26353A !important;

    color: #FFFFFF !important;

    opacity: 1 !important;
}


/* Bottom labels */
html body:not(.task-login) #layout-menu .special-buttons a span,
html body:not(.task-login) #layout-menu .footer a span,
html body:not(.task-login) #layout-menu .special-buttons .inner,
html body:not(.task-login) #layout-menu .footer .inner {
    color: #FFFFFF !important;

    opacity: 1 !important;
}


/* Bottom icons */
html body:not(.task-login) #layout-menu .special-buttons a::before,
html body:not(.task-login) #layout-menu .footer a::before,
html body:not(.task-login) #layout-menu .special-buttons i,
html body:not(.task-login) #layout-menu .footer i {
    color: #FFFFFF !important;

    opacity: 1 !important;
}


/* Bottom hover */
html body:not(.task-login) #layout-menu .special-buttons a:hover,
html body:not(.task-login) #layout-menu .footer a:hover {
    background: #34494F !important;

    color: #E1E100 !important;
}


/* ============================================================
   LOGOUT
   ============================================================ */

html body:not(.task-login) #layout-menu a.logout {
    color: #FFB8B8 !important;
}

html body:not(.task-login) #layout-menu a.logout::before {
    color: #FFB8B8 !important;
}

html body:not(.task-login) #layout-menu a.logout:hover {
    background: #861D1D !important;

    color: #FFFFFF !important;
}

html body:not(.task-login) #layout-menu a.logout:hover::before {
    color: #FFFFFF !important;
}


/* ============================================================
   DISABLED ITEMS
   Do NOT make them invisible
   ============================================================ */

html body:not(.task-login) #taskmenu a.disabled,
html body:not(.task-login) #taskmenu .disabled {
    background: #063B00 !important;

    color: rgba(255,255,255,.55) !important;

    opacity: 1 !important;
}

html body:not(.task-login) #taskmenu a.disabled::before {
    color: rgba(255,255,255,.55) !important;
}


/* ============================================================
   GOLD / DARK MODE
   ============================================================ */

html.dark-mode body:not(.task-login) #layout-menu,
html.dark-mode body:not(.task-login) #taskmenu {
    background: #C5A900 !important;
}


/* In Gold Mode normal buttons use gold */
html.dark-mode body:not(.task-login) #taskmenu a,
html.dark-mode body:not(.task-login) #taskmenu a.button {
    background: #C5A900 !important;

    color: #063B00 !important;
}


/* Gold Mode labels/icons */
html.dark-mode body:not(.task-login) #taskmenu a span,
html.dark-mode body:not(.task-login) #taskmenu a .inner,
html.dark-mode body:not(.task-login) #taskmenu a::before {
    color: #063B00 !important;
}


/* Gold Mode hover */
html.dark-mode body:not(.task-login) #taskmenu a:hover {
    background: #E1E100 !important;

    color: #063B00 !important;
}


/* Gold Mode selected */
html.dark-mode body:not(.task-login) #taskmenu a.selected {
    background: #FFF15A !important;

    color: #063B00 !important;
}


/* Bottom controls remain dark in Gold Mode */
html.dark-mode body:not(.task-login) #layout-menu .special-buttons,
html.dark-mode body:not(.task-login) #layout-menu .special-buttons a,
html.dark-mode body:not(.task-login) #layout-menu .footer,
html.dark-mode body:not(.task-login) #layout-menu .footer a {
    background: #26353A !important;

    color: #FFFFFF !important;
}


/* ============================================================
   JIWAKA.NET FINAL TASKBAR CONTRAST LOCK
   Applies to BOTH Light and Dark Mode
   Keep this block LAST in jiwaka.css
   ============================================================ */

/* Entire vertical task rail */
html body:not(.task-login) #layout-menu,
html.dark-mode body:not(.task-login) #layout-menu {
    background: #063B00 !important;
    color: #FFFFFF !important;
    border-right: 1px solid #90B800 !important;
}


/* Main task buttons:
   Compose / Mail / Contacts / Help / Settings */
html body:not(.task-login) #layout-menu a.button,
html body:not(.task-login) #layout-menu #taskmenu a,
html.dark-mode body:not(.task-login) #layout-menu a.button,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a {
    background: #063B00 !important;

    color: #FFFFFF !important;

    opacity: 1 !important;

    text-shadow: none !important;
}


/* Labels inside task buttons */
html body:not(.task-login) #layout-menu a.button span,
html body:not(.task-login) #layout-menu a.button .inner,
html body:not(.task-login) #taskmenu a span,
html body:not(.task-login) #taskmenu a .inner,

html.dark-mode body:not(.task-login) #layout-menu a.button span,
html.dark-mode body:not(.task-login) #layout-menu a.button .inner,
html.dark-mode body:not(.task-login) #taskmenu a span,
html.dark-mode body:not(.task-login) #taskmenu a .inner {
    color: #FFFFFF !important;
    opacity: 1 !important;
}


/* Icons / pseudo icons */
html body:not(.task-login) #layout-menu a.button::before,
html body:not(.task-login) #taskmenu a::before,
html body:not(.task-login) #layout-menu i,

html.dark-mode body:not(.task-login) #layout-menu a.button::before,
html.dark-mode body:not(.task-login) #taskmenu a::before,
html.dark-mode body:not(.task-login) #layout-menu i {
    color: #FFFFFF !important;
    opacity: 1 !important;
}


/* Selected task:
   Gold background + deep green text/icon */
html body:not(.task-login) #layout-menu a.selected,
html body:not(.task-login) #taskmenu a.selected,

html.dark-mode body:not(.task-login) #layout-menu a.selected,
html.dark-mode body:not(.task-login) #taskmenu a.selected {
    background: #E1E100 !important;
    color: #063B00 !important;
}


/* Everything inside selected task */
html body:not(.task-login) #layout-menu a.selected *,
html body:not(.task-login) #layout-menu a.selected::before,

html.dark-mode body:not(.task-login) #layout-menu a.selected *,
html.dark-mode body:not(.task-login) #layout-menu a.selected::before {
    color: #063B00 !important;
    opacity: 1 !important;
}


/* Hover */
html body:not(.task-login) #layout-menu a.button:hover,
html body:not(.task-login) #taskmenu a:hover,

html.dark-mode body:not(.task-login) #layout-menu a.button:hover,
html.dark-mode body:not(.task-login) #taskmenu a:hover {
    background: #266210 !important;
    color: #FFFFFF !important;
}


/* Keep selected task gold on hover */
html body:not(.task-login) #layout-menu a.selected:hover,
html.dark-mode body:not(.task-login) #layout-menu a.selected:hover {
    background: #E1E100 !important;
    color: #063B00 !important;
}


/* ============================================================
   LOWER TASKBAR
   Dark Mode / About / Logout
   ============================================================ */

html body:not(.task-login) #layout-menu .special-buttons,
html body:not(.task-login) #layout-menu .footer,

html.dark-mode body:not(.task-login) #layout-menu .special-buttons,
html.dark-mode body:not(.task-login) #layout-menu .footer {
    background: #26353A !important;
}


/* Bottom links */
html body:not(.task-login) #layout-menu .special-buttons a,
html body:not(.task-login) #layout-menu .footer a,

html.dark-mode body:not(.task-login) #layout-menu .special-buttons a,
html.dark-mode body:not(.task-login) #layout-menu .footer a {
    background: #26353A !important;

    color: #FFFFFF !important;

    opacity: 1 !important;
}


/* Bottom labels/icons */
html body:not(.task-login) #layout-menu .special-buttons a *,
html body:not(.task-login) #layout-menu .footer a *,
html body:not(.task-login) #layout-menu .special-buttons a::before,
html body:not(.task-login) #layout-menu .footer a::before,

html.dark-mode body:not(.task-login) #layout-menu .special-buttons a *,
html.dark-mode body:not(.task-login) #layout-menu .footer a *,
html.dark-mode body:not(.task-login) #layout-menu .special-buttons a::before,
html.dark-mode body:not(.task-login) #layout-menu .footer a::before {
    color: #FFFFFF !important;
    opacity: 1 !important;
}


/* Logout */
html body:not(.task-login) #layout-menu a.logout,
html.dark-mode body:not(.task-login) #layout-menu a.logout {
    color: #FFB7B7 !important;
}

html body:not(.task-login) #layout-menu a.logout:hover,
html.dark-mode body:not(.task-login) #layout-menu a.logout:hover {
    background: #8B1D1D !important;
    color: #FFFFFF !important;
}


/* ============================================================
   DARK MODE FOLDER + TOOLBAR READABILITY
   ============================================================ */

/* Folder pane */
html.dark-mode body:not(.task-login) #layout-sidebar {
    background: #111D10 !important;
    color: #F7F4D0 !important;
}


/* Folder labels */
html.dark-mode body:not(.task-login) #mailboxlist li,
html.dark-mode body:not(.task-login) #mailboxlist li a {
    color: #F7F4D0 !important;
    opacity: 1 !important;
}


/* Folder icons */
html.dark-mode body:not(.task-login) #mailboxlist li a::before,
html.dark-mode body:not(.task-login) #mailboxlist li i {
    color: #E1E100 !important;
    opacity: 1 !important;
}


/* Selected folder */
html.dark-mode body:not(.task-login) #mailboxlist li.selected,
html.dark-mode body:not(.task-login) #mailboxlist li.selected > a {
    background: #665A00 !important;
    color: #FFFFFF !important;
}


/* Top toolbar */
html.dark-mode body:not(.task-login) .toolbar a,
html.dark-mode body:not(.task-login) .toolbar button,
html.dark-mode body:not(.task-login) .toolbar span,
html.dark-mode body:not(.task-login) .toolbar i {
    color: #F7F4D0 !important;
    opacity: 1 !important;
}


/* Disabled toolbar controls remain visible but muted */
html.dark-mode body:not(.task-login) .toolbar .disabled,
html.dark-mode body:not(.task-login) .toolbar a.disabled,
html.dark-mode body:not(.task-login) .toolbar button:disabled {
    color: #899487 !important;
    opacity: .60 !important;
}


/* Message list readability */
html.dark-mode body:not(.task-login) #layout-list {
    color: #E7EBDD !important;
}

html.dark-mode body:not(.task-login) .messagelist td,
html.dark-mode body:not(.task-login) .messagelist a {
    color: #DCE5D7 !important;
}


/* Account name in folder header */
html.dark-mode body:not(.task-login) #layout-sidebar .header,
html.dark-mode body:not(.task-login) #layout-sidebar .header a,
html.dark-mode body:not(.task-login) #layout-sidebar .header span {
    color: #F7F4D0 !important;
}


/* ============================================================
   JIWAKA.NET — DARK MODE TOP TOOLBAR FIX
   KEEP THIS BLOCK LAST
   ============================================================ */


/* ------------------------------------------------------------
   TOP HEADER / TOOLBAR BACKGROUND
   ------------------------------------------------------------ */

html.dark-mode body:not(.task-login) .header,
html.dark-mode body:not(.task-login) .toolbar,
html.dark-mode body:not(.task-login) #layout-list > .header,
html.dark-mode body:not(.task-login) #layout-content > .header,
html.dark-mode body:not(.task-login) #layout-sidebar > .header {
    background: #1D2A1D !important;

    color: #F7F4D0 !important;

    border-color: #485A45 !important;

    text-shadow: none !important;
}


/* ------------------------------------------------------------
   ALL TOP TOOLBAR BUTTONS
   ------------------------------------------------------------ */

html.dark-mode body:not(.task-login) .toolbar a,
html.dark-mode body:not(.task-login) .toolbar a.button,
html.dark-mode body:not(.task-login) .toolbar button,
html.dark-mode body:not(.task-login) .toolbar .button {
    background: transparent !important;

    color: #F7F4D0 !important;

    opacity: 1 !important;

    border-color: transparent !important;

    text-shadow: none !important;

    box-shadow: none !important;
}


/* Labels / inner text */
html.dark-mode body:not(.task-login) .toolbar a span,
html.dark-mode body:not(.task-login) .toolbar a .inner,
html.dark-mode body:not(.task-login) .toolbar button span,
html.dark-mode body:not(.task-login) .toolbar .button span,
html.dark-mode body:not(.task-login) .toolbar .button .inner {
    color: #F7F4D0 !important;

    opacity: 1 !important;

    text-shadow: none !important;
}


/* FontAwesome / Roundcube icons */
html.dark-mode body:not(.task-login) .toolbar a::before,
html.dark-mode body:not(.task-login) .toolbar a::after,
html.dark-mode body:not(.task-login) .toolbar button::before,
html.dark-mode body:not(.task-login) .toolbar button::after,
html.dark-mode body:not(.task-login) .toolbar i {
    color: #F7F4D0 !important;

    opacity: 1 !important;
}


/* ------------------------------------------------------------
   HOVER
   ------------------------------------------------------------ */

html.dark-mode body:not(.task-login) .toolbar a:hover,
html.dark-mode body:not(.task-login) .toolbar a.button:hover,
html.dark-mode body:not(.task-login) .toolbar button:hover,
html.dark-mode body:not(.task-login) .toolbar .button:hover {
    background: #314431 !important;

    color: #FFFFFF !important;

    border-color: #5C7657 !important;
}


/* Hover labels/icons */
html.dark-mode body:not(.task-login) .toolbar a:hover span,
html.dark-mode body:not(.task-login) .toolbar a:hover .inner,
html.dark-mode body:not(.task-login) .toolbar a:hover::before,
html.dark-mode body:not(.task-login) .toolbar a:hover::after,
html.dark-mode body:not(.task-login) .toolbar button:hover span,
html.dark-mode body:not(.task-login) .toolbar button:hover::before,
html.dark-mode body:not(.task-login) .toolbar button:hover::after {
    color: #FFFFFF !important;

    opacity: 1 !important;
}


/* ------------------------------------------------------------
   ACTIVE / PRESSED / SELECTED
   Gold state
   ------------------------------------------------------------ */

html.dark-mode body:not(.task-login) .toolbar a.selected,
html.dark-mode body:not(.task-login) .toolbar a.active,
html.dark-mode body:not(.task-login) .toolbar .button.selected,
html.dark-mode body:not(.task-login) .toolbar .button.active,
html.dark-mode body:not(.task-login) .toolbar button:active,
html.dark-mode body:not(.task-login) .toolbar button:focus {
    background: #E1E100 !important;

    color: #063B00 !important;

    border-color: #FFF15A !important;

    box-shadow: none !important;
}


/* Active labels/icons */
html.dark-mode body:not(.task-login) .toolbar a.selected *,
html.dark-mode body:not(.task-login) .toolbar a.active *,
html.dark-mode body:not(.task-login) .toolbar a.selected::before,
html.dark-mode body:not(.task-login) .toolbar a.active::before,
html.dark-mode body:not(.task-login) .toolbar a.selected::after,
html.dark-mode body:not(.task-login) .toolbar a.active::after {
    color: #063B00 !important;

    opacity: 1 !important;
}


/* ------------------------------------------------------------
   DISABLED TOOLBAR BUTTONS
   Must remain visible but clearly inactive
   ------------------------------------------------------------ */

html.dark-mode body:not(.task-login) .toolbar a.disabled,
html.dark-mode body:not(.task-login) .toolbar .disabled,
html.dark-mode body:not(.task-login) .toolbar button:disabled {
    background: transparent !important;

    color: #788678 !important;

    opacity: .65 !important;

    cursor: default !important;
}


html.dark-mode body:not(.task-login) .toolbar a.disabled span,
html.dark-mode body:not(.task-login) .toolbar a.disabled::before,
html.dark-mode body:not(.task-login) .toolbar a.disabled::after,
html.dark-mode body:not(.task-login) .toolbar button:disabled span,
html.dark-mode body:not(.task-login) .toolbar button:disabled::before,
html.dark-mode body:not(.task-login) .toolbar button:disabled::after {
    color: #788678 !important;

    opacity: .75 !important;
}


/* Disabled must NOT light up on hover */
html.dark-mode body:not(.task-login) .toolbar a.disabled:hover,
html.dark-mode body:not(.task-login) .toolbar button:disabled:hover {
    background: transparent !important;

    color: #788678 !important;
}


/* ------------------------------------------------------------
   DROPDOWN ARROWS
   Reply all / Forward / Mark / More
   ------------------------------------------------------------ */

html.dark-mode body:not(.task-login) .toolbar .dropbutton,
html.dark-mode body:not(.task-login) .toolbar .dropdown-toggle,
html.dark-mode body:not(.task-login) .toolbar .dropbutton::before,
html.dark-mode body:not(.task-login) .toolbar .dropbutton::after,
html.dark-mode body:not(.task-login) .toolbar .dropdown-toggle::after {
    color: #F7F4D0 !important;

    border-color: #F7F4D0 transparent transparent transparent !important;

    opacity: 1 !important;
}


/* ------------------------------------------------------------
   SEARCH BAR
   ------------------------------------------------------------ */

html.dark-mode body:not(.task-login) .searchbar,
html.dark-mode body:not(.task-login) .searchbar input,
html.dark-mode body:not(.task-login) #layout-list .searchbar {
    background: #152215 !important;

    color: #F7F4D0 !important;

    border-color: #455742 !important;
}


html.dark-mode body:not(.task-login) .searchbar input::placeholder {
    color: #A9B4A5 !important;

    opacity: 1 !important;
}


html.dark-mode body:not(.task-login) .searchbar i,
html.dark-mode body:not(.task-login) .searchbar a,
html.dark-mode body:not(.task-login) .searchbar a::before {
    color: #E1E100 !important;
}


/* ------------------------------------------------------------
   TOP PANE SEPARATORS
   ------------------------------------------------------------ */

html.dark-mode body:not(.task-login) #layout-sidebar > .header,
html.dark-mode body:not(.task-login) #layout-list > .header,
html.dark-mode body:not(.task-login) #layout-content > .header {
    border-bottom: 1px solid #52634F !important;
}


/* ------------------------------------------------------------
   MORE / CONTEXT MENUS
   ------------------------------------------------------------ */

html.dark-mode body:not(.task-login) .popupmenu,
html.dark-mode body:not(.task-login) .menu,
html.dark-mode body:not(.task-login) .dropdown-menu {
    background: #192619 !important;

    color: #F7F4D0 !important;

    border-color: #52634F !important;
}


html.dark-mode body:not(.task-login) .popupmenu a,
html.dark-mode body:not(.task-login) .menu a,
html.dark-mode body:not(.task-login) .dropdown-menu a {
    color: #F7F4D0 !important;

    background: transparent !important;
}


html.dark-mode body:not(.task-login) .popupmenu a:hover,
html.dark-mode body:not(.task-login) .menu a:hover,
html.dark-mode body:not(.task-login) .dropdown-menu a:hover {
    background: #314431 !important;

    color: #FFFFFF !important;
}



/* ============================================================
   JIWAKA.NET — ACTIVE TASK + ACTIVE FOLDER EMPHASIS
   KEEP THIS BLOCK LAST
   ============================================================ */


/* ------------------------------------------------------------
   ACTIVE MAIN TASK
   Mail / Contacts / Settings etc.
   ------------------------------------------------------------ */

html body:not(.task-login) #taskmenu a.selected,
html body:not(.task-login) #layout-menu a.selected,
html body:not(.task-login) #taskmenu .selected > a,

html.dark-mode body:not(.task-login) #taskmenu a.selected,
html.dark-mode body:not(.task-login) #layout-menu a.selected,
html.dark-mode body:not(.task-login) #taskmenu .selected > a {
    background:
        linear-gradient(
            180deg,
            #FFF45A 0%,
            #E1E100 55%,
            #CDBB00 100%
        ) !important;

    color: #063B00 !important;

    border-left: 4px solid #FFFFFF !important;
    border-right: 2px solid #90B800 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        inset 0 -1px 0 rgba(6,59,0,.25) !important;

    font-weight: 800 !important;

    opacity: 1 !important;
}


/* Active task icon and label */
html body:not(.task-login) #taskmenu a.selected *,
html body:not(.task-login) #taskmenu a.selected::before,
html body:not(.task-login) #layout-menu a.selected *,
html body:not(.task-login) #layout-menu a.selected::before,

html.dark-mode body:not(.task-login) #taskmenu a.selected *,
html.dark-mode body:not(.task-login) #taskmenu a.selected::before {
    color: #063B00 !important;

    opacity: 1 !important;

    font-weight: 800 !important;
}


/* Active task hover must remain gold */
html body:not(.task-login) #taskmenu a.selected:hover,
html body:not(.task-login) #layout-menu a.selected:hover,

html.dark-mode body:not(.task-login) #taskmenu a.selected:hover,
html.dark-mode body:not(.task-login) #layout-menu a.selected:hover {
    background: #FFF15A !important;

    color: #063B00 !important;
}


/* ------------------------------------------------------------
   ACTIVE MAILBOX FOLDER
   Inbox / Drafts / Sent / Junk / Trash
   ------------------------------------------------------------ */

html body:not(.task-login) #mailboxlist li.selected,
html body:not(.task-login) #mailboxlist li.selected > a,

html.dark-mode body:not(.task-login) #mailboxlist li.selected,
html.dark-mode body:not(.task-login) #mailboxlist li.selected > a {
    background:
        linear-gradient(
            90deg,
            #E1E100 0%,
            #C9B900 100%
        ) !important;

    color: #063B00 !important;

    border-left: 5px solid #FFFFFF !important;
    border-top: 1px solid #FFF15A !important;
    border-bottom: 1px solid #8E8500 !important;

    font-weight: 900 !important;

    opacity: 1 !important;

    box-shadow:
        inset 0 0 12px rgba(255,255,255,.10) !important;
}


/* Selected folder icon */
html body:not(.task-login) #mailboxlist li.selected > a::before,
html body:not(.task-login) #mailboxlist li.selected i,

html.dark-mode body:not(.task-login) #mailboxlist li.selected > a::before,
html.dark-mode body:not(.task-login) #mailboxlist li.selected i {
    color: #063B00 !important;

    opacity: 1 !important;
}


/* Selected folder text */
html body:not(.task-login) #mailboxlist li.selected > a *,
html.dark-mode body:not(.task-login) #mailboxlist li.selected > a * {
    color: #063B00 !important;

    opacity: 1 !important;

    font-weight: 900 !important;
}


/* Selected folder hover */
html body:not(.task-login) #mailboxlist li.selected > a:hover,
html.dark-mode body:not(.task-login) #mailboxlist li.selected > a:hover {
    background: #FFF15A !important;

    color: #063B00 !important;
}


/* ------------------------------------------------------------
   NORMAL FOLDERS
   Keep enough contrast against dark pane
   ------------------------------------------------------------ */

html.dark-mode body:not(.task-login) #mailboxlist li:not(.selected) > a {
    background: #101D10 !important;

    color: #F5F6E8 !important;

    border-bottom: 1px solid #60705C !important;
}


html.dark-mode body:not(.task-login) #mailboxlist li:not(.selected) > a:hover {
    background: #263B24 !important;

    color: #FFFFFF !important;
}


/* Normal folder icons remain gold */
html.dark-mode body:not(.task-login) #mailboxlist li:not(.selected) > a::before {
    color: #E1E100 !important;
}



/* ============================================================
   JIWAKA.NET FINAL INTERACTION STATE LOCK
   LEFT TASKBAR + TOP TOOLBAR
   THIS MUST BE THE LAST BLOCK IN jiwaka.css
   ============================================================ */


/* ============================================================
   1. LEFT TASK BAR — NORMAL STATE
   ============================================================ */

html body:not(.task-login) #layout-menu #taskmenu a.button,
html body:not(.task-login) #layout-menu #taskmenu a,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.button,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a {
    background: #063B00 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    text-shadow: none !important;
    border: 0 !important;
}


/* label text */
html body:not(.task-login) #layout-menu #taskmenu a.button .inner,
html body:not(.task-login) #layout-menu #taskmenu a.button span,
html body:not(.task-login) #layout-menu #taskmenu a .inner,
html body:not(.task-login) #layout-menu #taskmenu a span,

html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.button .inner,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.button span,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a .inner,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a span {
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}


/* icons */
html body:not(.task-login) #layout-menu #taskmenu a.button::before,
html body:not(.task-login) #layout-menu #taskmenu a::before,
html body:not(.task-login) #layout-menu #taskmenu a i,

html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.button::before,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a::before,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a i {
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* ============================================================
   2. LEFT TASK BAR — HOVER STATE
   ============================================================ */

html body:not(.task-login) #layout-menu #taskmenu a.button:hover,
html body:not(.task-login) #layout-menu #taskmenu a:hover,

html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.button:hover,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a:hover {
    background: #266210 !important;
    color: #FFFFFF !important;
}


/* force hover label visible */
html body:not(.task-login) #layout-menu #taskmenu a:hover .inner,
html body:not(.task-login) #layout-menu #taskmenu a:hover span,
html body:not(.task-login) #layout-menu #taskmenu a:hover::before,

html.dark-mode body:not(.task-login) #layout-menu #taskmenu a:hover .inner,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a:hover span,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a:hover::before {
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* ============================================================
   3. LEFT TASK BAR — SELECTED / CURRENT STATE
   This is the critical Mail fix
   ============================================================ */

html body:not(.task-login) #layout-menu #taskmenu a.button.selected,
html body:not(.task-login) #layout-menu #taskmenu a.selected,
html body:not(.task-login) #layout-menu #taskmenu .selected > a,

html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.button.selected,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.selected,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu .selected > a {
    background: #E1E100 !important;
    color: #063B00 !important;

    border-left: 3px solid #FFFFFF !important;
    border-right: 2px solid #90B800 !important;

    opacity: 1 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        inset 0 -1px 0 rgba(6,59,0,.22) !important;
}


/* selected label MUST stay visible */
html body:not(.task-login) #layout-menu #taskmenu a.button.selected .inner,
html body:not(.task-login) #layout-menu #taskmenu a.button.selected span,
html body:not(.task-login) #layout-menu #taskmenu a.selected .inner,
html body:not(.task-login) #layout-menu #taskmenu a.selected span,
html body:not(.task-login) #layout-menu #taskmenu .selected > a .inner,
html body:not(.task-login) #layout-menu #taskmenu .selected > a span,

html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.button.selected .inner,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.button.selected span,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.selected .inner,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.selected span,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu .selected > a .inner,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu .selected > a span {
    color: #063B00 !important;
    opacity: 1 !important;
    visibility: visible !important;

    font-weight: 800 !important;

    text-shadow: none !important;
}


/* selected icon */
html body:not(.task-login) #layout-menu #taskmenu a.button.selected::before,
html body:not(.task-login) #layout-menu #taskmenu a.selected::before,
html body:not(.task-login) #layout-menu #taskmenu .selected > a::before,

html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.button.selected::before,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.selected::before,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu .selected > a::before {
    color: #063B00 !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* selected + hover must remain GOLD */
html body:not(.task-login) #layout-menu #taskmenu a.button.selected:hover,
html body:not(.task-login) #layout-menu #taskmenu a.selected:hover,

html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.button.selected:hover,
html.dark-mode body:not(.task-login) #layout-menu #taskmenu a.selected:hover {
    background: #FFF15A !important;
    color: #063B00 !important;
}


/* ============================================================
   4. TOP TOOLBAR — NORMAL
   ============================================================ */

html.dark-mode body:not(.task-login) .toolbar a.button,
html.dark-mode body:not(.task-login) .toolbar a,
html.dark-mode body:not(.task-login) .toolbar button {
    background: transparent !important;

    color: #F4F5E9 !important;

    opacity: 1 !important;

    text-shadow: none !important;
}


/* toolbar labels */
html.dark-mode body:not(.task-login) .toolbar a.button .inner,
html.dark-mode body:not(.task-login) .toolbar a.button span,
html.dark-mode body:not(.task-login) .toolbar a .inner,
html.dark-mode body:not(.task-login) .toolbar a span,
html.dark-mode body:not(.task-login) .toolbar button span {
    color: #F4F5E9 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* toolbar icons */
html.dark-mode body:not(.task-login) .toolbar a.button::before,
html.dark-mode body:not(.task-login) .toolbar a::before,
html.dark-mode body:not(.task-login) .toolbar button::before,
html.dark-mode body:not(.task-login) .toolbar i {
    color: #F4F5E9 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* ============================================================
   5. TOP TOOLBAR — HOVER
   ============================================================ */

html.dark-mode body:not(.task-login) .toolbar a.button:hover,
html.dark-mode body:not(.task-login) .toolbar a:hover,
html.dark-mode body:not(.task-login) .toolbar button:hover {
    background: #304630 !important;
    color: #FFFFFF !important;
}


/* hover label/icon */
html.dark-mode body:not(.task-login) .toolbar a:hover .inner,
html.dark-mode body:not(.task-login) .toolbar a:hover span,
html.dark-mode body:not(.task-login) .toolbar a:hover::before,
html.dark-mode body:not(.task-login) .toolbar button:hover span,
html.dark-mode body:not(.task-login) .toolbar button:hover::before {
    color: #FFFFFF !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* ============================================================
   6. TOP TOOLBAR — ACTIVE / SELECTED
   ============================================================ */

html.dark-mode body:not(.task-login) .toolbar a.button.selected,
html.dark-mode body:not(.task-login) .toolbar a.selected,
html.dark-mode body:not(.task-login) .toolbar a.active,
html.dark-mode body:not(.task-login) .toolbar button:focus,
html.dark-mode body:not(.task-login) .toolbar button:active {
    background: #E1E100 !important;

    color: #063B00 !important;

    border-color: #FFF15A !important;
}


/* active label */
html.dark-mode body:not(.task-login) .toolbar a.selected .inner,
html.dark-mode body:not(.task-login) .toolbar a.selected span,
html.dark-mode body:not(.task-login) .toolbar a.active .inner,
html.dark-mode body:not(.task-login) .toolbar a.active span {
    color: #063B00 !important;

    opacity: 1 !important;
    visibility: visible !important;

    font-weight: 700 !important;
}


/* active icon */
html.dark-mode body:not(.task-login) .toolbar a.selected::before,
html.dark-mode body:not(.task-login) .toolbar a.active::before {
    color: #063B00 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* ============================================================
   7. TOP TOOLBAR — DISABLED
   ============================================================ */

html.dark-mode body:not(.task-login) .toolbar a.disabled,
html.dark-mode body:not(.task-login) .toolbar button:disabled {
    background: transparent !important;

    color: #748274 !important;

    opacity: .70 !important;
}


/* disabled labels/icons */
html.dark-mode body:not(.task-login) .toolbar a.disabled .inner,
html.dark-mode body:not(.task-login) .toolbar a.disabled span,
html.dark-mode body:not(.task-login) .toolbar a.disabled::before,
html.dark-mode body:not(.task-login) .toolbar button:disabled span,
html.dark-mode body:not(.task-login) .toolbar button:disabled::before {
    color: #748274 !important;

    opacity: 1 !important;
}


/* disabled hover stays disabled */
html.dark-mode body:not(.task-login) .toolbar a.disabled:hover,
html.dark-mode body:not(.task-login) .toolbar button:disabled:hover {
    background: transparent !important;
    color: #748274 !important;
}


/* ============================================================
   8. CURRENT MAILBOX FOLDER
   Preserve the working bright Inbox state
   ============================================================ */

html.dark-mode body:not(.task-login) #mailboxlist li.selected > a,
html body:not(.task-login) #mailboxlist li.selected > a {
    background: #E1E100 !important;

    color: #063B00 !important;

    font-weight: 900 !important;

    opacity: 1 !important;
}


html.dark-mode body:not(.task-login) #mailboxlist li.selected > a *,
html.dark-mode body:not(.task-login) #mailboxlist li.selected > a::before,
html body:not(.task-login) #mailboxlist li.selected > a *,
html body:not(.task-login) #mailboxlist li.selected > a::before {
    color: #063B00 !important;

    opacity: 1 !important;
    visibility: visible !important;
}