/* ==========================================================================
   JWebMail - Modern Webmail UI Stylesheet
   Compatible with Bootstrap 5.3 + Tailwind CSS + Roundcube 1.7.4 Skinning
   ========================================================================== */

/* Universal fix for Alpine x-show overriding Bootstrap utility classes with !important */
[style*="display: none"] {
    display: none !important;
}

:root {
    --jw-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --jw-body-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --jw-mono-font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    
    /* Google / JWebMail Light Core Colors */
    --jw-blue: #0b57d0;
    --jw-blue-hover: #0842a0;
    --jw-blue-light: #c2e7ff;
    --jw-blue-subtle: #e8f0fe;
    --jw-surface: #f6f8fc;
    --jw-surface-card: #ffffff;
    --jw-surface-hover: #eaebef;
    --jw-surface-active: #d3e3fd;
    --jw-surface-variant: #e1e3e1;
    --jw-on-surface: #1f1f1f;
    --jw-on-surface-variant: #444746;
    --jw-border: #e0e2ec;
    --jw-border-subtle: #f0f2f5;
    --jw-search-bg: #eaf1fb;
    --jw-search-focus: #ffffff;
    --jw-search-text: #1f1f1f;
    
    /* Star, Alert & Tag Colors */
    --jw-star-gold: #f29900;
    --jw-red: #d93025;
    --jw-green: #188038;
    --jw-purple: #8430ce;
    --jw-orange: #e8710a;
}

/* ==========================================================================
   Dark Theme Design Tokens (Matching Google Workspace / JWebMail Dark Mode)
   ========================================================================== */
html.dark, body.dark,
html.dark-mode, body.dark-mode,
.dark, .dark-mode {
    /* === Soft Slate-Navy Dark Palette === */
    --jw-surface: #1e2433;
    --jw-surface-card: #252d3d;
    --jw-surface-hover: #2d3750;
    --jw-surface-active: #1e4a8a;
    --jw-surface-variant: #2e3a52;
    --jw-on-surface: #e8eaed;
    --jw-on-surface-variant: #a8b3c8;
    --jw-border: #334060;
    --jw-border-subtle: #263050;
    --jw-blue-light: #1e4a8a;
    --jw-blue-subtle: #1a2d4a;
    --jw-search-bg: #243045;
    --jw-search-focus: #2d3a55;
    --jw-search-text: #e8eaed;
}

/* ==========================================================================
   Core Layout Containers in Dark Mode - Overriding Bootstrap's .bg-white !important
   ========================================================================== */
.dark #layout-list,
.dark-mode #layout-list,
html.dark #layout-list,
body.dark #layout-list,
.dark #layout-content,
.dark-mode #layout-content,
html.dark #layout-content,
body.dark #layout-content,
.dark .mail-viewer-content,
.dark-mode .mail-viewer-content {
    background-color: #252d3d !important;
    color: #e8eaed !important;
}

/* Base Header & Sidebar layout tokens - Fixed across index, compose, message, contacts, settings */
#layout-sidebar,
aside#layout-sidebar {
    background-color: #f6f8fc;
    border-color: #e0e2ec;
}

#layout-header,
header#layout-header {
    background-color: #f6f8fc;
    border-color: #e0e2ec;
}

.dark #layout-sidebar,
.dark-mode #layout-sidebar,
html.dark #layout-sidebar,
body.dark #layout-sidebar,
[data-bs-theme="dark"] #layout-sidebar,
.dark #taskmenu,
.dark-mode #taskmenu,
html.dark #taskmenu,
body.dark #taskmenu {
    background-color: #1a2135 !important;
    border-color: #283050 !important;
}

.dark #layout-header,
.dark-mode #layout-header,
html.dark #layout-header,
body.dark #layout-header,
[data-bs-theme="dark"] #layout-header {
    background-color: #1e2433 !important;
    border-color: #283050 !important;
}

/* Neutralize Bootstrap 5.3 .bg-white and .bg-light !important in Dark Mode */
.dark .bg-white,
.dark-mode .bg-white,
html.dark .bg-white,
body.dark .bg-white {
    background-color: #252d3d !important;
}

.dark .bg-light,
.dark-mode .bg-light,
html.dark .bg-light,
body.dark .bg-light {
    background-color: #2d3750 !important;
}

/* ==========================================================================
   Comprehensive Dark Mode Text Contrast (Crisp Legibility & High Contrast)
   ========================================================================== */
.dark label,
.dark-mode label,
.dark .text-zinc-700,
.dark-mode .text-zinc-700,
.dark .text-zinc-600,
.dark-mode .text-zinc-600,
.dark .text-zinc-800,
.dark-mode .text-zinc-800 {
    color: #e8eaed !important;
}

.dark .text-zinc-900,
.dark-mode .text-zinc-900,
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
    color: #ffffff !important;
}

.dark .text-zinc-500,
.dark-mode .text-zinc-500,
.dark .text-zinc-400,
.dark-mode .text-zinc-400 {
    color: #bdc1c6 !important;
}

.dark p,
.dark-mode p {
    color: #dadce0 !important;
}

/* Sidebar & Navigation Text Contrast */
.dark #layout-list .text-sm,
.dark-mode #layout-list .text-sm,
.dark #layout-list span,
.dark-mode #layout-list span,
.dark #taskmenu span,
.dark-mode #taskmenu span {
    color: #e8eaed !important;
}

.dark #layout-list .text-xs,
.dark-mode #layout-list .text-xs,
.dark #taskmenu .text-xs,
.dark-mode #taskmenu .text-xs {
    color: #bdc1c6 !important;
}

/* Table Text Contrast */
.dark table td,
.dark-mode table td {
    color: #e8eaed !important;
}
.dark table th,
.dark-mode table th {
    color: #bdc1c6 !important;
}

body {
    font-family: var(--jw-body-font);
    background-color: var(--jw-surface);
    color: var(--jw-on-surface);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6, .font-google {
    font-family: var(--jw-font-family);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #c7c7c7;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

.dark ::-webkit-scrollbar-thumb,
.dark-mode ::-webkit-scrollbar-thumb {
    background: #484c50;
}
.dark ::-webkit-scrollbar-thumb:hover,
.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #5f6368;
}

/* ==========================================================================
   JWebMail Header Search Bar
   ========================================================================== */
.jwebmail-search-bar {
    background-color: #ffffff;
    border: 1px solid #e0e2ec;
    border-radius: 28px;
    height: 40px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.jwebmail-search-bar:focus-within {
    background-color: #ffffff;
    border-color: #c2e7ff;
    box-shadow: 0 1px 3px 0 rgba(60,64,67,0.2), 0 4px 8px 1px rgba(60,64,67,0.1);
}

.dark .jwebmail-search-bar,
.dark-mode .jwebmail-search-bar {
    background-color: #2d3750 !important;
    border-color: #3c4043 !important;
    color: #e8eaed !important;
}
.dark .jwebmail-search-bar:focus-within,
.dark-mode .jwebmail-search-bar:focus-within {
    background-color: #303134 !important;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4) !important;
}
.dark .jwebmail-search-bar input,
.dark-mode .jwebmail-search-bar input {
    color: #e8eaed !important;
}
.dark .jwebmail-search-bar input::placeholder,
.dark-mode .jwebmail-search-bar input::placeholder {
    color: #9aa0a6 !important;
}

/* ==========================================================================
   JWebMail Floating Compose Button (E-posta Yaz)
   ========================================================================== */
.jwebmail-compose-btn {
    background-color: var(--jw-blue-light);
    color: #041e49;
    border-radius: 0 24px 24px 0;
    height: 36px;
    min-height: 36px;
    padding: 0 14px 0 10px !important;
    margin-right: 8px;
    width: calc(100% - 8px);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.15px;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.18), 0 1px 3px 1px rgba(60,64,67,0.08);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(11, 87, 208, 0.12);
    display: flex;
    align-items: center;
}
.jwebmail-compose-btn svg {
    width: 20px !important;
    min-width: 20px !important;
    height: 16px !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}
.jwebmail-compose-btn:hover {
    background-color: #b5dbff;
    color: #041e49;
    box-shadow: 0 1px 3px 1px rgba(60,64,67,0.2), 0 3px 6px 2px rgba(60,64,67,0.12);
    transform: translateY(-1px);
}
.jwebmail-compose-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3);
}

/* Dark Mode Compose Button */
.dark .jwebmail-compose-btn,
.dark-mode .jwebmail-compose-btn {
    background-color: #c2e7ff !important;
    color: #001d35 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 2px 6px 1px rgba(0,0,0,0.25) !important;
}
.dark .jwebmail-compose-btn:hover,
.dark-mode .jwebmail-compose-btn:hover {
    background-color: #d3e3fd !important;
    color: #001d35 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}
.dark .jwebmail-compose-btn svg,
.dark-mode .jwebmail-compose-btn svg {
    color: #001d35 !important;
    fill: #001d35 !important;
}
.dark .jwebmail-compose-btn span,
.dark-mode .jwebmail-compose-btn span {
    color: #001d35 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   JWebMail Pill HTML Editor Toolbar (Her Yerde Aynı HTML Editör Çubuğu)
   ========================================================================== */
.jwebmail-pill-toolbar {
    background-color: #edf2fa;
    border-radius: 9999px;
    padding: 3px 12px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    box-shadow: 0 1px 3px rgba(60,64,67,0.15);
    border: 1px solid rgba(0,0,0,0.06);
    user-select: none;
    max-width: 100%;
    overflow: visible !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.jwebmail-pill-toolbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.dark .jwebmail-pill-toolbar,
.dark-mode .jwebmail-pill-toolbar,
[data-bs-theme="dark"] .jwebmail-pill-toolbar {
    background-color: #252d3d !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}
.jwebmail-pill-toolbar .btn-tool {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #444746;
    border-radius: 4px;
    font-size: 13px;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.dark .jwebmail-pill-toolbar .btn-tool,
.dark-mode .jwebmail-pill-toolbar .btn-tool,
[data-bs-theme="dark"] .jwebmail-pill-toolbar .btn-tool {
    color: #c4c7c5;
}
.jwebmail-pill-toolbar .btn-tool:hover {
    background-color: rgba(0, 0, 0, 0.08);
    color: #1f1f1f;
}
.dark .jwebmail-pill-toolbar .btn-tool:hover,
.dark-mode .jwebmail-pill-toolbar .btn-tool:hover,
[data-bs-theme="dark"] .jwebmail-pill-toolbar .btn-tool:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.jwebmail-pill-toolbar .toolbar-divider {
    width: 1px;
    height: 16px;
    background-color: #dadce0;
    margin: 0 4px;
    flex-shrink: 0;
}
.dark .jwebmail-pill-toolbar .toolbar-divider,
.dark-mode .jwebmail-pill-toolbar .toolbar-divider,
[data-bs-theme="dark"] .jwebmail-pill-toolbar .toolbar-divider {
    background-color: #444746;
}

/* ==========================================================================
   JWebMail Floating Compose Modal (Yeni İleti Penceresi)
   ========================================================================== */
.jwebmail-floating-compose {
    position: fixed;
    bottom: 0;
    right: 24px;
    width: 580px;
    max-width: calc(100vw - 32px);
    height: 520px;
    max-height: calc(100vh - 80px);
    z-index: 1050;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    background-color: var(--bs-body-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e0e2ec);
    border-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.jwebmail-floating-compose.is-minimized {
    height: 44px !important;
}
.jwebmail-floating-compose.is-maximized {
    top: 32px;
    bottom: 0;
    right: 24px;
    left: 24px;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
}
.jwebmail-floating-compose .compose-header {
    background-color: #f2f6fc;
    padding: 10px 16px;
    border-radius: 12px 12px 0 0;
    user-select: none;
}
.dark .jwebmail-floating-compose .compose-header,
.dark-mode .jwebmail-floating-compose .compose-header,
[data-bs-theme="dark"] .jwebmail-floating-compose .compose-header {
    background-color: #2d2f31 !important;
}

/* ==========================================================================
   Recipient Email Chip (Çerçeveli Mail Rozeti)
   ========================================================================== */
.email-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    background-color: #e8f0fe;
    color: #174ea6;
    border: 1px solid #a8c7fa;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: all 0.15s ease;
    user-select: none;
}
.email-chip:hover {
    background-color: #d2e3fc;
    border-color: #7cacf8;
}
.email-chip .chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #5f6368;
    cursor: pointer;
    transition: all 0.15s ease;
}
.email-chip .chip-remove:hover {
    background-color: rgba(217, 48, 37, 0.15);
    color: #d93025;
}

.dark .email-chip,
.dark-mode .email-chip {
    background-color: rgba(66, 133, 244, 0.22) !important;
    color: #aecbfa !important;
    border-color: rgba(66, 133, 244, 0.45) !important;
}
.dark .email-chip:hover,
.dark-mode .email-chip:hover {
    background-color: rgba(66, 133, 244, 0.32) !important;
    border-color: #8ab4f8 !important;
}
.dark .email-chip .chip-remove,
.dark-mode .email-chip .chip-remove {
    color: #9aa0a6 !important;
}
.dark .email-chip .chip-remove:hover,
.dark-mode .email-chip .chip-remove:hover {
    background-color: rgba(242, 139, 130, 0.25) !important;
    color: #f28b82 !important;
}

/* ==========================================================================
   Sidebar Nav Items
   ========================================================================== */
.jwebmail-nav-item {
    border-radius: 0 24px 24px 0;
    transition: background-color 0.15s ease, color 0.15s ease;
    height: 34px;
    min-height: 34px;
    padding: 0 14px 0 10px !important;
    margin-right: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    color: #444746;
}
.jwebmail-nav-item:hover {
    background-color: var(--jw-surface-hover);
    color: #1f1f1f;
}
.jwebmail-nav-item.active {
    background-color: var(--jw-surface-active);
    color: #001d35;
    font-weight: 700;
}
.jwebmail-nav-item.active .nav-icon {
    color: #001d35;
}

/* Dark Mode Nav Items */
.dark .jwebmail-nav-item,
.dark-mode .jwebmail-nav-item {
    color: #c4c7c5;
}
.dark .jwebmail-nav-item:hover,
.dark-mode .jwebmail-nav-item:hover {
    background-color: #282a2c !important;
    color: #e8eaed !important;
}
.dark .jwebmail-nav-item.active,
.dark-mode .jwebmail-nav-item.active {
    background-color: #004a77 !important;
    color: #c2e7ff !important;
    font-weight: 700 !important;
}
.dark .jwebmail-nav-item.active .nav-icon,
.dark-mode .jwebmail-nav-item.active .nav-icon {
    color: #c2e7ff !important;
}
.dark .jwebmail-badge,
.dark-mode .jwebmail-badge {
    background-color: #004a77 !important;
    color: #c2e7ff !important;
}

/* ==========================================================================
   Mail Row Styling (CRITICAL FIX FOR DARK MODE WHITE ROWS)
   ========================================================================== */
.mail-row {
    position: relative;
    transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1), 
                background-color 0.18s cubic-bezier(0.2, 0, 0, 1), 
                box-shadow 0.18s cubic-bezier(0.2, 0, 0, 1), 
                border-color 0.18s ease;
    border-bottom: 1px solid var(--jw-border-subtle);
    font-size: 14px;
    user-select: none;
    cursor: pointer;
    will-change: transform, box-shadow;
}

/* Light mode defaults */
.mail-row.unread {
    background-color: #ffffff;
    font-weight: 600;
    color: #1f1f1f;
}
.mail-row.read {
    background-color: rgba(242, 245, 245, 0.65);
    color: #444746;
}
.mail-row.selected {
    background-color: #c2dbfe !important;
    box-shadow: inset 3px 0 0 #0b57d0;
}
.mail-row:hover {
    z-index: 10;
    position: relative;
    background-color: #f4f8fe !important;
    transform: translateX(4px);
    box-shadow: inset 3px 0 0 var(--jw-blue), 
                0 3px 12px rgba(11, 87, 208, 0.09), 
                0 1px 4px rgba(60, 64, 67, 0.12);
}

/* DARK MODE OVERRIDES: Strictly eliminate any white rows */
.dark .mail-row,
.dark-mode .mail-row {
    border-bottom-color: #282a2c !important;
}
.dark .mail-row.unread,
.dark-mode .mail-row.unread {
    background-color: #252d3d !important;
    color: #f1f3f4 !important;
    font-weight: 600;
}
.dark .mail-row.unread span,
.dark-mode .mail-row.unread span {
    color: #f1f3f4 !important;
}
.dark .mail-row.read,
.dark-mode .mail-row.read {
    background-color: #131314 !important;
    color: #9aa0a6 !important;
    font-weight: 400;
}
.dark .mail-row.read span,
.dark-mode .mail-row.read span {
    color: #9aa0a6 !important;
}
.dark .mail-row.selected,
.dark-mode .mail-row.selected {
    background-color: #004a77 !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 #8ab4f8 !important;
}
.dark .mail-row.selected span,
.dark-mode .mail-row.selected span {
    color: #ffffff !important;
}
.dark .mail-row:hover,
.dark-mode .mail-row:hover {
    background-color: #282a2c !important;
    transform: translateX(4px);
    box-shadow: inset 3px 0 0 #8ab4f8, 
                0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

/* Mail Row Hover Actions Bar */
.mail-row .mail-actions {
    display: none;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1), 
                transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.mail-row:hover .mail-actions {
    display: flex;
    opacity: 1;
    transform: translateX(0);
}
.mail-row:hover .mail-date-label {
    display: none;
}
.mail-row .mail-actions button {
    transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1), 
                background-color 0.15s ease, 
                color 0.15s ease;
}
.mail-row .mail-actions button:hover {
    transform: scale(1.18);
    background-color: #d3e3fd;
    color: #041e49;
}
.dark .mail-row .mail-actions button:hover,
.dark-mode .mail-row .mail-actions button:hover {
    background-color: #383a3d !important;
    color: #8ab4f8 !important;
}

/* Star & Importance Interactivity */
.star-btn {
    color: #747775;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease;
}
.mail-row:hover .star-btn {
    transform: scale(1.08);
}
.star-btn.starred {
    color: var(--jw-star-gold) !important;
}
.star-btn:hover {
    transform: scale(1.28) rotate(14deg) !important;
    color: var(--jw-star-gold) !important;
}
.mail-row button[title*="Önemli"] i {
    display: inline-block;
    transition: transform 0.15s ease;
}
.mail-row button[title*="Önemli"]:hover i {
    transform: scale(1.25);
}

/* Attachment Chip in Mail Row */
.mail-row span.rounded-full.border {
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease;
}
.mail-row:hover span.rounded-full.border {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   JWebMail Tabs (Primary, Social, Promotions, Updates)
   ========================================================================= */
.jwebmail-tab {
    position: relative;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #444746;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}
.jwebmail-tab:hover {
    background-color: rgba(0, 0, 0, 0.04);
}
.jwebmail-tab.active {
    color: var(--jw-blue);
    border-bottom: 3px solid var(--jw-blue);
    font-weight: 600;
}

.dark .jwebmail-tab,
.dark-mode .jwebmail-tab {
    color: #9aa0a6;
}
.dark .jwebmail-tab:hover,
.dark-mode .jwebmail-tab:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: #e8eaed;
}
.dark .jwebmail-tab.active,
.dark-mode .jwebmail-tab.active {
    color: #8ab4f8 !important;
    border-bottom-color: #8ab4f8 !important;
    font-weight: 600;
}

/* ==========================================================================
   Docked Floating Compose Modal (Bottom Right)
   ========================================================================== */
.jwebmail-compose-dock {
    position: fixed;
    bottom: 0;
    right: 24px;
    width: 580px;
    height: 560px;
    background: #ffffff;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.jwebmail-compose-dock.minimized {
    height: 44px !important;
    width: 300px !important;
}
.jwebmail-compose-dock.maximized {
    top: 24px;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 92vw;
    max-width: 1080px;
    height: calc(100vh - 48px) !important;
    border-radius: 12px;
}

.dark .jwebmail-compose-dock,
.dark-mode .jwebmail-compose-dock {
    background-color: #252d3d !important;
    color: #e8eaed !important;
    border: 1px solid #3c4043 !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.7) !important;
}

/* ==========================================================================
   Dropdowns, Modals, Forms & Popovers in Dark Mode
   ========================================================================== */
.dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
}

.dark .dropdown-menu,
.dark-mode .dropdown-menu {
    background-color: #202124 !important;
    border: 1px solid #3c4043 !important;
    color: #e8eaed !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}
.dark .dropdown-item,
.dark-mode .dropdown-item {
    color: #e8eaed !important;
}
.dark .dropdown-item:hover,
.dark .dropdown-item:focus,
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: #303134 !important;
    color: #ffffff !important;
}
.dark .dropdown-divider,
.dark-mode .dropdown-divider {
    border-color: #3c4043 !important;
}

.dark .modal-content,
.dark-mode .modal-content {
    background-color: #202124 !important;
    color: #e8eaed !important;
    border: 1px solid #3c4043 !important;
}

/* Form inputs */
.dark .form-control,
.dark .form-select,
.dark-mode .form-control,
.dark-mode .form-select,
.dark select.bg-zinc-50,
.dark-mode select.bg-zinc-50,
.dark input.bg-zinc-50,
.dark-mode input.bg-zinc-50 {
    background-color: #2d3750 !important;
    border-color: #3c4043 !important;
    color: #e8eaed !important;
}
.dark .form-control:focus,
.dark .form-select:focus,
.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background-color: #303134 !important;
    border-color: #8ab4f8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.25) !important;
}
.dark .form-control::placeholder,
.dark-mode .form-control::placeholder {
    color: #9aa0a6 !important;
}

.dark .form-check-input,
.dark-mode .form-check-input {
    background-color: #28292a;
    border-color: #5f6368;
}
.dark .form-check-input:checked,
.dark-mode .form-check-input:checked {
    background-color: #0b57d0;
    border-color: #0b57d0;
}

/* Bootstrap Tables Dark Mode Overhaul */
.dark .table,
.dark-mode .table {
    --bs-table-bg: transparent !important;
    --bs-table-hover-bg: #282a2c !important;
    --bs-table-border-color: #3c4043 !important;
    --bs-table-striped-bg: #202124 !important;
    color: #e8eaed !important;
    border-color: #3c4043 !important;
}
.dark .table-light,
.dark-mode .table-light,
.dark thead.table-light,
.dark-mode thead.table-light {
    --bs-table-bg: #28292a !important;
    --bs-table-color: #9aa0a6 !important;
    background-color: #2d3750 !important;
    color: #9aa0a6 !important;
    border-color: #3c4043 !important;
}
.dark .table > :not(caption) > * > *,
.dark-mode .table > :not(caption) > * > * {
    background-color: transparent !important;
    border-bottom-color: #3c4043 !important;
    color: inherit !important;
}
.dark .table-hover > tbody > tr:hover > *,
.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: #282a2c !important;
    color: #ffffff !important;
}

/* Bootstrap Cards & Badges in Dark Mode */
.dark .card,
.dark-mode .card {
    background-color: #252d3d !important;
    border-color: #3c4043 !important;
    color: #e8eaed !important;
}
.dark .card-header,
.dark-mode .card-header,
.dark .card-footer,
.dark-mode .card-footer {
    background-color: #2d3750 !important;
    border-color: #3c4043 !important;
    color: #dadce0 !important;
}
.dark .badge.bg-light,
.dark-mode .badge.bg-light {
    background-color: #303134 !important;
    color: #dadce0 !important;
}
.dark .badge.bg-blue-100,
.dark-mode .badge.bg-blue-100 {
    background-color: rgba(66, 133, 244, 0.2) !important;
    color: #8ab4f8 !important;
}
.dark .badge.bg-emerald-100,
.dark-mode .badge.bg-emerald-100 {
    background-color: rgba(52, 168, 83, 0.2) !important;
    color: #81c995 !important;
}

/* Button variants in dark mode */
.dark .btn-light,
.dark-mode .btn-light {
    background-color: #2d3750 !important;
    border-color: #3c4043 !important;
    color: #e8eaed !important;
}
.dark .btn-light:hover,
.dark-mode .btn-light:hover {
    background-color: #35373a !important;
    color: #ffffff !important;
}
.dark .btn-outline-secondary,
.dark-mode .btn-outline-secondary {
    border-color: #5f6368 !important;
    color: #dadce0 !important;
}
.dark .btn-outline-secondary:hover,
.dark-mode .btn-outline-secondary:hover {
    background-color: #303134 !important;
    border-color: #8ab4f8 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Email Body Content (Real HTML Email Rendering in Dark Mode)
   ========================================================================== */
.dark .email-body-content,
.dark-mode .email-body-content {
    color: #e8eaed !important;
}
.dark .email-body-content *[style*="color: #202124"],
.dark .email-body-content *[style*="color: #3c4043"],
.dark .email-body-content *[style*="color: #1f1f1f"],
.dark .email-body-content *[style*="color:#202124"],
.dark .email-body-content *[style*="color:#3c4043"] {
    color: #e8eaed !important;
}
.dark .email-body-content *[style*="color: #70757a"],
.dark .email-body-content *[style*="color: #5f6368"] {
    color: #9aa0a6 !important;
}
.dark .email-body-content *[style*="background: #f8f9fa"],
.dark .email-body-content *[style*="background-color: #f8f9fa"],
.dark .email-body-content *[style*="background: #fff"],
.dark .email-body-content *[style*="background-color: #fff"] {
    background-color: #242628 !important;
    border-color: #3c4043 !important;
}
.dark .email-body-content *[style*="border: 1px solid #dadce0"],
.dark .email-body-content *[style*="border:1px solid #dadce0"] {
    border-color: #3c4043 !important;
}

/* Mail Viewer Animations */
.mail-viewer-content {
    animation: fadeIn 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* JWebMail Density Styles */
.density-compact .mail-row {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.density-comfortable .mail-row {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.density-spacious .mail-row {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* Badge styling */
.jwebmail-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
}


/* ==========================================================================
   Roundcube 1.7.4 Skinning - Comprehensive JWebMail UI Theme
   ========================================================================== */

/* 1. Login Page Styling (.task-login) */
.task-login {
    background-color: var(--jw-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.dark .task-login,
.dark-mode .task-login {
    background-color: #121212 !important;
}
.task-login #layout-content {
    background: transparent !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 24px;
}
.task-login #logo {
    top: 0 !important;
    margin-bottom: 24px;
    max-height: 48px;
}
#login-form {
    top: 0 !important;
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 28px;
    padding: 36px 40px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.dark #login-form,
.dark-mode #login-form {
    background-color: #252d3d !important;
    border-color: #3c4043 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
#login-form .form-group,
#login-form table tr {
    margin-bottom: 16px;
    display: block;
}
#login-form table td {
    display: block;
    width: 100%;
    padding: 4px 0;
}
#login-form label {
    font-size: 13px;
    font-weight: 500;
    color: #444746;
    margin-bottom: 6px;
    display: block;
}
.dark #login-form label,
.dark-mode #login-form label {
    color: #bdc1c6 !important;
}
#login-form input.form-control,
#login-form input[type="text"],
#login-form input[type="password"] {
    width: 100%;
    height: 48px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid #747775;
    font-size: 15px;
    background: #ffffff;
    color: #1f1f1f;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dark #login-form input.form-control,
.dark-mode #login-form input.form-control,
.dark #login-form input[type="text"],
.dark-mode #login-form input[type="text"],
.dark #login-form input[type="password"],
.dark-mode #login-form input[type="password"] {
    background-color: #2d3750 !important;
    border-color: #5f6368 !important;
    color: #ffffff !important;
}
#login-form input:focus {
    border-color: #0b57d0 !important;
    box-shadow: 0 0 0 2px rgba(11, 87, 208, 0.2) !important;
    outline: none;
}
#rcmloginsubmit,
#login-form button[type="submit"],
#login-form .btn-primary {
    width: 100%;
    height: 48px;
    background-color: #0b57d0 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 24px;
    font-weight: 500;
    font-size: 15px;
    margin-top: 12px;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}
#rcmloginsubmit:hover,
#login-form button[type="submit"]:hover {
    background-color: #0842a0 !important;
    box-shadow: 0 2px 6px rgba(11, 87, 208, 0.3) !important;
}
#login-footer {
    margin-top: 24px;
    font-size: 12px;
    color: #747775;
    text-align: center;
}
.dark #login-footer,
.dark-mode #login-footer {
    color: #9aa0a6 !important;
}

/* 2. Main Navigation Rail (#taskmenu) */
#taskmenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 6px;
    gap: 8px;
    background-color: #f6f8fc;
    border-right: 1px solid #e0e2ec;
}
.dark #taskmenu,
.dark-mode #taskmenu {
    background-color: #1a2135 !important;
    border-color: #283050 !important;
}
#taskmenu .action-buttons .compose {
    background-color: #c2e7ff !important;
    color: #001d35 !important;
    border-radius: 16px !important;
    padding: 12px 18px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}
#taskmenu .action-buttons .compose:hover {
    background-color: #b3d7f5 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
.dark #taskmenu .action-buttons .compose,
.dark-mode #taskmenu .action-buttons .compose {
    background-color: #004a77 !important;
    color: #c2e7ff !important;
}
#taskmenu a.button,
#taskmenu a.mail,
#taskmenu a.contacts,
#taskmenu a.settings,
#taskmenu a.theme,
#taskmenu a.about,
#taskmenu a.logout {
    border-radius: 20px !important;
    padding: 8px 16px !important;
    color: #444746 !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
#taskmenu a:hover {
    background-color: #eaebef !important;
    color: #1f1f1f !important;
}
#taskmenu a.selected {
    background-color: #d3e3fd !important;
    color: #041e49 !important;
    font-weight: 600 !important;
}
.dark #taskmenu a.button,
.dark-mode #taskmenu a.button,
.dark #taskmenu a.mail,
.dark-mode #taskmenu a.mail,
.dark #taskmenu a.contacts,
.dark-mode #taskmenu a.contacts,
.dark #taskmenu a.settings,
.dark-mode #taskmenu a.settings,
.dark #taskmenu a.theme,
.dark-mode #taskmenu a.theme,
.dark #taskmenu a.about,
.dark-mode #taskmenu a.about,
.dark #taskmenu a.logout,
.dark-mode #taskmenu a.logout {
    color: #c4c7c5 !important;
}
.dark #taskmenu a:hover,
.dark-mode #taskmenu a:hover {
    background-color: #282a2c !important;
    color: #ffffff !important;
}
.dark #taskmenu a.selected,
.dark-mode #taskmenu a.selected {
    background-color: #004a77 !important;
    color: #c2e7ff !important;
}

/* 3. Folder & Directory Lists (#layout-sidebar) */
#layout-sidebar {
    background-color: #f6f8fc;
    border-right: 1px solid #e0e2ec;
}
.dark #layout-sidebar,
.dark-mode #layout-sidebar {
    background-color: #1a2135 !important;
    border-color: #283050 !important;
}
.treelist li a {
    border-radius: 0 20px 20px 0 !important;
    margin-right: 12px;
    padding: 8px 16px 8px 24px !important;
    font-size: 14px !important;
    color: #444746 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.15s;
}
.treelist li a:hover {
    background-color: #eaebef !important;
    color: #1f1f1f !important;
}
.treelist li.selected > a {
    background-color: #d3e3fd !important;
    color: #041e49 !important;
    font-weight: 600 !important;
}
.dark .treelist li a,
.dark-mode .treelist li a {
    color: #c4c7c5 !important;
}
.dark .treelist li a:hover,
.dark-mode .treelist li a:hover {
    background-color: #282a2c !important;
    color: #ffffff !important;
}
.dark .treelist li.selected > a,
.dark-mode .treelist li.selected > a {
    background-color: #004a77 !important;
    color: #c2e7ff !important;
}
.treelist .unreadcount {
    background-color: #0b57d0;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
.dark .treelist .unreadcount,
.dark-mode .treelist .unreadcount {
    background-color: #8ab4f8;
    color: #041e49;
}

/* 4. Contact Management & Address Book */
#addressbooktoolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
}
#addressbooktoolbar .button,
#addressbooktoolbar a {
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #444746 !important;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}
#addressbooktoolbar .button:hover,
#addressbooktoolbar a:hover {
    background-color: #eaebef !important;
    color: #1f1f1f !important;
}
#addressbooktoolbar .button.create {
    background-color: #0b57d0 !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
}
#addressbooktoolbar .button.create:hover {
    background-color: #0842a0 !important;
}
.dark #addressbooktoolbar .button,
.dark-mode #addressbooktoolbar .button,
.dark #addressbooktoolbar a,
.dark-mode #addressbooktoolbar a {
    color: #c4c7c5 !important;
}
.dark #addressbooktoolbar .button:hover,
.dark-mode #addressbooktoolbar .button:hover,
.dark #addressbooktoolbar a:hover,
.dark-mode #addressbooktoolbar a:hover {
    background-color: #282a2c !important;
    color: #ffffff !important;
}

/* Contacts Table (#contacts-table) */
#contacts-table {
    width: 100%;
    border-collapse: collapse;
}
#contacts-table tr {
    border-bottom: 1px solid #e0e2ec;
    cursor: pointer;
    transition: background-color 0.1s ease;
}
#contacts-table tr:hover {
    background-color: #f2f6fc;
}
#contacts-table tr.selected {
    background-color: #d3e3fd !important;
}
.dark #contacts-table tr,
.dark-mode #contacts-table tr {
    border-bottom-color: #3c4043 !important;
}
.dark #contacts-table tr:hover,
.dark-mode #contacts-table tr:hover {
    background-color: #282a2c !important;
}
.dark #contacts-table tr.selected,
.dark-mode #contacts-table tr.selected {
    background-color: #004a77 !important;
}
#contacts-table td {
    padding: 12px 16px;
    font-size: 14px;
    color: #1f1f1f;
}
.dark #contacts-table td,
.dark-mode #contacts-table td {
    color: #e8eaed !important;
}

/* Contact Photo & Header */
.contact-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-bottom: 1px solid #e0e2ec;
}
.dark .contact-header,
.dark-mode .contact-header {
    border-bottom-color: #3c4043 !important;
}
#contactphoto {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #c2e7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dark #contactphoto,
.dark-mode #contactphoto {
    background-color: #004a77 !important;
}
#contactphoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#contacthead .contact-head {
    font-size: 22px;
    font-weight: 600;
    color: #1f1f1f;
}
.dark #contacthead .contact-head,
.dark-mode #contacthead .contact-head {
    color: #ffffff !important;
}

/* Contact Tabs (#contacttabs.tabbed) */
#contacttabs.tabbed {
    padding: 0 24px;
}
#contacttabs .tabsbar,
#contacttabs ul.tabsbar {
    display: flex;
    gap: 24px;
    border-bottom: 2px solid #e0e2ec;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dark #contacttabs .tabsbar,
.dark-mode #contacttabs .tabsbar {
    border-bottom-color: #3c4043 !important;
}
#contacttabs .tablink,
#contacttabs .tabsbar li a {
    display: inline-block;
    padding: 14px 4px;
    font-size: 14px;
    font-weight: 500;
    color: #444746;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    text-decoration: none;
    transition: all 0.2s;
}
#contacttabs .tablink:hover,
#contacttabs .tabsbar li a:hover {
    color: #0b57d0;
}
#contacttabs .tablink.selected,
#contacttabs .tabsbar li.selected a {
    color: #0b57d0 !important;
    border-bottom-color: #0b57d0 !important;
    font-weight: 600;
}
.dark #contacttabs .tablink,
.dark-mode #contacttabs .tablink,
.dark #contacttabs .tabsbar li a,
.dark-mode #contacttabs .tabsbar li a {
    color: #9aa0a6 !important;
}
.dark #contacttabs .tablink.selected,
.dark-mode #contacttabs .tablink.selected,
.dark #contacttabs .tabsbar li.selected a,
.dark-mode #contacttabs .tabsbar li.selected a {
    color: #8ab4f8 !important;
    border-bottom-color: #8ab4f8 !important;
}

/* Contact Edit & Grouped Form (.propform.grouped) */
.propform.grouped fieldset {
    border: 1px solid #e0e2ec;
    border-radius: 16px;
    padding: 20px 24px;
    margin: 20px 0;
}
.dark .propform.grouped fieldset,
.dark-mode .propform.grouped fieldset {
    border-color: #3c4043 !important;
    background-color: #252d3d !important;
}
.propform.grouped legend {
    font-size: 14px;
    font-weight: 600;
    color: #0b57d0;
    padding: 0 8px;
    width: auto;
}
.dark .propform.grouped legend,
.dark-mode .propform.grouped legend {
    color: #8ab4f8 !important;
}
.propform .formbuttons,
.formbuttons {
    padding: 20px 24px;
    display: flex;
    gap: 12px;
}
.formbuttons .btn-primary,
.formbuttons .submit,
.formbuttons .edit {
    background-color: #0b57d0 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 8px 24px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background-color 0.15s;
}
.formbuttons .btn-primary:hover,
.formbuttons .submit:hover,
.formbuttons .edit:hover {
    background-color: #0842a0 !important;
}

/* 5. Compose Window Modernization */
#compose-headers .form-group {
    border-bottom: 1px solid #f0f2f5;
    margin-bottom: 0;
    padding: 8px 16px;
}
.dark #compose-headers .form-group,
.dark-mode #compose-headers .form-group {
    border-bottom-color: #282a2c !important;
}
#compose-headers label {
    font-weight: 500;
    color: #444746;
}
.dark #compose-headers label,
.dark-mode #compose-headers label {
    color: #bdc1c6 !important;
}
#composebodycontainer textarea,
#composebody {
    border: none !important;
    border-radius: 0 !important;
    padding: 16px !important;
    font-family: var(--jw-body-font);
    font-size: 15px;
    line-height: 1.6;
}
.formbuttons .btn.btn-primary.send {
    background-color: #0b57d0 !important;
    color: #ffffff !important;
    border-radius: 24px !important;
    padding: 10px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.formbuttons .btn.btn-primary.send:hover {
    background-color: #0842a0 !important;
    box-shadow: 0 2px 8px rgba(11, 87, 208, 0.3) !important;
}

/* 6. Modals, Dialogs and Popups (.popupmenu, .ui-dialog) */
.popupmenu,
.ui-dialog {
    border-radius: 20px !important;
    border: 1px solid #e0e2ec !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    background-color: #ffffff !important;
    overflow: hidden;
}
.dark .popupmenu,
.dark-mode .popupmenu,
.dark .ui-dialog,
.dark-mode .ui-dialog {
    background-color: #2d3750 !important;
    border-color: #3c4043 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    color: #e8eaed !important;
}
.ui-dialog .ui-dialog-titlebar {
    background-color: transparent !important;
    border-bottom: 1px solid #e0e2ec !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.dark .ui-dialog .ui-dialog-titlebar,
.dark-mode .ui-dialog .ui-dialog-titlebar {
    border-bottom-color: #3c4043 !important;
    color: #ffffff !important;
}

/* 7. Notification Stack (#messagestack) */
#messagestack {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}
#messagestack > div {
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
}
#messagestack .notice,
#messagestack .confirmation {
    background-color: #1f1f1f;
    color: #ffffff;
}
#messagestack .warning {
    background-color: #e8710a;
    color: #ffffff;
}
#messagestack .error {
    background-color: #d93025;
    color: #ffffff;
}

/* ==========================================================================
   JWebMail-Themed Conversation Thread & Inline Reply Editor (Bootstrap 5.3)
   ========================================================================== */
#conversation-thread-container {
    display: flex;
    flex-direction: column;
    gap: 3px !important;
}
.jwebmail-thread-item {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.jwebmail-thread-collapsed {
    cursor: pointer;
    background-color: #ffffff;
    border-bottom: 1px solid #f1f3f4;
}
.jwebmail-thread-collapsed:hover {
    background-color: #f8f9fa;
    box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0;
}
.dark .jwebmail-thread-collapsed,
.dark-mode .jwebmail-thread-collapsed {
    background-color: #1e1f20;
    border-bottom-color: #2d2f31;
}
.dark .jwebmail-thread-collapsed:hover,
.dark-mode .jwebmail-thread-collapsed:hover {
    background-color: #282a2c;
}

.jwebmail-quote-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 14px;
    border-radius: 4px;
    background-color: #e8eaed;
    color: #5f6368;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    line-height: 1;
    user-select: none;
    transition: background-color 0.15s;
}
.jwebmail-quote-dots:hover {
    background-color: #dadce0;
}
.dark .jwebmail-quote-dots,
.dark-mode .jwebmail-quote-dots {
    background-color: #3c4043;
    color: #c4c7c5;
}
.dark .jwebmail-quote-dots:hover,
.dark-mode .jwebmail-quote-dots:hover {
    background-color: #444746;
}

.jwebmail-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px !important;
    font-size: 13px;
    font-weight: 500;
    border-radius: 9999px;
    border: 1px solid #dadce0;
    background-color: #f1f3f4;
    color: #3c4043;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.jwebmail-attachment-chip:hover {
    background-color: #e8eaed;
}
.dark .jwebmail-attachment-chip,
.dark-mode .jwebmail-attachment-chip,
[data-bs-theme="dark"] .jwebmail-attachment-chip {
    border-color: #444746;
    background-color: #282a2c;
    color: #e3e3e3;
}
.dark .jwebmail-attachment-chip:hover,
.dark-mode .jwebmail-attachment-chip:hover,
[data-bs-theme="dark"] .jwebmail-attachment-chip:hover {
    background-color: #333538;
}
.jwebmail-attachment-chip .btn-close {
    width: 12px;
    height: 12px;
    font-size: 9px;
}

/* JWebMail Reply Box Card */
.jwebmail-reply-card {
    border: 1px solid #dadce0;
    border-radius: 16px;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(60,64,67,0.12), 0 1px 2px rgba(60,64,67,0.08);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.jwebmail-reply-card:focus-within {
    box-shadow: 0 2px 6px rgba(60,64,67,0.18), 0 1px 2px rgba(60,64,67,0.1);
    border-color: #0b57d0;
}
.dark .jwebmail-reply-card,
.dark-mode .jwebmail-reply-card {
    background-color: #1e1f20;
    border-color: #3c4043;
}
.dark .jwebmail-reply-card:focus-within,
.dark-mode .jwebmail-reply-card:focus-within {
    border-color: #8ab4f8;
}

/* JWebMail Rich Editor Toolbar */
.jwebmail-editor-toolbar {
    background-color: #f8fafd;
    border-top: 1px solid #edf0f5;
    border-bottom: 1px solid #edf0f5;
    padding: 4px 8px;
}
.dark .jwebmail-editor-toolbar,
.dark-mode .jwebmail-editor-toolbar {
    background-color: #28292a;
    border-top-color: #3c4043;
    border-bottom-color: #3c4043;
}
.jwebmail-editor-toolbar .btn-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 7px;
    border-radius: 4px;
    color: #444746;
    font-size: 13px;
    border: 1px solid transparent;
    background: transparent;
    line-height: 1;
    cursor: pointer;
    transition: background 0.1s;
}
.jwebmail-editor-toolbar .btn-tool:hover {
    background-color: #e9eef6;
    color: #1f1f1f;
}
.dark .jwebmail-editor-toolbar .btn-tool {
    color: #c4c7c5;
}
.dark .jwebmail-editor-toolbar .btn-tool:hover {
    background-color: #3c4043;
    color: #ffffff;
}

/* JWebMail Send Button Group */
.jwebmail-send-btn-group .btn-send {
    background-color: #0b57d0 !important;
    border-color: #0b57d0 !important;
    color: #ffffff !important;
    font-weight: 500;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding-left: 18px;
    padding-right: 14px;
}
.jwebmail-send-btn-group .btn-send:hover {
    background-color: #0842a0 !important;
    border-color: #0842a0 !important;
}
.jwebmail-send-btn-group .btn-send-split {
    background-color: #0b57d0 !important;
    border-color: #0b57d0 !important;
    color: #ffffff !important;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-left: 8px;
    padding-right: 10px;
    border-left: 1px solid rgba(255,255,255,0.3) !important;
}
.jwebmail-send-btn-group .btn-send-split:hover {
    background-color: #0842a0 !important;
    border-color: #0842a0 !important;
}

/* JWebMail Floating Snackbar Toast */
.jwebmail-snackbar {
    position: fixed;
    bottom: 24px;
    left: 24px;
    background-color: #323232;
    color: #ffffff;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    z-index: 9999;
}
.jwebmail-snackbar .action-link {
    color: #a8c7fa;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.jwebmail-snackbar .action-link:hover {
    text-decoration: underline;
}

/* JWebMail Bottom Action Pills (Reply & Forward) */
.jwebmail-bottom-pill {
    font-size: 13px !important;
    height: 32px !important;
    padding: 0 16px !important;
    font-weight: 500 !important;
    border-radius: 9999px !important;
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-secondary-color) !important;
    background-color: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.jwebmail-bottom-pill:hover,
.jwebmail-bottom-pill:focus,
.jwebmail-bottom-pill:active {
    background-color: #d3e3fd !important;
    border-color: #c2e7ff !important;
    color: #041e49 !important;
}
[data-bs-theme="dark"] .jwebmail-bottom-pill:hover,
[data-bs-theme="dark"] .jwebmail-bottom-pill:focus,
[data-bs-theme="dark"] .jwebmail-bottom-pill:active,
.dark-mode .jwebmail-bottom-pill:hover,
.dark .jwebmail-bottom-pill:hover {
    background-color: rgba(211, 227, 253, 0.2) !important;
    border-color: rgba(211, 227, 253, 0.35) !important;
    color: #d3e3fd !important;
}

/* Standard 20px Top App Bar Header Action Icons */
.header-action-icon {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Prevent horizontal scrollbars anywhere in mail list and layout */
#layout,
#layout-list,
#messagelist-content,
#messagelist-footer,
.mail-row {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* ==========================================================================

/* ==========================================================================
   ROUNDCUBE MAILBOX LIST -> 100% JWEBMAIL .jwebmail-nav-item BRIDGE
   ========================================================================== */
#mailboxlist,
ul#mailboxlist,
.treelist.listing.folderlist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#mailboxlist li,
ul#mailboxlist li,
#mailboxlist li.mailbox,
ul#mailboxlist li.mailbox {
    list-style: none !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    position: relative !important;
}

#mailboxlist li a,
ul#mailboxlist li a,
#mailboxlist li.mailbox a,
ul#mailboxlist li.mailbox a {
    border-radius: 0 24px 24px 0 !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 14px 0 0 !important;
    margin-right: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    user-select: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    color: #444746 !important;
    text-decoration: none !important;
    outline: none !important;
    border: none !important;
    box-sizing: border-box !important;
}

#mailboxlist li a:hover,
ul#mailboxlist li a:hover,
#mailboxlist li.mailbox a:hover,
ul#mailboxlist li.mailbox a:hover {
    background-color: #eaebef !important;
    color: #1f1f1f !important;
}

#mailboxlist li.selected > a,
#mailboxlist li.active > a,
#mailboxlist li.mailbox.selected a,
#mailboxlist li.mailbox.active a {
    background-color: #d3e3fd !important;
    color: #001d35 !important;
    font-weight: 700 !important;
}

#mailboxlist li.unread a,
#mailboxlist li.mailbox.unread a {
    color: #1f1f1f !important;
}

#mailboxlist li a .unreadcount,
#mailboxlist li span.unreadcount,
#mailboxlist li.mailbox span.unreadcount {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    background-color: #c2e7ff !important;
    color: #041e49 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

#mailboxlist li.drafts span.unreadcount {
    background-color: transparent !important;
    color: #71717a !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

#mailboxlist li.junk span.unreadcount,
#mailboxlist li.spam span.unreadcount {
    background-color: transparent !important;
    color: #dc2626 !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Dark Mode Mailbox List */
.dark #mailboxlist li a,
.dark-mode #mailboxlist li a,
html.dark #mailboxlist li a,
body.dark #mailboxlist li a {
    color: #c4c7c5 !important;
}

.dark #mailboxlist li a:hover,
.dark-mode #mailboxlist li a:hover,
html.dark #mailboxlist li a:hover,
body.dark #mailboxlist li a:hover {
    background-color: #282a2c !important;
    color: #e8eaed !important;
}

.dark #mailboxlist li.selected > a,
.dark-mode #mailboxlist li.selected > a,
.dark #mailboxlist li.active > a,
.dark-mode #mailboxlist li.active > a {
    background-color: #004a77 !important;
    color: #c2e7ff !important;
    font-weight: 700 !important;
}

.dark #mailboxlist li a .unreadcount,
.dark-mode #mailboxlist li a .unreadcount,
.dark #mailboxlist li span.unreadcount,
.dark-mode #mailboxlist li span.unreadcount {
    background-color: #004a77 !important;
    color: #c2e7ff !important;
}

/* Zero icon font glyphs - all sidebar icons are pure 16x16 Lucide SVGs */
#mailboxlist li > a::before,
#mailboxlist li.mailbox > a::before {
    display: none !important;
    content: none !important;
}

/* Zero Double-Icon Enforcements */
#mailboxlist li a > i,
#mailboxlist li a > .branch,
#mailboxlist .branch,
#mailboxlist li .branch,
#mailboxlist li a > span.icon,
#mailboxlist li a > span[class*="icon"],
#mailboxlist li a > span.collapsed,
#mailboxlist li a > span.expanded,
#mailboxlist li a > span:not(.unreadcount):not(.name) {
    display: none !important;
}

#mailboxlist li a::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   ROUNDCUBE NATIVE TABLE -> 100% JWEBMAIL .mail-row BRIDGE (ZERO ELASTIC CSS)
   ========================================================================== */
table#messagelist,
#messagelist {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
    display: table !important;
}

table#messagelist thead,
#messagelist thead {
    display: none !important;
}

table#messagelist tbody,
#messagelist tbody {
    display: block !important;
    width: 100% !important;
}

#messagelist tbody tr.message,
#messagelist tr.message {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 20px 0 16px !important;
    border-bottom: 1px solid #f0f2f5 !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: #ffffff;
    transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
    position: relative !important;
    user-select: none !important;
}

#messagelist tbody tr.message:hover,
#messagelist tr.message:hover {
    background-color: #f2f6fc !important;
    box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,0.15) !important;
    z-index: 2 !important;
}

#messagelist tbody tr.message.selected,
#messagelist tr.message.selected,
#messagelist tbody tr.message.active,
#messagelist tr.message.active {
    background-color: #c2dbfe !important;
    border-left: 4px solid #0b57d0 !important;
}

#messagelist tbody tr.message.unread,
#messagelist tr.message.unread {
    background-color: #ffffff !important;
    font-weight: 700 !important;
    color: #1f1f1f !important;
}

#messagelist tbody tr.message td,
#messagelist tr.message td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Checkbox Column */
#messagelist td.selection,
#messagelist tbody tr.message td.selection {
    order: 1 !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
    justify-content: center !important;
    margin-right: 4px !important;
}

#messagelist td.selection input,
#messagelist tbody tr.message td.selection input {
    margin: 0 !important;
    cursor: pointer !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: #0b57d0 !important;
}

/* Star / Flag Column */
#messagelist td.flags,
#messagelist tbody tr.message td.flags {
    order: 2 !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
    justify-content: center !important;
    margin-right: 12px !important;
}

#messagelist td.flags span.flag,
#messagelist td.flags a,
#messagelist tbody tr.message td.flags span.flag,
#messagelist tbody tr.message td.flags a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-size: 0 !important;
    transition: transform 0.15s ease !important;
}

#messagelist td.flags span.flag:hover,
#messagelist td.flags a:hover {
    transform: scale(1.15) !important;
}

#messagelist td.flags span.flag::before,
#messagelist td.flags a::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #9aa0a6 !important;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>') center / 20px no-repeat !important;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>') center / 20px no-repeat !important;
}

#messagelist tr.message.flagged td.flags span.flag::before,
#messagelist tr.message.flagged td.flags a::before {
    background-color: var(--jw-star-gold, #f29900) !important;
}

/* No gray box behind star/flag controls */
#messagelist td.flags,
#messagelist td.flagcol,
#messagelist td.flags span.flag,
#messagelist td.flags a,
.star-btn {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Current / open row highlight */
.mail-row-current {
    border-left: 4px solid var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

/* Hidden non-essential columns */
#messagelist td.threads,
#messagelist td.status,
#messagelist td.flag,
#messagelist td.size,
#messagelist tbody tr.message td.threads,
#messagelist tbody tr.message td.status,
#messagelist tbody tr.message td.flag,
#messagelist tbody tr.message td.size,
#messagelist tbody tr.message td.subject span.size,
#messagelist tbody tr.message td.subject span.msgicon {
    display: none !important;
}

/* Sender Column */
#messagelist td.fromto,
#messagelist tbody tr.message td.fromto,
#messagelist tbody tr.message td.subject span.fromto {
    order: 3 !important;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    text-align: left !important;
    color: #444746 !important;
    margin-right: 12px !important;
}

#messagelist tbody tr.message.unread td.fromto,
#messagelist tbody tr.message.unread td.subject span.fromto {
    font-weight: 700 !important;
    color: #1f1f1f !important;
}

/* Subject Column */
#messagelist td.subject,
#messagelist tbody tr.message td.subject {
    order: 4 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    gap: 8px !important;
    padding: 0 !important;
}

#messagelist td.subject span.subject,
#messagelist tbody tr.message td.subject span.subject {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    text-align: left !important;
}

#messagelist td.subject a,
#messagelist tbody tr.message td.subject a {
    color: #444746 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#messagelist tbody tr.message.unread td.subject a {
    font-weight: 700 !important;
    color: #1f1f1f !important;
}

/* Attachment Badge */
#messagelist td.attachment,
#messagelist tbody tr.message td.attachment,
#messagelist tbody tr.message td.subject span.attachment {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

#messagelist td.attachment::before,
#messagelist tbody tr.message td.subject span.attachment::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #5f6368 !important;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>') center / 20px no-repeat !important;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>') center / 20px no-repeat !important;
}

/* Date & Actions Column */
#messagelist td.date,
#messagelist tbody tr.message td.date,
#messagelist tbody tr.message td.subject span.date {
    order: 5 !important;
    width: 130px !important;
    min-width: 130px !important;
    flex-shrink: 0 !important;
    text-align: right !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #5f6368 !important;
    white-space: nowrap !important;
    position: relative !important;
}

#messagelist tbody tr.message.unread td.date,
#messagelist tbody tr.message.unread td.subject span.date {
    font-weight: 700 !important;
    color: #1f1f1f !important;
}

/* Mail Row Hover Action Buttons */
#messagelist tr.message .mail-actions,
#messagelist tbody tr.message .mail-actions {
    display: none;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

#messagelist tr.message:hover .mail-actions,
#messagelist tbody tr.message:hover .mail-actions {
    display: flex !important;
}

#messagelist tr.message:hover td.date span.mail-date-label,
#messagelist tr.message:hover span.date > span:not(.mail-actions) {
    display: none !important;
}

#messagelist .mail-actions button {
    border: none !important;
    background: transparent !important;
    color: #5f6368 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease !important;
}

#messagelist .mail-actions button:hover {
    background-color: #d3e3fd !important;
    color: #041e49 !important;
    transform: scale(1.15) !important;
}

/* Dark Mode Mail List */
.dark #messagelist tbody tr.message,
.dark-mode #messagelist tbody tr.message,
.dark #messagelist tr.message,
.dark-mode #messagelist tr.message {
    background-color: #252d3d !important;
    border-color: #27272a !important;
    color: #e8eaed !important;
}

.dark #messagelist tbody tr.message:hover,
.dark-mode #messagelist tbody tr.message:hover,
.dark #messagelist tr.message:hover,
.dark-mode #messagelist tr.message:hover {
    background-color: #282a2c !important;
    box-shadow: inset 1px 0 0 #3c4043, inset -1px 0 0 #3c4043, 0 1px 2px 0 rgba(0,0,0,0.5) !important;
}

.dark #messagelist tbody tr.message.selected,
.dark-mode #messagelist tbody tr.message.selected,
.dark #messagelist tr.message.selected,
.dark-mode #messagelist tr.message.selected {
    background-color: #004a77 !important;
    border-left: 4px solid #8ab4f8 !important;
}

.dark #messagelist td.selection input,
.dark-mode #messagelist td.selection input {
    accent-color: #8ab4f8 !important;
}

.dark #messagelist tbody tr.message.unread td.fromto,
.dark-mode #messagelist tbody tr.message.unread td.fromto,
.dark #messagelist tbody tr.message.unread td.subject span.fromto,
.dark-mode #messagelist tbody tr.message.unread td.subject span.fromto,
.dark #messagelist tbody tr.message.unread td.subject a,
.dark-mode #messagelist tbody tr.message.unread td.subject a,
.dark #messagelist tbody tr.message.unread td.date,
.dark-mode #messagelist tbody tr.message.unread td.date {
    color: #ffffff !important;
}

.dark #messagelist tbody tr.message:not(.unread) td.fromto,
.dark-mode #messagelist tbody tr.message:not(.unread) td.fromto,
.dark #messagelist tbody tr.message:not(.unread) td.subject a,
.dark-mode #messagelist tbody tr.message:not(.unread) td.subject a {
    color: #c4c7c5 !important;
}

.dark #messagelist tbody tr.message td.date,
.dark-mode #messagelist tbody tr.message td.date {
    color: #9aa0a6 !important;
}

.dark #messagelist .mail-actions button:hover,
.dark-mode #messagelist .mail-actions button:hover {
    background-color: #383a3d !important;
    color: #8ab4f8 !important;
}

/* ==========================================================================
   VIEW MODES: SPLIT VIEW & FULL VIEW
   ========================================================================== */
body.task-mail.view-full:not(.reading-active) #layout-list {
    width: 100% !important;
    display: flex !important;
    flex: 1 1 0% !important;
}

body.task-mail.view-full:not(.reading-active) #layout-content {
    display: none !important;
}

body.task-mail.view-full.reading-active #layout-list {
    display: none !important;
}

body.task-mail.view-full.reading-active #layout-content {
    width: 100% !important;
    display: flex !important;
    flex: 1 1 0% !important;
}

body.view-split #layout-list {
    width: 42% !important;
    min-width: 380px !important;
    display: flex !important;
    border-right: 1px solid #e0e2ec !important;
}

body.view-split #layout-content {
    flex: 1 !important;
    display: flex !important;
    min-width: 0 !important;
}

body.dark.view-split #layout-list,
body.dark-mode.view-split #layout-list,
.dark.view-split #layout-list,
.dark-mode.view-split #layout-list {
    border-right: 1px solid #27272a !important;
}

/* ==========================================================================
   SIDEBAR COLLAPSED STATES (JWEBMAIL MODERN RESPONSIVE)
   ========================================================================== */
body.sidebar-collapsed #layout-sidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    transition: width 0.2s ease, padding 0.2s ease !important;
}

body.sidebar-collapsed #layout-sidebar .sidebar-text,
body.sidebar-collapsed #layout-sidebar .name,
body.sidebar-collapsed #layout-sidebar .unreadcount,
body.sidebar-collapsed #layout-sidebar .jwebmail-badge,
body.sidebar-collapsed #layout-sidebar #mailboxlist li a span:not(.icon) {
    display: none !important;
}

body.sidebar-collapsed #header-logo-area,
body.sidebar-collapsed .sidebar-logo-container,
body.sidebar-collapsed #layout-header-logo {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    justify-content: center !important;
    transition: width 0.2s ease !important;
}

body.sidebar-collapsed #header-logo-area .logo-text,
body.sidebar-collapsed .sidebar-logo-container .logo-text,
body.sidebar-collapsed #layout-header-logo .logo-text,
body.sidebar-collapsed #header-logo-area span,
body.sidebar-collapsed .sidebar-logo-container span {
    display: none !important;
}

body.sidebar-collapsed #layout-sidebar #mailboxlist li.mailbox a,
body.sidebar-collapsed #layout-sidebar #mailboxlist li a {
    justify-content: center !important;
    padding: 0 !important;
    margin-right: 0 !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 auto 4px auto !important;
}

body.sidebar-collapsed #layout-sidebar #mailboxlist li.mailbox a::before,
body.sidebar-collapsed #layout-sidebar #mailboxlist li a::before {
    margin-right: 0 !important;
    font-size: 20px !important;
}

body.sidebar-collapsed #layout-sidebar .jwebmail-compose-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

body.sidebar-collapsed #layout-sidebar .jwebmail-compose-btn .sidebar-text,
body.sidebar-collapsed #layout-sidebar .jwebmail-compose-btn span {
    display: none !important;
}

/* Collapsed Sidebar: Quota & Storage Area Clean Rules */
body.sidebar-collapsed #layout-sidebar [id*="quota"],
body.sidebar-collapsed #layout-sidebar .quota-widget,
body.sidebar-collapsed #layout-sidebar #quotadisplay,
body.sidebar-collapsed #layout-sidebar .sidebar-footer-text,
body.sidebar-collapsed #layout-sidebar .text-\[11px\],
body.sidebar-collapsed #layout-sidebar .w-full.bg-zinc-100,
body.sidebar-collapsed #layout-sidebar .dark\:bg-zinc-800 {
    display: none !important;
}

body.sidebar-collapsed #layout-sidebar > div:last-child {
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 8px !important;
}

body.sidebar-collapsed #layout-sidebar > div:last-child .flex.justify-between,
body.sidebar-collapsed #layout-sidebar > div:last-child div:not(:last-child) {
    display: none !important;
}

body.sidebar-collapsed #layout-sidebar a[title="Oturumu Kapat"],
body.sidebar-collapsed #layout-sidebar a[href*="task=logout"],
body.sidebar-collapsed #layout-sidebar a[href*="logout"] {
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
}

body.sidebar-collapsed #layout-sidebar a[title="Oturumu Kapat"] i,
body.sidebar-collapsed #layout-sidebar a[href*="task=logout"] i,
body.sidebar-collapsed #layout-sidebar a[href*="logout"] i {
    font-size: 18px !important;
    margin: 0 !important;
}

body.sidebar-collapsed #layout-sidebar a[title="Oturumu Kapat"] span,
body.sidebar-collapsed #layout-sidebar a[href*="task=logout"] span,
body.sidebar-collapsed #layout-sidebar a[href*="logout"] span {
    display: none !important;
}

/* ==========================================================================
   ROUNDCUBE EMAIL READING & PREVIEW ENHANCEMENTS
   ========================================================================== */
#messagebody,
.email-body-content {
    font-family: var(--jw-body-font) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #1f1f1f !important;
    word-break: break-word !important;
}

.dark #messagebody,
.dark-mode #messagebody,
.dark .email-body-content,
.dark-mode .email-body-content {
    color: #e4e4e7 !important;
}

#messagebody iframe#messagepartframe {
    width: 100% !important;
    border: none !important;
    background-color: #ffffff !important;
    min-height: 480px !important;
    border-radius: 8px !important;
    color-scheme: light;
}

#messagebody pre,
.email-body-content pre {
    font-family: var(--jw-mono-font) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
}

#messagebody blockquote,
.email-body-content blockquote {
    border-left: 3px solid #cbd5e1 !important;
    padding-left: 12px !important;
    margin: 10px 0 !important;
    color: #64748b !important;
}

.dark #messagebody blockquote,
.dark-mode #messagebody blockquote,
.dark .email-body-content blockquote,
.dark-mode .email-body-content blockquote {
    border-left-color: #475569 !important;
    color: #94a3b8 !important;
}

/* Attachments List Chips */
ul#attachment-list,
.attachmentslist,
#attachment-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 12px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

ul#attachment-list li,
.attachmentslist li,
#attachment-list li {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #e0e2ec !important;
    background-color: #f8fafc !important;
    border-radius: 12px !important;
    padding: 7px 14px !important;
    gap: 8px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

ul#attachment-list li:hover,
.attachmentslist li:hover,
#attachment-list li:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}

.dark ul#attachment-list li,
.dark-mode ul#attachment-list li,
.dark .attachmentslist li,
.dark-mode .attachmentslist li,
.dark #attachment-list li,
.dark-mode #attachment-list li {
    border-color: #3f3f46 !important;
    background-color: #27272a !important;
}

.dark ul#attachment-list li:hover,
.dark-mode ul#attachment-list li:hover,
.dark .attachmentslist li:hover,
.dark-mode .attachmentslist li:hover,
.dark #attachment-list li:hover,
.dark-mode #attachment-list li:hover {
    background-color: #323238 !important;
    border-color: #52525b !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

ul#attachment-list li a,
.attachmentslist li a,
#attachment-list li a {
    text-decoration: none !important;
    color: #1f1f1f !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.dark ul#attachment-list li a,
.dark-mode ul#attachment-list li a,
.dark .attachmentslist li a,
.dark-mode .attachmentslist li a,
.dark #attachment-list li a,
.dark-mode #attachment-list li a {
    color: #f4f4f5 !important;
}

ul#attachment-list li a.filename::before,
.attachmentslist li a.filename::before,
#attachment-list li a.filename::before,
ul#attachment-list li a:first-child::before,
.attachmentslist li a:first-child::before,
#attachment-list li a:first-child::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #0b57d0 !important;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>') center / 20px no-repeat !important;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>') center / 20px no-repeat !important;
}

.dark ul#attachment-list li a.filename::before,
.dark-mode ul#attachment-list li a.filename::before,
.dark .attachmentslist li a.filename::before,
.dark-mode .attachmentslist li a.filename::before,
.dark #attachment-list li a.filename::before,
.dark-mode #attachment-list li a.filename::before,
.dark ul#attachment-list li a:first-child::before,
.dark-mode ul#attachment-list li a:first-child::before,
.dark .attachmentslist li a:first-child::before,
.dark-mode .attachmentslist li a:first-child::before,
.dark #attachment-list li a:first-child::before,
.dark-mode #attachment-list li a:first-child::before {
    background-color: #8ab4f8 !important;
}

/* Remote Objects Notice */
#message-objects {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
#message-objects:empty,
#message-objects:not(:has(.notice)):not(:has(.warning)):not(:has(.remote-objects-message)) {
    display: none !important;
}
#message-objects .notice,
#message-objects .warning,
.remote-objects-message {
    background-color: #fef7e0 !important;
    border: 1px solid #fbdc99 !important;
    color: #7c5800 !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.dark #message-objects .notice,
.dark-mode #message-objects .notice,
.dark #message-objects .warning,
.dark-mode #message-objects .warning,
.dark .remote-objects-message,
.dark-mode .remote-objects-message {
    background-color: #3e3215 !important;
    border-color: #594410 !important;
    color: #fef0cd !important;
}

#message-objects a,
.remote-objects-message a {
    color: #0b57d0 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

.dark #message-objects a,
.dark-mode #message-objects a,
.dark .remote-objects-message a,
.dark-mode .remote-objects-message a {
    color: #8ab4f8 !important;
}

/* Header Summary & Headers Table */
.header-summary {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    font-size: 13.5px !important;
}

.header-summary .from {
    font-weight: 700 !important;
    color: #1f1f1f !important;
}

.dark .header-summary .from,
.dark-mode .header-summary .from {
    color: #f4f4f5 !important;
}

.header-summary .date {
    margin-left: auto !important;
    color: #71717a !important;
    font-size: 12px !important;
}

.dark .header-summary .date,
.dark-mode .header-summary .date {
    color: #a1a1aa !important;
}

.header-headers table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.header-headers table td {
    padding: 3px 6px !important;
    font-size: 12px !important;
    vertical-align: top !important;
    border: none !important;
}

.header-headers table td.header-title {
    color: #71717a !important;
    font-weight: 600 !important;
    width: 85px !important;
}

.dark .header-headers table td.header-title {
    color: #a1a1aa !important;
}

.header-headers table td.header-value {
    color: #1f1f1f !important;
}

.dark .header-headers table td.header-value {
    color: #e4e4e7 !important;
}

/* Bottom Quick Action Pills */
.jwebmail-bottom-pill {
    font-size: 13px !important;
    height: 32px !important;
    padding: 0 16px !important;
    font-weight: 500 !important;
    border-radius: 9999px !important;
    border: 1px solid #dadce0 !important;
    color: #444746 !important;
    background-color: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.jwebmail-bottom-pill:hover {
    background-color: #d3e3fd !important;
    border-color: #c2e7ff !important;
    color: #041e49 !important;
}

.dark .jwebmail-bottom-pill,
.dark-mode .jwebmail-bottom-pill {
    border-color: #3f3f46 !important;
    color: #e4e4e7 !important;
}

.dark .jwebmail-bottom-pill:hover,
.dark-mode .jwebmail-bottom-pill:hover {
    background-color: rgba(211, 227, 253, 0.2) !important;
    border-color: rgba(211, 227, 253, 0.35) !important;
    color: #d3e3fd !important;
}

/* Empty placeholder */
#preview-empty-placeholder {
    transition: opacity 0.2s ease !important;
}

/* ==========================================================================
   SIDEBAR UNIFIED STANDARD NAVIGATION (FONT: 16px, ICON: 16px, HEIGHT: 48px)
   ========================================================================== */
#layout-sidebar .jwebmail-compose-btn,
#mailboxlist li a,
ul#mailboxlist li a,
#mailboxlist li.mailbox a,
ul#mailboxlist li.mailbox a,
#layout-sidebar .folder-manage-link,
#layout-sidebar .logout-link {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 12px 0 10px !important;
    margin-right: 8px !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border-radius: 0 24px 24px 0 !important;
    gap: 0 !important;
}

/* All sidebar SVG icons: exact 16x16 standard */
#layout-sidebar .sidebar-svg,
#layout-sidebar svg.sidebar-svg,
#layout-sidebar .jwebmail-compose-btn svg,
#layout-sidebar #mailboxlist li a svg,
#layout-sidebar .folder-manage-link svg,
#layout-sidebar .logout-link svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* Text & Spans for all sidebar items: STANDART 16px */
#layout-sidebar .menutext,
#layout-sidebar a,
#layout-sidebar a span,
#mailboxlist,
#mailboxlist li,
#mailboxlist li a,
#mailboxlist li a span,
#layout-sidebar .jwebmail-compose-btn span,
#layout-sidebar .folder-manage-link span,
#layout-sidebar .logout-link span {
    font-size: 1rem !important;
    line-height: 1.25 !important;
}

/* Aktif değilse: Standart / Regular (font-weight: 400 - BOLD DEĞİL) */
#layout-sidebar a:not(.active),
#layout-sidebar a:not(.active) span,
#layout-sidebar .menutext:not(.active),
#mailboxlist li:not(.selected):not(.active) > a,
#mailboxlist li:not(.selected):not(.active) > a span,
#mailboxlist li:not(.selected):not(.active) > a .name,
#mailboxlist li:not(.selected):not(.active) > a .menutext,
#mailboxlist li.unread:not(.selected):not(.active) > a,
#mailboxlist li.unread:not(.selected):not(.active) > a span {
    font-weight: 400 !important;
}

/* SADECE Aktif / Seçili olan: BOLD (font-weight: 700) */
#layout-sidebar a.active,
#layout-sidebar a.active span,
#layout-sidebar a.active .menutext,
#mailboxlist li.selected > a,
#mailboxlist li.active > a,
#mailboxlist li.mailbox.selected a,
#mailboxlist li.mailbox.active a,
#mailboxlist li.selected > a span,
#mailboxlist li.active > a span,
#mailboxlist li.selected > a .name,
#mailboxlist li.active > a .name,
#mailboxlist li.selected > a .menutext,
#mailboxlist li.active > a .menutext {
    font-weight: 700 !important;
}

/* ==========================================================================
   JWebMail Standard SVG Icon Sizing System (Iconify / Lucide Compatible)
   ==========================================================================
   1. Boyut : 16x16 (.svg-size-1, .svg-16, .svg-icon-16)
   2. Boyut : 20x20 (.svg-size-2, .svg-20, .svg-icon-20)
   3. Boyut : 24x24 (.svg-size-3, .svg-24, .svg-icon-24)
   4. Boyut : 32x32 (.svg-size-4, .svg-32, .svg-icon-32)
   5. Boyut : 48x48 (.svg-size-5, .svg-48, .svg-icon-48)
   6. Boyut : 64x64 (.svg-size-6, .svg-64, .svg-icon-64)
   ========================================================================== */

/* Temel SVG İkon */
.svg-icon,
svg.svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    box-sizing: border-box;
    line-height: 1;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    image-rendering: -webkit-optimize-contrast;
}

/* 1. Boyut: 16x16 */
.svg-size-1,
.svg-16,
.svg-icon-16,
svg[data-size="1"],
svg[data-size="16"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
}

/* 2. Boyut: 20x20 */
.svg-size-2,
.svg-20,
.svg-icon-20,
svg[data-size="2"],
svg[data-size="20"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
}

/* 3. Boyut: 24x24 */
.svg-size-3,
.svg-24,
.svg-icon-24,
svg[data-size="3"],
svg[data-size="24"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
}

/* 4. Boyut: 32x32 */
.svg-size-4,
.svg-32,
.svg-icon-32,
svg[data-size="4"],
svg[data-size="32"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
}

/* 5. Boyut: 48x48 */
.svg-size-5,
.svg-48,
.svg-icon-48,
svg[data-size="5"],
svg[data-size="48"] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
}

/* 6. Boyut: 64x64 */
.svg-size-6,
.svg-64,
.svg-icon-64,
svg[data-size="6"],
svg[data-size="64"] {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
}

/* ==========================================================================
   Menutext Standart Font Size Sistemi
   ==========================================================================
   1. Boyut : 10px (.menutext-size-1, .menutext-10, .menu-text-10)
   2. Boyut : 12px (.menutext-size-2, .menutext-12, .menu-text-12)
   3. Boyut : 14px (.menutext-size-3, .menutext-14, .menu-text-14)
   4. Boyut : 16px (.menutext-size-4, .menutext-16, .menu-text-16)
   5. Boyut : 18px (.menutext-size-5, .menutext-18, .menu-text-18)
   6. Boyut : 20px (.menutext-size-6, .menutext-20, .menu-text-20)
   ========================================================================== */

/* Temel Menutext Sınıfı */
.menutext,
.menu-text {
    line-height: 1.25 !important;
    vertical-align: middle !important;
    font-weight: 500;
}

/* 1. Boyut: 10px */
.menutext-size-1,
.menu-text-size-1,
.menutext-10,
.menu-text-10,
[data-menutext-size="1"],
[data-menutext-size="10"] {
    font-size: 10px !important;
}

/* 2. Boyut: 12px */
.menutext-size-2,
.menu-text-size-2,
.menutext-12,
.menu-text-12,
[data-menutext-size="2"],
[data-menutext-size="12"] {
    font-size: 12px !important;
}

/* 3. Boyut: 14px */
.menutext-size-3,
.menu-text-size-3,
.menutext-14,
.menu-text-14,
[data-menutext-size="3"],
[data-menutext-size="14"] {
    font-size: 14px !important;
}

/* 4. Boyut: 16px */
.menutext-size-4,
.menu-text-size-4,
.menutext-16,
.menu-text-16,
[data-menutext-size="4"],
[data-menutext-size="16"] {
    font-size: 16px !important;
}

/* 5. Boyut: 18px */
.menutext-size-5,
.menu-text-size-5,
.menutext-18,
.menu-text-18,
[data-menutext-size="5"],
[data-menutext-size="18"] {
    font-size: 18px !important;
}

/* 6. Boyut: 20px */
.menutext-size-6,
.menu-text-size-6,
.menutext-20,
.menu-text-20,
[data-menutext-size="6"],
[data-menutext-size="20"] {
    font-size: 20px !important;
}






/* ==========================================================================
   10 ÇEŞİT TEMA VE RENK TASARIMI SİSTEMİ (CUSTOM STYLE)
   Kullanım: <html data-theme="1"> .. <html data-theme="10"> veya .theme-1 .. .theme-10
   ========================================================================== */

/* 1. Google Mavi (Varsayılan) */
:root, [data-theme="1"], .theme-1, .theme-blue {
    --jw-theme-name: "Google Mavi";
    --jw-primary: #0b57d0;
    --jw-primary-hover: #0842a0;
    --jw-surface-active: #d3e3fd;
    --jw-surface-active-border: #a8c7fa;
    --jw-badge-bg: #c2e7ff;
    --jw-badge-color: #001d35;
    --jw-text-main: #1f1f1f;
    --jw-text-secondary: #444746;
    --jw-text-active: #001d35;
    --jw-text-hover: #1f1f1f;
    --jw-icon-main: #444746;
    --jw-icon-hover: #1f1f1f;
    --jw-icon-active: #0b57d0;
}
.dark[data-theme="1"], .dark-mode[data-theme="1"], [data-bs-theme="dark"][data-theme="1"] {
    --jw-primary: #a8c7fa;
    --jw-primary-hover: #c2e7ff;
    --jw-surface-active: #004a77;
    --jw-surface-active-border: #0842a0;
    --jw-badge-bg: #004a77;
    --jw-badge-color: #c2e7ff;
    --jw-text-main: #e3e3e3;
    --jw-text-secondary: #c4c7c5;
    --jw-text-active: #ffffff;
    --jw-text-hover: #ffffff;
    --jw-icon-main: #c4c7c5;
    --jw-icon-hover: #ffffff;
    --jw-icon-active: #a8c7fa;
}

/* 2. Zümrüt Yeşil (Emerald Green) */
[data-theme="2"], .theme-2, .theme-emerald {
    --jw-theme-name: "Zümrüt Yeşil";
    --jw-primary: #188038;
    --jw-primary-hover: #137333;
    --jw-surface-active: #ceead6;
    --jw-surface-active-border: #a8dab5;
    --jw-badge-bg: #a8dab5;
    --jw-badge-color: #072711;
    --jw-text-main: #1f1f1f;
    --jw-text-secondary: #444746;
    --jw-text-active: #0d5324;
    --jw-text-hover: #072711;
    --jw-icon-main: #444746;
    --jw-icon-hover: #137333;
    --jw-icon-active: #188038;
}
.dark[data-theme="2"], .dark-mode[data-theme="2"], [data-bs-theme="dark"][data-theme="2"] {
    --jw-primary: #81c995;
    --jw-primary-hover: #a8dab5;
    --jw-surface-active: #0d421d;
    --jw-surface-active-border: #137333;
    --jw-badge-bg: #0d421d;
    --jw-badge-color: #81c995;
    --jw-text-main: #e3e3e3;
    --jw-text-secondary: #c4c7c5;
    --jw-text-active: #ffffff;
    --jw-text-hover: #ffffff;
    --jw-icon-main: #c4c7c5;
    --jw-icon-hover: #ffffff;
    --jw-icon-active: #81c995;
}

/* 3. Asil Mor (Royal Purple) */
[data-theme="3"], .theme-3, .theme-purple {
    --jw-theme-name: "Asil Mor";
    --jw-primary: #7c4dff;
    --jw-primary-hover: #651fff;
    --jw-surface-active: #ede7f6;
    --jw-surface-active-border: #d1c4e9;
    --jw-badge-bg: #d1c4e9;
    --jw-badge-color: #311b92;
    --jw-text-main: #1f1f1f;
    --jw-text-secondary: #444746;
    --jw-text-active: #311b92;
    --jw-text-hover: #1f1f1f;
    --jw-icon-main: #444746;
    --jw-icon-hover: #651fff;
    --jw-icon-active: #7c4dff;
}
.dark[data-theme="3"], .dark-mode[data-theme="3"], [data-bs-theme="dark"][data-theme="3"] {
    --jw-primary: #b388ff;
    --jw-primary-hover: #d1c4e9;
    --jw-surface-active: #311b92;
    --jw-surface-active-border: #4527a0;
    --jw-badge-bg: #311b92;
    --jw-badge-color: #b388ff;
    --jw-text-main: #e3e3e3;
    --jw-text-secondary: #c4c7c5;
    --jw-text-active: #ffffff;
    --jw-text-hover: #ffffff;
    --jw-icon-main: #c4c7c5;
    --jw-icon-hover: #ffffff;
    --jw-icon-active: #b388ff;
}

/* 4. Yakut Kırmızı (Ruby Red) */
[data-theme="4"], .theme-4, .theme-ruby {
    --jw-theme-name: "Yakut Kırmızı";
    --jw-primary: #d93025;
    --jw-primary-hover: #b31412;
    --jw-surface-active: #fad2cf;
    --jw-surface-active-border: #f6aea9;
    --jw-badge-bg: #f6aea9;
    --jw-badge-color: #5c0b08;
    --jw-text-main: #1f1f1f;
    --jw-text-secondary: #444746;
    --jw-text-active: #b31412;
    --jw-text-hover: #5c0b08;
    --jw-icon-main: #444746;
    --jw-icon-hover: #b31412;
    --jw-icon-active: #d93025;
}
.dark[data-theme="4"], .dark-mode[data-theme="4"], [data-bs-theme="dark"][data-theme="4"] {
    --jw-primary: #f28b82;
    --jw-primary-hover: #f6aea9;
    --jw-surface-active: #5c0b08;
    --jw-surface-active-border: #b31412;
    --jw-badge-bg: #5c0b08;
    --jw-badge-color: #f28b82;
    --jw-text-main: #e3e3e3;
    --jw-text-secondary: #c4c7c5;
    --jw-text-active: #ffffff;
    --jw-text-hover: #ffffff;
    --jw-icon-main: #c4c7c5;
    --jw-icon-hover: #ffffff;
    --jw-icon-active: #f28b82;
}

/* 5. Kehribar Turuncu (Amber Sunset) */
[data-theme="5"], .theme-5, .theme-amber {
    --jw-theme-name: "Kehribar Turuncu";
    --jw-primary: #e8710a;
    --jw-primary-hover: #c25e00;
    --jw-surface-active: #feefe3;
    --jw-surface-active-border: #fedfc8;
    --jw-badge-bg: #fedfc8;
    --jw-badge-color: #522400;
    --jw-text-main: #1f1f1f;
    --jw-text-secondary: #444746;
    --jw-text-active: #8f3f00;
    --jw-text-hover: #522400;
    --jw-icon-main: #444746;
    --jw-icon-hover: #c25e00;
    --jw-icon-active: #e8710a;
}
.dark[data-theme="5"], .dark-mode[data-theme="5"], [data-bs-theme="dark"][data-theme="5"] {
    --jw-primary: #fcad70;
    --jw-primary-hover: #fedfc8;
    --jw-surface-active: #522400;
    --jw-surface-active-border: #8f3f00;
    --jw-badge-bg: #522400;
    --jw-badge-color: #fcad70;
    --jw-text-main: #e3e3e3;
    --jw-text-secondary: #c4c7c5;
    --jw-text-active: #ffffff;
    --jw-text-hover: #ffffff;
    --jw-icon-main: #c4c7c5;
    --jw-icon-hover: #ffffff;
    --jw-icon-active: #fcad70;
}

/* 6. Okyanus Turkuaz (Ocean Teal) */
[data-theme="6"], .theme-6, .theme-teal {
    --jw-theme-name: "Okyanus Turkuaz";
    --jw-primary: #007b83;
    --jw-primary-hover: #005f66;
    --jw-surface-active: #ccf6e4;
    --jw-surface-active-border: #80ebbc;
    --jw-badge-bg: #a3f1cd;
    --jw-badge-color: #00363a;
    --jw-text-main: #1f1f1f;
    --jw-text-secondary: #444746;
    --jw-text-active: #004d40;
    --jw-text-hover: #00251a;
    --jw-icon-main: #444746;
    --jw-icon-hover: #005f66;
    --jw-icon-active: #007b83;
}
.dark[data-theme="6"], .dark-mode[data-theme="6"], [data-bs-theme="dark"][data-theme="6"] {
    --jw-primary: #4dd0e1;
    --jw-primary-hover: #80deea;
    --jw-surface-active: #00363a;
    --jw-surface-active-border: #006064;
    --jw-badge-bg: #00363a;
    --jw-badge-color: #4dd0e1;
    --jw-text-main: #e3e3e3;
    --jw-text-secondary: #c4c7c5;
    --jw-text-active: #ffffff;
    --jw-text-hover: #ffffff;
    --jw-icon-main: #c4c7c5;
    --jw-icon-hover: #ffffff;
    --jw-icon-active: #4dd0e1;
}

/* 7. Çelik Gri (Corporate Slate) */
[data-theme="7"], .theme-7, .theme-slate {
    --jw-theme-name: "Çelik Gri";
    --jw-primary: #475569;
    --jw-primary-hover: #334155;
    --jw-surface-active: #e2e8f0;
    --jw-surface-active-border: #cbd5e1;
    --jw-badge-bg: #cbd5e1;
    --jw-badge-color: #0f172a;
    --jw-text-main: #0f172a;
    --jw-text-secondary: #475569;
    --jw-text-active: #0f172a;
    --jw-text-hover: #020617;
    --jw-icon-main: #475569;
    --jw-icon-hover: #0f172a;
    --jw-icon-active: #1e293b;
}
.dark[data-theme="7"], .dark-mode[data-theme="7"], [data-bs-theme="dark"][data-theme="7"] {
    --jw-primary: #94a3b8;
    --jw-primary-hover: #cbd5e1;
    --jw-surface-active: #1e293b;
    --jw-surface-active-border: #334155;
    --jw-badge-bg: #1e293b;
    --jw-badge-color: #94a3b8;
    --jw-text-main: #f8fafc;
    --jw-text-secondary: #94a3b8;
    --jw-text-active: #ffffff;
    --jw-text-hover: #ffffff;
    --jw-icon-main: #94a3b8;
    --jw-icon-hover: #ffffff;
    --jw-icon-active: #cbd5e1;
}

/* 8. Gül Pembe (Rose Pink) */
[data-theme="8"], .theme-8, .theme-rose {
    --jw-theme-name: "Gül Pembe";
    --jw-primary: #c2185b;
    --jw-primary-hover: #ad1457;
    --jw-surface-active: #fce4ec;
    --jw-surface-active-border: #f8bbd0;
    --jw-badge-bg: #f8bbd0;
    --jw-badge-color: #560027;
    --jw-text-main: #1f1f1f;
    --jw-text-secondary: #444746;
    --jw-text-active: #880e4f;
    --jw-text-hover: #560027;
    --jw-icon-main: #444746;
    --jw-icon-hover: #ad1457;
    --jw-icon-active: #c2185b;
}
.dark[data-theme="8"], .dark-mode[data-theme="8"], [data-bs-theme="dark"][data-theme="8"] {
    --jw-primary: #f48fb1;
    --jw-primary-hover: #f8bbd0;
    --jw-surface-active: #560027;
    --jw-surface-active-border: #880e4f;
    --jw-badge-bg: #560027;
    --jw-badge-color: #f48fb1;
    --jw-text-main: #e3e3e3;
    --jw-text-secondary: #c4c7c5;
    --jw-text-active: #ffffff;
    --jw-text-hover: #ffffff;
    --jw-icon-main: #c4c7c5;
    --jw-icon-hover: #ffffff;
    --jw-icon-active: #f48fb1;
}

/* 9. Gece Mavisi (Midnight Navy) */
[data-theme="9"], .theme-9, .theme-navy {
    --jw-theme-name: "Gece Mavisi";
    --jw-primary: #1e3a8a;
    --jw-primary-hover: #172554;
    --jw-surface-active: #dbeafe;
    --jw-surface-active-border: #bfdbfe;
    --jw-badge-bg: #bfdbfe;
    --jw-badge-color: #0f172a;
    --jw-text-main: #0f172a;
    --jw-text-secondary: #334155;
    --jw-text-active: #172554;
    --jw-text-hover: #0f172a;
    --jw-icon-main: #334155;
    --jw-icon-hover: #1e3a8a;
    --jw-icon-active: #1e3a8a;
}
.dark[data-theme="9"], .dark-mode[data-theme="9"], [data-bs-theme="dark"][data-theme="9"] {
    --jw-primary: #93c5fd;
    --jw-primary-hover: #bfdbfe;
    --jw-surface-active: #172554;
    --jw-surface-active-border: #1e3a8a;
    --jw-badge-bg: #172554;
    --jw-badge-color: #93c5fd;
    --jw-text-main: #f8fafc;
    --jw-text-secondary: #94a3b8;
    --jw-text-active: #ffffff;
    --jw-text-hover: #ffffff;
    --jw-icon-main: #94a3b8;
    --jw-icon-hover: #ffffff;
    --jw-icon-active: #93c5fd;
}

/* 10. Kömür Minimal (Charcoal Monochrome) */
[data-theme="10"], .theme-10, .theme-charcoal {
    --jw-theme-name: "Kömür Minimal";
    --jw-primary: #262626;
    --jw-primary-hover: #171717;
    --jw-surface-active: #e5e5e5;
    --jw-surface-active-border: #d4d4d4;
    --jw-badge-bg: #d4d4d4;
    --jw-badge-color: #0a0a0a;
    --jw-text-main: #0a0a0a;
    --jw-text-secondary: #525252;
    --jw-text-active: #0a0a0a;
    --jw-text-hover: #000000;
    --jw-icon-main: #525252;
    --jw-icon-hover: #0a0a0a;
    --jw-icon-active: #171717;
}
.dark[data-theme="10"], .dark-mode[data-theme="10"], [data-bs-theme="dark"][data-theme="10"] {
    --jw-primary: #e5e5e5;
    --jw-primary-hover: #ffffff;
    --jw-surface-active: #262626;
    --jw-surface-active-border: #404040;
    --jw-badge-bg: #262626;
    --jw-badge-color: #e5e5e5;
    --jw-text-main: #f5f5f5;
    --jw-text-secondary: #a3a3a3;
    --jw-text-active: #ffffff;
    --jw-text-hover: #ffffff;
    --jw-icon-main: #a3a3a3;
    --jw-icon-hover: #ffffff;
    --jw-icon-active: #e5e5e5;
}

/* ==========================================================================
   FARKLILAŞTIRILMIŞ ÖZEL İKON RENKLERİ (HER KLASÖRE FARKLI RENK)
   ========================================================================== */
/* Gelen Kutusu: Canlı Mavi */
#mailboxlist li.inbox > a svg,
.icon-inbox,
svg.icon-inbox {
    color: #1a73e8 !important;
    stroke: #1a73e8 !important;
}

/* Taslaklar: Nötr Kurşuni / Füme */
#mailboxlist li.drafts > a svg,
.icon-drafts,
svg.icon-drafts {
    color: #5f6368 !important;
    stroke: #5f6368 !important;
}

/* Gönderilmiş: Zümrüt Yeşili */
#mailboxlist li.sent > a svg,
.icon-sent,
svg.icon-sent {
    color: #188038 !important;
    stroke: #188038 !important;
}

/* İstenmeyen / Spam: Canlı Kırmızı Uyarı */
#mailboxlist li.junk > a svg,
#mailboxlist li.spam > a svg,
.icon-junk,
svg.icon-junk {
    color: #d93025 !important;
    stroke: #d93025 !important;
}

/* Çöp Kutusu: Mercan Kırmızı */
#mailboxlist li.trash > a svg,
.icon-trash,
svg.icon-trash {
    color: #ea4335 !important;
    stroke: #ea4335 !important;
}

/* Arşiv: Asil Mor */
#mailboxlist li.archive > a svg,
.icon-archive,
svg.icon-archive {
    color: #8430ce !important;
    stroke: #8430ce !important;
}

/* Özel Kullanıcı Klasörleri: Sıcak Kehribar / Sarı-Turuncu */
#mailboxlist li:not(.inbox):not(.drafts):not(.sent):not(.junk):not(.spam):not(.trash):not(.archive) > a svg,
.icon-folder,
svg.icon-folder {
    color: #f29900 !important;
    stroke: #f29900 !important;
}

/* Klasör Yönetimi: Deniz Mavisi / Turkuaz */
#layout-sidebar .folder-manage-link svg,
.icon-manage,
svg.icon-manage {
    color: #007b83 !important;
    stroke: #007b83 !important;
}

/* Oturumu Kapat: Kırmızı */
#layout-sidebar .logout-link svg,
.icon-logout,
svg.icon-logout {
    color: #d93025 !important;
    stroke: #d93025 !important;
}

/* E-posta Yaz Buton İkonu: Tema Ana Rengi */
#layout-sidebar .jwebmail-compose-btn svg,
.icon-compose,
svg.icon-compose {
    color: var(--jw-primary) !important;
    stroke: var(--jw-primary) !important;
}

/* Dark Mode İkon Renkleri (Göz Yormayan Pastel Tonlar) */
.dark #mailboxlist li.inbox > a svg, .dark-mode #mailboxlist li.inbox > a svg { color: #8ab4f8 !important; stroke: #8ab4f8 !important; }
.dark #mailboxlist li.drafts > a svg, .dark-mode #mailboxlist li.drafts > a svg { color: #bdc1c6 !important; stroke: #bdc1c6 !important; }
.dark #mailboxlist li.sent > a svg, .dark-mode #mailboxlist li.sent > a svg { color: #81c995 !important; stroke: #81c995 !important; }
.dark #mailboxlist li.junk > a svg, .dark-mode #mailboxlist li.junk > a svg,
.dark #mailboxlist li.spam > a svg, .dark-mode #mailboxlist li.spam > a svg { color: #f28b82 !important; stroke: #f28b82 !important; }
.dark #mailboxlist li.trash > a svg, .dark-mode #mailboxlist li.trash > a svg { color: #f28b82 !important; stroke: #f28b82 !important; }
.dark #mailboxlist li.archive > a svg, .dark-mode #mailboxlist li.archive > a svg { color: #c58af9 !important; stroke: #c58af9 !important; }
.dark #mailboxlist li:not(.inbox):not(.drafts):not(.sent):not(.junk):not(.spam):not(.trash):not(.archive) > a svg,
.dark-mode #mailboxlist li:not(.inbox):not(.drafts):not(.sent):not(.junk):not(.spam):not(.trash):not(.archive) > a svg { color: #fdd663 !important; stroke: #fdd663 !important; }
.dark #layout-sidebar .folder-manage-link svg, .dark-mode #layout-sidebar .folder-manage-link svg { color: #4dd0e1 !important; stroke: #4dd0e1 !important; }
.dark #layout-sidebar .logout-link svg, .dark-mode #layout-sidebar .logout-link svg { color: #f28b82 !important; stroke: #f28b82 !important; }
.dark #layout-sidebar .jwebmail-compose-btn svg, .dark-mode #layout-sidebar .jwebmail-compose-btn svg { color: var(--jw-primary) !important; stroke: var(--jw-primary) !important; }

/* ==========================================================================
   YAZI VE MENÜ RENKLERİ (STANDART & AKTİF BOLD)
   ========================================================================== */
#layout-sidebar a,
#layout-sidebar a span,
#mailboxlist li a,
#mailboxlist li a span,
#mailboxlist li.mailbox a,
#layout-sidebar .folder-manage-link,
#layout-sidebar .folder-manage-link span {
    color: var(--jw-text-secondary) !important;
}

#layout-sidebar a:hover,
#layout-sidebar a:hover span,
#mailboxlist li a:hover,
#mailboxlist li a:hover span,
#layout-sidebar .folder-manage-link:hover,
#layout-sidebar .folder-manage-link:hover span {
    color: var(--jw-text-hover) !important;
    background-color: var(--jw-surface-hover) !important;
}

#layout-sidebar a.active,
#layout-sidebar a.fw-bold,
#layout-sidebar a.active span,
#mailboxlist li.selected > a,
#mailboxlist li.active > a,
#mailboxlist li.mailbox.selected a,
#mailboxlist li.mailbox.active a,
#mailboxlist li.selected > a span,
#mailboxlist li.active > a span,
#mailboxlist li a.active,
#mailboxlist li a.fw-bold {
    color: var(--jw-text-active) !important;
    background-color: var(--jw-surface-active) !important;
    font-weight: 700 !important;
}

/* Okunmamış Klasör: Yazısı Kesinlikle Bold Değil, Normaldir */
#mailboxlist li.unread:not(.selected):not(.active) > a,
#mailboxlist li.unread:not(.selected):not(.active) > a span {
    font-weight: 400 !important;
    color: var(--jw-text-secondary) !important;
}

/* Okunmamış Rozeti (Badge) - Tema Rengiyle Eşleşen Arka Plan */
#mailboxlist li a .unreadcount,
#mailboxlist li span.unreadcount,
#mailboxlist li.mailbox span.unreadcount {
    background-color: var(--jw-badge-bg) !important;
    color: var(--jw-badge-color) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}


/* ==========================================================================
   BOOTSTRAP 5 MASTER LAYOUT ENGINE (100% TAILWIND-FREE CORE)
   ========================================================================== */
html, body {
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

#layout-header {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    background-color: var(--jw-surface) !important;
    border-bottom: 1px solid var(--jw-border) !important;
    box-sizing: border-box !important;
    z-index: 1020 !important;
}

#layout {
    display: flex !important;
    flex-direction: row !important;
    height: calc(100vh - 64px) !important;
    width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Sidebar Layout */
#layout-sidebar,
aside#layout-sidebar {
    width: 256px !important;
    min-width: 256px !important;
    max-width: 256px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background-color: var(--jw-surface) !important;
    border-right: 1px solid var(--jw-border) !important;
    flex-shrink: 0 !important;
    transition: width 0.2s ease, min-width 0.2s ease !important;
    box-sizing: border-box !important;
    user-select: none !important;
}

body.sidebar-collapsed #layout-sidebar,
body.sidebar-collapsed aside#layout-sidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Email List Layout */
#layout-list,
main#layout-list {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--jw-surface-card) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.view-split #layout-list,
body.view-split main#layout-list {
    width: 40% !important;
    min-width: 320px !important;
    max-width: 520px !important;
    flex: 0 0 40% !important;
    border-right: 1px solid var(--jw-border) !important;
}

/* Email Content / Preview Layout */
#layout-content,
main#layout-content,
section#layout-content {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--jw-surface-card) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* List and Toolbar */
#messagelist-content {
    flex: 1 1 0% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
}

/* Mail list / content split layout (Bootstrap 5.3 handles generic utilities) */
#layout-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
#layout-content {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}