/* RakeHero gold layer — login + main interface */

:root {
    --rh-gold: #d4af37;
    --rh-gold-bright: #f0cf6b;
    --rh-gold-deep: #9c7418;
    --rh-dark: #0d0d0d;
    --rh-dark-2: #161616;
    --rh-dark-3: #1e1e1e;
    --rh-radius-sm: .375rem;
    --rh-radius-md: .625rem;
    --rh-radius-lg: .875rem;
    --rh-radius-xl: 1.125rem;
    --rh-radius-pill: 999px;
}

/* ----- Global ----- */
html.dark-mode { color-scheme: dark; }

.btn, button.btn, a.button,
.form-control, input.form-control, select.form-control, textarea.form-control {
    border-radius: var(--rh-radius-md) !important;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .12s ease;
}

.btn-primary, button.btn-primary, input.btn-primary {
    background: linear-gradient(180deg, var(--rh-gold-bright), var(--rh-gold)) !important;
    border: 1px solid var(--rh-gold-deep) !important;
    color: #1a1a1a !important;
    font-weight: 600;
    box-shadow: 0 4px 18px rgba(212, 175, 55, .22);
}
.btn-primary:hover, .btn-primary:focus {
    filter: brightness(1.06);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

a { transition: color .15s ease; }
a:hover { color: var(--rh-gold-bright); }

.popover, .menu, .popupmenu, .pagenav, .ui-dialog, .ui-widget-content {
    border-radius: var(--rh-radius-lg) !important;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .18) !important;
}
.menu li > a:hover,
.popupmenu li > a:hover,
.popover .listing li > a:hover {
    background: rgba(212, 175, 55, .12) !important;
    color: var(--rh-gold-bright) !important;
}

/* ----- Login page ----- */
body.task-login {
    background: var(--rh-dark) !important;
    overflow: auto;
}
body.task-login::before,
body.task-login::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
body.task-login::before {
    width: 520px; height: 520px;
    top: -120px; left: -80px;
    background: radial-gradient(circle, rgba(212, 175, 55, .18) 0%, transparent 70%);
}
body.task-login::after {
    width: 420px; height: 420px;
    bottom: -100px; right: -60px;
    background: radial-gradient(circle, rgba(212, 175, 55, .12) 0%, transparent 70%);
}
body.task-login #layout {
    background: transparent !important;
    min-height: 100vh;
    height: auto;
    overflow: visible;
}
body.task-login #layout-content.rh-login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 2rem 1rem 3rem;
    background: transparent !important;
    position: relative;
    z-index: 1;
}

.rh-login-brand {
    text-align: center;
    margin-bottom: 1.25rem;
    animation: rh-fade-in .6s ease;
}
.rh-login-brand #logo {
    display: block;
    position: relative;
    top: auto;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 0 24px rgba(212, 175, 55, .38));
    animation: rh-fade-in .6s ease, rh-logo-glow 3.5s ease-in-out infinite alternate;
}
.rh-login-tagline {
    margin: .75rem 0 0;
    font-size: .95rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(240, 207, 107, .75);
    font-weight: 500;
}
.rh-login-subtitle {
    margin: 0 0 1.35rem;
    text-align: center;
    font-size: .92rem;
    color: #aaa;
    letter-spacing: .04em;
}

#login-form.rh-login-form {
    top: auto;
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 2rem 1.75rem 1.5rem;
    background: rgba(22, 22, 22, .94);
    border: 1px solid rgba(212, 175, 55, .32);
    border-radius: var(--rh-radius-xl);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(212, 175, 55, .08);
    backdrop-filter: blur(10px);
    animation: rh-slide-up .5s ease .1s both;
    position: relative;
    overflow: hidden;
}
#login-form.rh-login-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--rh-gold), var(--rh-gold-bright), var(--rh-gold), transparent);
    pointer-events: none;
}
#login-form.rh-login-form table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
#login-form.rh-login-form tr td {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
}
#login-form.rh-login-form .row { margin-bottom: .85rem; }

/* Login fields: input-group-prepend + icon user/pass */
#login-form.rh-login-form td.input-group,
#login-form.rh-login-form .input-group {
    --rh-login-field-h: 3rem;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
    min-height: var(--rh-login-field-h);
    border: 1px solid #3d3d3d;
    border-radius: var(--rh-radius-md);
    overflow: hidden;
    background: var(--rh-dark-3);
    transition: border-color .18s ease, box-shadow .18s ease;
    position: relative;
}

#login-form.rh-login-form .input-group:focus-within {
    border-color: var(--rh-gold);
    box-shadow: 0 0 0 .22rem rgba(212, 175, 55, .2);
}

#login-form.rh-login-form .input-group-prepend {
    display: flex !important;
    flex: 0 0 auto;
    align-items: stretch !important;
    align-self: stretch;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#login-form.rh-login-form .input-group-prepend > .input-group-text,
#login-form.rh-login-form .input-group-prepend > i.input-group-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch;
    flex: 0 0 3rem;
    width: 3rem !important;
    min-width: 3rem !important;
    max-width: 3rem !important;
    height: auto !important;
    min-height: var(--rh-login-field-h);
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(212, 175, 55, .24) !important;
    border-radius: 0 !important;
    background: rgba(212, 175, 55, .1) !important;
    color: var(--rh-gold-bright) !important;
    font-style: normal !important;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 0 !important;
    line-height: 1 !important;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    z-index: 2;
}

#login-form.rh-login-form .input-group-text.icon,
#login-form.rh-login-form i.input-group-text.icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#login-form.rh-login-form .input-group-text.icon:before,
#login-form.rh-login-form i.input-group-text.icon:before {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-family: Icons, "Font Awesome 5 Free", sans-serif !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    width: 1em;
    height: 1em;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    color: var(--rh-gold-bright) !important;
    speak: never;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

#login-form.rh-login-form .input-group-text.icon.user:before,
#login-form.rh-login-form i.input-group-text.icon.user:before {
    content: "\f007";
}

#login-form.rh-login-form .input-group-text.icon.pass:before,
#login-form.rh-login-form i.input-group-text.icon.pass:before {
    content: "\f023";
}

#login-form.rh-login-form .input-group-text.icon.host:before,
#login-form.rh-login-form i.input-group-text.icon.host:before {
    content: "\f015";
    color: var(--rh-gold-bright) !important;
}

#login-form.rh-login-form .input-group .form-control,
#login-form.rh-login-form .input-group input.form-control,
#login-form.rh-login-form .input-group select.form-control {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    min-height: var(--rh-login-field-h);
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #f5f5f5;
    padding: .7rem .9rem !important;
    margin: 0 !important;
    line-height: 1.35;
    align-self: stretch;
    position: relative;
    z-index: 1;
}

#login-form.rh-login-form .input-group .form-control::placeholder {
    color: #777;
}

#login-form.rh-login-form .input-group:focus-within .form-control {
    background: rgba(255, 255, 255, .02) !important;
    box-shadow: none !important;
    outline: none;
}

#login-form.rh-login-form .input-group-lg .input-group-prepend > .input-group-text,
#login-form.rh-login-form .input-group-lg .input-group-prepend > i.input-group-text,
#login-form.rh-login-form .input-group-lg .form-control {
    min-height: var(--rh-login-field-h);
}
#login-form.rh-login-form label { display: none; }
#login-form.rh-login-form .form-check,
#login-form.rh-login-form tr.form-check td {
    display: flex;
    align-items: center;
    margin: .5rem 0 0;
}
#login-form.rh-login-form .form-check-input {
    accent-color: var(--rh-gold);
    margin-right: .5rem;
}
#login-form.rh-login-form .form-check-label {
    display: inline !important;
    color: #aaa;
    font-size: .85rem;
    margin: 0;
    cursor: pointer;
}
#login-form.rh-login-form #rcmloginsubmit,
#login-form.rh-login-form .btn-primary,
#login-form.rh-login-form input[type=submit] {
    width: 100%;
    margin-top: .75rem;
    padding: .78rem 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .9rem;
    border-radius: var(--rh-radius-md) !important;
}
#login-form.rh-login-form #rcmloginoauth,
#login-form.rh-login-form .btn-secondary,
#login-form.rh-login-form a.oauth-button {
    width: 100%;
    margin-top: .65rem;
    padding: .65rem 1rem;
    background: transparent !important;
    border: 1px solid rgba(212, 175, 55, .35) !important;
    color: var(--rh-gold-bright) !important;
    font-weight: 500;
    letter-spacing: .04em;
}
#login-form.rh-login-form #rcmloginoauth:hover,
#login-form.rh-login-form .btn-secondary:hover {
    background: rgba(212, 175, 55, .1) !important;
    border-color: var(--rh-gold) !important;
    color: #fff !important;
}
#login-form.rh-login-form .oauthlogin {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(212, 175, 55, .15) !important;
}
#login-form.rh-login-form #login-footer {
    max-width: none;
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(212, 175, 55, .1);
}
#login-form.rh-login-form #login-footer > div {
    padding: .55rem .75rem;
}

#login-footer {
    width: 100%;
    max-width: 420px;
    margin-top: 1rem;
    color: #888;
    text-align: center;
    font-size: .82rem;
}
#login-footer a { color: rgba(240, 207, 107, .8); }
#login-footer a:hover { color: var(--rh-gold-bright); }
#login-footer > div {
    background: rgba(30, 30, 30, .75);
    border: 1px solid rgba(212, 175, 55, .1);
    border-radius: var(--rh-radius-md);
}

body.task-login .boxwarning,
body.task-login .boxerror,
body.task-login #message {
    max-width: 420px;
    width: 100%;
    margin: 0 0 1rem;
    border-radius: var(--rh-radius-md);
    border: 1px solid rgba(255, 85, 82, .4);
    background: rgba(255, 85, 82, .12);
    color: #ffb4b2;
}

@keyframes rh-logo-glow {
    from { filter: drop-shadow(0 0 18px rgba(212, 175, 55, .28)); }
    to   { filter: drop-shadow(0 0 34px rgba(212, 175, 55, .52)); }
}
@keyframes rh-fade-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rh-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- Main interface (dark) ----- */
html.dark-mode body.task-mail,
html.dark-mode body.task-addressbook,
html.dark-mode body.task-settings {
    background: var(--rh-dark);
}

html.dark-mode #layout-sidebar,
html.dark-mode #layout-list {
    background: var(--rh-dark-2) !important;
    border-color: rgba(212, 175, 55, .1) !important;
}
html.dark-mode #layout-content {
    background: var(--rh-dark) !important;
}
html.dark-mode #layout-content > .header,
html.dark-mode #layout-list > .header,
html.dark-mode #layout-sidebar > .header,
html.dark-mode .header.boxtitle {
    background: var(--rh-dark-2) !important;
    border-color: rgba(212, 175, 55, .14) !important;
    color: #e8e8e8 !important;
}

html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-menu {
    background: #0a0a0a !important;
}
html.dark-mode #layout-menu .menu li a { color: #ccc; }
html.dark-mode #layout-menu .menu li a:hover {
    color: var(--rh-gold-bright);
    background: rgba(212, 175, 55, .1) !important;
}
html.dark-mode #layout-menu .menu li.selected a,
html.dark-mode #layout-menu .menu li.selected > a {
    color: var(--rh-gold-bright) !important;
    background: rgba(212, 175, 55, .14) !important;
    box-shadow: inset 3px 0 0 var(--rh-gold);
}

html.dark-mode .folderlist li > a {
    border-radius: var(--rh-radius-sm);
    margin: 1px 4px;
    transition: background .15s ease;
}
html.dark-mode .folderlist li > a:hover {
    background: rgba(212, 175, 55, .08) !important;
}
html.dark-mode .folderlist li.selected > a,
html.dark-mode .folderlist li.selected > a:hover {
    background: rgba(212, 175, 55, .16) !important;
    color: var(--rh-gold-bright) !important;
    box-shadow: none !important;
}

html.dark-mode #messagelist tr {
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    transition: background .12s ease;
}
html.dark-mode #messagelist tr:hover {
    background: rgba(212, 175, 55, .06) !important;
}
html.dark-mode #messagelist tr.selected td,
html.dark-mode #messagelist tr.selected:hover td {
    background: rgba(212, 175, 55, .14) !important;
}
html.dark-mode #messagelist tr.unread td.subject span,
html.dark-mode #messagelist tr.unread .subject a {
    color: #fff;
    font-weight: 600;
}

/* #layout-list — searchbar row */
html.dark-mode #layout-list > .searchbar,
html.dark-mode #layout-list .searchbar.menu {
    --rh-search-h: 2.45rem;
    --rh-search-gap: .22rem;
    height: auto;
    min-height: calc(var(--rh-search-h) + .95rem);
    line-height: normal;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(212, 175, 55, .1) !important;
    padding: .48rem .55rem !important;
    display: flex;
    align-items: center;
    gap: var(--rh-search-gap);
    overflow: hidden;
    position: relative;
}

html.dark-mode #layout-list .searchbar .voice,
html.dark-mode #layout-list .searchbar label.voice {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html.dark-mode #layout-list .searchbar form {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    height: var(--rh-search-h);
    margin: 0 .2rem 0 0;
    padding: 0;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(212, 175, 55, .14) !important;
    border-radius: var(--rh-radius-pill);
    box-shadow: none;
    transition: border-color .18s ease, background .18s ease;
}

html.dark-mode #layout-list .searchbar:focus-within form,
html.dark-mode #layout-list .searchbar.active form {
    background: rgba(255, 255, 255, .05) !important;
    border-color: rgba(212, 175, 55, .38) !important;
    box-shadow: 0 0 0 .1rem rgba(212, 175, 55, .1);
}

html.dark-mode #layout-list .searchbar:focus-within,
html.dark-mode #layout-list .searchbar.active {
    box-shadow: none !important;
    border-radius: 0 !important;
}

html.dark-mode #layout-list .searchbar form:before {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: var(--rh-search-h) !important;
    width: 2.15rem !important;
    min-width: 2.15rem;
    line-height: 1 !important;
    color: var(--rh-gold) !important;
    margin: 0 0 0 .55rem;
    padding: 0;
    flex-shrink: 0;
    float: none !important;
    font-size: .88rem;
    text-align: center;
}

html.dark-mode #layout-list .searchbar #mailsearchform,
html.dark-mode #layout-list .searchbar input#mailsearchform,
html.dark-mode #layout-list .searchbar input[type=text][id=mailsearchform],
html.dark-mode #layout-list .searchbar input,
html.dark-mode #layout-list .searchbar .form-control {
    flex: 1;
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #eee;
    padding: 0 .65rem 0 .15rem;
    height: 100%;
    min-height: 0;
    font-size: .9rem;
    line-height: normal;
    outline: 0;
}

html.dark-mode #layout-list .searchbar #mailsearchform::placeholder,
html.dark-mode #layout-list .searchbar input::placeholder {
    color: #666;
}

html.dark-mode #layout-list .searchbar a.button span.inner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

html.dark-mode #layout-list .searchbar a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 var(--rh-search-h);
    width: var(--rh-search-h) !important;
    height: var(--rh-search-h) !important;
    min-width: var(--rh-search-h) !important;
    max-width: var(--rh-search-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(212, 175, 55, .12) !important;
    border-radius: var(--rh-radius-sm) !important;
    background: rgba(255, 255, 255, .03) !important;
    color: #aaa;
    line-height: 1 !important;
    font-size: 0 !important;
    box-sizing: border-box;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

html.dark-mode #layout-list .searchbar a.button:before {
    display: flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    font-size: .9rem;
    color: inherit;
    text-align: center;
}

html.dark-mode #layout-list .searchbar a.button.search {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

html.dark-mode #layout-list .searchbar a.button.reset {
    display: none !important;
}

html.dark-mode #layout-list .searchbar.active a.button.reset {
    display: inline-flex !important;
}

html.dark-mode #layout-list .searchbar a.button:hover {
    background: rgba(212, 175, 55, .1) !important;
    border-color: rgba(212, 175, 55, .28) !important;
    color: var(--rh-gold-bright);
}

html.dark-mode #layout-list .searchbar a.button.unread.selected {
    background: rgba(212, 175, 55, .14) !important;
    border-color: rgba(212, 175, 55, .32) !important;
    color: var(--rh-gold-bright);
}

html.dark-mode #layout-list .searchbar.open a.button.options,
html.dark-mode #layout-list .searchbar a.button.options.open {
    background: rgba(212, 175, 55, .12) !important;
    border-color: rgba(212, 175, 55, .3) !important;
    color: var(--rh-gold-bright);
}

html.dark-mode #layout-list .searchbar.active a.button.reset:before {
    color: #d88;
    font-size: .92rem;
}

html.dark-mode #layout-list .searchbar.active a.button.reset:hover {
    background: rgba(255, 85, 82, .1) !important;
    border-color: rgba(255, 85, 82, .25) !important;
    color: #ff9a95;
}

/* ===== #messagelist-header — light-theme flat buttons ===== */
html.dark-mode #messagelist-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0;
    padding: 0;
    min-height: 3.2rem;
    height: auto !important;
    max-height: none !important;
    font-weight: normal;
    line-height: normal !important;
    background: var(--rh-dark-2) !important;
    border-bottom: 1px solid rgba(212, 175, 55, .14) !important;
    box-shadow: none;
    overflow: hidden;
    white-space: nowrap;
}

/* Override Elastic: justify-content:center + margin:0 -20rem on .header-title */
html.dark-mode #messagelist-header .header-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0 .35rem;
    text-align: left !important;
    font-size: .84rem;
    font-weight: 600;
    color: var(--rh-gold-bright);
    overflow: hidden;
    text-overflow: ellipsis;
}
html.dark-mode #messagelist-header .header-title:empty {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    padding: 0 !important;
}

html.dark-mode #messagelist-header span.inner {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

html.dark-mode #messagelist-header .toolbar.menu,
html.dark-mode #messagelist-header #toolbar-list-menu,
html.dark-mode #messagelist-header ul.menu.toolbar,
html.dark-mode #messagelist-header > a.button,
html.dark-mode #messagelist-header a.toolbar-button,
html.dark-mode #messagelist-header a.toolbar-list-button {
    float: none !important;
    clear: none !important;
    position: relative !important;
    top: auto !important;
}

/* Header nav + refresh — flat like light .header a.button.icon */
html.dark-mode #messagelist-header > a.button,
html.dark-mode #messagelist-header a.toolbar-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: .45rem !important;
    margin: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: #ccc;
    line-height: 1.5 !important;
    transition: background .15s ease, color .15s ease;
}

/* Overflow menu — shared look; visibility matches Elastic breakpoints */
html.dark-mode #messagelist-header a.toolbar-menu-button,
html.dark-mode #messagelist-header a.toolbar-list-button {
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    order: 99;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: .45rem !important;
    margin: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: #ccc;
    line-height: 1.5 !important;
    transition: background .15s ease, color .15s ease;
}

/* ≤768px: toolbar-menu-button only */
@media screen and (max-width: 768px) {
    html.dark-mode #messagelist-header a.toolbar-menu-button {
        display: inline-flex !important;
    }
    html.dark-mode #messagelist-header a.toolbar-list-button {
        display: none !important;
    }
}

/* 769–1200px: toolbar-list-button only */
@media screen and (min-width: 769px) and (max-width: 1200px) {
    html.dark-mode #messagelist-header a.toolbar-menu-button {
        display: none !important;
    }
    html.dark-mode #messagelist-header a.toolbar-list-button {
        display: inline-flex !important;
    }
}

/* ≥1201px: inline #toolbar-list-menu, hide both overflow buttons */
@media screen and (min-width: 1201px) {
    html.dark-mode #messagelist-header a.toolbar-menu-button,
    html.dark-mode #messagelist-header a.toolbar-list-button {
        display: none !important;
    }
}

html.dark-mode #messagelist-header > a.button:before,
html.dark-mode #messagelist-header a.toolbar-button:before,
html.dark-mode #messagelist-header a.toolbar-list-button:before,
html.dark-mode #messagelist-header a.toolbar-menu-button:before {
    display: inline-block !important;
    position: static !important;
    margin: 0 !important;
    width: auto !important;
    height: 1.75rem !important;
    line-height: 1.75rem !important;
    float: none !important;
    font-size: 1rem;
    color: inherit;
}

html.dark-mode #messagelist-header > a.button:hover,
html.dark-mode #messagelist-header a.toolbar-button:hover,
html.dark-mode #messagelist-header a.toolbar-list-button:hover,
html.dark-mode #messagelist-header a.toolbar-menu-button:hover {
    background: rgba(255, 255, 255, .05) !important;
    color: var(--rh-gold-bright);
}

html.dark-mode #messagelist-header > a.button:hover:before,
html.dark-mode #messagelist-header a.toolbar-button:hover:before,
html.dark-mode #messagelist-header a.toolbar-list-button:hover:before,
html.dark-mode #messagelist-header a.toolbar-menu-button:hover:before {
    color: inherit;
}

html.dark-mode #messagelist-header > a.task-menu-button:before {
    color: inherit;
}

/* Toolbar — ul#toolbar-list-menu + legacy .toolbar.menu */
html.dark-mode #messagelist-header .toolbar.menu,
html.dark-mode #messagelist-header #toolbar-list-menu,
html.dark-mode #messagelist-header ul.menu.toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    flex: 0 0 auto;
    gap: 0;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: normal !important;
    list-style: none !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
    text-align: center;
}

html.dark-mode #messagelist-header #toolbar-list-menu > li,
html.dark-mode #messagelist-header ul.menu.toolbar > li {
    display: flex !important;
    align-items: stretch !important;
    flex: 0 0 auto;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: none !important;
    line-height: normal !important;
    background: transparent !important;
}

html.dark-mode #messagelist-header .toolbar.menu a,
html.dark-mode #messagelist-header .toolbar.menu a.select,
html.dark-mode #messagelist-header .toolbar.menu a.threads,
html.dark-mode #messagelist-header .toolbar.menu a.options,
html.dark-mode #messagelist-header .toolbar.menu a#listmenulink,
html.dark-mode #messagelist-header #toolbar-list-menu li a,
html.dark-mode #messagelist-header ul.menu.toolbar li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    min-width: 3.2rem !important;
    max-width: 6rem !important;
    height: 100% !important;
    padding: .45rem !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: #ccc;
    line-height: 1.5 !important;
    font-size: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    overflow: visible;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

html.dark-mode #messagelist-header .toolbar.menu a:before,
html.dark-mode #messagelist-header .toolbar.menu a.select:before,
html.dark-mode #messagelist-header .toolbar.menu a.threads:before,
html.dark-mode #messagelist-header .toolbar.menu a.options:before,
html.dark-mode #messagelist-header .toolbar.menu a#listmenulink:before,
html.dark-mode #messagelist-header #toolbar-list-menu li a:before,
html.dark-mode #messagelist-header ul.menu.toolbar li a:before {
    display: inline-block !important;
    position: static !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: 1.75rem !important;
    min-height: 1.75rem !important;
    line-height: 1.75rem !important;
    font-size: 1rem !important;
    color: inherit;
    text-align: center;
}

html.dark-mode #messagelist-header .toolbar.menu a:hover:not(.disabled),
html.dark-mode #messagelist-header #toolbar-list-menu li a:hover:not(.disabled),
html.dark-mode #messagelist-header ul.menu.toolbar li a:hover:not(.disabled) {
    background: rgba(255, 255, 255, .05) !important;
    color: var(--rh-gold-bright);
}

html.dark-mode #messagelist-header .toolbar.menu a.active,
html.dark-mode #messagelist-header .toolbar.menu a.select.active,
html.dark-mode #messagelist-header .toolbar.menu a.options.active,
html.dark-mode #messagelist-header .toolbar.menu a#listmenulink.active,
html.dark-mode #messagelist-header #toolbar-list-menu li a.active,
html.dark-mode #messagelist-header ul.menu.toolbar li a.active {
    background: rgba(212, 175, 55, .12) !important;
    border: 0 !important;
    color: var(--rh-gold-bright) !important;
    box-shadow: none !important;
}
html.dark-mode #messagelist-header .toolbar.menu a.active:before,
html.dark-mode #messagelist-header .toolbar.menu a.select.active:before,
html.dark-mode #messagelist-header .toolbar.menu a.options.active:before,
html.dark-mode #messagelist-header .toolbar.menu a#listmenulink.active:before,
html.dark-mode #messagelist-header #toolbar-list-menu li a.active:before,
html.dark-mode #messagelist-header ul.menu.toolbar li a.active:before {
    color: var(--rh-gold-bright) !important;
}

html.dark-mode #messagelist-header .toolbar.menu a.disabled,
html.dark-mode #messagelist-header .toolbar.menu a.threads.disabled,
html.dark-mode #messagelist-header #toolbar-list-menu li a.disabled,
html.dark-mode #messagelist-header ul.menu.toolbar li a.disabled {
    opacity: .32;
    pointer-events: none;
}

html.dark-mode #messagelist-header #listcontrols:empty {
    display: none;
}

html.dark-mode #messagelist-header a.button.refresh,
html.dark-mode #messagelist-header a.toolbar-button.refresh {
    flex-shrink: 0;
    margin-left: .05rem;
}

/* ===== #layout-menu — every element ===== */
html.dark-mode #layout-menu {
    display: flex;
    flex-direction: column;
    background: #080808 !important;
    border-right: 1px solid rgba(212, 175, 55, .12) !important;
    overflow: hidden;
}

/* Logo header */
html.dark-mode #layout-menu .popover-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    height: auto;
    line-height: normal;
    padding: .4rem .35rem !important;
    margin: 0;
    border-bottom: 1px solid rgba(212, 175, 55, .14) !important;
    background: rgba(0, 0, 0, .28) !important;
}
html.dark-mode #layout-menu .popover-header #logo {
    display: block;
    max-height: 2.35rem;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 0;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, .22));
}
html.dark-mode #layout-menu .popover-header a.cancel {
    display: none;
}
html.layout-phone.dark-mode #layout-menu .popover-header {
    justify-content: space-between;
    padding: 0 .65rem !important;
}
html.layout-phone.dark-mode #layout-menu .popover-header a.cancel {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: var(--rh-radius-sm);
    color: #aaa;
}
html.layout-phone.dark-mode #layout-menu .popover-header a.cancel:before {
    color: #ccc;
    margin: 0 !important;
    float: none !important;
}
html.layout-phone.dark-mode #layout-menu .popover-header a.cancel:hover {
    background: rgba(212, 175, 55, .1);
}
html.layout-phone.dark-mode #layout-menu .popover-header #logo {
    max-height: 2rem;
    flex: 1;
}

/* Task navigation column */
html.dark-mode #layout-menu #taskmenu {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 9.25rem;
    margin: 0;
    text-align: center;
}

/* Compose CTA */
html.dark-mode #layout-menu #taskmenu .action-buttons {
    display: block;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}
html.dark-mode #layout-menu #taskmenu .action-buttons a.compose,
html.dark-mode #layout-menu #taskmenu a.compose {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - .65rem) !important;
    height: auto !important;
    min-height: 2.6rem;
    margin: .4rem .325rem .55rem !important;
    padding: .5rem 0 !important;
    background: linear-gradient(180deg, var(--rh-gold-bright), var(--rh-gold)) !important;
    color: #1a1a1a !important;
    border-radius: var(--rh-radius-md) !important;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(212, 175, 55, .2);
    border: 1px solid rgba(156, 116, 24, .45);
    overflow: hidden;
    line-height: 1 !important;
    text-align: center;
    transition: filter .15s ease, transform .12s ease;
}

html.dark-mode #layout-menu #taskmenu .action-buttons a.compose span.inner,
html.dark-mode #layout-menu #taskmenu a.compose span.inner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

html.dark-mode #layout-menu #taskmenu .action-buttons a.compose:before,
html.dark-mode #layout-menu #taskmenu a.compose:before {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 1.15em !important;
    height: 1.15em !important;
    line-height: 1 !important;
    font-size: 1.1rem;
    vertical-align: middle;
}

html.dark-mode #layout-menu #taskmenu .action-buttons a.compose:hover,
html.dark-mode #layout-menu #taskmenu a.compose:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}
html.dark-mode #layout-menu #taskmenu .action-buttons a.compose.selected,
html.dark-mode #layout-menu #taskmenu a.compose.selected {
    box-shadow: 0 0 0 2px rgba(212, 175, 55, .35), 0 3px 12px rgba(212, 175, 55, .25);
}

/* Mail, Contacts, Settings — main nav links */
html.dark-mode #layout-menu #taskmenu > a.mail,
html.dark-mode #layout-menu #taskmenu > a.contacts,
html.dark-mode #layout-menu #taskmenu > a.settings {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: auto !important;
    min-height: 2.85rem;
    margin: 0 !important;
    padding: .5rem .2rem !important;
    border-radius: 0;
    color: #aaa;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    box-shadow: none !important;
}
html.dark-mode #layout-menu #taskmenu > a.mail:before,
html.dark-mode #layout-menu #taskmenu > a.contacts:before,
html.dark-mode #layout-menu #taskmenu > a.settings:before {
    display: block;
    margin: 0 auto !important;
    float: none !important;
    line-height: 1;
    font-size: 1.12rem;
    color: #888;
    transition: color .15s ease;
}
html.dark-mode #layout-menu #taskmenu > a.mail span.inner,
html.dark-mode #layout-menu #taskmenu > a.contacts span.inner,
html.dark-mode #layout-menu #taskmenu > a.settings span.inner {
    display: block;
    margin-top: .28rem;
    padding: 0 .15rem;
    max-width: 100%;
    font-size: .62rem;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark-mode #layout-menu #taskmenu > a.mail:hover,
html.dark-mode #layout-menu #taskmenu > a.contacts:hover,
html.dark-mode #layout-menu #taskmenu > a.settings:hover {
    color: var(--rh-gold-bright);
    background: rgba(212, 175, 55, .08);
}
html.dark-mode #layout-menu #taskmenu > a.mail:hover:before,
html.dark-mode #layout-menu #taskmenu > a.contacts:hover:before,
html.dark-mode #layout-menu #taskmenu > a.settings:hover:before {
    color: var(--rh-gold-bright);
}
html.dark-mode #layout-menu #taskmenu > a.mail.selected,
html.dark-mode #layout-menu #taskmenu > a.contacts.selected,
html.dark-mode #layout-menu #taskmenu > a.settings.selected {
    color: var(--rh-gold-bright) !important;
    background: rgba(212, 175, 55, .13) !important;
    border-left-color: var(--rh-gold);
    box-shadow: none !important;
}
html.dark-mode #layout-menu #taskmenu > a.mail.selected:before,
html.dark-mode #layout-menu #taskmenu > a.contacts.selected:before,
html.dark-mode #layout-menu #taskmenu > a.settings.selected:before {
    color: var(--rh-gold-bright);
}

/* Icon-only nav on narrow sidebar */
@media screen and (min-width: 481px) and (max-width: 1024px) {
    html.dark-mode #layout-menu #taskmenu > a.mail span.inner,
    html.dark-mode #layout-menu #taskmenu > a.contacts span.inner,
    html.dark-mode #layout-menu #taskmenu > a.settings span.inner {
        display: none !important;
    }
    html.dark-mode #layout-menu #taskmenu > a.mail,
    html.dark-mode #layout-menu #taskmenu > a.contacts,
    html.dark-mode #layout-menu #taskmenu > a.settings {
        min-height: 2.65rem;
        padding: .55rem 0 !important;
    }
}

/* Plugin slots in taskbar */
html.dark-mode #layout-menu #taskmenu .listing li a {
    color: #aaa;
}
html.dark-mode #layout-menu #taskmenu .listing li a:hover {
    color: var(--rh-gold-bright);
    background: rgba(212, 175, 55, .08);
}

/* Bottom: theme, about, logout — vertical icon column */
html.dark-mode #layout-menu #taskmenu .special-buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: flex-end;
    gap: .28rem;
    width: 100%;
    padding: .45rem .35rem .5rem;
    border-top: 1px solid rgba(212, 175, 55, .2);
    background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .45)) !important;
    box-sizing: border-box;
}

/* Override #taskmenu a { width:78px; height:78px } from Elastic */
html.dark-mode #layout-menu #taskmenu .special-buttons a,
html.dark-mode #layout-menu #taskmenu .special-buttons a.theme,
html.dark-mode #layout-menu #taskmenu .special-buttons a.about,
html.dark-mode #layout-menu #taskmenu .special-buttons a.logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 2.35rem !important;
    width: calc(100% - .5rem) !important;
    max-width: 2.65rem !important;
    height: 2.35rem !important;
    min-width: 0 !important;
    min-height: 2.35rem !important;
    margin: 0 !important;
    padding: 0 !important;
    color: transparent;
    font-size: 0 !important;
    line-height: 1 !important;
    border-radius: var(--rh-radius-sm);
    border: 1px solid rgba(212, 175, 55, .16);
    background: rgba(255, 255, 255, .04);
    overflow: hidden;
    box-sizing: border-box;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

html.dark-mode #layout-menu #taskmenu .special-buttons a span.inner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

html.dark-mode #layout-menu #taskmenu .special-buttons a:before {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: static !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    font-size: .95rem !important;
    color: #999;
    transition: color .15s ease;
}

html.dark-mode #layout-menu #taskmenu .special-buttons a:hover {
    background: rgba(212, 175, 55, .14);
    border-color: rgba(212, 175, 55, .38);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}
html.dark-mode #layout-menu #taskmenu .special-buttons a:hover:before {
    color: var(--rh-gold-bright);
}

html.dark-mode #layout-menu #taskmenu .special-buttons a.theme {
    border-color: rgba(212, 175, 55, .28);
    background: rgba(212, 175, 55, .08);
}
html.dark-mode #layout-menu #taskmenu .special-buttons a.theme:before {
    color: var(--rh-gold);
}
html.dark-mode #layout-menu #taskmenu .special-buttons a.theme.light:before {
    color: #e8d48a;
}

html.dark-mode #layout-menu #taskmenu .special-buttons a.about:before {
    color: #888;
}

html.dark-mode #layout-menu #taskmenu .special-buttons a.logout {
    border-color: rgba(160, 70, 65, .28);
    background: rgba(100, 35, 30, .18);
}
html.dark-mode #layout-menu #taskmenu .special-buttons a.logout:before {
    color: #b88;
}
html.dark-mode #layout-menu #taskmenu .special-buttons a.logout:hover {
    background: rgba(160, 55, 50, .22);
    border-color: rgba(255, 100, 90, .4);
}
html.dark-mode #layout-menu #taskmenu .special-buttons a.logout:hover:before {
    color: #ff9a95;
}

/* Mobile taskmenu — full list with labels */
html.layout-phone.dark-mode #layout-menu #taskmenu {
    padding-bottom: 0;
}
html.layout-phone.dark-mode #layout-menu #taskmenu .special-buttons {
    position: static;
    border-top: 1px solid rgba(212, 175, 55, .12);
}
html.layout-phone.dark-mode #layout-menu #taskmenu > a,
html.layout-phone.dark-mode #layout-menu #taskmenu .special-buttons a {
    flex-direction: row;
    justify-content: flex-start;
    width: 100% !important;
    min-height: 3rem;
    padding: 0 1rem !important;
    text-align: left;
    font-size: 1rem;
    color: #ccc;
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
html.layout-phone.dark-mode #layout-menu #taskmenu > a:before,
html.layout-phone.dark-mode #layout-menu #taskmenu .special-buttons a:before {
    margin-right: .75rem !important;
    font-size: 1.15rem;
}
html.layout-phone.dark-mode #layout-menu #taskmenu > a span.inner,
html.layout-phone.dark-mode #layout-menu #taskmenu .special-buttons a span.inner {
    display: inline !important;
    margin: 0;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
}
html.layout-phone.dark-mode #layout-menu #taskmenu .action-buttons a.compose {
    width: calc(100% - 1.5rem) !important;
    margin: .65rem .75rem !important;
    min-height: 2.75rem;
}
html.layout-phone.dark-mode #layout-menu #taskmenu .action-buttons a.compose span.inner {
    display: inline !important;
    margin-left: .5rem;
    font-size: .95rem;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: .06em;
}

html.dark-mode #layout-sidebar .header .username {
    color: var(--rh-gold-bright);
    font-weight: 600;
    letter-spacing: .02em;
}

html.dark-mode #messagelist-content {
    background: var(--rh-dark-2);
}
html.dark-mode #messagelist tr td.subject span.fromto,
html.dark-mode #messagelist tr td.subject span.date {
    color: #999;
}
html.dark-mode #messagelist tr.unread td.subject span.msgicon.status.unread:before {
    color: var(--rh-gold) !important;
}
html.dark-mode #messagelist tr.flagged td.subject span.subject a {
    color: var(--rh-gold-bright);
}
html.dark-mode #messagelist tr.flagged span.flagged:before {
    color: var(--rh-gold);
}
html.dark-mode .listing-info {
    color: #888;
    font-weight: 500;
    font-size: .95rem;
}

html.dark-mode #layout-list > .footer,
html.dark-mode #layout-list .pagenav.menu.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 !important;
    font-size: 100%;
    font-weight: normal;
    background: var(--rh-dark-2) !important;
    border-top: 1px solid rgba(212, 175, 55, .1) !important;
}

html.dark-mode #layout-list .pagenav .pagenav-text {
    color: #888;
    font-size: 80%;
    font-weight: normal;
    flex-grow: 4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.dark-mode #layout-list .pagenav a {
    flex-grow: 1;
    display: inline-block !important;
    min-width: 2rem !important;
    width: auto !important;
    height: 2.5rem;
    line-height: 2.5rem;
    padding: 0;
    margin: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: #ccc;
    text-align: center;
    transition: color .15s ease, background .15s ease;
}

html.dark-mode #layout-list .pagenav a:before {
    display: inline !important;
    float: none !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 2.5rem;
    color: inherit;
}

html.dark-mode #layout-list .pagenav a.disabled {
    opacity: .35;
    pointer-events: none;
}

html.dark-mode #layout-list .pagenav a:not(.disabled):hover {
    background: rgba(255, 255, 255, .05) !important;
    color: var(--rh-gold-bright);
}

html.dark-mode #layout-list .pagenav input.form-control {
    width: 3rem;
    max-width: 5rem;
    height: auto;
    max-height: 1.6rem;
    margin: 0 .2rem;
    padding: 0;
    background: transparent;
    border: 1px solid #444;
    color: #ccc;
    text-align: center;
    font-size: 90%;
}

html.dark-mode #searchmenu.searchoptions {
    background: var(--rh-dark-2) !important;
    border-bottom: 1px solid rgba(212, 175, 55, .1);
}
html.dark-mode #searchmenu .input-group-text {
    background: rgba(212, 175, 55, .08);
    border-color: #444;
    color: var(--rh-gold-bright);
}
html.dark-mode #searchmenu .custom-select,
html.dark-mode #searchmenu select.form-control {
    background: var(--rh-dark-3);
    border-color: #444;
    color: #eee;
}

html.dark-mode #layout-content .iframe-wrapper {
    background: var(--rh-dark);
    border-left: 1px solid rgba(212, 175, 55, .08);
}
html.dark-mode #layout-content .iframe-wrapper iframe {
    background: #fff;
}
html.dark-mode #layout-sidebar > .footer {
    border-top: 1px solid rgba(212, 175, 55, .1);
    background: rgba(0, 0, 0, .15);
}
html.dark-mode .quota-widget .bar {
    background: rgba(212, 175, 55, .15);
    border-radius: var(--rh-radius-pill);
}

html.dark-mode .toolbar a.button,
html.dark-mode .header a.button {
    border-radius: var(--rh-radius-sm) !important;
}
html.dark-mode .toolbar a.button:hover,
html.dark-mode .header a.button:hover {
    background: rgba(212, 175, 55, .12) !important;
    color: var(--rh-gold-bright) !important;
}

html.dark-mode .quota-widget { color: #aaa; }
html.dark-mode .quota-widget .count,
html.dark-mode .quota-widget .bar { color: var(--rh-gold-bright); }

html.dark-mode #message-header > .subject { color: #f0f0f0; }
html.dark-mode #message-header .header-summary,
html.dark-mode #message-header .header-links a { color: #aaa; }
html.dark-mode .message-part,
html.dark-mode .message-htmlpart { color: #ddd; }

html.dark-mode .propform .form-control,
html.dark-mode .propform select.form-control {
    background: var(--rh-dark-3);
    border-color: #444;
    color: #eee;
}

/* ----- Light mode accents ----- */
html:not(.dark-mode) .folderlist li.selected > a {
    box-shadow: inset 3px 0 0 var(--rh-gold);
    background: rgba(212, 175, 55, .1) !important;
}
html:not(.dark-mode) #messagelist tr.selected td {
    background: rgba(212, 175, 55, .12) !important;
}
html:not(.dark-mode) .searchbar input {
    border-radius: var(--rh-radius-pill) !important;
}
html:not(.dark-mode) .searchbar input:focus {
    border-color: var(--rh-gold) !important;
}

/* ----- Shared ----- */
.unreadcount, span.unreadcount {
    border-radius: var(--rh-radius-pill) !important;
    background: var(--rh-gold) !important;
    color: #1a1a1a !important;
    font-weight: 700;
    min-width: 1.4em;
    text-align: center;
}
#layout-menu, #layout-sidebar {
    border-right: 1px solid rgba(212, 175, 55, .14);
}
.header.boxtitle,
#layout-content > .header,
#layout-sidebar > .header,
#messagelist-header {
    border-bottom: 1px solid rgba(212, 175, 55, .16);
}
#messagelist-header .toolbar {
    border-bottom: none !important;
}
.floating-action-buttons a.button {
    border-radius: var(--rh-radius-pill) !important;
    background: linear-gradient(180deg, var(--rh-gold-bright), var(--rh-gold)) !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 18px rgba(212, 175, 55, .22);
}

/* Folder icons — gold tint */
html.dark-mode .folderlist li > a:before {
    color: var(--rh-gold) !important;
}
html.dark-mode .folderlist li.selected > a:before {
    color: var(--rh-gold-bright) !important;
}

/* Unread/selected row accent — gold not blue */
html.dark-mode #messagelist tr.unread td.subject span.msgicon.status:before {
    color: var(--rh-gold) !important;
}

/* Search placeholder in layout-list */
html.dark-mode #layout-list .searchbar input::placeholder,
html.dark-mode #layout-list .searchbar #mailsearchform::placeholder {
    color: #888 !important;
    opacity: 1;
}

/* Scrollbars */
* { scrollbar-color: var(--rh-gold-deep) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: var(--rh-gold-deep);
    border-radius: var(--rh-radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--rh-gold); }