/* ==========================================================================
   PHARMAPLUS MAIL — V3.2 VISUAL CORRECTION LAYER
   Grounded in the live Roundcube 1.6.18 Elastic DOM.
   This file changes presentation only.
   ========================================================================== */

:root {
    --pp32-green: #32B24A;
    --pp32-green-dark: #1E7A2F;
    --pp32-green-deep: #0F5C22;
    --pp32-red: #F02D3A;
    --pp32-bg: #F6F8F6;
    --pp32-surface: #FFFFFF;
    --pp32-soft: #F1F6F2;
    --pp32-wash: #F7FAF7;
    --pp32-text: #1C2520;
    --pp32-text-2: #48534C;
    --pp32-muted: #727D76;
    --pp32-border: #E4E9E5;
    --pp32-border-strong: #D3DAD5;
}

/* --------------------------------------------------------------------------
   A. LOGIN — conventional corporate fields, no detached icon boxes
   -------------------------------------------------------------------------- */

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

body.task-login #login-form td.title {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--pp32-text-2) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: left !important;
}

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

body.task-login #login-form td.title label {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
}

body.task-login #login-form td.input {
    position: static !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

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

body.task-login #login-form .form-control {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--pp32-border-strong) !important;
    border-radius: 8px !important;
    background: #FBFCFB !important;
    color: var(--pp32-text) !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

body.task-login #login-form .form-control:hover {
    border-color: #BEC9C1 !important;
}

body.task-login #login-form .form-control:focus {
    border-color: rgba(50,178,74,.82) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(50,178,74,.10) !important;
    outline: 0 !important;
}

body.task-login #login-form p.formbuttons {
    margin: 20px 0 0 !important;
}

body.task-login #rcmloginsubmit {
    min-height: 44px !important;
    height: 44px !important;
    border: 1px solid var(--pp32-green) !important;
    border-radius: 8px !important;
    background: var(--pp32-green) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.task-login #rcmloginsubmit:hover,
body.task-login #rcmloginsubmit:focus {
    border-color: var(--pp32-green-dark) !important;
    background: var(--pp32-green-dark) !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   B. APPLICATION RAIL — repair white-on-white invisible task buttons
   -------------------------------------------------------------------------- */

body:not(.task-login) #layout-menu,
body:not(.task-login) #taskmenu {
    background: var(--pp32-green-deep) !important;
}

body:not(.task-login) #taskmenu {
    color: #fff !important;
}

body:not(.task-login) #taskmenu > .action-buttons,
body:not(.task-login) #taskmenu > .special-buttons {
    background: var(--pp32-green-deep) !important;
}

body:not(.task-login) #taskmenu a {
    color: rgba(255,255,255,.86) !important;
    background-color: transparent !important;
    border-left-color: transparent !important;
    box-shadow: none !important;
}

body:not(.task-login) #taskmenu a:before {
    color: currentColor !important;
}

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

body:not(.task-login) #taskmenu a.selected {
    color: #fff !important;
    background-color: rgba(255,255,255,.13) !important;
    border-left-color: #A7E7B2 !important;
}

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

body:not(.task-login) #taskmenu .special-buttons {
    width: 64px !important;
    background: #0D4F1D !important;
}

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

@media screen and (min-width: 1025px) {
    body:not(.task-login) #layout-menu,
    body:not(.task-login) #taskmenu,
    body:not(.task-login) #taskmenu > .action-buttons,
    body:not(.task-login) #taskmenu > .special-buttons {
        width: 64px !important;
        min-width: 64px !important;
    }

    body:not(.task-login) #taskmenu > a,
    body:not(.task-login) #taskmenu > .action-buttons > a,
    body:not(.task-login) #taskmenu > .special-buttons > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 64px !important;
        min-width: 64px !important;
        height: 54px !important;
        min-height: 54px !important;
        margin: 0 !important;
        padding: 4px 2px !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    body:not(.task-login) #taskmenu > a:before,
    body:not(.task-login) #taskmenu > .action-buttons > a:before,
    body:not(.task-login) #taskmenu > .special-buttons > a:before {
        float: none !important;
        width: auto !important;
        margin: 0 0 4px !important;
        line-height: 1 !important;
        font-size: 1.05rem !important;
    }

    body:not(.task-login) #taskmenu > a > .inner,
    body:not(.task-login) #taskmenu > .action-buttons > a > .inner,
    body:not(.task-login) #taskmenu > .special-buttons > a > .inner {
        display: block !important;
        max-width: 60px !important;
        padding: 0 2px !important;
        overflow: hidden !important;
        color: currentColor !important;
        font-size: 9px !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* --------------------------------------------------------------------------
   C. ADDRESS BOOK — remove stock blue selection and unify with Mail
   -------------------------------------------------------------------------- */

body.task-addressbook #directorylist li > a:hover,
body.task-addressbook #savedsearchlist li > a:hover {
    color: var(--pp32-green-deep) !important;
    background: var(--pp32-wash) !important;
}

body.task-addressbook #directorylist li.selected > a,
body.task-addressbook #directorylist li > a.selected,
body.task-addressbook #savedsearchlist li.selected > a,
body.task-addressbook #savedsearchlist li > a.selected {
    color: var(--pp32-green-deep) !important;
    background: var(--pp32-soft) !important;
    box-shadow: inset 4px 0 0 var(--pp32-green) !important;
    font-weight: 600 !important;
}

body.task-addressbook #contacts-table tr:hover > td {
    background: var(--pp32-wash) !important;
}

body.task-addressbook #contacts-table tr.selected > td {
    color: var(--pp32-text) !important;
    background: var(--pp32-soft) !important;
}

body.task-addressbook #contacts-table tr.selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--pp32-green) !important;
}

/* --------------------------------------------------------------------------
   D. TOOLBARS — readable disabled states, restrained active states
   -------------------------------------------------------------------------- */

body:not(.task-login) .header .menu.toolbar a,
body:not(.task-login) #mailtoolbar a {
    color: #445148;
}

body:not(.task-login) .header .menu.toolbar a:not(.disabled):hover,
body:not(.task-login) .header .menu.toolbar a:not(.disabled):focus,
body:not(.task-login) #mailtoolbar a:not(.disabled):hover,
body:not(.task-login) #mailtoolbar a:not(.disabled):focus {
    color: var(--pp32-green-deep) !important;
    background: var(--pp32-soft) !important;
}

body:not(.task-login) .header .menu.toolbar a.disabled,
body:not(.task-login) #mailtoolbar a.disabled,
body:not(.task-login) a.button.disabled {
    color: #8A958E !important;
    opacity: .62 !important;
}

body:not(.task-login) #mailtoolbar a.delete:not(.disabled):hover,
body:not(.task-login) #mailtoolbar a.delete:not(.disabled):focus {
    color: #B91F2B !important;
    background: #FFF1F2 !important;
}

/* --------------------------------------------------------------------------
   E. MESSAGE LIST — clearer scanning and brand-consistent states
   -------------------------------------------------------------------------- */

body.task-mail .messagelist tr > td {
    border-bottom-color: #EDF0EE !important;
}

body.task-mail .messagelist tr.unread > td:first-child {
    box-shadow: inset 3px 0 0 var(--pp32-green) !important;
}

body.task-mail .messagelist tr.unread td.subject span.from,
body.task-mail .messagelist tr.unread td.subject span.subject {
    color: var(--pp32-text) !important;
    font-weight: 700 !important;
}

body.task-mail .messagelist tr.selected > td {
    background: var(--pp32-soft) !important;
}

body.task-mail .messagelist tr.selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--pp32-green) !important;
}

body.task-mail .messagelist .flagged,
body.task-mail .messagelist tr.flagged .flag,
body.task-mail .messagelist tr.flagged .flagged {
    color: var(--pp32-red) !important;
}

body.task-mail .messagelist tr.unread .unread {
    color: var(--pp32-green-dark) !important;
}

/* --------------------------------------------------------------------------
   F. MESSAGE READER — target the real Elastic message.html DOM
   -------------------------------------------------------------------------- */

body.task-mail #layout-content .header-content {
    padding: 14px 18px 12px !important;
    border-bottom: 1px solid var(--pp32-border) !important;
    background: #fff !important;
}

body.task-mail #layout-content .header-summary {
    color: var(--pp32-text) !important;
    line-height: 1.4 !important;
}

body.task-mail #layout-content .header-summary .subject,
body.task-mail #layout-content .header-summary h2,
body.task-mail #layout-content .header-summary strong {
    color: var(--pp32-text) !important;
}

body.task-mail #layout-content .header-headers {
    margin-top: 7px !important;
    color: var(--pp32-text-2) !important;
    line-height: 1.45 !important;
}

body.task-mail #layout-content .header-links {
    margin-top: 6px !important;
}

body.task-mail #layout-content .header-links a {
    color: var(--pp32-green-dark) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

body.task-mail #message-content {
    background: #fff !important;
}

body.task-mail #message-content .rightcol {
    padding: 14px 18px 24px !important;
}

body.task-mail #attachment-list.attachmentslist {
    margin: 12px 18px 0 !important;
}

body.task-mail #attachment-list.attachmentslist li {
    border: 1px solid var(--pp32-border) !important;
    border-radius: 8px !important;
    background: #FAFCFA !important;
    box-shadow: none !important;
}

body.task-mail #attachment-list .attachment-name {
    color: var(--pp32-text) !important;
    font-weight: 600 !important;
}

body.task-mail #attachment-list .attachment-size {
    color: var(--pp32-muted) !important;
}

/* --------------------------------------------------------------------------
   G. COMPOSE — keep functionality intact, improve contrast and work surface
   -------------------------------------------------------------------------- */

body.task-mail.action-compose #compose-content,
body.task-mail.action-compose #compose-headers,
body.task-mail.action-compose #layout-sidebar.sidebar-right {
    background: #fff !important;
}

body.task-mail.action-compose #composebodycontainer {
    border-color: var(--pp32-border-strong) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.task-mail.action-compose #compose-attachments {
    border-color: #C7D2CA !important;
    background: #FAFCFA !important;
}

body.task-mail.action-compose #compose-attachments:hover,
body.task-mail.action-compose #compose-attachments.droptarget {
    border-color: var(--pp32-green) !important;
    background: var(--pp32-soft) !important;
}

body.task-mail.action-compose #compose-attachments .btn.attach {
    border-color: #AAB5AD !important;
    background: #fff !important;
    color: var(--pp32-text-2) !important;
}

body.task-mail.action-compose #compose-attachments .btn.attach:hover,
body.task-mail.action-compose #compose-attachments .btn.attach:focus {
    border-color: var(--pp32-green) !important;
    color: var(--pp32-green-deep) !important;
    background: var(--pp32-soft) !important;
}

/* --------------------------------------------------------------------------
   H. GENERIC LIST SELECTIONS — only where stock Elastic blue remains
   -------------------------------------------------------------------------- */

body:not(.task-login) .listing li.selected > a,
body:not(.task-login) .listing li > a.selected {
    color: var(--pp32-green-deep);
}

body:not(.task-login) .listing.focus tbody tr.focused > td:first-child {
    border-left-color: var(--pp32-green) !important;
}

/* --------------------------------------------------------------------------
   I. DARK MODE — explicit, not inverted
   -------------------------------------------------------------------------- */

html.dark-mode body.task-login #login-form td.title {
    color: #D6DED8 !important;
}

html.dark-mode body.task-login #login-form .form-control {
    border-color: #364239 !important;
    background: #202A23 !important;
    color: #F1F5F2 !important;
}

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

html.dark-mode body:not(.task-login) #layout-menu,
html.dark-mode body:not(.task-login) #taskmenu,
html.dark-mode body:not(.task-login) #taskmenu > .action-buttons {
    background: #0B4519 !important;
}

html.dark-mode body.task-addressbook #directorylist li.selected > a,
html.dark-mode body.task-addressbook #directorylist li > a.selected,
html.dark-mode body.task-addressbook #savedsearchlist li.selected > a,
html.dark-mode body.task-addressbook #savedsearchlist li > a.selected,
html.dark-mode body.task-addressbook #contacts-table tr.selected > td,
html.dark-mode body.task-mail .messagelist tr.selected > td {
    color: #EAF4EC !important;
    background: #223528 !important;
}

html.dark-mode body:not(.task-login) .header .menu.toolbar a,
html.dark-mode body:not(.task-login) #mailtoolbar a {
    color: #D1DAD3;
}

html.dark-mode body:not(.task-login) .header .menu.toolbar a.disabled,
html.dark-mode body:not(.task-login) #mailtoolbar a.disabled,
html.dark-mode body:not(.task-login) a.button.disabled {
    color: #829087 !important;
    opacity: .72 !important;
}

html.dark-mode body.task-mail #layout-content .header-content,
html.dark-mode body.task-mail #message-content,
html.dark-mode body.task-mail.action-compose #compose-content,
html.dark-mode body.task-mail.action-compose #compose-headers,
html.dark-mode body.task-mail.action-compose #layout-sidebar.sidebar-right,
html.dark-mode body.task-mail.action-compose #composebodycontainer {
    color: #F1F5F2 !important;
    background: #18201B !important;
    border-color: #303B33 !important;
}

html.dark-mode body.task-mail #layout-content .header-summary,
html.dark-mode body.task-mail #layout-content .header-summary .subject,
html.dark-mode body.task-mail #attachment-list .attachment-name {
    color: #F1F5F2 !important;
}

html.dark-mode body.task-mail #layout-content .header-headers,
html.dark-mode body.task-mail #attachment-list .attachment-size {
    color: #9DA9A1 !important;
}

html.dark-mode body.task-mail #attachment-list.attachmentslist li,
html.dark-mode body.task-mail.action-compose #compose-attachments {
    background: #202A23 !important;
    border-color: #354139 !important;
}

/* --------------------------------------------------------------------------
   J. RESPONSIVE SAFETY
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
    body:not(.task-login) #taskmenu,
    body:not(.task-login) #taskmenu > .action-buttons,
    body:not(.task-login) #taskmenu > .special-buttons {
        background: var(--pp32-green-deep) !important;
    }

    body.task-mail #message-content .rightcol {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media screen and (max-width: 600px) {
    body.task-login #login-form .form-control {
        height: 46px !important;
        min-height: 46px !important;
    }

    body:not(.task-login) .header .menu.toolbar a {
        min-width: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.task-login #login-form .form-control,
    body:not(.task-login) #taskmenu a,
    body:not(.task-login) .header .menu.toolbar a {
        transition: none !important;
    }
}