/* PurpleMarket Comprehensive UI Theme for Roundcube Elastic */
:root {
    --pm-dark: #0d0218;
    --pm-purple: #a871eb;
    --pm-purple-dark: #6b21c4;
    --pm-purple-light: rgba(168, 113, 235, 0.15);
    --pm-purple-bright: #d8b4fe;
    --pm-surface: rgba(20, 5, 45, 0.5);
    --pm-background: transparent;
    --pm-text-dark: #ffffff;
    --pm-text-muted: #b49ecc;
    --pm-border: rgba(168, 113, 235, 0.15);
}

/* 1. GLOBAL LAYOUT & SIDEBAR */
::selection { background-color: var(--pm-purple); color: white; }
::-moz-selection { background-color: var(--pm-purple); color: white; }

/* Sidebar full-width Logo (Desktop & Mobile) */
html body #layout-menu .header,
html body #layout-menu .popover-header {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important; /* Force no padding */
    margin: 0 !important;
}
html body #layout-menu .header a.button.logo,
html body #layout-menu .popover-header a.logo,
html body #layout-menu .popover-header img#logo {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important; /* Force no padding */
    margin: 0 !important; /* Force no margin */
    box-sizing: border-box !important;
    text-align: center !important;
}
html body #layout-menu .header a.button.logo img,
html body #layout-menu .popover-header a.logo img,
html body #layout-menu .popover-header img#logo,
html body .logo img, html body .brand img {
    width: 100% !important;
    max-width: 100% !important; /* Removing previous 80% restrictions */
    height: auto !important; /* Auto height to preserve aspect ratio */
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important; /* Force no margin */
    padding: 0 !important; /* Force no padding */
    display: block !important;
}

body { 
    background: linear-gradient(145deg, #130324 0%, #2c0b62 50%, #1a0533 100%) !important; 
    background-attachment: fixed !important;
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif !important; 
    color: #e0ccff !important;
}

#layout-menu, #layout-sidebar, #layout-list, #layout-content {
    background: transparent !important;
}

#layout-menu { 
    background: linear-gradient(180deg, rgba(15, 3, 30, 0.8) 0%, rgba(10, 2, 25, 0.9) 100%) !important; 
    border-right: 1px solid rgba(168, 113, 235, 0.15) !important; 
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 4px 0 25px rgba(0,0,0,0.4) !important;
    z-index: 100 !important;
}

#layout-sidebar {
    background: rgba(20, 5, 45, 0.4) !important; 
    border-right: 1px solid rgba(168, 113, 235, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

#layout-list {
    background: rgba(25, 8, 50, 0.3) !important; 
    border-right: 1px solid rgba(168, 113, 235, 0.1) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

#layout-content {
    background: rgba(15, 3, 30, 0.45) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.header { 
    border-bottom: 1px solid rgba(168, 113, 235, 0.15) !important; 
    background: rgba(20, 5, 45, 0.5) !important; 
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important; 
}

/* Force text colors in layout */
#layout-sidebar, #layout-list, #layout-content, .header, .header-title {
    color: #e0ccff !important;
}

/* Compose Button - Matte and Perfectly Centered */
html body #layout-menu .compose { 
    background-color: #8a3ffc !important; /* Matte Purple */
    background-image: none !important;
    color: white !important; 
    border: none !important; 
    border-radius: 12px !important; 
    box-shadow: none !important; 
    transition: background-color 0.2s ease !important; 
    font-weight: 600 !important; 
    margin: 10px auto 15px auto !important; /* Auto margins for perfect horizontal centering */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important; /* Fixed dimensions to prevent squishing */
    height: 60px !important;
    padding: 0 !important;
}
html body #layout-menu .compose:hover { 
    background-color: #a56eff !important; 
    transform: none !important; 
    box-shadow: none !important; 
}

/* Interactive Sidebar Menu Links */
#layout-menu .menu a { 
    color: #b49ecc !important; 
    transition: all 0.2s ease !important;
    border-radius: 8px !important;
}
#layout-menu .menu a:hover { 
    color: #ffffff !important; 
    background: rgba(168, 113, 235, 0.12) !important; 
}
#layout-menu .menu a.selected { 
    color: #ffffff !important; 
    background: linear-gradient(135deg, rgba(168,113,235,0.2) 0%, rgba(107,33,196,0.15) 100%) !important; 
    font-weight: 600 !important;
}
/* Active pill indicator */
#layout-menu .menu a.selected::after {
    display: none !important; /* Disable the broken vertical bar */
}

/* 2. MAILBOX LIST (FOLDERS) */
#mailboxlist li > a { transition: all 0.2s ease !important; border-radius: 6px !important; margin: 2px 8px !important; padding-left: 12px !important; color: #d4bfff !important; }
#mailboxlist li:hover > a { background-color: rgba(168, 113, 235, 0.1) !important; color: #ffffff !important; }
#mailboxlist li.selected > a { background-color: rgba(168, 113, 235, 0.25) !important; color: #ffffff !important; font-weight: 700 !important; }
.unreadcount { background-color: var(--pm-purple-dark) !important; border-radius: 12px !important; padding: 2px 8px !important; font-weight: 600 !important; font-size: 0.75rem !important; color: white !important; box-shadow: 0 2px 8px rgba(107, 33, 196, 0.4) !important; }

/* 3. MESSAGE LIST - High specificity overrides to beat Elastic dark.less */
html body #layout-list table.records-table,
#layout-list .messagelist { 
    background: transparent !important; 
    color: #e0ccff !important;
}

/* All cells default */
html body #layout-list .messagelist td,
html body #layout-list .listing tbody td,
html body #layout-list .listing li a {
    color: #e0ccff !important;
    border-color: rgba(168, 113, 235, 0.1) !important;
    background: transparent !important;
}

/* Sender name, subject, date in normal messages */
html body #layout-list .messagelist tr:not(.flagged):not(.deleted) td.subject span.size,
html body #layout-list .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
html body #layout-list .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,
html body #layout-list .messagelist span.attachment span {
    color: #b49ecc !important;
}

html body #layout-list .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status {
    color: #a871eb !important;
}

/* Unread messages - brighter */
html body #layout-list .messagelist tr.unread td,
html body #layout-list .messagelist tr.unread td.subject span.fromto {
    color: #ffffff !important;
    font-weight: 600 !important;
    background-color: rgba(168, 113, 235, 0.05) !important;
}

html body #layout-list .messagelist tr.unread td.subject span.date {
    color: #d4bfff !important;
}

/* Hover effect */
html body #layout-list .listing li:hover > a,
html body #layout-list .messagelist tr:hover td,
html body #layout-list .messagelist tr:not(.flagged):not(.deleted):hover td.subject span.fromto,
html body #layout-list .messagelist tr:not(.flagged):not(.deleted):hover td.subject span.date {
    background-color: rgba(168, 113, 235, 0.12) !important;
    color: #ffffff !important;
}

/* Selected row */
html body #layout-list .listing li.selected,
html body #layout-list .listing li.selected > a,
html body #layout-list .listing tr.selected td,
html body #layout-list .messagelist tr.selected td {
    background-color: rgba(168, 113, 235, 0.25) !important;
    color: #ffffff !important;
    border-color: rgba(168, 113, 235, 0.3) !important;
}

html body #layout-list .messagelist tr.selected td.subject a,
html body #layout-list .messagelist tr.selected td.subject span.msgicon.status {
    color: #ffffff !important;
}

/* The unread dot/icon */
#layout-list .messagelist td.subject span.msgicon.unread,
#layout-list .messagelist td.subject span.msgicon.status.unread { 
    color: #a871eb !important; 
}


/* 4. TOOLBARS & SEARCH - using exact Elastic HTML class names */
/* The search form has class 'searchbar' as a wrapper */
.searchbar {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(168, 113, 235, 0.25) !important;
    border-radius: 30px !important;
}
.searchbar form::before,
.searchbar a,
.searchbar input,
.searchbar input::placeholder { 
    color: #d4bfff !important;
}
.searchbar input { background: transparent !important; }
.searchbar input::placeholder { color: rgba(212, 191, 255, 0.5) !important; }
.searchbar:focus-within {
    background-color: rgba(168, 113, 235, 0.1) !important;
    border-color: #a871eb !important;
    box-shadow: 0 0 0 3px rgba(168, 113, 235, 0.2) !important;
}

.toolbar a.button { border-radius: 8px !important; transition: all 0.2s ease !important; margin: 0 2px !important; }

/* Elastic renders button icons as i.icon::before or a.button::before */
html body .header a.button,
html body .header a.button::before,
html body .menu.toolbar a,
html body .menu.toolbar a::before {
    color: #c4a8f0 !important;
}
html body .header a.button:not(.disabled):hover,
html body .header a.button:not(.disabled):hover::before,
html body .menu.toolbar a:not(.disabled):hover,
html body .menu.toolbar a:not(.disabled):hover::before {
    color: #ffffff !important;
    background-color: rgba(168, 113, 235, 0.15) !important;
}

/* 5. PREVIEW PANE (MESSAGE VIEW) */
.message-headers { padding: 20px !important; background: rgba(20, 5, 45, 0.4) !important; border-radius: 12px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; border: 1px solid rgba(168, 113, 235, 0.15) !important; margin: 15px !important; margin-bottom: 25px !important; color: #e0ccff !important; backdrop-filter: blur(5px) !important; }
.message-partheaders { background-color: rgba(10, 2, 25, 0.3) !important; border: 1px solid rgba(168, 113, 235, 0.1) !important; border-radius: 8px !important; padding: 12px !important; margin: 15px !important; color: #b49ecc !important; }

/* Links and buttons inside message headers */
html body #layout-content .message-headers a,
html body #layout-content .message-headers a::before,
html body #layout-content .subject a { color: #c4a8f0 !important; transition: color 0.2s; }
html body #layout-content .message-headers a:hover,
html body #layout-content .subject a:hover { color: #ffffff !important; }

/* Blockquotes inside messages */
html body .rcmBody blockquote,
html body blockquote { background-color: rgba(168, 113, 235, 0.05) !important; border-left: 4px solid var(--pm-purple) !important; color: #b49ecc !important; padding: 10px 15px !important; margin: 10px 0 !important; border-radius: 0 8px 8px 0 !important; }

/* Watermark for empty preview pane (Message Content) */
/* The empty pane is actually an iframe loading watermark.html. 
   We hide the iframe so its hardcoded solid background doesn't block our glassmorphism, 
   and instead apply the watermark to the parent container! */
html body #layout-content:has(iframe[src*="watermark.html"]) {
    background-image: url('../../skins/elastic/images/logo.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 300px auto !important; /* Reverted to elegant centered size */
}

html body #layout-content:has(iframe[src*="watermark.html"])::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background-color: rgba(13, 2, 24, 0.75) !important; /* Oscurecer un poco el fondo para que resalte el logo blanco */
    z-index: -1 !important;
    pointer-events: none !important;
}

html body #layout-content iframe[src*="watermark.html"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Fallback for the actual .watermark class if used elsewhere */
.watermark { 
    background-image: url('../../skins/elastic/images/logo.png') !important; 
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 300px auto !important; 
    opacity: 0.15 !important; 
}
.watermark > svg, .watermark > img { 
    display: none !important; 
}

/* 6. COMPOSE (EDITOR & RECIPIENTS) */
.compose-headers { background: rgba(20, 5, 45, 0.4) !important; backdrop-filter: blur(10px) !important; border-bottom: 1px solid rgba(168,113,235,0.15) !important; padding: 10px 20px !important; color: #e0ccff !important; }
.recipient-input { border-radius: 8px !important; background-color: rgba(10, 2, 25, 0.5) !important; padding: 4px 12px !important; border: 1px solid rgba(168,113,235,0.2) !important; color: #ffffff !important; }
.recipient-input:focus-within { background-color: rgba(20, 5, 45, 0.7) !important; border-color: var(--pm-purple) !important; box-shadow: 0 0 0 3px rgba(168, 113, 235, 0.15) !important; }

/* 7. MODALS, TOASTS & DROPDOWNS */
.ui-dialog { border-radius: 16px !important; box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important; border: 1px solid rgba(168, 113, 235, 0.2) !important; overflow: hidden !important; background: rgba(20, 5, 45, 0.85) !important; backdrop-filter: blur(15px) !important; }
.ui-dialog .ui-dialog-titlebar { background-color: transparent !important; border-bottom: 1px solid rgba(168, 113, 235, 0.15) !important; padding: 16px 24px !important; font-weight: 600 !important; color: #ffffff !important; }
.popover { border-radius: 14px !important; box-shadow: 0 15px 40px rgba(0,0,0,0.4), 0 0 15px rgba(168, 113, 235, 0.05) !important; border: 1px solid rgba(168, 113, 235, 0.25) !important; background: linear-gradient(145deg, rgba(20,5,45,0.95) 0%, rgba(35,10,65,0.95) 100%) !important; backdrop-filter: blur(20px) !important; padding: 6px !important; }
.popover .menu a { transition: all 0.2s !important; border-radius: 8px !important; margin: 2px 4px !important; color: #d4bfff !important; padding: 8px 16px !important; }
.popover .menu a:hover { background-color: rgba(168, 113, 235, 0.2) !important; color: #ffffff !important; }

/* 8. FORMS (INPUTS, BUTTONS, CHECKBOXES) */
.form-control, input[type="text"], input[type="password"], select, textarea { border-radius: 8px !important; border: 1px solid rgba(168, 113, 235, 0.2) !important; background: rgba(10, 2, 25, 0.5) !important; color: #ffffff !important; transition: all 0.3s ease !important; }
.form-control:focus, input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus { border-color: var(--pm-purple) !important; box-shadow: 0 0 0 3px rgba(168, 113, 235, 0.15) !important; outline: none !important; background: rgba(20, 5, 45, 0.7) !important; }
.btn-primary { background: linear-gradient(135deg, #a871eb 0%, #6b21c4 100%) !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; color: white !important; box-shadow: 0 4px 10px rgba(107,33,196,0.3) !important; transition: all 0.3s ease !important; }
.btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 15px rgba(107,33,196,0.5) !important; }
.nav-pills .nav-link { border-radius: 8px !important; transition: all 0.2s !important; color: #b49ecc !important; }
.nav-pills .nav-link.active { background-color: rgba(168, 113, 235, 0.3) !important; color: #ffffff !important; }

/* 9. CUSTOM SCROLLBARS (MODERN & GLASSMORPHIC) */
/* Firefox Support */
* {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(168, 113, 235, 0.4) rgba(0, 0, 0, 0.15) !important;
}
/* WebKit Support */
::-webkit-scrollbar, *::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
::-webkit-scrollbar-track, *::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.15) !important; border-radius: 10px !important; border: none !important; }
::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb { background-color: rgba(168, 113, 235, 0.4) !important; border-radius: 10px !important; border: 2px solid rgba(20, 5, 45, 0.5) !important; }
::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:hover { background-color: rgba(168, 113, 235, 0.8) !important; border: 2px solid rgba(20, 5, 45, 0.8) !important; }
/* Override Elastic's custom classes */
html body .webkit-scroller::-webkit-scrollbar-thumb { background-color: rgba(168, 113, 235, 0.4) !important; border: 2px solid rgba(20, 5, 45, 0.5) !important; }

/* 10. COMPOSE & TINYMCE OVERRIDES */
.tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-menubar { background-color: rgba(20, 5, 45, 0.4) !important; backdrop-filter: blur(5px) !important; border-bottom: 1px solid rgba(168,113,235,0.15) !important; }
.tox .tox-tbtn { border-radius: 6px !important; color: #c4a8f0 !important; }
.tox .tox-tbtn svg { fill: #c4a8f0 !important; }
.tox .tox-tbtn:hover { background-color: rgba(168,113,235,0.2) !important; color: #ffffff !important; }
.tox .tox-tbtn:hover svg { fill: #ffffff !important; }
.recipient-list .recipient { background-color: rgba(168,113,235,0.2) !important; color: #ffffff !important; border-radius: 8px !important; padding: 4px 10px !important; font-size: 13px !important; font-weight: 500 !important; border: 1px solid rgba(168,113,235,0.3) !important; }

/* 11. FILE DROPZONE & ATTACHMENTS */
.dropzone { border: 2px dashed rgba(168,113,235,0.5) !important; border-radius: 12px !important; background-color: rgba(10, 2, 25, 0.3) !important; color: #c4a8f0 !important; transition: all 0.3s ease !important; }
.dropzone:hover, .dropzone.hover { background-color: rgba(168,113,235,0.1) !important; border-color: #a871eb !important; }
#attachment-list li { border-radius: 8px !important; background-color: rgba(20, 5, 45, 0.5) !important; border: 1px solid rgba(168,113,235,0.15) !important; margin-bottom: 5px !important; padding: 8px 12px !important; color: #d4bfff !important; }

/* 12. CONTACTS & AVATARS */
.contactphoto { border-radius: 50% !important; overflow: hidden !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; border: 2px solid white !important; }
#contactdetails { background-color: white !important; border-radius: 12px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important; padding: 25px !important; border: 1px solid var(--pm-border) !important; margin: 15px !important; }
.form-group label { color: var(--pm-text-muted) !important; font-weight: 500 !important; font-size: 0.9rem !important; }

/* 13. CHECKBOXES & TOGGLES (APPLE STYLE) */
input[type="checkbox"] { appearance: none !important; width: 18px !important; height: 18px !important; border-radius: 4px !important; border: 2px solid #cbd5e1 !important; background-color: white !important; cursor: pointer !important; position: relative !important; top: 3px !important; transition: all 0.2s !important; }
input[type="checkbox"]:checked { background-color: var(--pm-purple-dark) !important; border-color: var(--pm-purple-dark) !important; }
input[type="checkbox"]:checked::after { content: '' !important; position: absolute !important; left: 4px !important; top: 1px !important; width: 5px !important; height: 9px !important; border: solid white !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important; }
input[type="radio"] { appearance: none !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; border: 2px solid #cbd5e1 !important; background-color: white !important; cursor: pointer !important; position: relative !important; top: 3px !important; transition: all 0.2s !important; }
input[type="radio"]:checked { border-color: var(--pm-purple-dark) !important; border-width: 5px !important; }

/* 14. TOAST NOTIFICATIONS (ALERTS) */
.message { border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; border: none !important; padding: 12px 20px !important; font-weight: 500 !important; animation: slideDown 0.4s ease-out !important; }
.message.information { background-color: #3b82f6 !important; color: white !important; }
.message.error { background-color: #ef4444 !important; color: white !important; }
.message.success { background-color: #10b981 !important; color: white !important; }
.message.warning { background-color: #f59e0b !important; color: white !important; }
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* 15. GLASSMORPHISM POPOVERS (CONTEXT MENUS) */
/* (Styles merged into other sections to prevent box-in-box) */

/* 16. MODAL OVERLAY BLUR (DIALOGS) */
.ui-widget-overlay { background: rgba(19, 3, 36, 0.4) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; opacity: 1 !important; }

/* 17. SEGMENTED CONTROLS (SETTINGS TABS) */
.nav-pills { background-color: rgba(0,0,0,0.04) !important; padding: 4px !important; border-radius: 12px !important; display: inline-flex !important; }
.nav-pills .nav-link { color: var(--pm-text-muted) !important; font-weight: 500 !important; background: transparent !important; margin: 0 2px !important; border-radius: 8px !important; }
.nav-pills .nav-link:hover { color: var(--pm-purple-dark) !important; }
.nav-pills .nav-link.active { background-color: white !important; color: var(--pm-purple-dark) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; }

/* 18. ADVANCED SEARCH DROPDOWN */
#searchmenu, .searchbar-menu { border-radius: 14px !important; box-shadow: 0 15px 40px rgba(0,0,0,0.5) !important; border: 1px solid rgba(168, 113, 235, 0.25) !important; margin-top: 10px !important; overflow: hidden !important; background: linear-gradient(145deg, rgba(20,5,45,0.95) 0%, rgba(35,10,65,0.95) 100%) !important; backdrop-filter: blur(15px) !important; color: #e0ccff !important; }
#searchmenu .form-group, .searchbar-menu .form-group { padding: 10px 15px !important; margin: 0 !important; border-bottom: 1px solid rgba(168,113,235,0.15) !important; }

/* ==============================
   19. LOGIN PAGE - PURPLEMARKET UI
   ============================== */

/* Background */
body.task-login,
body.task-login #layout,
body.task-login #layout-content,
body.task-login #layout-content.selected {
    background: linear-gradient(145deg, #130324 0%, #2c0b62 50%, #1a0533 100%) !important;
    min-height: 100vh !important;
}

/* Main Card - Removed for floating aesthetic */
body.task-login #login-form,
body.task-login .formcontent {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px !important;
}

/* Hide the bottom text ("Roundcube Webmail") */
body.task-login .formlinks,
body.task-login .bottom-text,
body.task-login #login-form .text-center.mt-3,
body.task-login .watermark-text,
body.task-login #bottomline,
body.task-login .about-link,
body.task-login .footer,
body.task-login #layout > div:last-child {
    display: none !important;
}

/* Unified Input Groups (Merging Icon and Input) */
body.task-login .input-group {
    background: rgba(10, 2, 25, 0.6) !important;
    border: 1px solid rgba(168, 113, 235, 0.3) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
}
body.task-login .input-group:focus-within {
    border-color: var(--pm-purple) !important;
    box-shadow: 0 0 0 3px rgba(168, 113, 235, 0.2) !important;
    background: rgba(20, 5, 45, 0.8) !important;
}

/* Remove default borders and backgrounds from inner elements */
body.task-login .input-group-text {
    background: transparent !important;
    border: none !important;
    color: rgba(168, 113, 235, 0.8) !important;
    padding-left: 15px !important;
    padding-right: 10px !important;
}
body.task-login .form-control,
body.task-login input[type="text"],
body.task-login input[type="password"] {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    padding: 12px 15px 12px 5px !important;
    border-radius: 0 !important;
    height: auto !important;
    font-size: 15px !important;
}

/* Chrome autofill fix to match the dark background */
body.task-login input:-webkit-autofill,
body.task-login input:-webkit-autofill:hover,
body.task-login input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #11041f inset !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Submit button - Elegant and compact */
body.task-login .btn-primary,
body.task-login button[type="submit"] {
    background: #8B40E6 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: white !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 10px !important;
    margin-top: 15px !important;
    width: 100% !important;
    box-shadow: 0 4px 15px rgba(139, 64, 230, 0.4) !important;
    transition: all 0.3s ease !important;
}
body.task-login .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(139, 64, 230, 0.6) !important;
    background: #9d56f0 !important;
}

/* Logo */
body.task-login #logo {
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 25px !important;
    filter: drop-shadow(0 4px 10px rgba(168, 113, 235, 0.3)) !important;
}

/* ==========================================================================
   INVINCIBLE OVERRIDES (BEATS ELASTIC LIGHT/DARK MODES)
   ========================================================================== */

/* Hide the Dark Mode / Light Mode toggle button */
a.button.theme, .theme-switch, #darkmode-toggle, a[name="theme"], .theme.dark { display: none !important; }

/* Reset body/background */
html body { background: linear-gradient(145deg,#130324 0%,#2c0b62 50%,#1a0533 100%) fixed !important; color: #e0ccff !important; }

/* Layout panels - transparent glass */
html body #layout-menu { background: rgba(10,2,25,0.65) !important; border-right: 1px solid rgba(168,113,235,0.15) !important; }
html body #layout-menu .footer, html body #layout-menu .menu, html body #layout-menu .content, html body #layout-menu .popover-header, html body #layout-menu .special-buttons { background: transparent !important; border: none !important; }
html body #layout-sidebar { background: rgba(20,5,45,0.45) !important; border-right: 1px solid rgba(168,113,235,0.1) !important; }
html body #layout-list { background: rgba(25,8,50,0.35) !important; border-right: 1px solid rgba(168,113,235,0.1) !important; }
html body #layout-content { background: rgba(15,3,30,0.45) !important; }
html body #layout > div > .header { background: rgba(20,5,45,0.6) !important; border-bottom: 1px solid rgba(168,113,235,0.15) !important; }
html body #layout > div > .footer { background: transparent !important; border-color: rgba(168,113,235,0.1) !important; }

/* (Fix Warped Logo block removed as it was conflicting with the new full-width rules) */

/* MESSAGE LIST */
html body .messagelist { color: #e0ccff !important; }
html body .listing tbody td { color: #d4bfff !important; border-color: rgba(168,113,235,0.1) !important; background: transparent !important; }
html body .listing li { border-color: rgba(168,113,235,0.08) !important; }
html body .listing li a { color: #d4bfff !important; }

/* Message list spans - dates, from, subject */
html body .messagelist tr:not(.flagged):not(.deleted) td.subject span.size { color: #9370bb !important; }
html body .messagelist tr:not(.flagged):not(.deleted) td.subject span.date { color: #9b80c8 !important; }
html body .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto { color: #c4a8f0 !important; }
html body .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status { color: #a871eb !important; }
html body .messagelist span.attachment span { color: #9370bb !important; }
html body .messagelist span.flag { color: #d4bfff !important; }

/* Unread */
html body .messagelist tr.unread td { background: rgba(168,113,235,0.06) !important; }
html body .messagelist td.subject span.fromto { color: #e0ccff !important; }
html body .messagelist td.subject span.date { color: #b49ecc !important; }
html body .messagelist td.subject a { color: #e0ccff !important; }

/* Hover */
html body .listing li:hover > a { background-color: rgba(168,113,235,0.12) !important; color: #ffffff !important; }
html body .messagelist tr:hover td { background: rgba(168,113,235,0.1) !important; }

/* Selected */
html body .listing li.selected > a { color: #ffffff !important; background-color: rgba(168,113,235,0.25) !important; }
html body .listing li.selected ul { background-color: transparent !important; }
html body .listing tr.selected td { background-color: rgba(168,113,235,0.25) !important; color: #ffffff !important; border-color: rgba(168,113,235,0.3) !important; }
html body .messagelist tr.selected td.subject a { color: #ffffff !important; }
html body .messagelist tr.selected td.subject span.msgicon.status { color: #ffffff !important; }

/* SEARCH BAR */
html body .searchbar { background-color: rgba(255,255,255,0.07) !important; border-color: rgba(168,113,235,0.3) !important; border-radius: 30px !important; }
html body .searchbar form::before { color: #c4a8f0 !important; }
html body .searchbar a { color: #c4a8f0 !important; }
html body .searchbar input { color: #e0ccff !important; background: transparent !important; }

/* TOOLBAR */
html body #taskmenu a, html body #taskmenu .special-buttons a { color: #b49ecc !important; background: transparent !important; }
html body #taskmenu a.selected { color: #ffffff !important; background: rgba(168,113,235,0.2) !important; }
html body #taskmenu a:hover, html body #taskmenu .special-buttons a:hover { color: #ffffff !important; background: rgba(168,113,235,0.12) !important; }
html body #taskmenu .action-buttons a { color: #a871eb !important; }

/* The Toolbar Container (Exclude sidebar taskmenu) */
html body .menu.toolbar:not(#taskmenu) { padding: 4px !important; display: flex !important; align-items: center !important; }

/* General Toolbar Buttons (Main toolbars only, exclude taskmenu) */
html body .menu.toolbar:not(#taskmenu) a.button { color: #c4a8f0 !important; border-radius: 8px !important; margin: 2px 4px !important; height: auto !important; padding: 6px 12px !important; display: inline-flex !important; align-items: center !important; transition: all 0.2s ease !important; background: transparent !important; }

/* Header Action Buttons (the ... menu, back arrows, etc in the top panels) */
/* DO NOT override display, padding, or height here to preserve Elastic's absolute positioning */
html body #layout > div > .header a.button { color: #c4a8f0 !important; background-color: transparent !important; transition: color 0.2s !important; }

/* Hover and Active States for Header Buttons */
html body #layout > div > .header a.button:not(.disabled):hover,
html body #layout > div > .header a.button.pressed,
html body #layout > div > .header a.button.active { color: #fff !important; background-color: rgba(168,113,235,0.15) !important; }

/* Hover and Active States for Main Toolbar Buttons */
html body .menu.toolbar a.button:not(.disabled):hover,
html body .menu.toolbar a.button.pressed,
html body .menu.toolbar a.button.active { color: #fff !important; background: rgba(168,113,235,0.2) !important; }

/* Dropbutton Groups (Split Buttons like Reply-All or Forward) */
html body .menu.toolbar .dropbutton { display: inline-flex !important; align-items: center !important; margin: 2px 4px !important; background: transparent !important; border-radius: 8px !important; overflow: hidden !important; }
html body .menu.toolbar .dropbutton a.button { margin: 0 !important; border-radius: 0 !important; }
html body .menu.toolbar .dropbutton a.button.drop { padding: 6px 4px !important; border-left: 1px solid rgba(168,113,235,0.2) !important; }
html body .menu.toolbar .dropbutton a.button:not(.disabled):hover { background: rgba(168,113,235,0.2) !important; }

/* FOLDER LIST */
html body .folderlist li a { color: #c4a8f0 !important; }
html body #mailboxlist li > a { color: #c4a8f0 !important; }
html body .folderlist li.selected > a { color: #ffffff !important; background: rgba(168,113,235,0.22) !important; }
html body #mailboxlist li.selected > a { color: #ffffff !important; background: rgba(168,113,235,0.22) !important; }
html body .folderlist li .unreadcount { background-color: #6b21c4 !important; color: #fff !important; }

/* SCROLLBAR */
html body ::-webkit-scrollbar-thumb { background-color: rgba(168,113,235,0.3) !important; border: 2px solid transparent !important; }
html body ::-webkit-scrollbar-track { background: transparent !important; }

/* ==================================================================
   UI OVERHAUL: DIALOGS, MODALS, BUTTONS, POPUPS (GLASSMORPHISM)
   ================================================================== */
        
/* 1. Modals & Dialogs - Flatter structure without box-in-box */
html body .ui-dialog, html body .modal-content { background: linear-gradient(145deg, rgba(60, 25, 110, 0.95) 0%, rgba(40, 10, 75, 0.98) 100%) !important; backdrop-filter: blur(15px) !important; border: 1px solid rgba(168,113,235,0.2) !important; border-radius: 12px !important; box-shadow: 0 15px 50px rgba(0,0,0,0.6), 0 0 20px rgba(168,113,235,0.15) !important; color: #ffffff !important; }
html body .ui-dialog .ui-dialog-titlebar, html body .modal-header { background: transparent !important; border-bottom: 1px solid rgba(168,113,235,0.2) !important; padding: 24px !important; position: relative !important; display: flex !important; align-items: center !important; }
html body .ui-dialog .ui-dialog-title { color: #ffffff !important; font-weight: 800 !important; font-size: 1.6rem !important; letter-spacing: -0.5px !important; font-family: 'Outfit', 'Inter', sans-serif !important; text-transform: capitalize !important; margin: 0 !important; line-height: 1 !important; }
html body .ui-dialog .ui-dialog-content:not(:has(iframe)), html body .modal-body { background: transparent !important; color: #ffffff !important; padding: 24px !important; }
html body .ui-dialog .ui-dialog-content:has(iframe) { background: transparent !important; padding: 0 !important; overflow: hidden !important; }

/* Kill the nested box effect inside modals and remove REPEATING backgrounds */
html body .ui-dialog fieldset, 
html body .ui-dialog .formcontent, 
html body .ui-dialog .propform,
html body .ui-dialog .propform.grouped,
html body .ui-dialog .tab-pane {
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 10px 0 !important;
}

/* FIX: Pre-formatted text, Textareas, and Raw Headers in Modals */
html body .ui-dialog pre,
html body .ui-dialog .headers-raw,
html body .ui-dialog textarea,
html body .ui-dialog .boxcontent > pre {
    background-color: rgba(10, 2, 25, 0.5) !important;
    background-image: none !important;
    border: 1px solid rgba(168, 113, 235, 0.3) !important;
    border-radius: 8px !important;
    color: #e0ccff !important;
    font-size: 14px !important;
    padding: 15px !important;
    margin: 0 !important;
    white-space: pre-wrap !important;
}

/* FIX: Universal Iframes inside dialogs (Message Headers, View Source, About) */
html body .ui-dialog iframe {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
}

html.iframe body {
    background: transparent !important;
    background-image: none !important;
    padding: 24px !important; /* Uniform padding inside the iframe to fix asymmetry */
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    color: #e0ccff !important;
}

html.iframe body .frame-content {
    background: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Raw headers specific text formatting */
html.iframe body.action-headers .frame-content,
html.iframe body.action-viewsource .frame-content {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

/* Specific fix for Elastic's pre striped background class if applied */
html body pre.striped, html.iframe body pre.striped { background-image: none !important; background-color: rgba(10, 2, 25, 0.5) !important; }

/* FIX: Invisible Table Headers & Rows inside Modals */
html body .ui-dialog table th, html.iframe body table th,
html body .ui-dialog .records-table th, html.iframe body .records-table th {
    color: #e0ccff !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(168, 113, 235, 0.3) !important;
    background: transparent !important;
}
html body .ui-dialog table td, html.iframe body table td,
html body .ui-dialog .records-table td, html.iframe body .records-table td {
    color: #d4bfff !important;
    border-color: rgba(168, 113, 235, 0.1) !important;
    background: transparent !important;
}

/* Modal Headers & Labels */
html body .ui-dialog label, 
html body .ui-dialog .title,
html body .ui-dialog legend {
    color: #d4bfff !important;
    font-weight: 500 !important;
}

/* Button pane fixed alignment */
html body .ui-dialog .ui-dialog-buttonpane, html body .modal-footer { 
    background: transparent !important; 
    border-top: 1px solid rgba(168,113,235,0.2) !important; 
    padding: 16px 24px 20px 24px !important; 
    margin: 0 !important; 
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}
html body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none !important;
    display: flex !important;
    gap: 12px !important;
    margin: 0 !important;
}

html body .ui-dialog .ui-dialog-titlebar-close { 
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 20px !important;
    width: 36px !important;
    height: 36px !important;
    background-color: rgba(255, 255, 255, 0.05) !important; 
    border-radius: 50% !important; 
    border: none !important; 
    color: #d4bfff !important; 
    transition: all 0.2s ease !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}
html body .ui-dialog .ui-dialog-titlebar-close:hover { 
    color: #ffffff !important; 
    background-color: rgba(255, 255, 255, 0.15) !important; 
    transform: translateY(-50%) scale(1.05) !important;
}
html body .ui-dialog .ui-dialog-titlebar-close::before { margin: 0 !important; font-size: 18px !important; }
html body .ui-dialog .ui-dialog-titlebar-close span.ui-button-text { display: none !important; }
html body .ui-widget-overlay { background: rgba(0,0,0,0.6) !important; backdrop-filter: blur(4px) !important; opacity: 1 !important; }

/* 2. Links & Text inside dialogs */
html body .ui-dialog a { color: #c4a8f0 !important; text-decoration: none !important; transition: color 0.2s; }
html body .ui-dialog a:hover { color: #ffffff !important; text-decoration: underline !important; }
html body .hint { color: rgba(212,191,255,0.7) !important; }

/* 3. Buttons Standardization */
html body .btn, html body button, html body .ui-button { border-radius: 6px !important; font-weight: 500 !important; transition: all 0.2s ease !important; outline: none !important; }

/* Primary Buttons (Solid, Matte) */
html body .btn-primary, html body button.mainaction, html body .ui-button.mainaction { 
    background: #8a3ffc !important; 
    background-image: none !important;
    color: #ffffff !important; 
    border: none !important; 
    box-shadow: none !important; 
    padding: 10px 24px !important; 
    text-shadow: none !important; 
    margin: 0 !important; 
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: background-color 0.2s ease !important;
}
html body .btn-primary:hover, html body button.mainaction:hover, html body .ui-button.mainaction:hover { 
    background: #a56eff !important; 
    background-image: none !important;
    transform: none !important; 
    box-shadow: none !important; 
    color: #ffffff !important; 
}

/* Secondary Buttons (Solid, Matte) */
html body .btn-secondary, html body button:not(.mainaction):not(.close):not(.ui-dialog-titlebar-close), html body .ui-dialog-buttonset button:not(.mainaction) { 
    background: rgba(255, 255, 255, 0.08) !important; 
    background-image: none !important;
    color: #e0ccff !important; 
    border: none !important; 
    box-shadow: none !important; 
    padding: 10px 24px !important; 
    margin: 0 !important; 
    font-weight: 600 !important; 
    border-radius: 8px !important;
    letter-spacing: 0.5px !important;
    transition: background-color 0.2s ease !important;
}
html body .btn-secondary:hover, html body button:not(.mainaction):not(.close):not(.ui-dialog-titlebar-close):hover, html body .ui-dialog-buttonset button:not(.mainaction):hover { 
    background: rgba(255, 255, 255, 0.15) !important; 
    background-image: none !important;
    color: #ffffff !important; 
    border-color: transparent !important;
}

/* 4. Forms & Inputs */
html body .form-control, html body input[type="text"], html body input[type="password"], html body select, html body textarea { background-color: rgba(10,2,25,0.5) !important; border: 1px solid rgba(168,113,235,0.2) !important; color: #e0ccff !important; border-radius: 6px !important; transition: all 0.3s ease !important; }
html body .form-control:focus, html body input:focus, html body textarea:focus { border-color: rgba(168,113,235,0.6) !important; box-shadow: 0 0 0 2px rgba(168,113,235,0.15) !important; outline: none !important; }
html body .input-group-text { background-color: rgba(168,113,235,0.1) !important; border: 1px solid rgba(168,113,235,0.2) !important; color: #c4a8f0 !important; }

/* Custom File Inputs */
html body .custom-file-label { background-color: rgba(10,2,25,0.5) !important; border: 1px solid rgba(168,113,235,0.2) !important; color: #d4bfff !important; border-radius: 6px !important; }
html body .custom-file-label::after { background-color: rgba(168,113,235,0.15) !important; color: #ffffff !important; border-left: 1px solid rgba(168,113,235,0.2) !important; border-radius: 0 6px 6px 0 !important; }

/* 5. Popups & Dropdown Menus */
html body .popover, html body .dropdown-menu, html body .popupmenu { background: linear-gradient(145deg, rgba(70,40,120,0.95) 0%, rgba(50,20,90,0.98) 100%) !important; backdrop-filter: blur(15px) !important; border: 1px solid rgba(168,113,235,0.4) !important; border-radius: 10px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 15px rgba(168, 113, 235, 0.15) !important; padding: 4px !important; color: #e0ccff !important; }
html body .popover::before, html body .popover::after { display: none !important; }

/* Kill the nested box effect for lists inside popovers */
html body .popover .menu, html body .popover .popupmenu, html body .popover ul, html body .dropdown-menu .popupmenu { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; backdrop-filter: none !important; }

/* Reset li padding and margins from Elastic ONLY inside popups */
html body .popover li, html body .popupmenu li { margin: 0 !important; padding: 0 !important; border: none !important; }

html body .popupmenu, html body .popover .menu { color: #e0ccff !important; }
html body .popupmenu li a, html body .dropdown-item, html body .popover .menu li a { color: #e0ccff !important; border-radius: 4px !important; transition: all 0.2s !important; padding: 4px 12px !important; display: flex !important; align-items: center !important; font-size: 0.95em !important; line-height: 1.5 !important; margin: 2px !important; }
html body .popupmenu li a:hover, html body .dropdown-item:hover, html body .popupmenu li.selected > a, html body .popover .menu li a:hover { background-color: rgba(168,113,235,0.3) !important; color: #ffffff !important; transform: translateX(2px) !important; }
html body .popupmenu li.separator, html body .popover li.separator { border-bottom: 1px solid rgba(168,113,235,0.2) !important; margin: 4px 0 !important; padding: 0 !important; height: 1px !important; background: transparent !important; }