/* ======================================================================
 * 【文件说明】css/admin.css —— 后台主题样式（登录页 + 框架主页 shell）
 * 与前台共用同一套主题变量（--theme/--theme-dark/--theme-light/--theme-bg），
 * 由 js/admin_theme.js 按 blog_theme Cookie 写入；未选择时跟随四季（与前台一致）
 * 框架布局：html 根节点挂 adl-side（默认经典侧栏）/ adl-dark（深色侧栏）/ adl-top（顶部导航）
 * ====================================================================== */

/* 主题变量兜底（JS 未加载时显示经典蓝，与前台默认一致） */
:root {
    --theme: #3eafe0;
    --theme-dark: #2b8db3;
    --theme-light: #e8f4fb;
    --theme-bg: #f4f9fd;
}

html, body { margin: 0; padding: 0; }
/* 背景色跟随主题（--theme-bg 为各主题专属浅色底，切换主题后整屏底色可见变化） */
body { font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; font-size: 13px; color: #333; background: var(--theme-bg); }
a { color: #445; text-decoration: none; }
a:hover { color: var(--theme-dark); }

/* ==================== 框架 shell ==================== */
.ad-app { display: flex; min-height: 100vh; }

/* 左侧菜单（可折叠：html.adl-navoff 时收起为0宽） */
/* 侧栏底色跟随主题：用主题中浅色（比内容区 --theme-bg 深一档），切换主题时随之变化 */
.ad-side {
    width: 220px; flex-shrink: 0; background: var(--theme-light); border-right: 1px solid #e3e9ee;
    display: flex; flex-direction: column; z-index: 100; overflow: hidden;
    transition: width .25s ease, transform .22s ease;
}
html.adl-navoff .ad-side { width: 0; border-right-width: 0; }
/* 内部固定宽度，折叠动画时不被挤压变形 */
.ad-side-logo, .ad-nav { width: 220px; flex-shrink: 0; }
/* Logo 条：主题主色实底 + 白字，比侧栏更深，形成 内容区 < 侧栏 < Logo条 的层次 */
.ad-side-logo {
    height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
    font-size: 15px; font-weight: bold; color: #fff;
    background: var(--theme);
    border-bottom: 0; flex-shrink: 0;
}
.ad-side-logo img { height: 30px; width: auto; }
.ad-side-logo small { font-weight: normal; color: rgba(255,255,255,.85); font-size: 11px; }
/* padding 为0：第一个主导航色带紧贴上方 Logo 条，整体无间距 */
.ad-nav { flex: 1; overflow-y: auto; padding: 0; }
/* 主导航分组之间无间距：标题色带上下紧密相接 */
.ad-nav-group { margin-bottom: 0; position: static; }
/* 主导航标题前的分组图标（✎图文 / ¥收支 / ✉站内信 / ⚙系统） */
.ad-g-ico {
    display: inline-block; width: 18px; text-align: center; margin-right: 6px;
    font-size: 14px; font-weight: normal; color: inherit; opacity: .9;
}
/* 分组标题（主导航）：可点击手风琴（与旧版左侧菜单同款交互），右侧箭头指示展开状态
 * 底色 = 当前主题的深色（--theme-dark，即比主题色深一档的配套色），白字，换主题自动同步 */
.ad-nav-group > h4 {
    margin: 0; padding: 10px 36px 10px 20px; font-size: 12px; font-weight: bold;
    color: #fff; letter-spacing: 1px; position: relative;
    cursor: pointer; user-select: none;
    background: var(--theme-dark);
    /* 色带之间的细分隔线：无间距下用于区分相邻主导航 */
    border-bottom: 1px solid rgba(255,255,255,.28);
}
/* 最后一组底部不加线 */
.ad-nav-group:last-child > h4 { border-bottom: 0; }
.ad-nav-group > h4:hover { background: var(--theme); color: #fff; }
html.adl-top .ad-nav-group > h4 { background: transparent; border-bottom: 0; } /* 顶部导航布局为横向标签，不加底色与分隔线 */
.ad-nav-group > h4::after {
    content: "▾"; position: absolute; right: 16px; top: 10px;
    font-size: 11px; color: rgba(255,255,255,.85); transition: transform .18s;
}
.ad-nav-group.ad-closed > h4::after { transform: rotate(-90deg); }
.ad-nav-group.ad-closed .ad-drop { display: none; }
.ad-nav-group a {
    display: block; padding: 9px 16px 9px 22px; font-size: 13px; color: #445;
    border-left: 3px solid transparent;
}
/* 侧栏底色已是 --theme-light，hover/激活改用中性加深色保证对比度 */
.ad-nav-group a:hover { background: rgba(0,0,0,.05); color: var(--theme-dark); }
.ad-nav-group a.on {
    background: rgba(0,0,0,.08); color: var(--theme-dark);
    border-left-color: var(--theme); font-weight: bold;
}

/* 主区域 */
.ad-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* 顶栏（底边用主题色细线，切换主题时可见变化） */
.ad-top {
    height: 56px; background: #fff; border-bottom: 2px solid var(--theme);
    display: flex; align-items: center; padding: 0 14px; gap: 10px; flex-shrink: 0;
}
.ad-burger {
    display: none; width: 34px; height: 34px; line-height: 32px; text-align: center;
    border: 1px solid #e3e9ee; border-radius: 6px; font-size: 17px; color: #556; flex-shrink: 0;
}
/* 导航折叠按钮（桌面端；移动端用汉堡菜单抽屉）——默认主题色底，提示"点这里折叠菜单" */
.ad-navtog {
    display: inline-block; width: 34px; height: 34px; line-height: 32px; text-align: center;
    border: 1px solid transparent; border-radius: 6px; font-size: 13px; color: var(--theme-dark); flex-shrink: 0;
    background: var(--theme-light); cursor: pointer; font-family: inherit;
}
.ad-navtog:hover { background: var(--theme); color: #fff; }
.ad-top-title {
    font-size: 15px; font-weight: bold; color: var(--theme-dark); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.ad-top-title small { font-weight: normal; color: #9aa7b2; font-size: 11px; margin-left: 6px; }
.ad-top-right { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ad-top-right > a, .ad-top-right .ad-tp, .ad-top-right input, .ad-top-right button {
    display: inline-block; padding: 6px 10px; font-size: 13px; color: #556;
    border: 1px solid transparent; border-radius: 5px; background: none; cursor: pointer;
    font-family: inherit; line-height: 20px;
}
.ad-top-right > a:hover, .ad-top-right .ad-tp:hover, .ad-top-right input:hover { background: var(--theme-light); color: var(--theme-dark); }
.ad-top-right .ad-msg { color: #556; }
.ad-top-right .ad-msg.hot { color: #d9534f; font-weight: bold; }
.ad-top-right .ad-logout { color: #d9534f; }
.ad-top-right .ad-logout:hover { background: #fbe9e8; color: #b03532; }
.ad-user {
    padding: 6px 12px; background: var(--theme-light); color: var(--theme-dark);
    border-radius: 15px; font-size: 12px; white-space: nowrap;
}

/* 内容区（iframe 承载各功能页，保持原有样式） */
.ad-content { flex: 1; border: 0; width: 100%; background: #fff; min-height: 0; }

/* ==================== 主题/布局切换面板（顶栏小圆钮点开，与前台主页同款交互） ==================== */
.ad-theme { position: relative; }
.ad-tpanel {
    display: none; position: absolute; top: 40px; right: 0; z-index: 300;
    background: #fff; border: 1px solid #e3e9ee; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(30,50,70,.14); padding: 12px 14px; width: 230px;
}
.ad-tp-title { font-size: 12px; color: #9aa7b2; margin-bottom: 8px; }
.ad-dots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.ad-dot {
    width: 20px; height: 20px; border-radius: 50%; display: inline-block;
    border: 2px solid #fff; box-shadow: 0 0 0 1px #d9e1e8; cursor: pointer; position: relative;
    text-align: center; line-height: 16px; font-size: 10px; color: #fff; font-style: normal;
}
.ad-dot:hover { transform: scale(1.15); }
.ad-dot.on { box-shadow: 0 0 0 2px var(--theme); }
.ad-dot[data-key="auto"] {
    background: conic-gradient(#6da944, #1d9bc0, #e08a2e, #5b7fc0, #6da944);
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.ad-tcur { font-size: 12px; color: #667; }
.ad-lays { display: flex; gap: 6px; flex-wrap: wrap; }
.ad-lay {
    display: inline-block; padding: 4px 10px; font-size: 12px; color: #556;
    border: 1px solid #d9e1e8; border-radius: 5px;
}
.ad-lay:hover { border-color: var(--theme); color: var(--theme-dark); }
.ad-lay.on { background: var(--theme); border-color: var(--theme); color: #fff; }

/* ==================== 小圆钮（与前台主题切换器同款圆形按钮，后台顶栏与登录页共用） ==================== */
.ad-fab {
    width: 30px; height: 30px; border-radius: 50%; padding: 0;
    border: 1px solid #dfe6ec; background: #fff; cursor: pointer;
    box-shadow: 0 1px 4px rgba(30,50,70,.12);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; line-height: normal; font-family: inherit;
}
.ad-fab:hover { border-color: var(--theme); background: var(--theme-light); }
/* 注意：.ad-top-right button 有通用 padding 规则，需同等以上优先级覆盖 */
.ad-top-right .ad-fab { padding: 0; line-height: normal; }
/* 色轮图标：conic-gradient 多彩扇形（代表"主题颜色"） */
.ad-fab-wheel {
    width: 17px; height: 17px; border-radius: 50%; display: inline-block;
    background: conic-gradient(#ff8fb1 0deg 60deg, #ffd98e 60deg 120deg, #9be29b 120deg 180deg, #7fd4ff 180deg 240deg, #b3a5f0 240deg 300deg, #ff8fb1 300deg 360deg);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.5);
}
/* 布局图标：2×2 小方块（主题色，一角半透明表示多布局） */
.ad-fab-grid {
    width: 14px; height: 14px; display: inline-block;
    background:
        linear-gradient(var(--theme) 0 0) 0 0 / 6px 6px no-repeat,
        linear-gradient(var(--theme) 0 0) 8px 0 / 6px 6px no-repeat,
        linear-gradient(var(--theme) 0 0) 0 8px / 6px 6px no-repeat,
        linear-gradient(rgba(0,0,0,.28) 0 0) 8px 8px / 6px 6px no-repeat;
}

/* 移动端遮罩 */
.ad-mask { display: none; position: fixed; inset: 0; background: rgba(20,35,50,.45); z-index: 90; }

/* ==================== 布局②：深色侧栏 ==================== */
html.adl-dark .ad-side { background: #2b3540; border-right-color: #232c35; }
html.adl-dark .ad-side-logo { color: #fff; background: #232c35; border-bottom-color: #39434e; }
html.adl-dark .ad-side-logo small { color: #8fa0b0; }
/* 深色导航下主导航标题文字为白色（跟随基础规则 color:#fff，此处不再覆盖） */
html.adl-dark .ad-nav-group a { color: #cfd8e0; border-left-color: transparent; }
html.adl-dark .ad-nav-group a:hover { background: rgba(255,255,255,.07); color: #fff; }
html.adl-dark .ad-nav-group a.on {
    background: var(--theme); color: #fff; border-left-color: rgba(255,255,255,.7);
}

/* ==================== 布局③：顶部导航 ==================== */
html.adl-top .ad-app { flex-direction: column; }
html.adl-top .ad-side {
    width: 100%; flex-direction: row; align-items: stretch;
    border-right: 0; border-bottom: 1px solid #e3e9ee; overflow: visible; /* 下拉菜单需向下伸出，不能裁剪 */
}
html.adl-top .ad-side-logo { display: none; }
html.adl-top .ad-nav { display: flex; align-items: stretch; padding: 0; overflow: visible; width: auto; }
html.adl-top.adl-navoff .ad-side { display: none; } /* 顶部导航布局下折叠=隐藏整条菜单 */
html.adl-top .ad-nav-group { flex-shrink: 0; position: relative; } /* 作为下拉面板的定位基准 */
html.adl-top .ad-nav-group > h4 {
    padding: 0 16px; line-height: 44px; margin: 0; cursor: pointer;
    font-size: 13px; color: #445; letter-spacing: 0; white-space: nowrap;
    position: static; /* 顶部导航为横向标签，不显示手风琴箭头 */
}
html.adl-top .ad-nav-group > h4::after { display: none; }
html.adl-top .ad-nav-group > h4:hover { color: var(--theme-dark); }
/* 下拉菜单面板：整体定位在对应标签正下方（整块显示，不再逐项绝对定位） */
html.adl-top .ad-drop {
    display: none; position: absolute; top: 44px; left: 0; z-index: 60;
    background: #fff; border: 1px solid #e3e9ee; border-top: 2px solid var(--theme);
    box-shadow: 0 8px 20px rgba(30,50,70,.12); min-width: 150px; padding: 4px 0;
}
html.adl-top .ad-nav-group:hover .ad-drop { display: block; }
html.adl-top .ad-drop a { white-space: nowrap; }
html.adl-top .ad-nav-group a.on { background: var(--theme-light); }
/* 深色侧栏类在顶部布局下不改变顶栏底色，仅保留兼容 */

/* ==================== 登录页 ==================== */
.ad-login-body { margin: 0; }
.ad-login {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 24px 14px;
    background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme) 55%, var(--theme-light) 100%);
}
.ad-login-card {
    width: 400px; max-width: 100%; background: #fff; border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,.20); padding: 30px 36px 22px;
}
.ad-login-logo { text-align: center; margin-bottom: 10px; }
.ad-login-logo img { height: 52px; width: auto; }
.ad-login-title { text-align: center; font-size: 19px; color: #334; margin: 0 0 4px; }
.ad-login-sub { text-align: center; font-size: 12px; color: #98a4ae; margin: 0 0 20px; }
.ad-field { margin-bottom: 14px; }
.ad-input {
    width: 100%; box-sizing: border-box; height: 42px; padding: 0 14px;
    border: 1px solid #d9e1e8; border-radius: 8px; font-size: 14px; outline: none;
    background: #fafcfd; font-family: inherit; color: #333;
}
.ad-input:focus { border-color: var(--theme); background: #fff; }
.ad-cap-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ad-cap-q {
    flex: 1.1; height: 42px; padding: 0 10px; background: #f2f6f9;
    border: 1px dashed #c9d6de; border-radius: 8px; font-size: 15px; color: #445;
    cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap; overflow: hidden; /* 题目不换行，防止窄屏挤压后溢出 */
}
.ad-cap-row .ad-input { width: 84px; flex-shrink: 0; height: 42px; text-align: center; }
.ad-btn {
    width: 100%; height: 42px; line-height: 42px; border: 0; border-radius: 8px;
    background: var(--theme); color: #fff; font-size: 15px; font-weight: bold;
    letter-spacing: 6px; cursor: pointer; font-family: inherit;
}
/* 登录行内的按钮：不占满整行，与验证码题/输入框平分剩余宽度 */
.ad-cap-row .ad-btn { width: auto; flex: 1; min-width: 96px; }
.ad-btn:hover { background: var(--theme-dark); }
.ad-login-msg { font-size: 12px; color: #8a97a1; margin: 10px 0 0; min-height: 16px; }
.ad-login-msg .red { color: #d9534f; }
.ad-login-theme { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #e3e9ee; text-align: center; }
/* 登录页主题小圆钮：居中显示，作为面板定位基准 */
.ad-login-theme .ad-theme { position: relative; display: inline-block; }
/* 登录页主题面板：在圆钮上方弹出，水平居中对齐圆钮 */
.ad-lpanel {
    top: auto; bottom: 44px; right: auto;
    left: 50%; margin-left: -115px;
}
.ad-login-theme .ad-tcur { display: block; }
.ad-login-foot { margin-top: 18px; color: rgba(255,255,255,.85); font-size: 12px; }
.ad-login-foot a { color: #fff; text-decoration: underline; }

/* ==================== 手机端适配 ==================== */
@media (max-width: 768px) {
    .ad-burger { display: inline-block; }
    .ad-navtog { display: none; }
    .ad-side {
        position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
        transform: translateX(-105%); transition: transform .22s ease; box-shadow: 2px 0 18px rgba(0,0,0,.18);
    }
    .ad-side.open { transform: translateX(0); }
    .ad-top { padding: 0 8px; gap: 2px; }
    .ad-top-title small { display: none; }
    .ad-top-right > a, .ad-top-right .ad-tp, .ad-top-right input { padding: 5px 7px; font-size: 12px; }
    .ad-user { display: none; }
    #lbPwd { display: none; } /* 手机上隐藏"密码"文字按钮（内容区可自行进入用户编辑页），节省顶栏空间 */
    .ad-top { gap: 4px; }
    html.adl-top .ad-side { position: static; transform: none; width: 100%; box-shadow: none; overflow-x: auto; overflow-y: hidden; }
}

/* ==================== 极窄屏（手机）：登录页验证码行换行 ==================== */
@media (max-width: 420px) {
    .ad-login-card { padding: 24px 18px 18px; }
    .ad-cap-row { flex-wrap: wrap; }
    .ad-cap-q { flex: 1 1 100%; } /* 验证码题目独占一行 */
    .ad-cap-row .ad-input { width: 84px; }
    .ad-cap-row .ad-btn { flex: 1 1 auto; } /* 登录按钮占剩余一行宽度 */
}

/* ==================== 会员后台：禁封提示条 + 菜单禁用 ==================== */
.mem-ban-bar {
    background: #fdecea; color: #b03532; border-bottom: 1px solid #f5c6c2;
    padding: 8px 16px; font-size: 13px; line-height: 1.6;
}
.mem-ban-bar b { color: #8c2b29; }
.ad-nav-group a.off {
    color: #b3bcc4 !important; background: none !important;
    pointer-events: none; cursor: not-allowed; text-decoration: none;
}