/* ============================================================
   mxa_theme — light-touch modern polish for Roundcube/Elastic.
   Goal: Gmail-ish feel without restructuring the layout. We do
   NOT hide any columns, do NOT reposition flex parents, do NOT
   override Roundcube's column geometry. Pure visual surface.
   ============================================================ */

/* ─── tokens ─── */
:root {
    --mx-bg:        #f6f8fc;
    --mx-surface:   #ffffff;
    --mx-surface-2: #f1f3f9;
    --mx-border:    #e6e8ee;
    --mx-divider:   #eef0f5;
    --mx-text:      #202124;
    --mx-text-2:    #5f6368;
    --mx-text-3:    #80868b;
    --mx-accent:    #1a73e8;          /* Gmail-ish blue */
    --mx-accent-h:  #1557b0;
    --mx-accent-soft: rgba(26, 115, 232, .08);
    --mx-accent-row:  rgba(26, 115, 232, .12);
    --mx-shadow-sm: 0 1px 2px rgba(60,64,67,.08), 0 1px 3px rgba(60,64,67,.06);
    --mx-shadow-md: 0 1px 3px rgba(60,64,67,.10), 0 4px 8px rgba(60,64,67,.08);
}

/* ─── typography ─── */
html, body {
    font-family:
        "Google Sans", -apple-system, BlinkMacSystemFont,
        "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei UI", "Microsoft YaHei",
        "Helvetica Neue", Arial, "Segoe UI", Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--mx-text);
}
body { font-size: 14px; }

code, kbd, pre, samp,
.attachment .filename {
    font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace !important;
}

*:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .35) !important;
    border-radius: 4px;
}

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(60,64,67,.18); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(60,64,67,.32); background-clip: padding-box; }

/* ─── transitions for interactive bits ─── */
.btn, .button, button.btn,
.toolbar-button, .button.icon,
.listing li > a, .listing tr,
.messagelist tr,
input.form-control, textarea.form-control, select.form-control,
.popupmenu, .ui-dialog,
a {
    transition: background-color .14s ease, color .14s ease,
                border-color .14s ease, box-shadow .14s ease;
}

/* ─── pane backgrounds (subtle, no layout changes) ─── */
.task-mail #layout-sidebar { background: var(--mx-bg) !important; }
.task-mail #layout-list    { background: var(--mx-surface) !important; }
.task-mail #layout-content { background: var(--mx-bg) !important; }

/* pane headers — keep height, just clean look */
.task-mail .listbox > .header,
.task-mail #layout-content > .header {
    background: var(--mx-surface) !important;
    border-bottom: 1px solid var(--mx-border) !important;
}
.task-mail .header .header-title {
    font-weight: 500 !important;
    color: var(--mx-text) !important;
    font-size: 14px !important;
}

/* ─── folder list ─── */
.folderlist li > a,
ul.treelist li > a {
    border-radius: 0 999px 999px 0 !important;
    margin: 1px 8px 1px 0 !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    color: var(--mx-text-2) !important;
}
.folderlist li > a:before,
ul.treelist li > a:before {
    color: var(--mx-text-3);
    margin-right: 12px !important;
}

.folderlist li > a:hover,
ul.treelist li > a:hover {
    background: rgba(60,64,67,.08) !important;
    color: var(--mx-text) !important;
}

.folderlist li.selected > a,
ul.treelist li.selected > a {
    background: #d3e3fd !important;
    color: var(--mx-accent) !important;
    font-weight: 600 !important;
}
.folderlist li.selected > a:before,
ul.treelist li.selected > a:before { color: var(--mx-accent) !important; }

.folderlist li.unread > a { font-weight: 600 !important; color: var(--mx-text) !important; }

.folderlist .unreadcount {
    background: transparent !important;
    color: var(--mx-text-2) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
.folderlist li.selected .unreadcount { color: var(--mx-accent) !important; }

/* ─── message list (Gmail row feel — pure typography/spacing) ─── */
.messagelist tbody tr td {
    padding: 11px 8px !important;
    border-bottom: 1px solid var(--mx-divider) !important;
    background: var(--mx-surface);
}
.messagelist tbody tr:hover td {
    background: #f6f8fc !important;
    box-shadow: inset 0 0 0 9999px rgba(60,64,67,.04);
}
.messagelist tbody tr.selected td {
    background: #d3e3fd !important;
}

/* unread rows: slightly bolder + cleaner white */
.messagelist tbody tr.unread td { background: #fff !important; }
.messagelist tbody tr.unread td.subject .fromto,
.messagelist tbody tr.unread td.subject a.fromto,
.messagelist tbody tr.unread td.fromto,
.messagelist tbody tr.unread td.fromto a,
.messagelist tbody tr.unread td.subject .subject,
.messagelist tbody tr.unread td.subject a,
.messagelist tbody tr.unread td.date {
    color: var(--mx-text) !important;
    font-weight: 700 !important;
}
.messagelist tbody tr td.subject .subject,
.messagelist tbody tr td.subject a,
.messagelist tbody tr td.fromto,
.messagelist tbody tr td.fromto a {
    color: var(--mx-text-2);
    font-size: 13.5px;
}
.messagelist tbody tr td.date,
.messagelist tbody tr td.size {
    color: var(--mx-text-3) !important;
    font-size: 12px !important;
    white-space: nowrap;
}

.messagelist tbody tr td.flag a:before { color: #f9ab00; }

/* ─── search bar (Gmail-pill) ─── */
.searchbar, #mailsearchform, #searchform {
    background: var(--mx-surface-2) !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    margin: 8px 14px !important;
    transition: background-color .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.searchbar:hover, #mailsearchform:hover, #searchform:hover {
    background: #e8eaf0 !important;
}
.searchbar:focus-within, #mailsearchform:focus-within, #searchform:focus-within {
    background: var(--mx-surface) !important;
    border-color: var(--mx-accent) !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .15) !important;
}
.searchbar input, #mailsearchform input, #searchform input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--mx-text) !important;
}

/* ─── toolbar buttons ─── */
.header a.button.icon,
.header a.button,
#toolbar-menu a.button,
#mailtoolbar > a.button,
#mailtoolbar .dropbutton > a.button {
    border-radius: 8px !important;
    color: var(--mx-text-2) !important;
}
.header a.button.icon:hover,
.header a.button:hover,
#toolbar-menu a.button:hover,
#mailtoolbar > a.button:hover,
#mailtoolbar .dropbutton > a.button:hover {
    background: rgba(60,64,67,.08) !important;
    color: var(--mx-text) !important;
}
#toolbar-menu a.button.disabled,
#mailtoolbar a.button.disabled { opacity: .35 !important; }

/* ─── floating compose button ─── */
.task-mail #mxa-fab {
    position: fixed;
    right: 24px; bottom: 24px;
    height: 52px;
    padding: 0 22px 0 18px;
    border-radius: 16px;
    background: #c2e7ff;
    color: #001d35;
    box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 4px 8px rgba(0,0,0,.12);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0; cursor: pointer;
    z-index: 100;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: box-shadow .15s ease, background-color .15s ease;
}
.task-mail #mxa-fab:hover {
    background: #b3dcff;
    box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.15);
    color: #001d35;
}
.task-mail #mxa-fab:active { transform: scale(.98); }
.task-mail #mxa-fab svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }
.task-mail #mxa-fab .label { white-space: nowrap; }

@media (max-width: 600px) {
    .task-mail #mxa-fab {
        right: 16px; bottom: 16px;
        height: 56px; width: 56px;
        padding: 0; border-radius: 50%;
        justify-content: center;
    }
    .task-mail #mxa-fab .label { display: none; }
}

/* ─── message preview ─── */
.headers-table {
    background: var(--mx-surface) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: 12px !important;
    margin: 14px !important;
    padding: 18px 22px !important;
    box-shadow: var(--mx-shadow-sm);
}
.headers-table tr td.header-title {
    color: var(--mx-text-3) !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    padding: 4px 14px 4px 0 !important;
}
.headers-table tr td {
    padding: 4px 0 !important;
    color: var(--mx-text-2);
    font-size: 13.5px;
}
.headers-table tr.subject td.header,
.headers-table .subject {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: var(--mx-text) !important;
    line-height: 1.35 !important;
    padding-bottom: 10px !important;
    letter-spacing: -.1px;
}

#messagebody, .message-htmlpart {
    background: var(--mx-surface) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: 12px !important;
    margin: 14px !important;
    padding: 24px !important;
    line-height: 1.7 !important;
    color: var(--mx-text) !important;
    box-shadow: var(--mx-shadow-sm);
}

/* attachments: pill chips */
#attachment-list, .attachmentslist, ul.attachmentslist {
    padding: 0 14px !important;
    margin: 14px 0 0 !important;
    list-style: none;
    display: flex; flex-wrap: wrap; gap: 8px;
}
#attachment-list li, .attachmentslist li, ul.attachmentslist li {
    background: var(--mx-surface) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: 20px !important;
    padding: 7px 14px !important;
    margin: 0 !important;
    font-size: 13px !important;
    box-shadow: var(--mx-shadow-sm);
}
#attachment-list li:hover, .attachmentslist li:hover, ul.attachmentslist li:hover {
    border-color: var(--mx-accent) !important;
    box-shadow: var(--mx-shadow-md);
}

/* ─── compose window ─── */
#compose-headers input.form-control,
.compose-headers input,
#composebody {
    border: 1.5px solid var(--mx-border) !important;
    border-radius: 8px !important;
    background: var(--mx-surface) !important;
}
#compose-headers input.form-control:focus,
#composebody:focus {
    border-color: var(--mx-accent) !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .12) !important;
}

/* ─── form controls everywhere ─── */
input.form-control, textarea.form-control, select.form-control {
    border-radius: 8px !important;
    border: 1.5px solid var(--mx-border) !important;
    background: var(--mx-surface) !important;
    transition: border-color .14s ease, box-shadow .14s ease !important;
}
input.form-control:focus, textarea.form-control:focus, select.form-control:focus {
    border-color: var(--mx-accent) !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .12) !important;
    outline: 0 !important;
}

/* ─── primary buttons ─── */
.btn-primary, button.btn.btn-primary, .button.mainaction, button[type=submit].btn {
    background: var(--mx-accent) !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 3px rgba(26, 115, 232, .25) !important;
}
.btn-primary:hover, button.btn.btn-primary:hover, .button.mainaction:hover {
    background: var(--mx-accent-h) !important;
    box-shadow: 0 4px 10px rgba(26, 115, 232, .35) !important;
}

/* ─── popup / dialog ─── */
.popupmenu, .popupmenu.form, .ui-dialog {
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1) !important;
    border: 1px solid var(--mx-border) !important;
    overflow: hidden;
}
.popupmenu li > a, .popupmenu li > label {
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    color: var(--mx-text-2) !important;
}
.popupmenu li > a:hover, .popupmenu li > label:hover {
    background: var(--mx-accent-soft) !important;
    color: var(--mx-accent) !important;
}
.ui-dialog .ui-dialog-titlebar {
    background: var(--mx-surface) !important;
    border-bottom: 1px solid var(--mx-border) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 14px 18px !important;
    font-weight: 600 !important;
}

/* ─── quota widget ─── */
.quota-widget, #quotadisplay {
    margin: 8px 14px !important;
    padding: 10px 12px !important;
    background: var(--mx-surface) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: 10px !important;
}
.quota-widget .progress, #quotadisplay .progress {
    height: 5px !important;
    border-radius: 999px !important;
    background: var(--mx-surface-2) !important;
    margin-top: 6px !important;
    overflow: hidden;
}
.quota-widget .progress-bar, #quotadisplay .progress-bar {
    background: var(--mx-accent) !important;
    border-radius: 999px !important;
}

/* ─── pagination / counts ─── */
.pagenav .countdisplay, .records-count {
    color: var(--mx-text-3) !important;
    font-size: 12.5px !important;
}

/* ─── empty state ─── */
.no-message-text, .messagelist .empty-message,
.contentframe .no-content, .no-records {
    color: var(--mx-text-3) !important;
    font-size: 14px !important;
    text-align: center;
    padding: 60px 20px;
    line-height: 1.7;
}

/* ─── settings / addressbook ─── */
.task-settings #layout-content,
.task-addressbook #layout-content {
    background: var(--mx-bg) !important;
}

/* ─── dark mode ─── */
body.dark {
    --mx-bg:        #0e1116;
    --mx-surface:   #171b22;
    --mx-surface-2: #232830;
    --mx-border:    #2c313a;
    --mx-divider:   #1f242c;
    --mx-text:      #e6e8eb;
    --mx-text-2:    #b8bcc2;
    --mx-text-3:    #8a8f97;
    --mx-accent:    #8ab4f8;
    --mx-accent-h:  #aecbfa;
}
body.dark.task-mail #layout-list { background: var(--mx-surface) !important; }
body.dark .messagelist tbody tr td { background: var(--mx-surface) !important; border-bottom-color: var(--mx-divider) !important; }
body.dark .messagelist tbody tr:hover td { background: #1d2129 !important; }
body.dark .messagelist tbody tr.selected td { background: rgba(138, 180, 248, .14) !important; }
body.dark .folderlist li.selected > a,
body.dark ul.treelist li.selected > a { background: rgba(138, 180, 248, .18) !important; color: var(--mx-accent) !important; }
body.dark.task-mail #mxa-fab { background: #1f3a5c; color: #c2e7ff; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
body.dark.task-mail #mxa-fab:hover { background: #284a72; color: #e0f0ff; }