/* ========================================
   完整主题系统 - 使用 @layer 重构
   ======================================== */

/* ==================== 浅色主题变量 ==================== */

/* 默认浅色主题 */
.theme-light {
    --theme-primary: #4f46e5;
    --theme-primary-light: #6366f1;
    --theme-primary-lighter: #f5f3ff;
    --theme-bg-main: linear-gradient(135deg, #fcfdfe 0%, #f8fafc 100%);
    --theme-bg-sidebar: #ffffff;
    --theme-bg-card: #ffffff;
    --theme-bg-header: rgba(255, 255, 255, 0.85);
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #64748b;
    --theme-text-muted: #94a3b8;
    --theme-border: #f1f5f9;
    --theme-border-light: #e2e8f0;
    --theme-shadow: rgba(0, 0, 0, 0.05);
    --theme-menu-active-bg: #f5f3ff;
    --theme-menu-active-border: #e0e7ff;
    --theme-table-header-bg: #f8fafc;
}

/* 简洁白主题 */
.theme-white {
    --theme-primary: #4f46e5;
    --theme-primary-light: #6366f1;
    --theme-primary-lighter: #f5f3ff;
    --theme-bg-main: #ffffff;
    --theme-bg-sidebar: #ffffff;
    --theme-bg-card: #ffffff;
    --theme-bg-header: rgba(255, 255, 255, 0.95);
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #64748b;
    --theme-text-muted: #94a3b8;
    --theme-border: #e5e7eb;
    --theme-border-light: #f3f4f6;
    --theme-shadow: rgba(0, 0, 0, 0.08);
    --theme-menu-active-bg: #f5f3ff;
    --theme-menu-active-border: #e0e7ff;
    --theme-table-header-bg: #f9fafb;
}

/* 经典灰主题 */
.theme-gray {
    --theme-primary: #475569;
    --theme-primary-light: #64748b;
    --theme-primary-lighter: #f1f5f9;
    --theme-bg-main: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    --theme-bg-sidebar: #ffffff;
    --theme-bg-card: #ffffff;
    --theme-bg-header: rgba(255, 255, 255, 0.9);
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-muted: #94a3b8;
    --theme-border: #e2e8f0;
    --theme-border-light: #cbd5e1;
    --theme-shadow: rgba(0, 0, 0, 0.06);
    --theme-menu-active-bg: #f1f5f9;
    --theme-menu-active-border: #cbd5e1;
    --theme-table-header-bg: #f8fafc;
}

/* ==================== 深色主题变量 ==================== */

/* 午夜蓝主题 */
.theme-blue {
    --theme-primary: #3b82f6;
    --theme-primary-light: #60a5fa;
    --theme-primary-lighter: rgba(59, 130, 246, 0.15);
    --theme-bg-main: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    --theme-bg-sidebar: rgba(30, 58, 138, 0.95);
    --theme-bg-card: rgba(255, 255, 255, 0.95);
    --theme-bg-header: rgba(30, 58, 138, 0.85);
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-border-light: rgba(255, 255, 255, 0.05);
    --theme-shadow: rgba(0, 0, 0, 0.2);
    --theme-menu-active-bg: rgba(59, 130, 246, 0.2);
    --theme-menu-active-border: rgba(59, 130, 246, 0.3);
    --theme-table-header-bg: #f8fafc;
    --theme-sidebar-text: #e0e7ff;
    --theme-sidebar-text-active: #ffffff;
    --theme-header-text: #ffffff;
}

/* 深邃黑主题 */
.theme-dark {
    --theme-primary: #818cf8;
    --theme-primary-light: #a5b4fc;
    --theme-primary-lighter: rgba(129, 140, 248, 0.15);
    --theme-bg-main: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --theme-bg-sidebar: rgba(15, 23, 42, 0.95);
    --theme-bg-card: rgba(255, 255, 255, 0.95);
    --theme-bg-header: rgba(15, 23, 42, 0.85);
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-border-light: rgba(255, 255, 255, 0.05);
    --theme-shadow: rgba(0, 0, 0, 0.3);
    --theme-menu-active-bg: rgba(129, 140, 248, 0.2);
    --theme-menu-active-border: rgba(129, 140, 248, 0.3);
    --theme-table-header-bg: #f8fafc;
    --theme-sidebar-text: #cbd5e1;
    --theme-sidebar-text-active: #ffffff;
    --theme-header-text: #ffffff;
}

/* 紫罗兰主题 */
.theme-purple {
    --theme-primary: #a855f7;
    --theme-primary-light: #c084fc;
    --theme-primary-lighter: rgba(168, 85, 247, 0.15);
    --theme-bg-main: linear-gradient(135deg, #6b21a8 0%, #7c3aed 100%);
    --theme-bg-sidebar: rgba(107, 33, 168, 0.95);
    --theme-bg-card: rgba(255, 255, 255, 0.95);
    --theme-bg-header: rgba(107, 33, 168, 0.85);
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-border-light: rgba(255, 255, 255, 0.05);
    --theme-shadow: rgba(0, 0, 0, 0.2);
    --theme-menu-active-bg: rgba(168, 85, 247, 0.2);
    --theme-menu-active-border: rgba(168, 85, 247, 0.3);
    --theme-table-header-bg: #f8fafc;
    --theme-sidebar-text: #e9d5ff;
    --theme-sidebar-text-active: #ffffff;
    --theme-header-text: #ffffff;
}

/* ==================== 暖色主题变量 ==================== */

/* 日落橙主题 */
.theme-orange {
    --theme-primary: #f97316;
    --theme-primary-light: #fb923c;
    --theme-primary-lighter: rgba(249, 115, 22, 0.15);
    --theme-bg-main: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    --theme-bg-sidebar: rgba(234, 88, 12, 0.95);
    --theme-bg-card: rgba(255, 255, 255, 0.95);
    --theme-bg-header: rgba(234, 88, 12, 0.85);
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-border-light: rgba(255, 255, 255, 0.05);
    --theme-shadow: rgba(0, 0, 0, 0.2);
    --theme-menu-active-bg: rgba(249, 115, 22, 0.2);
    --theme-menu-active-border: rgba(249, 115, 22, 0.3);
    --theme-table-header-bg: #f8fafc;
    --theme-sidebar-text: #fed7aa;
    --theme-sidebar-text-active: #ffffff;
    --theme-header-text: #ffffff;
}

/* 琥珀金主题 */
.theme-amber {
    --theme-primary: #f59e0b;
    --theme-primary-light: #fbbf24;
    --theme-primary-lighter: rgba(245, 158, 11, 0.15);
    --theme-bg-main: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    --theme-bg-sidebar: rgba(217, 119, 6, 0.95);
    --theme-bg-card: rgba(255, 255, 255, 0.95);
    --theme-bg-header: rgba(217, 119, 6, 0.85);
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-border-light: rgba(255, 255, 255, 0.05);
    --theme-shadow: rgba(0, 0, 0, 0.2);
    --theme-menu-active-bg: rgba(245, 158, 11, 0.2);
    --theme-menu-active-border: rgba(245, 158, 11, 0.3);
    --theme-table-header-bg: #f8fafc;
    --theme-sidebar-text: #fde68a;
    --theme-sidebar-text-active: #ffffff;
    --theme-header-text: #ffffff;
}

/* 玫瑰红主题 */
.theme-rose {
    --theme-primary: #f43f5e;
    --theme-primary-light: #fb7185;
    --theme-primary-lighter: rgba(244, 63, 94, 0.15);
    --theme-bg-main: linear-gradient(135deg, #be123c 0%, #e11d48 100%);
    --theme-bg-sidebar: rgba(190, 18, 60, 0.95);
    --theme-bg-card: rgba(255, 255, 255, 0.95);
    --theme-bg-header: rgba(190, 18, 60, 0.85);
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-border-light: rgba(255, 255, 255, 0.05);
    --theme-shadow: rgba(0, 0, 0, 0.2);
    --theme-menu-active-bg: rgba(244, 63, 94, 0.2);
    --theme-menu-active-border: rgba(244, 63, 94, 0.3);
    --theme-table-header-bg: #f8fafc;
    --theme-sidebar-text: #fecdd3;
    --theme-sidebar-text-active: #ffffff;
    --theme-header-text: #ffffff;
}

/* ==================== 冷色主题变量 ==================== */

/* 翡翠绿主题 */
.theme-green {
    --theme-primary: #10b981;
    --theme-primary-light: #34d399;
    --theme-primary-lighter: rgba(16, 185, 129, 0.15);
    --theme-bg-main: linear-gradient(135deg, #047857 0%, #059669 100%);
    --theme-bg-sidebar: rgba(4, 120, 87, 0.95);
    --theme-bg-card: rgba(255, 255, 255, 0.95);
    --theme-bg-header: rgba(4, 120, 87, 0.85);
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-border-light: rgba(255, 255, 255, 0.05);
    --theme-shadow: rgba(0, 0, 0, 0.2);
    --theme-menu-active-bg: rgba(16, 185, 129, 0.2);
    --theme-menu-active-border: rgba(16, 185, 129, 0.3);
    --theme-table-header-bg: #f8fafc;
    --theme-sidebar-text: #a7f3d0;
    --theme-sidebar-text-active: #ffffff;
    --theme-header-text: #ffffff;
}

/* 薄荷青主题 */
.theme-cyan {
    --theme-primary: #06b6d4;
    --theme-primary-light: #22d3ee;
    --theme-primary-lighter: rgba(6, 182, 212, 0.15);
    --theme-bg-main: linear-gradient(135deg, #0e7490 0%, #0891b2 100%);
    --theme-bg-sidebar: rgba(14, 116, 144, 0.95);
    --theme-bg-card: rgba(255, 255, 255, 0.95);
    --theme-bg-header: rgba(14, 116, 144, 0.85);
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-border-light: rgba(255, 255, 255, 0.05);
    --theme-shadow: rgba(0, 0, 0, 0.2);
    --theme-menu-active-bg: rgba(6, 182, 212, 0.2);
    --theme-menu-active-border: rgba(6, 182, 212, 0.3);
    --theme-table-header-bg: #f8fafc;
    --theme-sidebar-text: #a5f3fc;
    --theme-sidebar-text-active: #ffffff;
    --theme-header-text: #ffffff;
}

/* 天空蓝主题 */
.theme-sky {
    --theme-primary: #0ea5e9;
    --theme-primary-light: #38bdf8;
    --theme-primary-lighter: rgba(14, 165, 233, 0.15);
    --theme-bg-main: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    --theme-bg-sidebar: rgba(2, 132, 199, 0.95);
    --theme-bg-card: rgba(255, 255, 255, 0.95);
    --theme-bg-header: rgba(2, 132, 199, 0.85);
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-border-light: rgba(255, 255, 255, 0.05);
    --theme-shadow: rgba(0, 0, 0, 0.2);
    --theme-menu-active-bg: rgba(14, 165, 233, 0.2);
    --theme-menu-active-border: rgba(14, 165, 233, 0.3);
    --theme-table-header-bg: #f8fafc;
    --theme-sidebar-text: #bae6fd;
    --theme-sidebar-text-active: #ffffff;
    --theme-header-text: #ffffff;
}

/* ==================== 主题样式应用 - 使用 @layer ==================== */
@layer admin-themes {
    /* 深色主题选择器简写 */
    /* 使用 :is() 简化 9 个深色主题的重复选择器 */
    
    /* 侧边栏主题覆盖 */
    .sidebar {
        background: var(--theme-bg-sidebar);
        border-right-color: var(--theme-border);
    }

    /* 深色主题下的侧边栏标题 */
    :is(.theme-blue, .theme-dark, .theme-purple, .theme-orange, .theme-amber, .theme-rose, .theme-green, .theme-cyan, .theme-sky) .sidebar-logo span {
        color: var(--theme-sidebar-text);
    }

    :is(.theme-blue, .theme-dark, .theme-purple, .theme-orange, .theme-amber, .theme-rose, .theme-green, .theme-cyan, .theme-sky) .sidebar-logo .text-slate-800 {
        color: var(--admin-color-text-white);
    }

    :is(.theme-blue, .theme-dark, .theme-purple, .theme-orange, .theme-amber, .theme-rose, .theme-green, .theme-cyan, .theme-sky) .sidebar-logo .text-slate-400 {
        color: var(--theme-sidebar-text);
        opacity: 0.8;
    }

    /* 菜单项主题覆盖 */
    .el-menu-item {
        color: var(--theme-text-secondary);
    }

    :is(.theme-blue, .theme-dark, .theme-purple, .theme-orange, .theme-amber, .theme-rose, .theme-green, .theme-cyan, .theme-sky) .el-menu-item {
        color: var(--theme-sidebar-text);
    }

    .el-menu-item.is-active {
        background: var(--theme-menu-active-bg);
        color: var(--theme-primary);
        border-color: var(--theme-menu-active-border);
    }

    :is(.theme-blue, .theme-dark, .theme-purple, .theme-orange, .theme-amber, .theme-rose, .theme-green, .theme-cyan, .theme-sky) .el-menu-item.is-active {
        color: var(--theme-sidebar-text-active);
    }

    .el-menu-item.is-active .el-icon {
        color: var(--theme-primary);
    }

    :is(.theme-blue, .theme-dark, .theme-purple, .theme-orange, .theme-amber, .theme-rose, .theme-green, .theme-cyan, .theme-sky) .el-menu-item.is-active .el-icon {
        color: var(--theme-sidebar-text-active);
    }

    /* 头部主题覆盖 */
    .main-header {
        background: var(--theme-bg-header);
        border-bottom-color: var(--theme-border);
    }

    :is(.theme-blue, .theme-dark, .theme-purple, .theme-orange, .theme-amber, .theme-rose, .theme-green, .theme-cyan, .theme-sky) .main-header {
        backdrop-filter: blur(16px);
    }

    :is(.theme-blue, .theme-dark, .theme-purple, .theme-orange, .theme-amber, .theme-rose, .theme-green, .theme-cyan, .theme-sky) .breadcrumb-item {
        color: rgba(255, 255, 255, 0.7);
    }

    :is(.theme-blue, .theme-dark, .theme-purple, .theme-orange, .theme-amber, .theme-rose, .theme-green, .theme-cyan, .theme-sky) .breadcrumb-active {
        color: var(--admin-color-text-white);
    }

    /* 卡片主题覆盖 */
    .el-card {
        background: var(--theme-bg-card);
        box-shadow: 0 4px 20px -2px var(--theme-shadow);
    }

    .el-card__header {
        border-bottom-color: var(--theme-border);
    }

    /* 表格主题覆盖 */
    .el-table {
        --el-table-border-color: var(--theme-border);
        --el-table-header-bg-color: var(--theme-table-header-bg);
    }

    /* 主按钮主题覆盖 */
    .el-button--primary:not(.is-plain) {
        background: linear-gradient(135deg, var(--theme-primary-light) 0%, var(--theme-primary) 100%);
    }

    .el-button--primary.is-plain {
        background: var(--theme-primary-lighter);
        color: var(--theme-primary);
        border-color: var(--theme-primary);
    }

    /* Logo盒子主题覆盖 */
    .logo-box {
        background: linear-gradient(135deg, var(--theme-primary-light) 0%, var(--theme-primary) 100%);
    }
}