/* ═══════════════════════════════════════════════════════════════════════
   管理后台统一皮肤 (admin_skin.css)
   ─────────────────────────────────────────────────────────────────────
   用法：在每个 admin_*.html 的 </head> 前引用一次：
       <link rel="stylesheet" href="/api/static/admin_skin.css">
   位置在页面自带 <style> 之后 → 同特异性时本表胜出；对页面里的行内
   style（如导航条的粉色渐变）用 !important 兜底。

   设计令牌集中在 :root，改颜色只动一处。可安全重复引用（幂等）。
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --nau-ink: #1f2937;
    --nau-ink-2: #374151;
    --nau-muted: #6b7280;
    --nau-faint: #9ca3af;
    --nau-line: #e5e7eb;
    --nau-line-2: #eef1f5;
    --nau-brand: #0f766e;
    --nau-brand-2: #14b8a6;
    --nau-brand-soft: #ecfdf5;
    --nau-accent: #d97706;
    --nau-accent-soft: #fffbeb;
    --nau-danger: #b91c1c;
    --nau-bg: #f4f6f9;
    --nau-card: #ffffff;
    --nau-radius: 14px;
    --nau-radius-sm: 9px;
    --nau-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 26px rgba(16, 24, 40, .06);
    --nau-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
}

/* ── 版面基调 ───────────────────────────────────────────────────────── */
body {
    background: var(--nau-bg) !important;
    color: var(--nau-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1180px;
}

a {
    color: var(--nau-brand);
}

a:hover {
    color: var(--nau-brand-2);
}

/* ── 顶部导航：去掉粉色渐变，改成白卡片 ────────────────────────────── */
.container > .navbar.navbar-default,
.navbar.navbar-default {
    background: var(--nau-card) !important;
    background-image: none !important;
    border: 1px solid var(--nau-line) !important;
    border-radius: var(--nau-radius) !important;
    box-shadow: var(--nau-shadow) !important;
    padding: 8px 12px !important;
    margin-bottom: 18px !important;
    min-height: 0 !important;
}

.navbar.navbar-default hr {
    border: 0 !important;
    border-top: 1px dashed var(--nau-line-2) !important;
    margin: 6px 2px !important;
}

.navbar .nav-pills {
    padding: 4px 2px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.navbar .nav-pills > li {
    float: none;
}

.navbar .nav-pills > li > a {
    border-radius: 999px;
    color: var(--nau-ink-2) !important;
    font-weight: 500;
    padding: 6px 14px;
    transition: background .15s ease, color .15s ease;
}

.navbar .nav-pills > li > a:hover,
.navbar .nav-pills > li > a:focus {
    background: var(--nau-brand-soft) !important;
    color: var(--nau-brand) !important;
    text-decoration: none;
}

.navbar .nav-pills > li.active > a,
.navbar .nav-pills > li.active > a:hover,
.navbar .nav-pills > li.active > a:focus {
    background: var(--nau-brand) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(15, 118, 110, .28);
}

/* 第二行（子导航）淡化处理 */
.navbar #nav-sub > li > a,
.navbar .nav-pills > li > a.second {
    background: transparent !important;
    color: var(--nau-muted) !important;
    font-weight: 400;
    padding: 5px 11px;
    font-size: 13px;
}

.navbar #nav-sub > li > a:hover,
.navbar .nav-pills > li > a.second:hover {
    background: var(--nau-line-2) !important;
    color: var(--nau-brand) !important;
}

.navbar #nav-sub > li.active > a {
    background: var(--nau-accent-soft) !important;
    color: var(--nau-accent) !important;
    font-weight: 600;
}

/* 页面上单独的橙色高亮项（原 .li-title>a）统一成主题色 */
.li-title > a {
    background-color: var(--nau-brand) !important;
    color: #fff !important;
}

/* ── 内容区：白卡片取代灰底 jumbotron ──────────────────────────────── */
.jumbotron {
    background: var(--nau-card) !important;
    border: 1px solid var(--nau-line) !important;
    border-radius: var(--nau-radius) !important;
    box-shadow: var(--nau-shadow) !important;
    padding: 26px 28px !important;
    margin-bottom: 26px !important;
    color: var(--nau-ink);
}

.jumbotron h1,
.jumbotron h2,
.jumbotron h3 {
    color: var(--nau-ink);
    font-weight: 700;
}

/* ── 表格 ───────────────────────────────────────────────────────────── */
.table {
    border-radius: var(--nau-radius-sm);
}

.table > thead > tr > th {
    background: #f8fafc;
    border-bottom: 0 !important;
    box-shadow: inset 0 -2px 0 var(--nau-line);
    color: var(--nau-ink-2);
    font-weight: 600;
    white-space: nowrap;
    padding: 11px 10px;
}

/* 圆角改由首末表头单元格承担（.table 已解开 overflow:hidden，sticky 表头生效前提） */
.table > thead > tr > th:first-child {
    border-top-left-radius: var(--nau-radius-sm);
}

.table > thead > tr > th:last-child {
    border-top-right-radius: var(--nau-radius-sm);
}

.table > tbody > tr > td {
    border-top: 1px solid var(--nau-line-2);
    padding: 10px;
    vertical-align: middle;
}

.table.table-striped > tbody > tr:nth-of-type(odd) {
    background: #fcfdfe;
}

.table > tbody > tr:hover {
    background: var(--nau-brand-soft) !important;
}

/* ── 按钮（含页面自定义的 .button/.neau-button/.important/.small）──── */
.btn,
.button,
.nau-button,
.neau-button {
    border-radius: 999px !important;
    border: 1px solid transparent;
    font-weight: 600;
    padding: 7px 16px !important;
    transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
    box-shadow: var(--nau-shadow-sm);
}

.btn:hover,
.button:hover,
.nau-button:hover,
.neau-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 24, 40, .14);
}

.btn-primary,
.button.important,
.neau-blue-green {
    background-color: var(--nau-brand) !important;
    border-color: var(--nau-brand) !important;
    color: #fff !important;
}

.btn-primary:hover,
.button.important:hover,
.neau-blue-green:hover {
    background-color: #0b5f59 !important;
    border-color: #0b5f59 !important;
    color: #fff !important;
}

.button.small,
.nau-small-inline,
.neau-small {
    padding: 4px 12px !important;
    font-size: 12.5px;
}

/* ── 标签（首页旧标签云残留的 .label）──────────────────────────────── */
.label.large {
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 600;
}

/* ── 分页 ───────────────────────────────────────────────────────────── */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: 16px 0;
    padding: 0;
}

.pagination > li > a,
.pagination > li > span {
    border-radius: var(--nau-radius-sm) !important;
    border: 1px solid var(--nau-line);
    color: var(--nau-ink-2);
    margin: 0;
}

.pagination > li > a:hover {
    background: var(--nau-brand-soft);
    color: var(--nau-brand);
    border-color: var(--nau-brand-2);
}

.pagination > .active > a,
.pagination > .active > a:hover {
    background: var(--nau-brand) !important;
    border-color: var(--nau-brand) !important;
    color: #fff !important;
}

/* ── 提示 / 表单 ───────────────────────────────────────────────────── */
.alert-danger {
    border-radius: var(--nau-radius-sm);
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: var(--nau-danger);
}

.form-control {
    border-radius: var(--nau-radius-sm);
    border-color: var(--nau-line);
    box-shadow: none;
    height: auto;
    padding: 7px 11px;
}

.form-control:focus {
    border-color: var(--nau-brand-2);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .16);
}

input[type="text"].form-control,
input[type="password"].form-control {
    display: inline-block;
}

#err {
    margin-bottom: 16px;
}

hr {
    border-color: var(--nau-line);
}

/* ── 小工具类 ──────────────────────────────────────────────────────── */
.nau-muted {
    color: var(--nau-muted);
}

.nau-card {
    background: var(--nau-card);
    border: 1px solid var(--nau-line);
    border-radius: var(--nau-radius);
    box-shadow: var(--nau-shadow);
    padding: 20px 22px;
}

.nau-page-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--nau-ink);
}

@media (max-width: 767px) {
    .jumbotron {
        padding: 18px 16px !important;
    }

    .navbar .nav-pills > li > a {
        padding: 5px 10px;
        font-size: 13px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   ==== 细节优化层（D 系列）====
   ─────────────────────────────────────────────────────────────────────
   本层只追加覆盖，不改写上方任何既有规则（唯一例外：.table 块已就地
   去掉 overflow:hidden，表头分隔线改 inset box-shadow，圆角下放至首
   末表头单元格——见上方「表格」小节）。
   类名契约（与 admin_table.js / admin_ui.js 对齐，勿改名）：
     nau-num / nau-dense / nau-ellipsis / nau-scroll / nau-num
     nau-tag(.lv1~.lv6 / .ok / .warn / .bad)
     nau-empty / nau-empty-row / nau-skeleton / nau-btn-sm
     nau-toast / #nau-toast-box / .nau-confirm
   ══════════════════════════════════════════════════════════════════════ */

/* ── D01 等宽数字：学号 / Rating / 时间比例纵向对齐 ─────────────────── */
.table td, .table th {
    font-variant-numeric: tabular-nums;
}

/* ── D03 表头吸顶（需 .table 无 overflow:hidden，已就地解除）───────── */
.table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f8fafc; /* 不透明底色，防滚动内容透底 */
}

/* ── D02 数字列右对齐（由 admin_table.js 打标）─────────────────────── */
.nau-num,
.table > tbody > tr > td.nau-num,
.table > thead > tr > th.nau-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── D04 斑马纹与行 hover 重定（旧值差 0.5% 不可见 / 旧 hover 偏亮）── */
.table.table-striped > tbody > tr:nth-of-type(odd) {
    background: #f9fafb;
}

.table > tbody > tr:hover,
.table.table-hover > tbody > tr:hover {
    background: #f5f9f8 !important;
}

/* ── D05 行密度：默认 9px 10px，.nau-dense 紧凑档 5px 8px ──────────── */
.table > tbody > tr > td {
    padding: 9px 10px;
}

.table.nau-dense > tbody > tr > td,
.table.nau-dense > thead > tr > th,
.nau-dense .table > tbody > tr > td,
.nau-dense .table > thead > tr > th {
    padding: 5px 8px !important;
}

/* ── D06 长文本单行省略（由 admin_table.js 打标）───────────────────── */
.nau-ellipsis,
.table > tbody > tr > td.nau-ellipsis {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── D07 / D23 宽表滚动容器（由 admin_table.js 自动包裹）───────────── */
.nau-scroll {
    max-height: 74vh;
    overflow: auto;
    border-radius: var(--nau-radius-sm);
    -webkit-overflow-scrolling: touch;
}

.nau-scroll > .table {
    margin-bottom: 0;
}

/* 解开 .table 圆角后，末行补下圆角，避免与上方卡片语言割裂 */
.table > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--nau-radius-sm);
}

.table > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--nau-radius-sm);
}

/* ── D08 等级标签六档（1 灰 / 2 灰绿 / 3 蓝 / 4 琥珀 / 5 深青 / 6 实心青绿）
     由 admin_table.js 对「文本完全等于等级名且不含 <a>」的单元格打标 ── */
.nau-tag {
    display: inline-block;
    padding: 1px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    vertical-align: middle;
}

.nau-tag.lv1 {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
}

.nau-tag.lv2 {
    background: #eaf3ee;
    border-color: #d5e7dc;
    color: #4b7f63;
}

.nau-tag.lv3 {
    background: #e8f0fc;
    border-color: #cfdffb;
    color: #1d4ed8;
}

.nau-tag.lv4 {
    background: #fef3c7;
    border-color: #fde68a;
    color: #b45309;
}

.nau-tag.lv5 {
    background: #e4f4f0;
    border-color: #bfe4db;
    color: #0b5f59;
}

.nau-tag.lv6 {
    background: var(--nau-brand);
    border-color: var(--nau-brand);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 6px rgba(15, 118, 110, .28);
}

/* ── D09 状态语义三色（白名单词映射，白名单外一律不动）─────────────── */
.nau-tag.ok {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #15803d;
}

.nau-tag.warn {
    background: #fef3c7;
    border-color: #fde68a;
    color: #b45309;
}

.nau-tag.bad {
    background: #fee2e2;
    border-color: #fecaca;
    color: var(--nau-danger);
}

/* ── D10 空态占位行（admin_table.js 插入 tr.nau-empty-row）─────────── */
.table > tbody > tr.nau-empty-row > td,
.nau-empty-row > td {
    padding: 34px 12px !important;
    text-align: center;
    color: var(--nau-muted);
    background: #fbfcfd;
    font-size: 13px;
    letter-spacing: .02em;
}

.nau-empty-row > td::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    vertical-align: -5px;
    opacity: .75;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2.5'/%3E%3Cpath d='M3 9.5h18'/%3E%3Cpath d='M8.5 14.5h7'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

.nau-empty {
    display: inline-flex;
    align-items: center;
    color: var(--nau-muted);
}

/* ── D11 加载骨架条（#page-body 隐藏期由 admin_table.js 插入）──────── */
.nau-skeleton {
    display: block;
    height: 92px;
    margin: 14px 0 0;
    border-radius: var(--nau-radius-sm);
    background-color: #eef1f5;
    background-image: linear-gradient(90deg, #eef1f5 0%, #f8fafc 38%, #eef1f5 76%);
    background-size: 300% 100%;
    animation: nau-skeleton-breathe 1.35s ease-in-out infinite;
}

@keyframes nau-skeleton-breathe {
    0% {
        background-position: 100% 0;
        opacity: 1;
    }

    50% {
        opacity: .7;
    }

    100% {
        background-position: 0 0;
        opacity: 1;
    }
}

/* ── D12 .panel 卡片别名（对齐 14px 圆角卡片语言，不改页面类名）──────
   注意：不给 .panel 加 overflow:hidden —— admin_email_show 等页的表格在
   .panel-body 内，裁切会把 sticky 表头一并废掉 ─────────────────────── */
.panel {
    background: var(--nau-card);
    border: 1px solid var(--nau-line);
    border-radius: var(--nau-radius);
    box-shadow: var(--nau-shadow-sm);
    margin-bottom: 18px;
    overflow: visible;
}

.panel > .panel-heading,
.panel-heading {
    padding: 12px 18px;
    border-bottom: 1px solid var(--nau-line);
    border-radius: var(--nau-radius) var(--nau-radius) 0 0;
    background: #f8fafc;
    color: var(--nau-ink);
    font-weight: 600;
}

.panel > .panel-body,
.panel-body {
    padding: 16px 18px;
    border-radius: 0 0 var(--nau-radius) var(--nau-radius);
}

.panel > .panel-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--nau-line);
    background: #f8fafc;
    border-radius: 0 0 var(--nau-radius) var(--nau-radius);
}

/* ── D13 旧 .button 尺寸吸收（不删页面类名，纯 CSS 归一）────────────
     默认 34px 档见 D14；small / small-1 / small-2 / small-3 → 28px 档
     （.nau-btn-sm 语义）；btn-xs → 24px 档 ───────────────────────────── */
.nau-btn-sm,
.button.small,
.button.small-1,
.button.small-2,
.button.small-3,
.btn.btn-sm {
    height: 28px;
    line-height: 18px;
    padding: 4px 12px !important;
    font-size: 12.5px;
}

.nau-btn-xs,
.btn.btn-xs {
    height: 24px;
    line-height: 16px;
    padding: 3px 9px !important;
    font-size: 12px;
}

/* 按钮内图标与文字对齐 */
.nau-btn-sm > .glyphicon,
.nau-btn-xs > .glyphicon {
    top: 0;
}

/* ── D14 控件与按钮同排对齐：统一 34px 高，textarea 单独放开 ────────── */
.btn,
.button,
.nau-button,
.neau-button,
.nau-btn-md {
    height: 34px;
    line-height: 20px;
    padding: 6px 16px !important;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
}

.form-control {
    height: 34px;
    line-height: 20px;
    padding: 6px 11px;
    box-sizing: border-box;
    vertical-align: middle;
}

textarea.form-control {
    height: auto;
    min-height: 90px;
    line-height: 1.6;
    padding: 8px 11px;
}

select.form-control {
    padding-right: 22px;
}

/* ── D18 全局浮层提示（admin_ui.js 懒创建 #nau-toast-box）──────────── */
#nau-toast-box {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 2147482000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 320px;
    max-width: calc(100vw - 36px);
    pointer-events: none;
}

.nau-toast {
    pointer-events: auto;
    padding: 10px 14px;
    border: 1px solid var(--nau-line);
    border-left: 4px solid var(--nau-brand);
    border-radius: var(--nau-radius-sm);
    background: var(--nau-card);
    color: var(--nau-ink);
    font-size: 13.5px;
    line-height: 1.55;
    box-shadow: 0 8px 26px rgba(16, 24, 40, .16);
    word-break: break-word;
    animation: nau-toast-in .22s ease-out both;
}

.nau-toast.err {
    border-color: #fecaca;
    border-left-color: var(--nau-danger);
    background: #fef2f2;
    color: var(--nau-danger);
}

@keyframes nau-toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── D19 二次确认弹层样式（仅样式就位，不改 window.confirm 行为）───── */
.nau-confirm-mask {
    position: fixed;
    inset: 0;
    z-index: 2147482100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(17, 24, 39, .44);
    animation: nau-toast-in .18s ease-out both;
}

.nau-confirm {
    width: 100%;
    max-width: 420px;
    padding: 22px 24px 18px;
    border: 1px solid var(--nau-line);
    border-radius: var(--nau-radius);
    background: var(--nau-card);
    box-shadow: 0 18px 48px rgba(16, 24, 40, .22);
    color: var(--nau-ink);
    font-size: 14px;
    line-height: 1.65;
}

.nau-confirm-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--nau-ink);
}

.nau-confirm-msg {
    margin: 0 0 18px;
    color: var(--nau-ink-2);
}

.nau-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.nau-confirm-actions .nau-confirm-danger {
    background: var(--nau-danger);
    border-color: var(--nau-danger);
    color: #fff;
}

/* ── D21 窄屏容器改流体（1180 固定宽在 1152 以下开始挤表格）────────── */
@media (max-width: 1199px) {
    .container {
        width: auto;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ── D22 主导航密度：13 项换行后行距 4px 过挤 → 6px ────────────────── */
.navbar .nav-pills {
    gap: 6px;
}

.navbar #nav-sub {
    margin-top: 6px;
    padding-top: 2px;
}

/* ── V1 跨文档视图过渡（全站切页丝滑化 · 第 1 层）────────────────────
   Baseline 2025：Chrome 126+/Edge/Safari 18.2 原生支持，Firefox 开发中，
   不支持的浏览器自动降级为普通跳转（零副作用，无需 JS 检测）。
   同一份规则挂在 admin_skin 与 site_skin 两处（site_skin 叠在 admin_skin
   之上），幂等无冲突；带 reduced-motion 兜底。

   ★安全口径（2026-10-21 修白屏）：**只淡出旧页、不自定义新页入场**。
   浏览器默认交叉淡入里，`::view-transition-new(root)` 的结束态天然是
   opacity:1（自愈）。若自定义 `new` 并写 `from{opacity:0}` + `both` 填充，
   一旦过渡被 bfcache 中断 / Chrome 4s 超时，new 会停在 opacity:0 = 整页
   白屏。故这里 new 一律不设 keyframes，交给浏览器默认值。 ─────────── */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: nau-vt-out .22s ease-out both;
}

/* new 不设自定义入场：用浏览器默认（结束时 opacity:1，异常自愈） */
::view-transition-new(root) {
    animation-duration: .26s;
    animation-timing-function: ease-out;
}

@keyframes nau-vt-out {
    to {
        opacity: 0;
    }
}

/* 点击即时反馈：导航离开瞬间内容轻微淡出 + 顶部进度条，填平 TTFB 空窗。
   ★只用 transition（可回退到原状），不用 animation+forwards；且页面一旦
   pageshow（含 bfcache 恢复）就清除，绝不把页面永久留在半透明。 ── */
body.nau-leaving {
    opacity: .6;
    transition: opacity .18s ease-out;
}

body.nau-leaving::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2147483000;
    background: var(--nau-brand, #0f766e);
    animation: nau-vt-progress .5s ease-out both;
}

@keyframes nau-vt-progress {
    from {
        transform: scaleX(0);
        transform-origin: left;
    }

    to {
        transform: scaleX(1);
        transform-origin: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }

    body.nau-leaving {
        opacity: 1;
    }

    body.nau-leaving::before {
        animation: none;
    }
}