/* ============================================================
 * MailPanda Admin — 全局样式
 * 来源：原 custom.css（Element Plus + Tailwind 最小补丁、页面通用类）
 * ============================================================ */

/* Element Plus + Tailwind CDN 最小补丁：用双类名提升权重，无视加载顺序 */

/* 默认状态 */
.el-input__inner.el-input__inner,
.el-select .el-input__inner,
.el-cascader .el-input__inner,
.el-date-editor .el-input__inner,
.el-input-number .el-input__inner,
.el-autocomplete .el-input__inner {
  box-shadow: none;
  --tw-ring-offset-width: 0;
  --tw-ring-color: transparent;
  --tw-ring-shadow: 0 0 transparent;
}

/* Focus 状态：去掉默认 ring 阴影，保留可见键盘焦点 */
.el-input__inner.el-input__inner:focus,
.el-select .el-input__inner:focus,
.el-cascader .el-input__inner:focus,
.el-date-editor .el-input__inner:focus,
.el-input-number .el-input__inner:focus,
.el-autocomplete .el-input__inner:focus,
.el-range-input:focus {
  box-shadow: none;
  --tw-ring-offset-width: 0;
  --tw-ring-color: transparent;
  --tw-ring-shadow: 0 0 transparent;
}

.el-input__inner.el-input__inner:focus-visible,
.el-select .el-input__inner:focus-visible,
.el-cascader .el-input__inner:focus-visible,
.el-date-editor .el-input__inner:focus-visible,
.el-input-number .el-input__inner:focus-visible,
.el-autocomplete .el-input__inner:focus-visible,
.el-range-input:focus-visible {
    outline: none;
    outline-offset: -1px;
}

.el-icon svg,
.el-button svg,
.el-input__icon svg,
.el-select .el-input__suffix svg {
    display: inline-block;
    vertical-align: middle;
}

[v-cloak] { display: none !important; }

/* Login input prefix icons: use an explicit mask size instead of relying on
 * Element Plus resolving icon component names at runtime. */
.login-prefix-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.login-prefix-icon--user {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.login-prefix-icon--lock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

/* Login page dark mode fallback. The login screen is rendered before the
 * main layout, so keep its Element Plus variables scoped and self-contained. */
.login-page {
    color-scheme: light;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
}

.login-subtitle {
    color: #6b7280;
}

.login-card {
    --el-card-bg-color: #ffffff;
    --el-card-border-color: #e5e7eb;
    color: #374151;
    background-color: #ffffff;
    border-color: #e5e7eb;
}

.login-card-title {
    color: #1f2937;
}

.login-footer {
    color: #9ca3af;
}

.login-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #6b7280;
    background-color: transparent;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.login-theme-toggle:hover {
    color: #409eff;
    background-color: rgba(64, 158, 255, 0.08);
}

.login-theme-toggle:focus-visible {
    outline: 2px solid #409eff;
    outline-offset: 2px;
}

.login-theme-toggle .ti {
    font-size: 24px;
}

.dark .login-theme-toggle,
.dark .login-theme-toggle .ti {
    color: #d1d5db;
}

.dark .login-theme-toggle:hover,
.dark .login-theme-toggle:hover .ti {
    color: #facc15;
}

.dark .login-theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #374151;
}

.dark .login-page {
    color-scheme: dark;
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
}

.dark .login-subtitle,
.dark .login-footer {
    color: #9ca3af;
}

.dark .login-logo-wrap img {
    box-sizing: content-box;
    padding: 6px 12px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.92);
}

.dark .login-card {
    --el-card-bg-color: #1e1e1e;
    --el-card-border-color: #374151;
    color: #e5e7eb;
    background-color: #1e1e1e;
    border-color: #374151;
}

.dark .login-card-title {
    color: #f9fafb;
}

.dark .login-card .el-card__body {
    background-color: transparent;
}

.dark .login-page .el-form-item__label {
    color: #d1d5db;
}

.dark .login-page .el-input {
    --el-input-text-color: #e5e7eb;
    --el-input-bg-color: #252525;
    --el-input-border-color: #4b5563;
    --el-input-hover-border-color: #6b7280;
    --el-input-focus-border-color: #409eff;
    --el-input-placeholder-color: #9ca3af;
    --el-input-icon-color: #9ca3af;
    --el-input-clear-hover-color: #d1d5db;
}

.dark .login-page .el-input__wrapper {
    background-color: var(--el-input-bg-color);
}

.dark .login-page .el-input__inner {
    color: var(--el-input-text-color);
    caret-color: var(--el-color-primary);
}

.dark .login-page .login-prefix-icon,
.dark .login-page .el-input__suffix {
    color: #9ca3af;
}

/* Sidebar nav active/hover styles */
.nav-item {
    position: relative;
}

.nav-item.active {
    background: rgba(64, 158, 255, 0.12);
    color: #409eff;
    font-weight: 500;
}

.nav-item.active i {
    color: #409eff;
}

/* ---------- 按钮组间隔 ----------
 * Element Plus 默认 .el-button+.el-button { margin-left: 12px }
 * 通过在按钮之间插入空 span 断开相邻兄弟关系，避免默认间隔；
 * 容器用 flex gap 控制间距。
 */
.op-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.import-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ---------- 页面通用卡片 & 工具类 ---------- */
.k-card {
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e8e8e8;
}

.shadow-s-10 {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
}

.rounded-normal {
    border-radius: 12px;
}

.bg-fff {
    background-color: #ffffff;
}

/* 版本管理：当前模板站点提示卡片 */
.version-template-card {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 60%);
    border: 1px solid #e3efff;
}

/* 初始邮件模版：HTML 源码可能很长，弹窗内容区在视口内滚动，操作区始终可见。 */
.initial-email-template-dialog {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.initial-email-template-dialog .el-dialog__body {
    min-height: 0;
    overflow-y: auto;
}

.initial-email-template-dialog .el-dialog__footer {
    flex: 0 0 auto;
}