/* lwsAdmin 管理系统样式 */

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 禁止鼠标拖选文本（系统内无文档阅读需求，防误选） */
    user-select: none;
}

/* 表单输入元素恢复选中（便于用户选中文本复制/修改） */
input, textarea, select, [contenteditable="true"] {
    user-select: text;
}

body {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    /* 灰底：给 page-container 白底卡片提供浮起的视觉对比 */
    background-color: #f0f2f5;
}

/* 登录页面 */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #eef1f6;
}

.login-box {
    width: 420px;
    padding: 40px 50px 30px;
    background: #f7f9fc;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
}

/* Logo 区域 */
.login-logo {
    text-align: center;
    margin-bottom: 12px;
}

.login-logo img {
    display: inline-block;
}

.login-title {
    text-align: center;
    margin-bottom: 8px;
    color: #303133;
    font-size: 26px;
    font-weight: bold;
}

.login-subtitle {
    text-align: center;
    color: #909399;
    font-size: 14px;
    margin-bottom: 20px;
}

.login-divider {
    border-top: 1px solid #e4e7ed;
    margin-bottom: 10px;
}

/* 登录方式 Tabs */
.login-tabs .el-tabs__header {
    margin-bottom: 20px;
}

/* 表单输入框：浅蓝底色 */
.login-box .el-input__inner {
    background-color: #e9f1fd;
    border: 1px solid #d9e6fb;
}

.login-box .el-input__inner:focus {
    border-color: #409EFF;
}

.login-box .el-form-item__label {
    color: #606266;
    font-size: 14px;
    padding-bottom: 4px;
}

/* 登录按钮 */
.login-button {
    width: 100%;
    letter-spacing: 4px;
}

/* 底部链接（忘记密码 / 返回登录） */
.login-footer {
    text-align: center;
    margin-top: 4px;
}

/* 忘记密码步骤条 */
.forgot-steps {
    margin: 10px 0 24px;
}

/* 统一步骤条自定义图标：补齐圆形背景框，修正图标溢出与错位 */
/* 注意：保留 Element 默认的 inline-flex，勿改为块级 flex，否则图标不再随 text-align 水平居中 */
.forgot-steps .el-step__icon.is-icon {
    width: 24px;
    height: 24px;
    border: 2px solid;
    border-color: inherit;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
}

.forgot-steps .el-step__icon.is-icon .el-step__icon-inner {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

/* 验证码输入框附加按钮 */
.login-box .el-input-group__append .el-button {
    color: #409EFF;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .login-box {
        width: 90%;
        max-width: 400px;
    }
}

/* 消息提示框：宽度随内容自适应（覆盖 Element 默认 min-width: 380px） */
.el-message {
    min-width: auto !important;
    width: auto !important;
    max-width: 80%;
}

/* 文字居中时内容水平居中显示 */
.el-message--center .el-message__content {
    text-align: center;
}

/* 个人信息对话框：上下左右均居中（配合 el-dialog 的 custom-class 使用） */
.dialog-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

/* 确认框（MessageBox）：长文件路径等无空格连续串允许断行，避免内容撑破弹窗溢出 */
.el-message-box__content,
.el-message-box__message p {
    word-break: break-all;
}

/* ===== 个人中心对话框：固定高度，切换 tabs 不变形 ===== */
.dialog-profile .el-dialog__body {
    height: 460px;   /* 适配「基本信息」左右两栏 + 「修改密码」垂直 tabs，避免内滚动 */
    overflow: hidden;
    padding: 18px 28px 12px;
}

/* 外层横向 tabs 撑满 body */
.dialog-profile .profile-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.dialog-profile .profile-tabs > .el-tabs__header {
    flex-shrink: 0;
    margin-bottom: 16px;
}
.dialog-profile .profile-tabs > .el-tabs__content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}
.dialog-profile .profile-tabs > .el-tabs__content > .el-tab-pane {
    min-height: 100%;
}

/* 内层垂直 tabs（tab-position="left"）也撑满外层 tab-pane */
.dialog-profile .profile-pwd-tabs {
    height: 100%;
    display: flex;
    gap: 16px;
}
.dialog-profile .profile-pwd-tabs > .el-tabs__nav-wrap {
    flex-shrink: 0;
}
.dialog-profile .profile-pwd-tabs > .el-tabs__content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}
.dialog-profile .profile-pwd-tabs > .el-tabs__content > .el-tab-pane {
    min-height: 100%;
}

/* 表单居中有序 */
.dialog-profile .profile-form {
    max-width: 480px;
    padding-top: 4px;
}
.dialog-profile .profile-form .el-form-item {
    margin-bottom: 20px;
}
.dialog-profile .profile-form .el-form-item:last-child {
    margin-bottom: 0;
}
.dialog-profile .profile-form--pwd {
    max-width: 400px;
}

/* 验证码输入 + 按钮同一行（替换原来的 el-row/el-col float 布局） */
.dialog-profile .profile-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.dialog-profile .profile-code-row > .el-input {
    flex: 1;
    min-width: 0;
}
.dialog-profile .profile-code-row > .el-button {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ===== 基本信息 Tab：左右两栏（左身份卡 / 右资料面板） ===== */
.dialog-profile .profile-info {
    display: flex;
    align-items: stretch;
    gap: 24px;
    height: 100%;
}

/* 左栏：头像 + 登录账号 + 昵称回显 + 上传操作 + 底部只读信息 */
.dialog-profile .profile-card {
    flex-shrink: 0;
    width: 236px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 16px 14px;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 60%);
}
.dialog-profile .profile-card__avatar {
    font-size: 44px;                    /* 无头像时占位图标同步放大 */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}
.dialog-profile .profile-card__name {
    margin-top: 12px;
    max-width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dialog-profile .profile-card__nick {
    margin-top: 4px;
    font-size: 12px;
    color: #909399;
}
.dialog-profile .profile-card__avatar-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.dialog-profile .avatar-upload-tip {
    margin-top: 8px;
    text-align: center;
    color: #b1b3b8;
}
.dialog-profile .profile-card__meta {
    width: 100%;
    margin-top: auto;                   /* 钉到卡片底部，与上方操作区拉开层次 */
    padding-top: 12px;
    border-top: 1px dashed #ebeef5;
}
.dialog-profile .profile-card__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    line-height: 26px;
}
.dialog-profile .profile-card__meta-label {
    color: #909399;
}
.dialog-profile .profile-card__meta-value {
    color: #606266;
}

/* 右栏：小标题 + 顶部 label 表单 + 底部分隔线操作区 */
.dialog-profile .profile-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.dialog-profile .profile-panel__title {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #303133;
}
.dialog-profile .profile-panel__title::before {
    content: '';
    width: 3px;
    height: 13px;
    border-radius: 2px;
    background-color: #409EFF;
}
.dialog-profile .profile-edit-form {
    flex: 1;
    min-height: 0;
}
.dialog-profile .profile-edit-form .el-form-item {
    margin-bottom: 18px;
}
.dialog-profile .profile-edit-form .el-form-item__label {
    line-height: 22px;
    padding-bottom: 2px;
    color: #606266;
}
.dialog-profile .profile-panel__footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #ebeef5;
}
.dialog-profile .profile-panel__hint {
    font-size: 12px;
    color: #c0c4cc;
}

/* ===== 头像上传行（个人中心 + 用户管理对话框共用；图片走 file 模块两段式上传） ===== */
.avatar-upload-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}
.avatar-upload-actions {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.avatar-upload-tip {
    font-size: 12px;
    line-height: 18px;
    color: #909399;
}
.el-avatar {
    background-color: #c0c4cc;   /* 无头像时的图标底色 */
    flex-shrink: 0;
}

/* ===== 主内容区统一布局 page-container：头部区 / 工具栏 / 内容区 ===== */
/* 头部区：图标 + 标题 + 描述 */
.pc-header {
    display: flex;
    align-items: center;
    padding: 36px 20px 18px;
}

.pc-header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-right: 14px;
    border-radius: 10px;
    background-color: #ecf5ff;
    flex-shrink: 0;
}

.pc-header__icon i {
    font-size: 24px;
    color: #409EFF;
}

.pc-header__title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    line-height: 1.3;
}

.pc-header__desc {
    margin-top: 5px;
    color: #909399;
    font-size: 13px;
    line-height: 1.4;
}

/* 内容区：与上方区块保持统一间距 */
.pc-body {
    margin-top: 15px;
}

/* 内容卡片：el-card 仅作轻量分组（不设边框/阴影），让 admin-main 的白色面板作为统一承载 */
.page-container .el-card.is-never-shadow {
    border: none;
    background-color: transparent;
}

/* 页面分割线：增大上下间距 */
.page-container .el-divider--horizontal {
    margin: 16px 0;
}

/* 统一区块行：头 / 搜索栏 / 工具栏 共用，无边框 */
.pc-section {
    padding: 14px 20px;
}

/* 搜索栏：筛选查询/重置横向排列 */
.pc-search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* 工具栏：操作按钮横向排列 */
.pc-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* ===== 侧边栏顶部 Logo 区：与右侧 el-header 同高 (60px)，边框颜色一致 ===== */
.sidebar-logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid #e4e7ed;   /* 与 el-header 下边框色统一 */
    background-color: #fff;
    flex-shrink: 0;       /* 不被 flex 压缩 */
    overflow: hidden;     /* 折叠时文字 v-show=false，避免撑破 */
}
.sidebar-logo img {
    display: block;
    flex-shrink: 0;
}
.sidebar-logo-text {
    font-size: 17px;
    font-weight: 700;
    color: #303133;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* ===== 侧边菜单栏：菜单撑满剩余高度并可滚动 ===== */
.el-aside {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #e4e7ed;
}

/* 只匹配顶层菜单（el-aside 的直接子元素），不匹配 el-submenu 展开的内联菜单 */
.el-aside > .el-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ===== 右侧 el-container：纵向 flex，header / tabs / main 分层，main 占满剩余高度 ===== */
.el-container > .el-container {
    display: flex;
    flex-direction: column;
    min-height: 0; /* 允许子元素在 flex 下收缩 */
}

/* ===== 顶部导航栏用户下拉：使用 Element 默认 el-dropdown-link 样式；仅放大文字 + 头像 + 箭头旋转 ===== */
.user-dropdown-link {
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
}
.user-dropdown-avatar {
    margin-right: 8px;
}
.user-dropdown-arrow {
    font-size: 14px;
    transition: transform 0.2s ease;
}
.user-dropdown-link.is-open .user-dropdown-arrow {
    transform: rotate(180deg);
}

/* 退出登录项：悬停红色警告（Element 默认是蓝色悬停，此项用 danger 色） */
.el-dropdown-menu__item--danger:not(.is-disabled):hover {
    color: #F56C6C !important;
    background-color: #fef0f0 !important;
}

/* ===== 标签页导航条：无边框，tab 间竖线分隔，直接贴合 header 和 main ===== */
.admin-tabs {
    background-color: #fff;
    padding: 0;
    border-bottom: none;           /* 不要底边 */
    flex-shrink: 0;
    user-select: none;
    height: 38px;
    line-height: 38px;
}

/* 仅保留标签头，隐藏 el-tabs 自带内容区（页面内容由 el-main 渲染） */
.admin-tabs .el-tabs__content {
    display: none;
}

.admin-tabs .el-tabs__header {
    margin: 0;
    border-bottom: none;
}

/* 干掉 Element UI 默认的居中 spacer */
.admin-tabs .el-tabs__nav-wrap::before {
    display: none;
}

/* 干掉 Element UI 默认的 active-bar 下划线 */
.admin-tabs .el-tabs__active-bar {
    display: none;
}

/* ---- Nav 容器：inline-flex 确保稳定，溢出自动滚动 ---- */
.admin-tabs .el-tabs__nav-wrap {
    overflow: hidden;
}
.admin-tabs .el-tabs__nav {
    float: none;
    display: inline-flex;
    align-items: stretch;
    flex-wrap: nowrap;
    border: none;
    white-space: nowrap;
}

/* ---- Tab item 本体：扁平无圆角，左侧竖线分隔 ---- */
.admin-tabs .el-tabs__item {
    height: auto;
    line-height: 38px;
    padding: 0 18px;
    margin: 0;
    font-size: 14px;
    color: #606266;
    border-radius: 0;                   /* 去掉圆角 */
    border: none;                       /* 去掉自身边框 */
    border-left: 1px solid #e4e7ed;     /* 左侧竖线分隔 */
    background-color: transparent;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* 第一个 tab 去掉左侧竖线（容器左边缘已由 aside.border-right 承载） */
.admin-tabs .el-tabs__item:first-child {
    border-left: none;
}

/* 非激活 tab 悬停：浅灰底 + 蓝色文字 */
.admin-tabs .el-tabs__item:not(.is-active):hover {
    background-color: #f5f7fa;
    color: #409EFF;
}

/* 激活 tab：蓝色文字 + 浅蓝底，不要任何边框/嵌入技巧 */
.admin-tabs .el-tabs__item.is-active {
    color: #409EFF;
    font-weight: 500;
    background-color: #ecf5ff;
    border-left: 1px solid #d9ecff;    /* 激活态竖线也变蓝 */
}
.admin-tabs .el-tabs__item.is-active:first-child {
    border-left: none;
}

/* ===== 仪表盘时间/农历卡片 ===== */
.dashboard-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;     /* 垂直居中 */
    width: 100%;
    min-height: 100%;            /* 撑满 admin-main 的可用高度 */
    padding: 32px 24px 48px;
    box-sizing: border-box;
    gap: 20px;
}

.dashboard-loading {
    width: 100%;
    height: 200px;
}

/* 时间卡片 */
.time-card {
    width: 100%;
    max-width: 560px;
}
.time-card .el-card__body {
    padding: 40px 48px 32px;
}

.time-date-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.time-date {
    font-size: 18px;
    color: #303133;
    font-weight: 500;
    letter-spacing: 1px;
}
.time-weekday {
    font-size: 15px;
    color: #909399;
}

.time-clock-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
}
.clock-digit {
    font-size: 80px;
    font-weight: 300;
    font-family: 'Helvetica Neue', 'SF Mono', 'Consolas', monospace;
    color: #303133;
    line-height: 1;
    letter-spacing: 2px;
    min-width: 116px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.clock-digit--sec {
    font-size: 40px;
    color: #909399;
    min-width: 58px;
    align-self: flex-end;
    padding-bottom: 10px;
}
.clock-sep {
    font-size: 64px;
    font-weight: 200;
    color: #c0c4cc;
    line-height: 1;
}

.time-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.time-meta-text {
    font-size: 13px;
    color: #909399;
}

/* 农历卡片 */
.lunar-card {
    width: 100%;
    max-width: 560px;
}
.lunar-card .el-card__body {
    padding: 24px 48px;
}
.lunar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #909399;
}
.lunar-header i {
    font-size: 16px;
    color: #409eff;
}
.lunar-body {
    margin-bottom: 16px;
}
.lunar-main-text {
    font-size: 22px;
    color: #303133;
    font-weight: 500;
    letter-spacing: 2px;
}
.lunar-details {
    display: flex;
    gap: 28px;
}
.lunar-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lunar-item-label {
    font-size: 12px;
    color: #909399;
}

.lunar-card--empty .el-card__body {
    padding: 20px 48px;
}
.lunar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: #909399;
}
.lunar-empty i {
    font-size: 18px;
    color: #e6a23c;
}

/* 来源标注 */
.source-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #c0c4cc;
}
.source-label {
    color: #909399;
    font-size: 12px;
}
.source-divider {
    color: #dcdfe6;
    margin: 0 4px;
}

/* ===== 全局修复：Element UI 组件文字意外换行 ===== */

/* 1. el-form-item label 严禁换行 —— 多字 label 会被挤压拆成两行 */
.el-form-item__label {
    white-space: nowrap !important;
}

/* 2. el-switch 的 active-text / inactive-text 严禁换行 —— 否则启用/禁用会各占一行 */
.el-switch {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}
.el-switch .el-switch__label,
.el-switch .el-switch__label * {
    white-space: nowrap !important;
}

/* 3. el-radio / el-checkbox 的文字也严禁换行（统一风格） */
.el-radio,
.el-checkbox {
    white-space: nowrap !important;
}

/* 响应式 */
@media (max-width: 600px) {
    .time-card .el-card__body { padding: 28px 24px 24px; }
    .clock-digit { font-size: 52px; min-width: 76px; letter-spacing: 1px; }
    .clock-digit--sec { font-size: 28px; min-width: 38px; padding-bottom: 6px; }
    .clock-sep { font-size: 40px; }
    .time-date { font-size: 15px; }
    .lunar-card .el-card__body { padding: 18px 24px; }
    .lunar-main-text { font-size: 18px; }
    .lunar-details { gap: 16px; flex-wrap: wrap; }
}

/* 关闭按钮微调位置 */
.admin-tabs .el-tabs__item .el-icon-close {
    transform: scale(0.85);
    margin-left: 6px;
}

/* ===== 右下主内容区：白色面板，flex 填满剩余高度，承载内部 page-container ===== */
.admin-main {
    background-color: #fff;
    margin: 0;
    padding: 16px;                   /* 四周留白略收，让内部 flex 有更多空间 */
    border: none;
    border-top: 1px solid #e4e7ed;   /* 唯一的 tab ↔ main 分隔线（tabs 本身无边框） */
    border-right: 1px solid #e4e7ed;
    border-bottom: 1px solid #e4e7ed;
    border-left: none;               /* 左侧边界由 el-aside 的 border-right 承载 */
    border-radius: 0 0 4px 4px;
    flex: 1;
    min-height: 0;
    display: flex;                   /* flex 容器，让内部 .page-container 撑满 */
    flex-direction: column;
    overflow-y: auto;
}

/* Element 默认 el-main 有 20px padding，此处覆盖为上述自定义值 */
.el-main.admin-main {
    padding: 16px;
}

/* page-container 必须作为 flex:1 子项填满 admin-main，否则表格后会出现大片空白 */
.admin-main > .page-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* 内容区：剩余空间全给 pc-body，让 el-card + el-table height=400 后面的"空白"消失 */
.admin-main > .page-container > .pc-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

/* pc-body 里的 el-card 也必须 stretch，否则分页条不会贴底 */
.admin-main > .page-container > .pc-body > .el-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.admin-main > .page-container > .pc-body > .el-card > .el-card__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 自定义滚动条（更纤细、更贴合 Element 风格） */
.admin-main::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.admin-main::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 3px;
}
.admin-main::-webkit-scrollbar-thumb:hover {
    background: #c0c4cc;
}
.admin-main::-webkit-scrollbar-track {
    background: transparent;
}

/* ===== 右键菜单（页面级 contextmenu） ===== */
.tab-context-menu {
    position: fixed;
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background-color: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
    font-size: 14px;
    min-width: 160px;
    user-select: none;
}

.tab-context-menu li {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #606266;
    transition: background-color 0.1s;
}

.tab-context-menu li:hover {
    background-color: #f5f7fa;
    color: #409EFF;
}

.tab-context-menu li.divider {
    height: 1px;
    padding: 0;
    margin: 4px 0;
    background-color: #e4e7ed;
    cursor: default;
}

.tab-context-menu li.divider:hover {
    background-color: #e4e7ed;
    color: #606266;
}

.tab-context-menu li i {
    margin-right: 8px;
    font-size: 14px;
    color: #909399;
}

.tab-context-menu li:hover i {
    color: #409EFF;
}

/* ===== 表格单元格通用辅助 ===== */
.cell-muted {
    color: #c0c4cc;
}

/* ===== 图标选择器预览条（Element UI 2.x el-select 无 selected slot，使用外层预览方案） ===== */
.icon-select-wrap {
    width: 100%;
}

.icon-preview-row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: #f5f7fa;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    min-height: 36px;
}

.icon-preview-row i {
    font-size: 18px;
    color: #409EFF;
}

.icon-preview-row.icon-empty {
    color: #909399;
    font-size: 13px;
}

.icon-preview-row.icon-empty i {
    font-size: 14px;
    color: #909399;
    margin-right: 4px;
}

.icon-preview-name {
    margin-left: 8px;
    font-family: Consolas, Monaco, Menlo, monospace;
    font-size: 13px;
    color: #606266;
}

/* ============================================================
 * 手机端 / 窄屏适配（≤ 768px）
 * 侧栏转覆盖式抽屉（配合 index.html 的 is-drawer-open 类与 admin.js 的 isMobile），
 * 顶部栏/主内容收紧留白，搜索栏控件整行堆叠，对话框/分页自适应，避免横向溢出。
 * 桌面端（> 768px）不受本块影响，维持原布局。
 * ============================================================ */
@media (max-width: 768px) {
    /* 侧边栏：转为覆盖式抽屉，默认移出屏幕左侧，展开时滑入 */
    .el-aside {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        height: 100vh;
        z-index: 2010;
        transform: translateX(-100%);
        transition: transform .3s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, .18);
    }
    .el-aside.is-drawer-open { transform: translateX(0); }

    /* 抽屉遮罩（仅手机端渲染） */
    .sidebar-backdrop {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 2000;
        background: rgba(0, 0, 0, .35);
    }

    /* 顶部栏：收紧内边距、缩小面包屑与用户区 */
    .el-header { padding: 0 10px !important; }
    .el-header .el-breadcrumb { margin-left: 10px !important; font-size: 13px; }
    .user-dropdown-link { font-size: 15px; }
    .user-dropdown-avatar { margin-right: 5px; }

    /* 标签条：减少每个 tab 的内边距 */
    .admin-tabs .el-tabs__item { padding: 0 12px; }

    /* 主内容区：减少留白 */
    .admin-main, .el-main.admin-main { padding: 10px; }

    /* page-container 头部与区块：压缩纵向空间 */
    .pc-header { padding: 16px 12px 10px; }
    .pc-header__icon { width: 38px; height: 38px; margin-right: 10px; }
    .pc-header__icon i { font-size: 20px; }
    .pc-header__title { font-size: 16px; }
    .pc-header__desc { font-size: 12px; }
    .pc-section { padding: 10px 12px; }

    /* 搜索栏 / 工具栏：手机端紧凑排布——输入/下拉两个一行，按钮按内容宽 */
    .pc-search, .pc-toolbar { gap: 8px; }
    .pc-search > *, .pc-toolbar > * { margin-right: 0 !important; margin-bottom: 0 !important; }
    .pc-search .el-input,
    .pc-search .el-select,
    .pc-toolbar .el-input,
    .pc-toolbar .el-select { width: auto !important; flex: 1 1 calc(50% - 8px); min-width: 130px; }
    .pc-search .el-button, .pc-toolbar .el-button { margin-left: 0; flex: 0 0 auto; }
    /* 单选按钮组（状态筛选）：独占整行，内部等分 */
    .pc-search .el-radio-group { width: 100%; flex: 1 1 100%; display: flex; }
    .pc-search .el-radio-group .el-radio-button { flex: 1; }
    .pc-search .el-radio-button__inner { width: 100%; padding-left: 0; padding-right: 0; }
    /* 控件高度与字号收紧，减少纵向占位 */
    .pc-search .el-input__inner { height: 32px; line-height: 32px; font-size: 13px; }
    .pc-search .el-input--small .el-input__inner,
    .pc-search .el-select--small .el-input__inner { height: 30px; line-height: 30px; }
    .pc-search .el-button--small { padding: 7px 12px; font-size: 13px; }

    /* 卡片：收窄内边距，为表格/表单留出更多横向空间 */
    .el-card__body { padding: 12px; }

    /* 分页：隐藏条数选择与跳页，居中，收紧按钮尺寸，避免溢出 */
    .el-pagination { white-space: normal; text-align: center; font-size: 12px; }
    .el-pagination .el-pagination__sizes,
    .el-pagination .el-pagination__jump { display: none !important; }
    .el-pagination .el-pagination__total { font-size: 12px; margin-right: 6px; }
    .el-pagination button,
    .el-pagination .el-pager li:not(.disabled) {
        min-width: 26px; height: 26px; line-height: 26px; font-size: 12px;
    }
    .el-pagination .el-pager li { margin: 0 2px; }

    /* 表格：字号、行高、单元格内边距收紧；表体支持惯性横滚 */
    .el-table { font-size: 12px; }
    .el-table th.el-table__cell, .el-table td.el-table__cell { padding: 5px 0; }
    .el-table th.el-table__cell > .cell { font-size: 12px; color: #606266; }
    .el-table .cell { padding: 3px 6px; line-height: 1.4; }
    .el-table__body-wrapper { -webkit-overflow-scrolling: touch; }
    .el-table .el-button--text { padding: 2px 4px; font-size: 12px; }

    /* 对话框：宽度自适应屏幕；确认/输入框同样收窄 */
    .el-dialog { width: 92% !important; max-width: 92%; margin: 0 !important; }
    .el-dialog__body { padding: 16px 16px 8px; }
    .el-message-box { width: 90% !important; max-width: 90%; }

    /* 个人中心：左右两栏改为上下堆叠，取消固定高度改为滚动；密码垂直 tabs 改为横向 */
    .dialog-profile .el-dialog__body { height: auto; max-height: 76vh; overflow-y: auto; }
    .dialog-profile .profile-info { flex-direction: column; gap: 16px; }
    .dialog-profile .profile-card { width: 100%; }
    .dialog-profile .profile-pwd-tabs { flex-direction: column; gap: 8px; }
    .dialog-profile .profile-pwd-tabs > .el-tabs__header { margin-bottom: 8px; }
}

/* 超小屏（≤ 480px）：进一步精简非关键信息 */
@media (max-width: 480px) {
    .pc-header__desc { display: none; }
    .el-header .el-breadcrumb { display: none; }
    .admin-main, .el-main.admin-main { padding: 6px; }
    .el-table th.el-table__cell, .el-table td.el-table__cell { padding: 4px 0; }
    .el-card__body { padding: 8px; }
}