* {
    box-sizing: border-box;
}

:root {
    --primary: #1677ff;
    --primary-soft: #eef4ff;

    --sidebar-bg: #001529;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --logo-text: #ffffff;
    --menu-text: rgba(255, 255, 255, 0.85);
    --menu-text-sub: rgba(255, 255, 255, 0.55);
    --menu-hover-bg: rgba(255, 255, 255, 0.08);
    --menu-hover-text: #ffffff;

    --body-bg: #f5f6fa;
    --header-bg: #ffffff;
    --border-color: #e8e8e8;
    --text-main: #303133;
    --text-secondary: #606266;
    --text-muted: #8c8c8c;

    --font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --line-height-base: 1.5715;

    /* 全局细滚动条 */
    --admin-scrollbar-size: 5px;
    --admin-scrollbar-track: transparent;
    --admin-scrollbar-thumb: rgba(144, 147, 153, 0.38);
    --admin-scrollbar-thumb-hover: rgba(144, 147, 153, 0.58);
    --admin-scrollbar-thumb-dark: rgba(255, 255, 255, 0.16);
    --admin-scrollbar-thumb-dark-hover: rgba(255, 255, 255, 0.28);
}

/* 全局细滚动条（Firefox + WebKit，后台壳层 + iframe 内页通用） */
*,
html,
body {
    scrollbar-width: thin;
    scrollbar-color: var(--admin-scrollbar-thumb) var(--admin-scrollbar-track);
}

*::-webkit-scrollbar {
    width: var(--admin-scrollbar-size);
    height: var(--admin-scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: var(--admin-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--admin-scrollbar-thumb);
    border-radius: 999px;
    border: 1px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--admin-scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Element UI 自定义滚动条（el-scrollbar 组件） */
.el-scrollbar__bar.is-vertical {
    width: var(--admin-scrollbar-size);
    right: 1px;
}

.el-scrollbar__bar.is-horizontal {
    height: var(--admin-scrollbar-size);
}

.el-scrollbar__thumb {
    background-color: var(--admin-scrollbar-thumb);
    border-radius: 999px;
}

.el-scrollbar__thumb:hover {
    background-color: var(--admin-scrollbar-thumb-hover);
}

/* 深海蓝（默认，对齐参考图） */
.admin-layout.theme-blue {
    --primary: #1677ff;
    --primary-soft: #eef4ff;
    --sidebar-bg: #001529;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --logo-text: #ffffff;
    --menu-text: rgba(255, 255, 255, 0.85);
    --menu-text-sub: rgba(255, 255, 255, 0.55);
    --menu-hover-bg: rgba(255, 255, 255, 0.08);
    --menu-hover-text: #ffffff;
}

/* 曜石黑 */
.admin-layout.theme-black {
    --primary: #3b82f6;
    --primary-soft: #eff6ff;
    --sidebar-bg: #0f1419;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --logo-text: #ffffff;
    --menu-text: rgba(255, 255, 255, 0.85);
    --menu-text-sub: rgba(255, 255, 255, 0.55);
    --menu-hover-bg: rgba(255, 255, 255, 0.08);
    --menu-hover-text: #ffffff;
}

/* 松石绿 */
.admin-layout.theme-green {
    --primary: #0f766e;
    --primary-soft: #ecfdf5;
    --sidebar-bg: #0b1f24;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --logo-text: #ffffff;
    --menu-text: rgba(255, 255, 255, 0.85);
    --menu-text-sub: rgba(255, 255, 255, 0.55);
    --menu-hover-bg: rgba(255, 255, 255, 0.08);
    --menu-hover-text: #ffffff;
}

/* 紫夜 */
.admin-layout.theme-purple {
    --primary: #7c3aed;
    --primary-soft: #f5f3ff;
    --sidebar-bg: #120f1f;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --logo-text: #ffffff;
    --menu-text: rgba(255, 255, 255, 0.85);
    --menu-text-sub: rgba(255, 255, 255, 0.55);
    --menu-hover-bg: rgba(255, 255, 255, 0.08);
    --menu-hover-text: #ffffff;
}

/* 浅色蓝 */
.admin-layout.theme-light {
    --primary: #1677ff;
    --primary-soft: #eff6ff;
    --sidebar-bg: #ffffff;
    --sidebar-border: #e5eaf1;
    --logo-text: #1f2937;
    --menu-text: #4b5563;
    --menu-text-sub: #9ca3af;
    --menu-hover-bg: rgba(22, 119, 255, 0.08);
    --menu-hover-text: #1677ff;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    color: var(--text-main);
    background: var(--body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.admin-layout,
.page {
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    color: var(--text-main);
}

.admin-layout {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: auto;
    position: relative;
}

/* =========================
   左侧菜单
========================= */
.sidebar {
    width: 220px;
    height: 100vh;
    background: var(--sidebar-bg);
    flex-shrink: 0;
    transition: none;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar.is-collapse {
    width: 64px;
}

/* LOGO */
.logo {
    flex-shrink: 0;
    padding: 20px 16px 14px;
    background: var(--sidebar-bg);
    overflow: hidden;
}

.logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 40px;
}

.logo-mark {
    flex-shrink: 0;
}

.logo-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: block;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.06);
}

.logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(22, 119, 255, 0.35);
}

.logo-icon i {
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
}

.logo-text-wrap {
    min-width: 0;
    flex: 1;
}

.logo-title {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    color: var(--logo-text);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logo-subtitle {
    margin-top: 2px;
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    line-height: 1.4;
    color: var(--menu-text-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.sidebar.is-collapse .logo {
    padding: 16px 0 12px;
}

.sidebar.is-collapse .logo-wrap {
    justify-content: center;
}

.sidebar.is-collapse .logo-text-wrap {
    display: none;
}

.sidebar.is-collapse .el-menu-item,
.sidebar.is-collapse .el-submenu__title {
    margin: 3px 6px;
    padding: 0 !important;
    justify-content: center;
}

.sidebar.is-collapse .el-menu-item i,
.sidebar.is-collapse .el-submenu__title i {
    margin-right: 0;
}

/* Element 侧栏菜单（深色底） */
.sidebar-menu-wrap {
    scrollbar-color: var(--admin-scrollbar-thumb-dark) var(--admin-scrollbar-track);
}

.sidebar-menu-wrap::-webkit-scrollbar-thumb {
    background-color: var(--admin-scrollbar-thumb-dark);
}

.sidebar-menu-wrap::-webkit-scrollbar-thumb:hover {
    background-color: var(--admin-scrollbar-thumb-dark-hover);
}

.sidebar .el-menu {
    border-right: none;
    padding: 6px 0 20px;
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: transparent !important;
}

.sidebar-menu-section {
    padding: 0;
}

.sidebar .el-menu-item,
.sidebar .el-submenu__title {
    height: 50px;
    line-height: 50px;
    margin: 2px 12px;
    padding: 0 12px !important;
    border-radius: 6px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--menu-text) !important;
}

.sidebar .el-menu-item i,
.sidebar .el-submenu__title i {
    margin-right: 10px;
    width: 18px;
    font-size: 18px;
    font-weight: var(--font-weight-normal);
    color: inherit;
    vertical-align: -1px;
}

.sidebar .el-menu-item span,
.sidebar .el-submenu__title span {
    font-weight: 700;
}

.sidebar .el-menu-item:hover,
.sidebar .el-submenu__title:hover {
    background-color: var(--menu-hover-bg) !important;
    color: var(--menu-hover-text) !important;
}

.sidebar .el-menu-item:hover i,
.sidebar .el-submenu__title:hover i {
    color: var(--menu-hover-text) !important;
}

.sidebar .el-menu-item.is-active {
    background: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 700;
}

.sidebar .el-menu-item.is-active i,
.sidebar .el-menu-item.is-active span {
    color: #ffffff !important;
    font-weight: 700;
}

.sidebar .el-submenu .el-menu {
    padding: 0;
    background-color: transparent !important;
}

.sidebar .el-submenu .el-menu-item {
    min-width: auto;
    height: 46px;
    line-height: 46px;
    margin: 2px 12px 2px 20px;
    padding-left: 40px !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--menu-text) !important;
}

.sidebar .el-submenu__icon-arrow {
    right: 12px;
    margin-top: -6px;
    font-size: 12px;
    font-weight: 400;
    color: inherit;
    opacity: 0.55;
}

/* 展开/含选中子项时，父级标题保持常规文字色（浅色主题下不可设白字） */
.sidebar .el-submenu.is-active > .el-submenu__title,
.sidebar .el-submenu.is-opened > .el-submenu__title {
    color: var(--menu-text) !important;
    font-weight: 700;
    background-color: transparent !important;
}

.sidebar .el-submenu.is-active > .el-submenu__title i,
.sidebar .el-submenu.is-opened > .el-submenu__title i {
    color: inherit !important;
}

.admin-layout.theme-light .sidebar .el-menu-item,
.admin-layout.theme-light .sidebar .el-submenu__title,
.admin-layout.theme-light .sidebar .el-submenu .el-menu-item {
    color: var(--menu-text) !important;
}

.admin-layout.theme-light .sidebar .el-menu-item i,
.admin-layout.theme-light .sidebar .el-submenu__title i,
.admin-layout.theme-light .sidebar .el-submenu .el-menu-item i {
    color: inherit !important;
}

.admin-layout.theme-light .sidebar .el-menu-item.is-active,
.admin-layout.theme-light .sidebar .el-menu-item.is-active i,
.admin-layout.theme-light .sidebar .el-menu-item.is-active span {
    color: #ffffff !important;
}

/* =========================
   主体区域
========================= */
.main {
    flex: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--body-bg);
    min-width: 0;
}

.header {
    height: 60px;
    line-height: 60px;
    padding: 0 22px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.collapse-btn {
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin-right: 14px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.collapse-btn:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.header .title {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.refresh-btn {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-left: 10px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    color: #909399;
    flex-shrink: 0;
}

.refresh-btn:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.header-right {
    display: flex;
    align-items: center;
    height: 60px;
    flex-shrink: 0;
}

/* 主题切换 */
.theme-area {
    position: relative;
    height: 34px;
    padding: 0 10px;
    margin-right: 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    user-select: none;
}

.theme-area:hover {
    background: #f0f2f5;
    color: var(--primary);
}

.theme-area > i {
}

.theme-name {
    margin: 0 5px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
}

.theme-arrow {
}

.theme-dropdown {
    position: absolute;
    right: 0;
    top: 42px;
    z-index: 9999;
    width: 150px;
    padding: 5px 0;
    background: #ffffff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.theme-dropdown-item {
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    font-weight: var(--font-weight-normal);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.theme-dropdown-item:hover,
.theme-dropdown-item.active {
    background: var(--primary-soft);
    color: var(--primary);
}

.theme-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.theme-dropdown-item .el-icon-check {
    margin-left: auto;
}

.admin-area {
    position: relative;
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 8px;
    cursor: pointer;
    user-select: none;
}

.admin-area:hover .admin-name,
.admin-area:hover .admin-arrow {
    color: var(--primary);
}

.admin-avatar {
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 50%;
    text-align: center;
    margin-right: 10px;
    background: #f6c35b;
    color: #121e2d;
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.admin-name {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-right: 6px;
}

.admin-arrow {
    color: var(--text-secondary);
}

.admin-dropdown {
    position: absolute;
    right: 0;
    top: 54px;
    z-index: 9999;
    min-width: 156px;
    background: #ffffff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.admin-dropdown-item {
    height: 40px;
    line-height: 40px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.admin-dropdown-item i {
    margin-right: 8px;
    color: var(--text-muted);
}

.admin-dropdown-item:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.admin-dropdown-item:hover i {
    color: var(--primary);
}

.admin-dropdown-item.logout {
    border-top: 1px solid #f0f2f5;
    color: var(--text-secondary);
    background: transparent;
}

.admin-dropdown-item.logout:hover {
    color: var(--primary);
    background: var(--primary-soft);
}

/* 表格「更多」等 Element 下拉项：默认灰色，悬停高亮 */
.el-dropdown-menu__item {
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
}

.el-dropdown-menu__item i {
    color: var(--text-muted);
}

.el-dropdown-menu__item:not(.is-disabled):hover {
    color: var(--primary);
    background-color: var(--primary-soft);
}

/* =========================
   tabs 标签栏
========================= */
.tabs-bar {
    position: relative;
    height: 42px;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.tabs-wrap {
    flex: 1;
    height: 42px;
    padding: 6px 10px 0 10px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

/* 横向标签滚动条沿用全局细滚动条样式 */

.tabs-item {
    display: inline-block;
    height: 32px;
    line-height: 30px;
    padding: 0 12px;
    margin-right: 6px;
    border: 1px solid #dcdfe6;
    border-radius: 3px;
    background: #ffffff;
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    user-select: none;
}

.tabs-item.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    font-weight: var(--font-weight-medium);
}

.tabs-item .close {
    display: inline-block;
    margin-left: 8px;
    color: inherit;
}

.tabs-item .close:hover {
    color: #ff4d4f;
}

.tabs-action {
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-left: 1px solid var(--border-color);
    cursor: pointer;
    color: var(--text-secondary);
    background: #ffffff;
    flex-shrink: 0;
}

.tabs-action:hover {
    background: #f5f7fa;
    color: var(--primary);
}

.tabs-close-menu {
    position: absolute;
    right: 8px;
    top: 42px;
    z-index: 9999;
    width: 138px;
    padding: 5px 0;
    background: #ffffff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
}

.context-item {
    height: 36px;
    line-height: 36px;
    padding: 0 14px;
    font-weight: var(--font-weight-normal);
    cursor: pointer;
}

.context-item:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.context-item.disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}

.context-item.disabled:hover {
    background: #ffffff;
    color: #c0c4cc;
}

/* =========================
   内容区
========================= */
.content {
    height: 100%;
    background: var(--body-bg);
}

.main-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #f5f7fb;
}

.mobile-mask {
    display: none;
}

.page {
    background: white;
}

.iframe-page-layout .page {
    background: transparent !important;
}

/* iframe 内页边距由 container / data_table_styles 统一控制 */
.iframe-page-layout .page-content {
    box-sizing: border-box;
}

.iframe-page-layout .page .page-table,
.iframe-page-layout .page-content .page-table {
    padding: 0 !important;
    margin: 0 !important;
}

.iframe-page-layout .page .page-table > :first-child,
.iframe-page-layout .page-content .page-table > :first-child {
    margin-top: 0 !important;
}

/* =========================
   手机端
========================= */
@media screen and (max-width: 768px) {
    .el-pagination__total,
    .el-pagination__sizes,
    .el-pagination__jump {
        display: none !important;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 220px !important;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform .25s;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.22);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar.is-collapse {
        width: 220px !important;
    }

    .sidebar.is-collapse .logo-wrap {
        justify-content: flex-start;
        padding: 0 16px;
    }

    .sidebar.is-collapse .logo-text-wrap {
        display: block;
    }

    .main {
        width: 100%;
        height: 100vh;
    }

    .header {
        padding: 0 10px;
    }

    .collapse-btn {
        margin-right: 8px;
    }

    .header .title {
        max-width: 160px;
        color: var(--text-main);
    }

    .refresh-btn {
        margin-left: 4px;
    }

    .theme-name,
    .theme-arrow {
        display: none;
    }

    .theme-area {
        padding: 0 8px;
        margin-right: 4px;
    }

    .theme-dropdown {
        right: -42px;
    }

    .admin-avatar {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin-right: 5px;
    }

    .admin-name {
        font-size: 15px;
    }

    .tabs-wrap {
        padding-left: 8px;
    }

    .tabs-item {
        padding: 0 10px;
        margin-right: 4px;
    }

    .mobile-mask {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2500;
        background: rgba(0, 0, 0, 0.45);
    }

    /* 手机端侧栏菜单加粗，与 PC 端视觉一致 */
    .sidebar .el-menu {
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: auto;
    }

    .sidebar .el-menu-item,
    .sidebar .el-submenu__title,
    .sidebar .el-menu-item span,
    .sidebar .el-submenu__title span,
    .sidebar .el-submenu .el-menu-item,
    .sidebar .el-submenu.is-active > .el-submenu__title,
    .sidebar .el-submenu.is-opened > .el-submenu__title {
        font-size: 15px;
        font-weight: 700 !important;
        -webkit-font-smoothing: auto;
    }

    .sidebar .el-submenu .el-menu-item {
        font-size: 14px;
    }

    .sidebar .el-menu-item.is-active,
    .sidebar .el-menu-item.is-active span {
        font-weight: 700 !important;
    }
}