/* ==========================================================================
   Working Solutions Pro Mail — SurgeWeb refinement V7
   Domain: wsagents.com

   Goals for this pass:
   - Keep the already-approved selected-message green unchanged.
   - Return the B90 blade to SurgeWeb's native right-column flow so it does
     NOT cover message data.
   - Brand BOTH mail toolbar strips.
   - Make the lower workspace/background a light company-blue tint.
   - Keep the Mail bar purple and make its status icon white.
   - Do not touch the working logo or the login page.
   ========================================================================== */

/* ---------------- Header / logo ----------------
   Keep the known-good PNG already on the server. */
body #top_banner,
body #top_banner.new {
    background-color: #FFFFFF !important;
    background-image: url(working_solutions_main.png) !important;
    background-repeat: no-repeat !important;
    background-position: 18px center !important;
    background-size: 205px auto !important;
    border-bottom: 3px solid #34A3D4 !important;
    box-shadow: inset 0 -1px 0 rgba(48,216,39,0.50);
}

/* Options / Help / Logout stays neutral. */
body #link_bar {
    background: transparent !important;
    background-image: none !important;
    color: #343A40 !important;
}
body #link_bar a,
body #link_bar a:visited {
    color: #343A40 !important;
}
body #link_bar a:hover,
body #link_bar a:focus {
    color: #8537D3 !important;
}

/* ---------------- Left navigation ---------------- */
body #lpanel_hdr {
    background: #8537D3 !important;
    border-color: #6F2DB2 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}
body #lpanel_hdr *,
body #lpanel_hdr .green_text,
body #lpanel_hdr a,
body #lpanel_hdr a:visited {
    color: #FFFFFF !important;
}

/* Quota/status indicator:
   Replace the legacy green bitmap visually with a high-contrast badge.
   #343A40 is the dark neutral already used in the Working Solutions UI palette,
   and it gives the white ! enough contrast against the purple Mail bar. */
body #lpanel_hdr {
    position: relative !important;
    padding-right: 19px !important;
}

body #lpanel_hdr img {
    visibility: hidden !important;
    width: 14px !important;
}

body #lpanel_hdr::after {
    position: absolute;
    top: 50%;
    right: 3px;
    width: 13px;
    height: 13px;
    margin-top: -7px;
    border-radius: 50%;
    background: #5A6268;
    color: #FFFFFF;
    content: "!";
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    line-height: 13px;
    text-align: center;
}

body #left_column,
body .left_pane {
    background-color: #F8F9FA !important;
}

body .ws-brand-info {
    padding: 8px 9px;
    text-align: left;
    line-height: 1.25;
}
body .ws-brand-info strong {
    display: block;
    margin-bottom: 2px;
    color: #34A3D4;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.2px;
}
body .ws-brand-info span {
    color: #6C757D;
    font-size: 11px;
}

/* ---------------- Official brand toolbar treatment ----------------
   Working Solutions palette already established:
     Purple #8537D3
     Blue   #34A3D4
     Green  #30D827
*/

/* Row containing Reply / Forward / Delete. Target the enclosing toolbar
   TABLE as well as the row so the styling survives legacy nested cells. */
body:has(#right_column) table:has(input[value="Reply"]),
body:has(#right_column) table:has(button[value="Reply"]),
body:has(#right_column) tr:has(input[value="Reply"]),
body:has(#right_column) tr:has(button[value="Reply"]),
body:has(#right_column) div:has(> input[value="Reply"]):has(> input[value="Forward"]),
body:has(#right_column) div:has(> button[value="Reply"]):has(> button[value="Forward"]) {
    background: linear-gradient(90deg, #8537D3 0%, #34A3D4 58%, #30D827 100%) !important;
    background-color: #34A3D4 !important;
    color: #FFFFFF !important;
    border-color: #6C757D !important;
}
body:has(#right_column) table:has(input[value="Reply"]) td,
body:has(#right_column) table:has(button[value="Reply"]) td,
body:has(#right_column) tr:has(input[value="Reply"]) > td,
body:has(#right_column) tr:has(button[value="Reply"]) > td {
    background: transparent !important;
}

/* The Select / Inbox / Display all / Sort by strip is inside #messages.
   In this installed build msglist_nav is generated by the message-list
   templates. Color its containing strip, not just the right-side counter. */
body #messages *:has(> .msglist_nav),
body #messages > *:has(.msglist_nav),
body #messages .msglist_nav {
    background: linear-gradient(90deg, #8537D3 0%, #34A3D4 58%, #30D827 100%) !important;
    background-color: #34A3D4 !important;
    color: #FFFFFF !important;
    border-color: #6C757D !important;
}
body #messages *:has(> .msglist_nav) > *,
body #messages > *:has(.msglist_nav) > * {
    background-color: transparent !important;
}
body #messages *:has(> .msglist_nav) a,
body #messages *:has(> .msglist_nav) a:visited,
body #messages > *:has(.msglist_nav) a,
body #messages > *:has(.msglist_nav) a:visited,
body #messages .msglist_nav a,
body #messages .msglist_nav a:visited {
    color: #FFFFFF !important;
}

/* Legacy/fallback names retained in case this build uses them for the left
   half of the second strip. */
body #mail_linkbar,
body #message_linkbar,
body #messages_linkbar,
body #mail_subbar,
body #messages_subbar {
    background: linear-gradient(90deg, #8537D3 0%, #34A3D4 58%, #30D827 100%) !important;
    color: #FFFFFF !important;
}

/* ---------------- Selected message ----------------
   DO NOT CHANGE: this is the already-approved green from the prior pass.
*/
body #messages .selected,
body #messages .fake_selection,
body #messages tr.selected,
body #messages tr.fake_selection,
body #messages .part_cursor.selected,
body #messages .part_cursor.fake_selection,
body #message_list .selected,
body #message_list .fake_selection,
body #msglist .selected,
body #msglist .fake_selection {
    background: #D7F7D3 !important;
    background-color: #D7F7D3 !important;
    color: #343A40 !important;
}
body #messages .selected,
body #messages .fake_selection,
body #message_list .selected,
body #message_list .fake_selection {
    box-shadow: inset 3px 0 0 #30D827;
}

/* ---------------- Right B90 blade ----------------
   IMPORTANT: no fixed positioning, no body padding, no forced wide column.
   Let SurgeWeb's own right-column calculation keep it beside the mailbox
   instead of covering the right-hand data.
*/
body #right_column {
    background: #F8F9FA !important;
}
body #right_column .rcol_border {
    border-color: #B0B6BA !important;
    background: #FFFFFF !important;
}
body .b90-ad {
    box-sizing: border-box;
    margin: 3px;
    padding: 11px 7px 10px;
    border-left: 4px solid #8537D3;
    border-radius: 8px;
    background:
        linear-gradient(135deg,
        rgba(133,55,211,0.075) 0%,
        rgba(52,163,212,0.075) 58%,
        rgba(48,216,39,0.055) 100%),
        #FFFFFF;
    color: #343A40;
    font-family: "Segoe UI", Arial, sans-serif;
    text-align: center;
}
body .b90-title {
    margin: 0 0 3px;
    color: #8537D3;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.05;
}
body .b90-kicker {
    margin: 0 0 8px;
    color: #6C757D;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;
}
body .b90-question {
    margin: 0 0 8px;
    padding: 7px 5px;
    border: 1px solid rgba(52,163,212,0.30);
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(52,163,212,0.09), rgba(48,216,39,0.05));
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
}
body .b90-good {
    margin: 6px 0;
    color: #357A38;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
}
body .b90-next {
    margin: 6px 0 8px;
    color: #6C757D;
    font-size: 10px;
    line-height: 1.25;
}
body .b90-btn {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 17px;
    background: linear-gradient(180deg, #B35CFF 0%, #8537D3 100%);
    box-shadow: 0 4px 9px rgba(133,55,211,0.24);
    color: #FFFFFF !important;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.35px;
    text-decoration: none !important;
}

/* ---------------- Lower preview/workspace ----------------
   The pasted server output confirms the real pane is #message_preview.
   Color it, its message container, and the logged-in page's exposed lower
   background with a restrained Blue Sky tint.
*/
body:has(#right_column) {
    background: #EAF5F8 !important;
}
body #message_preview,
body #message_container,
body #message_panel {
    background-color: #EAF5F8 !important;
}

/* Keep embedded HTML messages free to supply their own white/background. */
body #message_preview iframe,
body #message_panel iframe {
    background: #FFFFFF !important;
}

/* Footer if present. */
body #footer {
    background: #343A40 !important;
    color: #FFFFFF !important;
}


/* ==========================================================================
   Refinement V8 — exact brand color cleanup
   ========================================================================== */

/* The old pale SurgeWeb blue is not Working Solutions Blue Sky.
   extend.js marks the actual Select / Inbox / Display all / Sort by strip
   with this class after SurgeWeb renders it. */
body .ws-msg-subbar {
    background: #59B9E3 !important;
    background-color: #59B9E3 !important;
    background-image: none !important;
    border-color: #59B9E3 !important;
    color: #5A6268 !important;
}

body .ws-msg-subbar > *,
body .ws-msg-subbar .msglist_nav,
body .ws-msg-subbar a,
body .ws-msg-subbar a:visited,
body .ws-msg-subbar span {
    background-color: transparent !important;
    color: #5A6268 !important;
}

/* Make the approved selected row read as the same green family as the W
   without becoming an overpowering full-strength green. */
body #messages .selected,
body #messages .fake_selection,
body #messages tr.selected,
body #messages tr.fake_selection,
body #messages .part_cursor.selected,
body #messages .part_cursor.fake_selection,
body #message_list .selected,
body #message_list .fake_selection,
body #msglist .selected,
body #msglist .fake_selection {
    background: #D7F7D3 !important;
    background-color: #D7F7D3 !important;
    color: #343A40 !important;
}

body #messages .selected,
body #messages .fake_selection,
body #message_list .selected,
body #message_list .fake_selection {
    box-shadow: inset 3px 0 0 #30D827;
}


/* ==========================================================================
   Refinement V11 — exposed shell background
   Use the requested solid blue #59B9E3 in the empty/exposed shell areas.
   ========================================================================== */

body:has(#right_column) {
    background: #59B9E3 !important;
}

body #left_column,
body .left_pane,
body #right_column {
    background: #59B9E3 !important;
}


/* ==========================================================================
   Refinement V13 — match sections 2 and 3 to section 1
   Section 1 uses #59B9E3. Apply the same color to:
     2) the message-header strip (From / Subject / Date)
     3) the lower preview/workspace surrounding the message body
   ========================================================================== */

/* Section 2: message header strip */
body #msg_headers,
body #message_headers,
body #message_header,
body #message_panel > div:first-child,
body #message_container > div:first-child {
    background: #59B9E3 !important;
    background-color: #59B9E3 !important;
    color: #343A40 !important;
}

/* Preserve the existing red sender-warning text if SurgeWeb applies it. */
body #msg_headers .red,
body #message_headers .red,
body #message_header .red {
    color: #C82333 !important;
}

/* Section 3: lower preview/workspace */
body:has(#right_column) {
    background: #59B9E3 !important;
}

body #message_preview,
body #message_container,
body #message_panel {
    background: #59B9E3 !important;
    background-color: #59B9E3 !important;
}

/* Keep the actual message content itself white/readable. */
body #message_preview iframe,
body #message_panel iframe,
body #message_container iframe {
    background: #FFFFFF !important;
}


/* ==========================================================================
   Refinement V14 — force sections 1, 2 and 3 to the exact same color
   Requested color: #E2E6EA
   ========================================================================== */

/* SECTION 1: Select / Inbox / Display all / Sort by bar */
body .ws-msg-subbar,
body #messages *:has(> .msglist_nav),
body #messages > *:has(.msglist_nav),
body #messages .msglist_nav,
body #mail_linkbar,
body #message_linkbar,
body #messages_linkbar,
body #mail_subbar,
body #messages_subbar {
    background: #E2E6EA !important;
    background-color: #E2E6EA !important;
    background-image: none !important;
    border-color: #B0B6BA !important;
    color: #343A40 !important;
}

body .ws-msg-subbar > *,
body .ws-msg-subbar .msglist_nav,
body .ws-msg-subbar a,
body .ws-msg-subbar a:visited,
body .ws-msg-subbar span,
body #messages *:has(> .msglist_nav) a,
body #messages *:has(> .msglist_nav) a:visited,
body #messages > *:has(.msglist_nav) a,
body #messages > *:has(.msglist_nav) a:visited,
body #messages .msglist_nav a,
body #messages .msglist_nav a:visited {
    background-color: transparent !important;
    color: #343A40 !important;
}

/* SECTION 2: From / Subject / Date message-header strip */
body #msg_headers,
body #message_headers,
body #message_header,
body #message_panel > div:first-child,
body #message_container > div:first-child {
    background: #E2E6EA !important;
    background-color: #E2E6EA !important;
    background-image: none !important;
    color: #343A40 !important;
}

/* SECTION 3: lower preview/workspace surrounding the message body */
body:has(#right_column) {
    background: #E2E6EA !important;
}

body #message_preview,
body #message_container,
body #message_panel {
    background: #E2E6EA !important;
    background-color: #E2E6EA !important;
    background-image: none !important;
}

/* Keep actual message content white/readable. */
body #message_preview iframe,
body #message_panel iframe,
body #message_container iframe {
    background: #FFFFFF !important;
}


/* ==========================================================================
   Refinement V15 — precise correction
   ========================================================================== */

/* SECTION 1 ONLY:
   Select / Inbox / Display all / Sort by bar -> #59B9E3 */
body .ws-msg-subbar,
body #messages *:has(> .msglist_nav),
body #messages > *:has(.msglist_nav),
body #messages .msglist_nav,
body #mail_linkbar,
body #message_linkbar,
body #messages_linkbar,
body #mail_subbar,
body #messages_subbar {
    background: #59B9E3 !important;
    background-color: #59B9E3 !important;
    background-image: none !important;
    border-color: #59B9E3 !important;
    color: #343A40 !important;
}

body .ws-msg-subbar > *,
body .ws-msg-subbar .msglist_nav,
body .ws-msg-subbar a,
body .ws-msg-subbar a:visited,
body .ws-msg-subbar span,
body #messages *:has(> .msglist_nav) a,
body #messages *:has(> .msglist_nav) a:visited,
body #messages > *:has(.msglist_nav) a,
body #messages > *:has(.msglist_nav) a:visited,
body #messages .msglist_nav a,
body #messages .msglist_nav a:visited {
    background-color: transparent !important;
    color: #343A40 !important;
}

/* SECTIONS 2 AND 3:
   Keep the V14 requested gray #E2E6EA. */
body #msg_headers,
body #message_headers,
body #message_header,
body #message_panel > div:first-child,
body #message_container > div:first-child {
    background: #E2E6EA !important;
    background-color: #E2E6EA !important;
    background-image: none !important;
    color: #343A40 !important;
}

body #message_preview,
body #message_container,
body #message_panel {
    background: #E2E6EA !important;
    background-color: #E2E6EA !important;
    background-image: none !important;
}

/* OUTER / EXPOSED SHELL ONLY:
   Restore the red-arrow area to #59B9E3.
   Do NOT use this selector to recolor #message_preview. */
body:has(#right_column) {
    background: #59B9E3 !important;
}

/* Left/right exposed side gutters also stay #59B9E3. */
body #left_column,
body .left_pane,
body #right_column {
    background: #59B9E3 !important;
}

/* Keep actual message content white/readable. */
body #message_preview iframe,
body #message_panel iframe,
body #message_container iframe {
    background: #FFFFFF !important;
}