/* ============================================================
   Cresmoon Mail — 清爽主题
   基于 Roundcube Elastic，仅做视觉覆盖，不改功能。
   ============================================================ */

:root {
    --cm-bg: #f4f7fb;
    --cm-panel: #ffffff;
    --cm-border: #e5eaf2;
    --cm-text: #1e293b;
    --cm-muted: #64748b;
    --cm-brand: #2563eb;
    --cm-brand-dark: #1d4ed8;
    --cm-brand-soft: #eff6ff;
    --cm-sidebar: #0b1220;
    --cm-sidebar-soft: #111c2e;
    --cm-radius: 12px;
    --cm-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .04);
}

/* ---------- 基础排版 ---------- */
body,
button,
input,
optgroup,
select,
textarea,
.popover {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

body {
    background: var(--cm-bg);
    color: var(--cm-text);
    -webkit-font-smoothing: antialiased;
}

/* ---------- 左侧应用栏 ---------- */
#layout-menu,
#taskmenu,
#layout-menu .popover-header,
#taskmenu .special-buttons {
    background: var(--cm-sidebar) !important;
}

#layout-menu {
    border-right: 1px solid rgba(255, 255, 255, .06);
}

#layout-menu .popover-header {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

#taskmenu a {
    color: #94a3b8;
    transition: background-color .15s ease, color .15s ease;
}

#taskmenu a:before {
    font-size: 1.12rem;
}

#taskmenu a:hover,
#taskmenu a:focus {
    background: rgba(255, 255, 255, .08) !important;
    color: #ffffff;
}

#taskmenu a.selected {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

#taskmenu a.selected:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
}

#taskmenu .action-buttons a {
    width: 48px;
    height: 48px;
    margin: 10px auto 14px;
    padding: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .35);
}

#taskmenu .action-buttons a:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-1px);
}

#taskmenu .action-buttons a:before {
    font-size: 1.25rem;
    line-height: 48px;
}

#taskmenu .action-buttons a span.inner {
    display: none;
}

#taskmenu .special-buttons a span.inner {
    display: none;
}

#taskmenu a.about {
    display: none;
}

#taskmenu a.logout {
    color: #f87171 !important;
}

#taskmenu a.logout:hover {
    background: rgba(248, 113, 113, .12) !important;
}

/* ---------- 面板与分隔线 ---------- */
#layout-sidebar,
#layout-list {
    background: var(--cm-panel);
    border-color: var(--cm-border);
}

#layout-content {
    background: #f8fafc;
}

#layout > div > .header {
    background: var(--cm-panel);
    border-bottom-color: var(--cm-border);
    color: var(--cm-text);
    font-weight: 600;
}

#layout > div > .footer {
    background: var(--cm-panel);
    border-top-color: var(--cm-border);
    color: var(--cm-muted);
}

#layout-sidebar > .header .header-title {
    color: var(--cm-text);
    font-weight: 600;
}

/* ---------- 搜索栏 ---------- */
.searchbar {
    height: 44px;
    min-height: 44px;
    background: var(--cm-panel);
    border-bottom: 1px solid var(--cm-border);
}

.searchbar form:before {
    color: #94a3b8;
}

.searchbar input {
    color: var(--cm-text);
    font-size: 14px;
}

.searchbar input::placeholder {
    color: #94a3b8;
}

.searchbar a {
    color: var(--cm-muted);
}

.searchbar a:hover {
    color: var(--cm-brand);
}

/* ---------- 文件夹列表 ---------- */
ul.treelist li > a {
    margin: 1px 8px;
    padding-right: 8px;
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}

ul.treelist li > a:hover {
    background: #f8fafc;
}

ul.treelist li.selected > a,
ul.treelist li.selected > div > a {
    background: var(--cm-brand-soft);
    color: var(--cm-brand-dark);
    font-weight: 600;
}

.folderlist li.mailbox .unreadcount {
    background: var(--cm-brand);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

/* ---------- 邮件列表 ---------- */
#layout-list > .header .toolbar a {
    color: var(--cm-muted);
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}

#layout-list > .header .toolbar a:hover {
    background: var(--cm-brand-soft);
    color: var(--cm-brand);
}

#layout-list > .header .toolbar a.threads {
    display: none !important;
}

.listing li,
.listing tbody td {
    border-bottom-color: #f1f5f9;
    line-height: 40px;
}

.messagelist td.subject {
    padding-top: 3px;
    padding-bottom: 3px;
}

.messagelist td.subject span.subject {
    color: #334155;
    font-weight: 600;
}

.messagelist tr.unread td.subject span.subject {
    color: #0f172a;
    font-weight: 700;
}

.messagelist td.subject span.fromto,
.messagelist td.subject span.date {
    color: var(--cm-muted);
    font-size: 12.5px;
}

.messagelist td.subject span.msgicon.status:before {
    color: #cbd5e1;
}

.messagelist tr.unread td.subject span.msgicon.status:before {
    color: var(--cm-brand);
}

.messagelist tr:hover td {
    background: #f8fafc;
}

.messagelist tr.selected td,
.messagelist tr.selected:hover td {
    background: var(--cm-brand-soft);
}

.messagelist tr.selected td.subject span.subject {
    color: var(--cm-brand-dark);
}

.messagelist span.flagged:before {
    color: #f59e0b;
}

/* ---------- 分页 ---------- */
.menu.pagenav {
    background: var(--cm-panel);
    border-top: 1px solid var(--cm-border);
    color: var(--cm-muted);
}

.menu.pagenav a {
    color: var(--cm-muted);
    border-radius: 6px;
}

.menu.pagenav a:hover {
    background: var(--cm-brand-soft);
    color: var(--cm-brand);
}

.menu.pagenav .pagenav-text {
    color: var(--cm-muted);
}

.menu.pagenav input {
    background: #f8fafc;
    border: 1px solid var(--cm-border);
    border-radius: 6px;
}

/* ---------- 邮件阅读区 ---------- */
.frame-content {
    padding: 20px 24px;
    background: #f8fafc;
}

#message-header {
    margin-bottom: 14px;
    padding: 18px 22px 10px;
    background: var(--cm-panel);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow);
}

#message-header > .subject {
    margin-bottom: 10px;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: -.01em;
}

#message-header > .header img.contactphoto {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    background: var(--cm-brand-soft);
}

#message-header .header-summary,
#message-header .header-headers,
#message-header .header-links a {
    font-size: 13px;
}

#message-header .header-links a {
    color: var(--cm-brand);
}

#message-header .header-links a:hover {
    color: var(--cm-brand-dark);
}

#message-content {
    padding: 18px 22px 22px;
    background: var(--cm-panel);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow);
}

.message-part,
.message-htmlpart {
    color: #1f2937;
    font-size: 15px;
    line-height: 1.7;
}

.message-part a,
.message-htmlpart a {
    color: var(--cm-brand);
}

.message-partheaders {
    margin: 8px 0;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid var(--cm-border);
    border-radius: 8px;
}

.message-partheaders table.headers-table {
    color: var(--cm-muted);
    font-size: 12px;
}

/* ---------- 工具栏按钮 ---------- */
#layout-content > .header .toolbar a,
#layout-list > .header .toolbar a {
    border-radius: 8px;
}

#layout-content > .header .toolbar a:not(.disabled):hover {
    background: var(--cm-brand-soft);
    color: var(--cm-brand);
}

.menu.toolbar a {
    color: #475569;
}

.menu.toolbar a:not(.disabled):hover {
    color: var(--cm-brand);
}

/* ---------- 登录页 ---------- */
body.task-login {
    background:
        radial-gradient(900px 500px at 15% 10%, #dbeafe 0%, transparent 55%),
        radial-gradient(800px 500px at 90% 90%, #e0e7ff 0%, transparent 55%),
        #f8fafc;
}

body.task-login #layout,
body.task-login #layout-content {
    background: transparent;
}

body.task-login #layout-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
}

body.task-login #logo {
    position: static;
    top: auto;
    width: 72px;
    height: 72px;
    max-height: 72px;
    margin: 0 auto 18px;
    filter: drop-shadow(0 10px 24px rgba(15, 23, 42, .18));
}

body.task-login #login-form {
    top: auto;
    width: min(380px, 92vw);
    max-width: 380px;
    margin: 0 auto;
    padding: 30px 28px 24px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
}

body.task-login #login-form::before {
    content: "欢迎回来";
    display: block;
    margin-bottom: 4px;
    color: #0f172a;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

body.task-login #login-form table::before {
    content: "登录 Cresmoon 邮局，继续处理你的邮件";
    display: block;
    margin-bottom: 20px;
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

body.task-login #login-form .input-group {
    margin-bottom: 12px;
}

body.task-login #login-form .form-control {
    height: 46px;
    background: #f8fafc;
    border-color: #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
}

body.task-login #login-form .form-control:focus {
    background: #ffffff;
    border-color: var(--cm-brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

body.task-login #login-form .input-group-text {
    min-width: 46px;
    background: #f1f5f9;
    border-color: #e2e8f0;
    border-radius: 10px;
    color: #94a3b8;
}

body.task-login #rcmloginsubmit {
    height: 46px;
    margin-top: 6px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
    transition: transform .15s ease, box-shadow .15s ease;
}

body.task-login #rcmloginsubmit:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .34);
}

body.task-login #login-footer {
    display: none;
}

/* ---------- 暗色模式的基础适配 ---------- */
html.dark-mode body {
    background: #0b1220;
    color: #e2e8f0;
}

html.dark-mode #layout {
    background: #0b1220;
}

html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer,
html.dark-mode .searchbar,
html.dark-mode .menu.pagenav {
    background: #111827;
    border-color: #1f2937;
    color: #e2e8f0;
}

html.dark-mode #layout-content,
html.dark-mode .frame-content {
    background: #0b1220;
}

html.dark-mode #message-header,
html.dark-mode #message-content {
    background: #111827;
    border-color: #1f2937;
}

html.dark-mode #message-header > .subject,
html.dark-mode .messagelist td.subject span.subject {
    color: #f1f5f9;
}

html.dark-mode .messagelist td.subject span.fromto,
html.dark-mode .messagelist td.subject span.date {
    color: #94a3b8;
}

html.dark-mode .messagelist tr:hover td {
    background: #172033;
}

html.dark-mode .messagelist tr.selected td,
html.dark-mode .messagelist tr.selected:hover td {
    background: #1e3a8a;
}

html.dark-mode ul.treelist li.selected > a,
html.dark-mode ul.treelist li.selected > div > a {
    background: #1e3a8a;
    color: #dbeafe;
}

html.dark-mode body.task-login #login-form {
    background: rgba(17, 24, 39, .94);
    border-color: #1f2937;
}

html.dark-mode body.task-login #login-form::before {
    color: #f1f5f9;
}

html.dark-mode body.task-login #login-form .form-control {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

/* 隐藏列表悬停时浮出的快捷操作，减少视觉干扰 */
.listing-hover-menu {
    display: none !important;
}