/* =============================================================================
   PROMEDIA24 Roundcube Skin — Consolidated Theme
   Navy #022c74 + Orange #ff9700 branding on Elastic base
   Single file — replaces extra.css + promedia-theme.css
   ============================================================================= */


/* =============================================================================
   1. FONT IMPORT & CSS VARIABLES
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;600;700&display=swap');

:root {
    --pm-navy:         #022c74;
    --pm-navy-light:   #0a3d8f;
    --pm-navy-dark:    #011d4f;
    --pm-orange:       #ff9700;
    --pm-orange-light: #ffab33;
    --pm-orange-dark:  #e08600;
    --pm-white:        #ffffff;
}

*, body, button, input, optgroup, select, textarea, .popover {
    font-family: 'Ubuntu', 'Helvetica Neue', Arial, sans-serif;
}


/* =============================================================================
   2. LOGIN SPLIT LAYOUT
   ============================================================================= */

/* Hide default layout-content, topbar, taskmenu, and voice heading on login */
.task-login #layout-content { display: none !important; }
.task-login #pm-topbar      { display: none !important; }
.task-login .voice           { display: none !important; }

html body.task-login #layout {
    top: 0 !important;
    height: 100vh !important;
}

/* --- Split container --- */
#login-split {
    display: flex;
    min-height: 100vh;
    width: 100%;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100;
}

/* --- Left: Promo panel (33%) --- */
#login-promo {
    flex: 0 0 33%;
    background: linear-gradient(160deg, var(--pm-navy) 0%, var(--pm-navy-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

#login-promo::before {
    content: '';
    position: absolute;
    top: -50%; right: -30%;
    width: 80%; height: 200%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.03) 0%, transparent 70%);
    pointer-events: none;
}

.promo-inner {
    text-align: center;
    padding: 40px 30px;
    max-width: 400px;
    z-index: 1;
}

.promo-logo { margin-bottom: 50px; }

.promo-logo svg {
    width: 200px;
    height: auto;
    opacity: 0.95;
}

/* Promo carousel slides */
#promo-content {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-slide {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.promo-slide.active { opacity: 1; }

.promo-slide h2 {
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0 0 12px 0;
    letter-spacing: 1px;
    color: #fff;
}

.promo-slide p {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

/* Carousel dots */
.promo-dots {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.promo-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.promo-dot.active {
    background: var(--pm-orange);
    transform: scale(1.3);
}

.promo-dot:hover { background: rgba(255,255,255,0.6); }
.promo-dot.active:hover { background: var(--pm-orange-light); }

/* Promo link */
.promo-link {
    display: inline-block;
    margin-top: 40px;
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.promo-link:hover { color: var(--pm-orange); }

/* --- Right: Login form area --- */
#login-main {
    flex: 1;
    background: #f3f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.login-main-inner {
    width: 100%;
    max-width: 380px;
}

/* Logo in login form — override Elastic's top:16vh */
.task-login #logo {
    top: 0 !important;
    position: relative !important;
    max-height: 45px !important;
}

#login-main #logo {
    display: block;
    max-height: 45px;
    width: auto;
    margin: 0 auto 15px auto;
}

/* Override Elastic's top:20vh on #login-form */
#login-main #login-form {
    top: 0 !important;
    position: static !important;
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: none;
    border-top: 3px solid var(--pm-navy);
}

#login-main #login-form .form-group { margin-bottom: 18px; }

#login-main #login-form label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
    margin-bottom: 4px;
}

#login-main #login-form .form-control {
    border: 1px solid #dce0e6;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
}

#login-main #login-form .form-control:focus {
    border-color: var(--pm-navy);
    box-shadow: 0 0 0 3px rgba(2,44,116,0.1);
    outline: none;
}

/* Login submit button */
#login-main #login-form .formbuttons { margin-top: 20px; }

#login-main #login-form #rcmloginsubmit,
#login-main #login-form .button.mainaction {
    width: 100%;
    background: var(--pm-navy) !important;
    border-color: var(--pm-navy) !important;
    color: #fff !important;
    border-radius: 6px;
    padding: 11px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: background 0.2s ease;
    cursor: pointer;
}

#login-main #login-form #rcmloginsubmit:hover,
#login-main #login-form .button.mainaction:hover {
    background: var(--pm-navy-light) !important;
    border-color: var(--pm-navy-light) !important;
}

/* Login footer */
#login-main #login-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.78rem;
    color: #767676;
}

#login-main #login-footer a { color: #767676; }
#login-main #login-footer a:hover { color: var(--pm-navy); }


/* =============================================================================
   3. TOPBAR (#pm-topbar)
   ============================================================================= */

html body div#pm-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border-bottom: 3px solid var(--pm-orange) !important;
    padding: 0 20px !important;
    height: 48px !important;
    min-height: 48px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 9999 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

html body div#pm-topbar .pm-topbar-logo {
    display: flex !important;
    align-items: center !important;
}

html body div#pm-topbar .pm-topbar-logo a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    gap: 8px !important;
    color: var(--pm-navy) !important;
}

html body div#pm-topbar .pm-topbar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

html body div#pm-topbar .pm-topbar-nav a,
html body div#pm-topbar .pm-topbar-nav span.user {
    color: #333 !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    transition: all 0.15s !important;
    white-space: nowrap !important;
}

html body div#pm-topbar .pm-topbar-nav a:hover {
    color: var(--pm-navy) !important;
    background-color: #f0f4ff !important;
}

html body div#pm-topbar .pm-topbar-nav .pm-logout {
    color: var(--pm-navy-dark) !important;
    background-color: var(--pm-orange) !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 4px !important;
    margin-left: 6px !important;
}

html body div#pm-topbar .pm-topbar-nav .pm-logout:hover {
    background-color: var(--pm-orange-dark) !important;
    color: var(--pm-navy-dark) !important;
}

html body div#pm-topbar .pm-topbar-nav .pm-nav-icon {
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: 4px;
    vertical-align: -1px;
    opacity: 0.7;
}

/* Compose button in topbar */
html body .pm-compose-btn {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--pm-orange) !important;
    color: var(--pm-navy-dark) !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    margin-right: 12px !important;
    transition: background 0.15s !important;
}

html body .pm-compose-btn:hover {
    background: var(--pm-orange-dark) !important;
    color: var(--pm-navy-dark) !important;
}

html body .pm-compose-btn span { white-space: nowrap !important; }


/* =============================================================================
   4. LAYOUT — HIDE TASKMENU, POSITIONING
   ============================================================================= */

#taskmenu,
div#taskmenu,
#layout-menu {
    display: none !important;
    width: 0 !important;
    visibility: hidden !important;
}

div#layout,
#layout {
    position: absolute !important;
    top: 48px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 48px) !important;
    margin: 0 !important;
    overflow: hidden !important;
}


/* =============================================================================
   5. SIDEBAR — WHITE WITH NAVY HEADER
   ============================================================================= */

html body #layout-sidebar {
    background-color: #fff !important;
    min-width: 180px !important;
    max-width: 200px !important;
    flex: 0 0 190px !important;
    border-right: none !important;
}

html body #layout-sidebar .listbox,
html body #layout-sidebar .footer {
    background-color: #fff !important;
    background: #fff !important;
}

/* Navy header (56px, flexbox) */
html body #layout-sidebar > .header {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 8px 0 12px !important;
    box-sizing: border-box !important;
    background: var(--pm-navy) !important;
    color: #fff !important;
    position: relative !important;
    overflow: visible !important;
}

html body #layout-sidebar > .header * { color: #fff !important; }

/* Header-title: username, ellipsis overflow */
html body #layout-sidebar > .header .header-title {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
}

/* Sidebar-menu (3-dots button) */
html body #layout-sidebar > .header a.button.sidebar-menu {
    flex-shrink: 0 !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    opacity: 0.8 !important;
}

/* Footer (quota) */
html body #layout-sidebar > .footer {
    border-top: 1px solid #eee !important;
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    color: #666 !important;
}

html body #layout-sidebar > .footer * { color: #666 !important; }


/* =============================================================================
   6. FOLDER LIST
   ============================================================================= */

/* White background, no borders between items */
.folderlist,
.folderlist li {
    background-color: #fff !important;
    border-bottom: none !important;
}

/* Folder links: navy text */
.folderlist li a {
    background-color: #fff !important;
    color: var(--pm-navy) !important;
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border-left: 3px solid transparent !important;
    transition: all 0.15s !important;
}

/* Folder icons */
.folderlist li a span.inner::before,
.folderlist li a::before,
#layout-sidebar a.active span.inner::before,
#layout-sidebar li a span.inner::before {
    display: inline-block !important;
    visibility: visible !important;
    color: #555 !important;
    opacity: 1 !important;
}

/* Selected/focused folder */
.folderlist li.selected > a,
.folderlist li.focused > a,
#layout-sidebar .listbox li.selected > a {
    background-color: #e8edf8 !important;
    color: var(--pm-navy) !important;
    border-left: 3px solid var(--pm-navy) !important;
    font-weight: 600 !important;
}

.folderlist li.selected > a span.inner::before,
.folderlist li.focused > a span.inner::before {
    color: var(--pm-navy) !important;
}

/* Hover */
.folderlist li a:hover {
    background-color: #f0f4ff !important;
    border-left-color: var(--pm-orange) !important;
}

/* Junk/Trash: red icons */
.folderlist li.junk > a span.inner::before,
.folderlist li.junk > a::before,
.folderlist li.trash > a span.inner::before,
.folderlist li.trash > a::before {
    color: #c0392b !important;
}

/* Unread badge: orange */
.folderlist .unreadcount,
.folderlist li.mailbox .unreadcount,
.folderlist li a .unreadcount,
.folderlist li a span.unread,
.mailbox-list .unreadcount {
    background-color: var(--pm-orange) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 1px 6px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
}

/* Sidebar border cleanup on mail task */
body.task-mail #layout-sidebar .listing tbody td,
body.task-mail #layout-sidebar .listing li {
    border-bottom: none;
}


/* =============================================================================
   7. MESSAGE LIST — LAYOUT (no grid, let Roundcube handle natively)
   ============================================================================= */

/* List toolbar styling */
body.task-mail #layout-list > .header {
    background: #f4f4f4 !important;
    border-bottom: 1px solid #ddd !important;
}


/* =============================================================================
   8. MESSAGE TABLE — HEADERS, SORTING, ROWS
   ============================================================================= */

/* Column headers visible */
html body #messagelist thead {
    display: table-header-group !important;
    visibility: visible !important;
}

/* fixedcopy is a visual clone for sticky headers — pass clicks through */
html body table.fixedcopy {
    pointer-events: none !important;
}

html body #messagelist thead th,
html body table.fixedcopy thead th {
    background-color: #f8f8f8 !important;
    border-bottom: 2px solid #e0e0e0 !important;
    color: #555 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 0 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

/* Sortcol links — keep default display, ensure clickable */
html body #messagelist thead th a.sortcol,
html body table.fixedcopy thead th a.sortcol {
    cursor: pointer !important;
    color: #555 !important;
    text-decoration: none !important;
    padding: 6px 4px !important;
}

html body #messagelist thead th a.sortcol:hover,
html body table.fixedcopy thead th a.sortcol:hover {
    color: var(--pm-navy) !important;
}

/* Active sort column: orange */
html body #messagelist thead th.sortedASC a.sortcol,
html body #messagelist thead th.sortedDESC a.sortcol,
html body table.fixedcopy thead th.sortedASC a.sortcol,
html body table.fixedcopy thead th.sortedDESC a.sortcol {
    color: var(--pm-orange) !important;
    font-weight: bold !important;
}

/* Sort arrows */
html body #messagelist thead th a.sortcol::after,
html body table.fixedcopy thead th a.sortcol::after {
    opacity: 1 !important;
    color: inherit !important;
}

html body #messagelist thead th.sortedASC a.sortcol::after,
html body table.fixedcopy thead th.sortedASC a.sortcol::after {
    content: " \25B2" !important;
    font-size: 0.7em !important;
    color: var(--pm-orange) !important;
}

html body #messagelist thead th.sortedDESC a.sortcol::after,
html body table.fixedcopy thead th.sortedDESC a.sortcol::after {
    content: " \25BC" !important;
    font-size: 0.7em !important;
    color: var(--pm-orange) !important;
}

/* Selection column: always visible, 62px */
html body #messagelist thead th.selection,
html body table.fixedcopy thead th.selection {
    display: table-cell !important;
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    padding: 0 !important;
    text-align: center !important;
}

html body #messagelist tbody td.selection {
    display: table-cell !important;
    width: 62px !important;
    min-width: 62px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Threads column: always visible, 62px */
html body #messagelist thead th.threads,
html body table.fixedcopy thead th.threads {
    display: table-cell !important;
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
}

html body #messagelist tbody td.threads {
    display: table-cell !important;
    width: 62px !important;
    min-width: 62px !important;
}

/* Flag/Attachment headers: truncate text */
html body #messagelist thead th.flag,
html body #messagelist thead th.attachment,
html body table.fixedcopy thead th.flag,
html body table.fixedcopy thead th.attachment {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 53px !important;
}

html body #messagelist thead th.flag span,
html body #messagelist thead th.attachment span,
html body table.fixedcopy thead th.flag span,
html body table.fixedcopy thead th.attachment span {
    overflow: hidden !important;
    display: block !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Column widths at large screens */
@media screen and (min-width: 1200px) {
    html body #messagelist thead th#rcmsubject,
    html body table.fixedcopy thead th#rcmsubject { width: 40% !important; }

    html body #messagelist thead th#rcmfromto,
    html body table.fixedcopy thead th#rcmfromto { width: 20% !important; }

    html body #messagelist thead th#rcmdate,
    html body table.fixedcopy thead th#rcmdate { width: 12% !important; }

    html body #messagelist thead th#rcmsize,
    html body table.fixedcopy thead th#rcmsize { width: 8% !important; }

    html body #messagelist thead th#rcmflag,
    html body table.fixedcopy thead th#rcmflag { width: 5% !important; }

    html body #messagelist thead th#rcmattachment,
    html body table.fixedcopy thead th#rcmattachment { width: 5% !important; }
}

/* Hide status column */
#messagelist th#rcmstatus,
#messagelist td.status { display: none; }

/* --- Rows --- */
html body #messagelist tbody td {
    padding: 5px 8px !important;
    font-size: 0.83rem !important;
    border-bottom: 1px solid #f0f0f0 !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}

#messagelist tr.message { background-color: #fff; }

/* Hover */
html body #messagelist tbody tr:hover td {
    background-color: #f5f7ff !important;
}

/* Selected: amber highlight */
html body #messagelist tbody tr.selected td,
.listing tr.selected td,
.listing li.selected {
    background-color: #fff3e0 !important;
}

/* Focused: orange left border */
.listing.focus:not(.withselection) tbody tr.focused > td.selection + td,
#messagelist tbody tr.focused td:first-child {
    border-left: 3px solid var(--pm-orange) !important;
}

html:not(.touch) .listing li > a:focus,
html:not(.touch) .listing.focus tbody tr.focused > td:first-child,
html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
    border-left: 3px solid var(--pm-orange) !important;
}

/* Selected list item text: navy */
.listing li.selected a,
.listing li.selected span,
.listing tr.selected td a {
    color: var(--pm-navy) !important;
}

/* Unread: bold 700 */
html body #messagelist tr.unread td,
html body #messagelist tr.message.unread * {
    font-weight: 700 !important;
}

/* Unread icon: orange */
#messagelist tr.unread td.subject span.msgicon.status:before,
.messagelist td.subject span.msgicon.status.unread:before {
    color: var(--pm-orange) !important;
}

/* Compact row height */
body.task-mail .listing tbody td,
body.task-mail .listing li {
    line-height: 26px;
}

/* Sorting header hover (flag/attachment) */
th#rcmflag:hover,
th#rcmattachment:hover {
    cursor: pointer;
    text-decoration: underline;
}

/* Page navigation footer */
#layout-list > .footer,
#countcontrols {
    background: #f8f8f8 !important;
    border-top: 1px solid #e0e0e0 !important;
    font-size: 0.78rem !important;
    color: #666 !important;
    padding: 4px 10px !important;
}

.pagenav-text {
    font-size: 0.8rem;
    color: #666;
}


/* =============================================================================
   9. PREVIEW PANE
   ============================================================================= */

html body #layout-content {
    background-color: #fff !important;
}

#layout-content > .header {
    background: #f8f8f8 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    padding: 6px 14px !important;
}

#layout-content > .content,
#messagecontent,
#messagecontframe,
.message-content,
html body .iframe-wrapper,
html body .iframe-wrapper iframe,
iframe#messageframe {
    background: #fff !important;
    background-color: #fff !important;
}

/* Watermark: hidden */
html body .watermark,
html body div.watermark,
html body.task-mail .watermark {
    background-color: #fff !important;
    background-image: none !important;
    opacity: 0 !important;
}

/* Force light color-scheme on message iframe */
html body #messagecontframe {
    color-scheme: light !important;
}

/* Message header */
#message-header {
    background: #fafafa !important;
    border-bottom: 1px solid #eee !important;
    padding: 10px 16px !important;
}

#message-header .subject {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #222 !important;
}

#message-header .header-content span {
    color: #555 !important;
    font-size: 0.83rem !important;
}

/* Message action buttons (reply, forward, delete) */
#message-header-aside {
    display: flex !important;
    gap: 2px !important;
}

#message-header-aside a.button {
    color: #555 !important;
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
}

#message-header-aside a.button:hover {
    color: var(--pm-navy) !important;
    background: #e8edf8 !important;
    border-radius: 4px !important;
}

#message-toolbar a.button { color: #555; }
#message-toolbar a.button:hover { color: var(--pm-navy); }

/* Splitter between list and preview */
.column-resizer-horizontal {
    background: #e0e0e0 !important;
    height: 6px !important;
    cursor: row-resize !important;
    border-top: 1px solid #d0d0d0 !important;
    display: block !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.column-resizer-horizontal:hover {
    background: #c0c8d0 !important;
}

/* Splitter subtle borders */
#layout-list,
#layout-content {
    border-color: #e0e4ea !important;
    outline: none !important;
}

/* Content area constraints */
#layout-content .boxcontent { max-height: 80vh; }
#layout-content > .content { overflow-x: hidden; }


/* =============================================================================
   10. TOOLBAR BUTTONS
   ============================================================================= */

/* Generic toolbar buttons: transparent bg, #444 text, NO underline */
.toolbar a.button {
    color: #444 !important;
    font-size: 0.78rem !important;
    border-radius: 4px !important;
    transition: all 0.15s !important;
    padding: 4px 8px !important;
    background-color: transparent !important;
    border: none !important;
    text-decoration: none !important;
}

.toolbar a.button:hover {
    color: var(--pm-navy) !important;
    background-color: #e8edf8 !important;
    text-decoration: none !important;
}

.toolbar a.button::before { color: #555 !important; }
.toolbar a.button:hover::before { color: var(--pm-navy) !important; }

/* Mail toolbar buttons: transparent */
html body #mailtoolbar a.button {
    background-color: transparent !important;
    border: none !important;
}

/* Compose: orange */
a.button.compose,
.toolbar a.compose {
    background-color: var(--pm-orange) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
}

a.button.compose:hover,
.toolbar a.compose:hover {
    background-color: #e88700 !important;
}

a.button.compose::before,
a.button.compose span.inner,
.toolbar a.compose span.inner {
    color: #fff !important;
}

/* Select/Threads/Options/Mark/More: subtle border style, NO underline */
/* Broad selectors to cover both #mailtoolbar and #layout-list .header */
a.button.select,
a.button.threads,
a.button.options,
a.markmessage,
a.button.markmessage,
a.more,
a.button.more,
#mailtoolbar .markmessage,
#mailtoolbar .more {
    background: transparent !important;
    color: #555 !important;
    border: 1px solid #ddd !important;
    font-size: 0.75rem !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
}

a.button.select span,
a.button.threads span,
a.button.options span,
a.markmessage span,
a.button.markmessage span,
a.more span,
a.button.more span,
#mailtoolbar .markmessage span,
#mailtoolbar .more span {
    color: #444 !important;
    text-decoration: none !important;
}

a.button.select:hover,
a.button.threads:hover,
a.button.options:hover,
a.markmessage:hover,
a.button.markmessage:hover,
a.more:hover,
a.button.more:hover,
#mailtoolbar .markmessage:hover,
#mailtoolbar .more:hover {
    background: #e8edf8 !important;
    border-color: var(--pm-navy) !important;
    color: var(--pm-navy) !important;
    text-decoration: none !important;
}

/* Reply-all button: enough room */
html body .toolbar a.button.reply-all {
    max-width: 120px !important;
    overflow: visible !important;
}


/* =============================================================================
   11. LINKS, BUTTONS, TOGGLES, BADGES
   ============================================================================= */

/* Links */
a { color: var(--pm-navy); }
a:hover, a:focus { color: var(--pm-orange); }

/* Focus-visible: visible outline for keyboard navigation */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--pm-navy) !important;
    outline-offset: 2px !important;
}

/* Primary action buttons: navy bg, hover -> orange */
.mainaction a.button,
a.button.mainaction,
.formbuttons .mainaction,
.formbuttons .button.mainaction,
.ui-dialog .mainaction {
    background-color: var(--pm-navy) !important;
    border-color: var(--pm-navy) !important;
    color: var(--pm-white) !important;
}

.mainaction a.button:hover,
a.button.mainaction:hover,
.formbuttons .mainaction:hover,
.formbuttons .button.mainaction:hover,
.ui-dialog .mainaction:hover,
.mainaction a.button:focus,
a.button.mainaction:focus,
.formbuttons .mainaction:focus {
    background-color: var(--pm-orange) !important;
    border-color: var(--pm-orange) !important;
    color: var(--pm-white) !important;
}

/* Bootstrap .btn-primary: orange with dark text for contrast */
.btn-primary {
    background: var(--pm-orange) !important;
    border: none !important;
    color: var(--pm-navy-dark) !important;
}

.btn-primary:hover {
    background: var(--pm-orange-dark) !important;
    color: var(--pm-navy-dark) !important;
}

.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 151, 0, 0.35) !important;
}

.btn-danger {
    color: #fff;
    background: #ff5552;
    border-color: #ff5552;
}

/* Disabled primary button */
.action-edit-folder .btn-primary.disabled {
    background: #ddd !important;
    cursor: default;
}

/* Checkboxes/toggles: orange when checked */
.custom-control-input:checked ~ .custom-control-label::before,
input[type="checkbox"]:checked + label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked:not(.disabled) ~ .custom-control-label::before {
    background-color: var(--pm-orange) !important;
    border-color: var(--pm-orange) !important;
}

.custom-switch .custom-control-input ~ .custom-control-label:before {
    background-color: #fff;
    border: #ddd solid 1px;
}

.custom-switch .custom-control-input ~ .custom-control-label:after {
    background-color: #ddd;
}

/* Tabs: navy active border-bottom */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    border-bottom-color: var(--pm-navy) !important;
    color: var(--pm-navy) !important;
}

/* Badge: orange bg with dark text for contrast */
.badge-primary,
.badge {
    background-color: var(--pm-orange) !important;
    color: var(--pm-navy-dark) !important;
}

/* Spinners/progress */
.spinner-border,
.progress-bar {
    color: var(--pm-navy) !important;
    background-color: var(--pm-navy) !important;
}

/* Logo sizing (post-login) */
#logo {
    max-height: 40px;
    width: auto;
}


/* =============================================================================
   12. MENU HOVERS & POPOVERS
   ============================================================================= */

/* ONLY popup/dropdown menus — NOT the main toolbar (#mailtoolbar has .menu class) */
.popupmenu li a:hover,
.popupmenu li a.active,
.popupmenu .menu a:hover,
.popupmenu .menu a.active,
.popupmenu .menu a:focus,
#layout-menu .menu a:hover,
#layout-menu .menu a.active {
    background-color: var(--pm-navy) !important;
    color: var(--pm-white) !important;
}

/* Popover header: navy bg, white text */
.popover-header:not(.top-main-header) {
    background-color: var(--pm-navy) !important;
    color: #fff !important;
    font-size: 0.82rem !important;
}

.popupmenu .listing li.selected {
    color: #2c363a !important;
}


/* =============================================================================
   13. SEARCH BAR
   ============================================================================= */

.searchbar { background: transparent !important; }

.searchbar input {
    border-radius: 18px !important;
    border: 1px solid #ddd !important;
    font-size: 0.82rem !important;
    padding: 5px 14px 5px 32px !important;
    background-color: #fff !important;
}

.searchbar input:focus {
    border-color: var(--pm-navy) !important;
    box-shadow: 0 0 0 2px rgba(2,44,116,0.12) !important;
}


/* =============================================================================
   14. SCROLLBAR
   ============================================================================= */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #999; }
::-webkit-scrollbar-track { background: #f5f5f5; }


/* =============================================================================
   15. LAYOUT HELPERS
   ============================================================================= */

/* Flex-box for list + content — MAIL TASK ONLY */
body.task-mail .flex-box {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.task-mail .flex-box > #layout-list,
body.task-mail .flex-box + #layout-content,
body.task-mail #layout-list[style],
body.task-mail #layout-content[style] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.task-mail .flex-box > #layout-list {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 auto !important;
}

#layout-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}

@media screen and (min-width: 1200px) {
    body.task-mail #layout-list.layout-list {
        max-height: 100%;
        width: 100%;
    }

    body.task-mail .flex-box {
        display: flex;
        flex-direction: column;
    }
}


/* =============================================================================
   16. MISC UX FIXES
   ============================================================================= */

/* --- Compose form: labels wider, sidebar text no-break --- */
#compose-content .col-form-label,
body.action-compose .col-form-label {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 55px !important;
    padding-right: 8px !important;
}

/* Compose sidebar options — prevent ugly word breaks */
#compose-content #composeoptionstoggle,
#compose-content .formcontent label,
#composebodycontainer + div label,
.compose-options label {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    white-space: normal !important;
}

/* Attachment list */
#attachment-list {
    max-height: 150px;
    overflow-y: auto;
}

#attachment-list li { display: flex; }
#attachment-list li a.attachmenuload { margin-left: auto; }
.attachmentslist li:before { width: 1rem; }

/* Attachment icon in message list */
td.attachment span.attachment:before {
    content: "\f0c6";
    font-size: 1.25em;
    display: block;
    float: left;
    width: 1.18em;
    font-family: 'Icons';
    font-style: normal;
    font-weight: 900;
    text-decoration: inherit;
    text-align: center;
    speak: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* Flag colors (cl_1 through cl_10) */
.flag .flagged.cl_1  { color: #FF1D1D !important; }
.flag .flagged.cl_2  { color: #458BD7 !important; }
.flag .flagged.cl_3  { color: #96BE1C !important; }
.flag .flagged.cl_4  { color: #A7A7A7 !important; }
.flag .flagged.cl_5  { color: #B65B09 !important; }
.flag .flagged.cl_6  { color: #1BD0C6 !important; }
.flag .flagged.cl_7  { color: #F37F17 !important; }
.flag .flagged.cl_8  { color: #B5178E !important; }
.flag .flagged.cl_9  { color: #1FC2FF !important; }
.flag .flagged.cl_10 { color: #ECCA31 !important; }

/* Flagged rows: don't override text color */
.messagelist tr.flagged td:not(.flag),
.messagelist tr.flagged td.subject span.subject a,
.messagelist tr.flagged td.subject span.date,
.messagelist tr.flagged td.subject span.fromto {
    color: unset;
}

/* msgicon position */
span.msgicon { position: relative; }

/* Back to list button */
.back-to-maillist {
    padding: 15px;
    display: flex;
    color: #2c363a;
    font-weight: bold;
    margin: auto;
}

/* Calendar fixes */
#layout-content #calendar {
    position: relative !important;
    left: unset;
}

#calendar .fc-scroller { height: 100% !important; }

#calendarslist li.selected { background-color: #e8edf8 !important; }
#calendarslist li .calname { background-color: transparent !important; }
#calendarslist li { background-color: #f0f0f0 !important; }

/* Identity table */
#identities-table td.deletable { display: none; }

/* Show URL link */
a.showurl { display: none !important; }

/* Message page nav */
.message-page-nav {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    margin: 0 auto;
}

/* Datepicker */
#layout #datepicker .ui-datepicker-activerange a.ui-state-active,
#datepicker .ui-datepicker-activerange a {
    background-color: #e8edf8 !important;
    color: #000 !important;
}

/* Zip download button */
.button.zipdownload {
    text-align: right;
    margin-bottom: .5rem;
    width: 100%;
    max-width: 350px;
}

/* Alarm button */
.alarm-action-dismiss { margin-right: 5px; }

/* Filter form cursors */
#addRule, #addAction, #delRule, #deleteAction { cursor: pointer; }

/* Form checkboxes/radios sizing */
input[type=checkbox].form-control,
input[type=radio].form-control { width: auto; }

/* Folder back button icon */
.button.icon.back-sidebar-button.folders:before {
    content: "\f07c" !important;
    display: inline-table;
}

/* Action show overflow */
.action-show #layout { overflow-y: auto; }

/* Identity image upload */
.action-edit-identity #imageuploadform > .custom-file { display: none; }

/* Recipient input */
.expandable-content .recipient-input {
    max-height: 56px;
    overflow-y: scroll;
}


/* =============================================================================
   17. DARK MODE OVERRIDE (FORCE LIGHT)
   ============================================================================= */

html.dark-mode {
    --pm-navy: #022c74;
    --pm-orange: #ff9700;
}

html.dark-mode body,
html.dark-mode #layout,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content {
    background-color: #fff !important;
    color: #2b3034 !important;
}

html.dark-mode .header,
html.dark-mode #layout > .header {
    background-color: #f4f4f4 !important;
    color: #2b3034 !important;
}

html.dark-mode .header a,
html.dark-mode #layout > .header a {
    color: #2b3034 !important;
}

html.dark-mode a { color: var(--pm-navy) !important; }

html.dark-mode .listing li,
html.dark-mode .listing tr td {
    background-color: #fff !important;
    color: #2b3034 !important;
}

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

html.dark-mode .formbuttons .mainaction,
html.dark-mode a.button.mainaction {
    background-color: var(--pm-navy) !important;
    border-color: var(--pm-navy) !important;
    color: #fff !important;
}

html.dark-mode #login-form input.form-control {
    background-color: #fff !important;
    color: #2b3034 !important;
    border-color: #ddd !important;
}

html.dark-mode .task-login #layout-content {
    background-color: var(--pm-navy) !important;
}


/* =============================================================================
   18. RESPONSIVE
   ============================================================================= */

/* --- Mobile (<= 768px) --- */
@media screen and (max-width: 768px) {
    /* Login: hide promo panel, stack vertically */
    #login-split { flex-direction: column; }
    #login-promo { display: none; }
    #login-main { flex: 1; padding: 30px 20px; }
    .login-main-inner { max-width: 100%; }

    /* Topbar: compact 44px */
    html body div#pm-topbar {
        padding: 0 10px !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    html body div#pm-topbar .pm-topbar-logo svg {
        width: 140px !important;
        height: 28px !important;
    }

    html body div#pm-topbar .pm-topbar-nav a,
    html body div#pm-topbar .pm-topbar-nav span.user {
        font-size: 0.72rem !important;
        padding: 4px 6px !important;
    }

    /* Hide username on mobile */
    html body div#pm-topbar .pm-topbar-nav span.user {
        display: none !important;
    }

    /* Layout adjusts to 44px topbar */
    div#layout, #layout {
        top: 44px !important;
        height: calc(100vh - 44px) !important;
    }
}

/* --- Tablet (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    #login-promo { flex: 0 0 35%; }
    .promo-logo svg { width: 160px; }
    .promo-slide h2 { font-size: 1.25rem; }
}

/* --- Small mobile (<= 480px) --- */
@media screen and (max-width: 480px) {
    .mail-menu:not(.task-menu),
    .addressbook-menu,
    #calendartoolbar > a {
        display: none !important;
    }

    #message-header #message-header-aside a.button.extwin { display: none; }
    #message-header .subject { margin-left: 10px; }
    #layout div > .header.compose-toolbar { display: none !important; }
}