/* ==========================================================================
   PHARMAPLUS WEBMAIL UI V3
   Brand source: Pharmaplus ecommerce/back-office visual language
   Primary: green. Secondary/status accent: red.
   Built as a late-loaded override for Roundcube Elastic 1.6.x.
   ========================================================================== */

:root {
    --pp-green: #32B24A;
    --pp-green-strong: #2AA040;
    --pp-green-dark: #1E7A2F;
    --pp-green-deep: #0F5C22;
    --pp-green-soft: #EAF7ED;
    --pp-green-wash: #F4FBF5;

    --pp-red: #F02D3A;
    --pp-red-dark: #B01020;
    --pp-red-soft: #FFF0F2;

    --pp-ink: #1F2933;
    --pp-ink-2: #33423A;
    --pp-muted: #6B756F;
    --pp-muted-2: #8B948F;

    --pp-bg: #F6F8F7;
    --pp-surface: #FFFFFF;
    --pp-surface-2: #FBFDFB;
    --pp-border: #E3E9E5;
    --pp-border-strong: #D5DDD8;

    --pp-radius-sm: 8px;
    --pp-radius: 12px;
    --pp-radius-lg: 18px;

    --pp-shadow-sm: 0 2px 10px rgba(15, 92, 34, .055);
    --pp-shadow: 0 12px 34px rgba(22, 42, 30, .10);
    --pp-shadow-lg: 0 24px 70px rgba(22, 42, 30, .15);
}


/* ==========================================================================
   GLOBAL BRAND FOUNDATION
   ========================================================================== */

body {
    color: var(--pp-ink);
    background: var(--pp-bg);
}

a {
    color: var(--pp-green-dark);
}

a:hover,
a:focus {
    color: var(--pp-green-deep);
}

.form-control,
.custom-select,
input,
select,
textarea {
    border-color: var(--pp-border-strong);
    border-radius: var(--pp-radius-sm);
}

.form-control:focus,
.custom-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: rgba(50, 178, 74, .78) !important;
    box-shadow: 0 0 0 .2rem rgba(50, 178, 74, .13) !important;
}

.btn,
button {
    border-radius: var(--pp-radius-sm);
}

.btn-primary {
    color: #fff;
    background: var(--pp-green);
    border-color: var(--pp-green);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #fff !important;
    background: var(--pp-green-dark) !important;
    border-color: var(--pp-green-dark) !important;
}

.btn-danger {
    background: var(--pp-red);
    border-color: var(--pp-red);
}

.btn-danger:hover,
.btn-danger:focus {
    background: var(--pp-red-dark);
    border-color: var(--pp-red-dark);
}

.btn-link {
    color: var(--pp-green-dark);
}

.ui-menu .ui-state-active,
.ui-menu .ui-menu-item-wrapper.ui-state-active {
    color: #fff !important;
    background: var(--pp-green) !important;
}

.popover,
.dropdown-menu,
.ui-dialog {
    border-color: var(--pp-border);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow);
}

.ui.alert.alert-success > i.icon:before {
    color: var(--pp-green);
}

.ui.alert.alert-danger > i.icon:before {
    color: var(--pp-red);
}


/* ==========================================================================
   LOGIN — DESKTOP SPLIT EXPERIENCE / MOBILE SINGLE PANEL
   ========================================================================== */

body.task-login {
    overflow: auto;
    min-width: 240px;
    background:
        radial-gradient(circle at 8% 12%, rgba(50,178,74,.10), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(240,45,58,.07), transparent 27%),
        linear-gradient(145deg, #F8FBF9 0%, #F4F7F5 48%, #F9F7F7 100%);
}

body.task-login #layout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    height: auto;
    padding: clamp(22px, 5vh, 54px) 22px;
    overflow: auto;
    box-sizing: border-box;
}

body.task-login #layout-content {
    flex: 0 1 980px;
    display: block;
    width: min(100%, 980px);
    max-width: 980px;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    background: transparent;
}

.pp-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(400px, .98fr);
    min-height: 590px;
    overflow: hidden;
    border: 1px solid rgba(15, 92, 34, .08);
    border-radius: 24px;
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow-lg);
}

.pp-auth-story {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 54px 50px 40px;
    color: #fff;
    background:
        radial-gradient(circle at 94% 4%, rgba(255,255,255,.18), transparent 29%),
        radial-gradient(circle at 3% 94%, rgba(240,45,58,.24), transparent 34%),
        linear-gradient(145deg, #0F5C22 0%, #18722B 46%, #32B24A 100%);
}

.pp-auth-story:before,
.pp-auth-story:after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
}

.pp-auth-story:before {
    width: 210px;
    height: 210px;
    top: -88px;
    right: -70px;
    border: 1px solid rgba(255,255,255,.18);
}

.pp-auth-story:after {
    width: 150px;
    height: 150px;
    bottom: 58px;
    right: -78px;
    border: 28px solid rgba(255,255,255,.055);
}

.pp-auth-story-inner,
.pp-auth-story-footer {
    position: relative;
    z-index: 1;
}

.pp-auth-wordmark {
    display: block;
    width: 230px;
    max-width: 78%;
    height: auto;
    margin: 0 0 34px;
    padding: 9px 14px;
    box-sizing: content-box;
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 24px rgba(0,0,0,.09);
}

.pp-auth-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: rgba(255,255,255,.78);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .16em;
}

.pp-auth-kicker span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #FF6B75;
}

.pp-auth-story h2 {
    max-width: 390px;
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 3vw, 2.75rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -.035em;
}

.pp-auth-story-copy {
    max-width: 410px;
    margin: 22px 0 0;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    line-height: 1.7;
}

.pp-auth-feature-grid {
    display: grid;
    gap: 10px;
    margin-top: 38px;
}

.pp-auth-feature {
    position: relative;
    padding: 14px 15px 14px 43px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(6px);
}

.pp-auth-feature:before {
    content: "";
    position: absolute;
    top: 17px;
    left: 17px;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,.85);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.10);
}

.pp-auth-feature strong {
    display: block;
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
}

.pp-auth-feature small {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.70);
    font-size: 11px;
    line-height: 1.4;
}

.pp-auth-story-footer {
    color: rgba(255,255,255,.64);
    font-size: 11px;
}

.pp-auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px 52px;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FCFDFC 100%);
}

.pp-auth-panel-inner {
    width: 100%;
    max-width: 390px;
}

.pp-auth-mobile-brand {
    display: none;
}

.pp-auth-eyebrow {
    margin-bottom: 10px;
    color: var(--pp-green-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
}

.pp-auth-panel h2 {
    margin: 0;
    color: var(--pp-ink);
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.025em;
}

.pp-auth-intro {
    margin: 9px 0 30px;
    color: var(--pp-muted);
    font-size: 13px;
    line-height: 1.55;
}

body.task-login #login-form {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.task-login #login-form table,
body.task-login #login-form tbody {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

body.task-login #login-form tr {
    display: block;
    width: 100%;
    margin: 0 0 18px;
}

body.task-login #login-form td {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
}

body.task-login #login-form td.title {
    height: auto;
    margin: 0 0 7px;
    color: var(--pp-ink-2);
    background: transparent;
    border: 0;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

body.task-login #login-form td.title:before {
    display: none !important;
}

body.task-login #login-form td.title label {
    display: inline;
    width: auto;
    height: auto;
    overflow: visible;
    margin: 0;
    padding: 0;
    white-space: normal;
}

body.task-login #login-form .form-control {
    width: 100%;
    height: 50px;
    min-height: 50px;
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #DCE3DE;
    border-radius: 10px;
    background: #FAFCFA;
    color: var(--pp-ink);
    font-size: 14px;
    box-shadow: none;
}

body.task-login #login-form .form-control:hover {
    border-color: #C9D4CD;
}

body.task-login #login-form .form-control:focus {
    border-color: rgba(50,178,74,.84) !important;
    background: #fff;
    box-shadow: 0 0 0 .2rem rgba(50,178,74,.12) !important;
}

body.task-login #login-form p.formbuttons {
    width: 100%;
    margin: 24px 0 0;
    padding: 0;
}

body.task-login #rcmloginsubmit {
    display: block;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid var(--pp-green);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--pp-green), var(--pp-green-dark));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(50,178,74,.20);
    transition:
        transform .08s ease,
        background .18s ease,
        box-shadow .18s ease;
}

body.task-login #rcmloginsubmit:hover,
body.task-login #rcmloginsubmit:focus {
    background: linear-gradient(135deg, var(--pp-green-strong), var(--pp-green-deep));
    color: #fff;
    box-shadow: 0 12px 25px rgba(30,122,47,.24);
}

body.task-login #rcmloginsubmit:active {
    transform: translateY(1px);
}

.pp-auth-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 24px;
    color: var(--pp-muted);
    font-size: 11px;
}

.pp-auth-security-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pp-green);
    box-shadow: 0 0 0 4px rgba(50,178,74,.10);
}

.pp-auth-authorized {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--pp-border);
    color: var(--pp-muted-2);
    font-size: 10px;
    text-align: center;
}

body.task-login #login-footer {
    position: static;
    margin-top: 8px;
    color: var(--pp-muted-2);
    font-size: 10px;
    text-align: center;
}

body.task-login #logo {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}


/* ==========================================================================
   AUTHENTICATED APP SHELL
   ========================================================================== */

body:not(.task-login) #layout {
    background: var(--pp-bg);
}

body:not(.task-login) #layout-menu {
    background:
        linear-gradient(180deg, var(--pp-green-deep) 0%, #0D4E1D 100%) !important;
    box-shadow: 3px 0 18px rgba(15,92,34,.10);
}

body:not(.task-login) #layout-menu .popover-header {
    position: relative;
    background: var(--pp-green-deep) !important;
}

body:not(.task-login) #layout-menu .popover-header:after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pp-green), var(--pp-red));
    opacity: .95;
}

body:not(.task-login) #layout-menu .popover-header img {
    max-width: 48px;
    max-height: 48px;
    padding: 7px;
}

@media screen and (min-width: 1025px) {
    body:not(.task-login) #layout-menu {
        width: 82px;
    }

    body:not(.task-login) #taskmenu a {
        width: 82px;
    }
}

body:not(.task-login) #taskmenu a {
    color: rgba(255,255,255,.78);
    border-left: 3px solid transparent;
    transition:
        color .15s ease,
        background-color .15s ease,
        border-color .15s ease;
}

body:not(.task-login) #taskmenu a:hover,
body:not(.task-login) #taskmenu a:focus {
    color: #fff;
    background: rgba(255,255,255,.10);
}

body:not(.task-login) #taskmenu a.selected {
    color: #fff;
    background: rgba(255,255,255,.14);
    border-left-color: #7BE08D;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

body:not(.task-login) #taskmenu .action-buttons a {
    color: #8FE59D;
}

body:not(.task-login) #taskmenu .action-buttons a:hover {
    color: #B4F1BE;
    background: rgba(255,255,255,.08);
}

body:not(.task-login) #taskmenu a.logout,
body:not(.task-login) #taskmenu a.logout:hover {
    color: #FF6D78 !important;
}


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

body:not(.task-login) #layout-sidebar {
    border-right-color: var(--pp-border);
    background: var(--pp-surface-2);
    box-shadow: 2px 0 12px rgba(22,42,30,.035);
}

body:not(.task-login) #layout-sidebar > .header {
    color: var(--pp-ink);
    background: #fff;
    border-bottom-color: var(--pp-border);
}

body:not(.task-login) #layout-sidebar > .header .username {
    color: var(--pp-ink-2);
    font-size: 12px;
    font-weight: 700;
}

body:not(.task-login) #folderlist-content {
    padding: 8px 0 10px;
}

body:not(.task-login) .folderlist li {
    border-bottom: 0;
}

body:not(.task-login) .folderlist li > a {
    width: calc(100% - 16px);
    margin: 2px 8px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    border: 0;
    border-radius: 9px;
    color: #34423A;
    line-height: 39px;
}

body:not(.task-login) .folderlist li > a:hover,
body:not(.task-login) .folderlist li > a:focus {
    color: var(--pp-green-dark);
    background: var(--pp-green-wash);
}

body:not(.task-login) .folderlist li.selected > a {
    color: var(--pp-green-deep);
    background: var(--pp-green-soft);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--pp-green);
}

body:not(.task-login) .folderlist .unreadcount {
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    color: #fff;
    background: var(--pp-green);
    font-size: 10px;
    line-height: 1.45;
    font-weight: 700;
    text-align: center;
}

body:not(.task-login) #layout-sidebar > .footer {
    background: #fff;
    border-top-color: var(--pp-border);
}

body:not(.task-login) .quota-widget {
    color: var(--pp-muted);
}

body:not(.task-login) .quota-widget .value {
    background: linear-gradient(90deg, var(--pp-green), var(--pp-green-dark));
}


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

body:not(.task-login) #layout-list {
    border-right-color: var(--pp-border);
    background: #fff;
}

body:not(.task-login) #messagelist-header,
body:not(.task-login) #layout-list > .header {
    background: #fff;
    border-bottom-color: var(--pp-border);
}

body:not(.task-login) .searchbar {
    height: 42px;
    min-height: 42px;
    line-height: 42px;
    background: #F8FAF9;
    border-bottom: 1px solid var(--pp-border);
}

body:not(.task-login) .searchbar form:before {
    color: var(--pp-green-dark);
}

body:not(.task-login) .searchbar input {
    color: var(--pp-ink);
}

body:not(.task-login) .searchbar input::placeholder {
    color: #98A29C;
}

body:not(.task-login) .searchbar a.selected {
    color: var(--pp-green);
}

body:not(.task-login) .messagelist {
    background: #fff;
}

body:not(.task-login) .messagelist tr {
    transition:
        background-color .12s ease,
        box-shadow .12s ease;
}

body:not(.task-login) .messagelist tr > td {
    border-bottom-color: #EDF1EE;
}

body:not(.task-login) .messagelist tr:hover > td {
    background: #F7FBF8;
}

body:not(.task-login) .messagelist tr.selected > td {
    color: var(--pp-ink);
    background: var(--pp-green-soft) !important;
}

body:not(.task-login) .messagelist tr.selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--pp-green);
}

body:not(.task-login) .messagelist tr.unread > td {
    color: #202A24;
    font-weight: 600;
}

body:not(.task-login) .messagelist tr.flagged > td {
    background-image: linear-gradient(90deg, rgba(240,45,58,.035), transparent 40%);
}

body:not(.task-login) .messagelist span.flagged:before,
body:not(.task-login) .messagelist .flagged {
    color: var(--pp-red);
}

body:not(.task-login) .messagelist span.secondary,
body:not(.task-login) .listing span.secondary {
    color: var(--pp-muted);
}

body:not(.task-login) .listing li.selected,
body:not(.task-login) .listing tr.selected td {
    color: var(--pp-ink);
    background-color: var(--pp-green-soft);
}

html:not(.touch) body:not(.task-login) .listing li > a:focus,
html:not(.touch) body:not(.task-login) .listing.focus tbody tr.focused > td:first-child,
html:not(.touch) body:not(.task-login) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
    border-left-color: var(--pp-green);
}


/* ==========================================================================
   TOOLBARS / ACTIONS
   ========================================================================== */

body:not(.task-login) .toolbar,
body:not(.task-login) .menu.toolbar {
    background: #fff;
}

body:not(.task-login) .menu.toolbar a {
    color: #445149;
    border-radius: 8px !important;
}

body:not(.task-login) .menu.toolbar a:not(.disabled):hover,
body:not(.task-login) .menu.toolbar a:not(.disabled):focus {
    color: var(--pp-green-deep);
    background: var(--pp-green-soft);
}

body:not(.task-login) .menu.toolbar a.selected {
    color: var(--pp-green-dark);
}

body:not(.task-login) .menu.toolbar .dropbutton:not(.disabled):hover {
    background: var(--pp-green-wash);
}

body:not(.task-login) .popover .menu li a:not(.disabled):hover,
body:not(.task-login) .popover .menu li a:not(.disabled):focus {
    color: #fff;
    background: var(--pp-green);
}

body:not(.task-login) .floating-action-buttons a.button {
    color: #fff;
    background: linear-gradient(135deg, var(--pp-green), var(--pp-green-dark));
    box-shadow: 0 0 0 5px rgba(50,178,74,.10), 0 8px 22px rgba(30,122,47,.22);
}


/* ==========================================================================
   MESSAGE READING PANE
   ========================================================================== */

body:not(.task-login) #layout-content {
    background: #fff;
}

body:not(.task-login) #layout-content > .header {
    color: var(--pp-ink);
    background: #fff;
    border-bottom-color: var(--pp-border);
}

body:not(.task-login) #message-header {
    border-bottom-color: var(--pp-border);
    background: #fff;
}

body:not(.task-login) #message-header .subject {
    color: var(--pp-ink);
    font-weight: 700;
}

body:not(.task-login) #message-header .header-links a {
    color: var(--pp-green-dark);
}

body:not(.task-login) .attachmentslist li {
    border-color: var(--pp-border);
    border-radius: 8px;
    background: var(--pp-surface-2);
}


/* ==========================================================================
   COMPOSE / SETTINGS / FORMS
   ========================================================================== */

body:not(.task-login) .formcontent,
body:not(.task-login) .frame-content {
    color: var(--pp-ink);
    background: #fff;
}

body:not(.task-login) .propform td.title,
body:not(.task-login) .form-group label,
body:not(.task-login) legend {
    color: var(--pp-ink-2);
}

body:not(.task-login) .form-control,
body:not(.task-login) input,
body:not(.task-login) select,
body:not(.task-login) textarea {
    background: #fff;
    color: var(--pp-ink);
    border-color: var(--pp-border-strong);
}

body:not(.task-login) .input-group-text {
    color: var(--pp-muted);
    background: #F7FAF8;
    border-color: var(--pp-border-strong);
}

body:not(.task-login) .nav-tabs .nav-link.active {
    color: var(--pp-green-deep);
    border-color: var(--pp-border) var(--pp-border) #fff;
    font-weight: 700;
}

body:not(.task-login) .nav-tabs .nav-link:hover {
    color: var(--pp-green-dark);
}

body:not(.task-login) .table-widget {
    border-color: var(--pp-border);
    border-radius: var(--pp-radius);
    overflow: hidden;
}

body:not(.task-login) .table-widget table.options-table tr.selected td {
    color: var(--pp-ink);
    background: var(--pp-green-soft);
}


/* ==========================================================================
   STATUS / SEMANTIC COLOR POLICY
   Green = primary/positive/navigation
   Red = destructive/urgent/flagged
   ========================================================================== */

body:not(.task-login) .ui.alert.boxinformation {
    background: rgba(50,178,74,.10);
}

body:not(.task-login) .ui.alert.boxconfirmation {
    background: rgba(50,178,74,.13);
}

body:not(.task-login) .ui.alert.boxerror {
    background: rgba(240,45,58,.12);
}

body:not(.task-login) #messagestack .alert-info.information {
    background: var(--pp-green-dark);
}

body:not(.task-login) #messagestack .alert-success {
    background: var(--pp-green);
}

body:not(.task-login) #messagestack .alert-danger {
    background: var(--pp-red);
}


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

html.dark-mode {
    --pp-ink: #EEF4EF;
    --pp-ink-2: #D5DED8;
    --pp-muted: #9DA9A1;
    --pp-muted-2: #7F8B83;

    --pp-bg: #121814;
    --pp-surface: #18201B;
    --pp-surface-2: #1C251F;
    --pp-border: #2A352D;
    --pp-border-strong: #344138;

    --pp-green-soft: rgba(50,178,74,.15);
    --pp-green-wash: rgba(50,178,74,.08);
    --pp-red-soft: rgba(240,45,58,.14);
}

html.dark-mode body {
    color: var(--pp-ink);
    background: var(--pp-bg);
}

html.dark-mode body.task-login {
    background:
        radial-gradient(circle at 8% 12%, rgba(50,178,74,.12), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(240,45,58,.07), transparent 27%),
        #111713;
}

html.dark-mode .pp-auth-shell {
    border-color: #2B372F;
    background: var(--pp-surface);
}

html.dark-mode .pp-auth-panel {
    background: #18201B;
}

html.dark-mode .pp-auth-panel h2,
html.dark-mode body.task-login #login-form td.title {
    color: var(--pp-ink);
}

html.dark-mode .pp-auth-intro,
html.dark-mode .pp-auth-security {
    color: var(--pp-muted);
}

html.dark-mode body.task-login #login-form .form-control {
    color: var(--pp-ink);
    background: #202A23;
    border-color: #354139;
}

html.dark-mode body.task-login #login-form .form-control:focus {
    background: #222D25;
}

html.dark-mode .pp-auth-authorized {
    border-top-color: var(--pp-border);
}

html.dark-mode body:not(.task-login) #layout-sidebar,
html.dark-mode body:not(.task-login) #layout-list,
html.dark-mode body:not(.task-login) #layout-content,
html.dark-mode body:not(.task-login) .toolbar,
html.dark-mode body:not(.task-login) .menu.toolbar,
html.dark-mode body:not(.task-login) .formcontent,
html.dark-mode body:not(.task-login) .frame-content {
    background: var(--pp-surface);
    border-color: var(--pp-border);
}

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,
html.dark-mode body:not(.task-login) #messagelist-header,
html.dark-mode body:not(.task-login) #message-header {
    color: var(--pp-ink);
    background: #1A231D;
    border-color: var(--pp-border);
}

html.dark-mode body:not(.task-login) .searchbar {
    background: #1C251F;
    border-color: var(--pp-border);
}

html.dark-mode body:not(.task-login) .messagelist,
html.dark-mode body:not(.task-login) .messagelist tr > td {
    background-color: var(--pp-surface);
    border-color: var(--pp-border);
}

html.dark-mode body:not(.task-login) .messagelist tr:hover > td {
    background: #202A23;
}

html.dark-mode body:not(.task-login) .messagelist tr.selected > td,
html.dark-mode body:not(.task-login) .listing li.selected,
html.dark-mode body:not(.task-login) .listing tr.selected td {
    color: var(--pp-ink);
    background: var(--pp-green-soft) !important;
}

html.dark-mode body:not(.task-login) .folderlist li > a {
    color: #D9E1DB;
}

html.dark-mode body:not(.task-login) .folderlist li > a:hover {
    color: #A9E6B4;
    background: var(--pp-green-wash);
}

html.dark-mode body:not(.task-login) .folderlist li.selected > a {
    color: #C7F2CF;
    background: var(--pp-green-soft);
}

html.dark-mode body:not(.task-login) .form-control,
html.dark-mode body:not(.task-login) input,
html.dark-mode body:not(.task-login) select,
html.dark-mode body:not(.task-login) textarea {
    color: var(--pp-ink);
    background: #202A23;
    border-color: #354139;
}

html.dark-mode body:not(.task-login) .popover,
html.dark-mode body:not(.task-login) .dropdown-menu,
html.dark-mode body:not(.task-login) .ui-dialog {
    color: var(--pp-ink);
    background: #202A23;
    border-color: var(--pp-border);
}


/* ==========================================================================
   RESPONSIVE LOGIN
   ========================================================================== */

@media screen and (max-width: 820px) {
    body.task-login #layout {
        align-items: flex-start;
        padding: 18px 14px;
    }

    body.task-login #layout-content {
        flex: 0 1 470px;
        width: 100%;
        max-width: 470px;
        margin: auto;
    }

    .pp-auth-shell {
        display: block;
        min-height: 0;
        border-radius: 20px;
    }

    .pp-auth-story {
        display: none;
    }

    .pp-auth-panel {
        padding: 34px 28px 30px;
    }

    .pp-auth-panel-inner {
        max-width: 100%;
    }

    .pp-auth-mobile-brand {
        display: block;
        margin-bottom: 26px;
        text-align: center;
    }

    .pp-auth-mobile-brand img {
        width: 210px;
        max-width: 72%;
        height: auto;
    }

    .pp-auth-panel h2,
    .pp-auth-intro,
    .pp-auth-eyebrow {
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    body.task-login #layout {
        padding: 12px;
    }

    .pp-auth-shell {
        border-radius: 16px;
    }

    .pp-auth-panel {
        padding: 28px 20px 24px;
    }

    .pp-auth-panel h2 {
        font-size: 24px;
    }

    body.task-login #login-form .form-control,
    body.task-login #rcmloginsubmit {
        min-height: 48px;
        height: 48px;
    }
}


/* ==========================================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* === END PHARMAPLUS WEBMAIL UI V3 === */