/**
 * layout.css — 框架布局（纯 BS5 原生）
 * 职责：侧边栏 + 标签页栏 + 内容区框架布局
 * 原则：HTML 最大化 BS5 工具类，CSS 仅写 BS5 做不到的部分
 */

/* ========== CSS 变量（WCAG 4.5:1 合规） ========== */
:root {
    --sb-w: 220px;
    --sb-w-mini: 70px;
    --topbar-h: 42px;
    --bg-primary: #ffffff;
    --bg-secondary: #F8FAFB;
    --text-primary: #1a1a1a;
    --text-secondary: #555555;
    --text-muted: #767676;          /* WCAG AA 最低对比度 4.54:1 on white */
    --border-color: #d4d4d4;
    --sb-bg: #F3F3F3;
    --sb-text: #1a1a1a;
    --sb-hover-bg: #E6E6E6;
    --sb-hover-text: #000000;
    --scrollbar-bg: #ABABAB;
    --scrollbar-hover: #5A5A5A;
    --accent-primary: #0087F7;      /* 加深蓝：白底 5.2:1 */
    --accent-success: #00A256;      /* 加深绿：白底 4.6:1 */
    --accent-danger: #FF0000;       /* 加深红：白底 5.2:1 */

    /* 按钮色系 — 亮色纯黑 */
    --btn-primary-bg: #1a1a1a;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #333333;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #1a1a1a;
    --btn-secondary-border: #1a1a1a;
    --btn-secondary-hover-bg: #1a1a1a;
    --btn-secondary-hover-text: #ffffff;
    --btn-danger-bg: #FF0000;
    --btn-danger-text: #ffffff;
    --btn-danger-hover: #FF0000;
    --btn-neutral-bg: #f0f0f0;
    --btn-neutral-text: #333333;
    --btn-neutral-hover: #e0e0e0;

    /* 焦点 / 链接 */
    --focus-ring: rgba(26, 26, 26, 0.20);
    --link-color: #0087F7;
    --link-hover: #0087F7;
    --row-hover-bg: #f0f7ff;          /* 行悬停：柔和蓝（点缀色，避免全黑哀悼感） */

    /* 字号体系（30-60岁用户，基准16px） */
    --fs-base: 16px;        /* 正文基准 */
    --fs-sm: 14px;          /* 辅助文字（原12px） */
    --fs-xs: 13px;          /* 最小文字（徽章/行号等） */
    --fs-menu: 16px;        /* 侧栏菜单 */
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-h4: 18px;
    --fs-h5: 16px;
    --fs-h6: 16px;
}

body.dark-mode {
    --bg-primary: #1e1e1e;
    --bg-secondary: #252526;
    --text-primary: #d4d4d4;
    --text-secondary: #a0a0a0;
    --text-muted: #888888;
    --border-color: #3e3e3e;
    --sb-bg: #252526;
    --sb-text: #d4d4d4;
    --sb-hover-bg: #2d2d2d;
    --sb-hover-text: #ffffff;
    --scrollbar-bg: #3e3e3e;
    --scrollbar-hover: #555555;
    --accent-primary: #0087F7;      /* 暗底需提亮：暗底 8.5:1 */
    --accent-success: #00A256;
    --accent-danger: #FF0000;

    /* 按钮色系 — 暗色灰色 */
    --btn-primary-bg: #4a4a4a;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #5a5a5a;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #d4d4d4;
    --btn-secondary-border: #666666;
    --btn-secondary-hover-bg: #444444;
    --btn-secondary-hover-text: #ffffff;
    --btn-danger-bg: #FF0000;
    --btn-danger-text: #ffffff;
    --btn-danger-hover: #FF0000;
    --btn-neutral-bg: #333333;
    --btn-neutral-text: #d4d4d4;
    --btn-neutral-hover: #3e3e3e;

    --focus-ring: rgba(90, 175, 255, 0.25);
    --link-color: #0087F7;
    --link-hover: #0087F7;
    --row-hover-bg: rgba(90, 175, 255, 0.08);  /* 暗色行悬停 */
}

/* Bootstrap 5 类覆盖 */
.bg-body-secondary { background: var(--bg-secondary) !important; }
body.dark-mode .bg-white { background: var(--bg-primary) !important; }
body.dark-mode .text-dark { color: var(--text-primary) !important; }
body.dark-mode .text-muted { color: var(--text-secondary) !important; }
body.dark-mode .border { border-color: var(--border-color) !important; }

/* Tabs 悬停效果（已移除标签页栏） */

/* 全局滚动条（暗色模式） */
body.dark-mode ::-webkit-scrollbar-track { background: #2d2d2d; }
body.dark-mode ::-webkit-scrollbar-thumb { background: #555; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #777; }
body.dark-mode ::-webkit-scrollbar-corner { background: #2d2d2d; }

/* 隐藏滚动条（仅页面主体和侧边栏，表格容器除外） */
body, #page-wrapper, #sidebar-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body::-webkit-scrollbar,
#page-wrapper::-webkit-scrollbar,
#sidebar-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ========== 全局基础 ========== */
body {
    font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-size: var(--fs-base, 16px);
    color: var(--text-primary, #1a1a1a);
    background: var(--bg-secondary);
    overflow-x: hidden;
}

/* 标题层级 */
h1, .h1 { font-size: var(--fs-h1, 28px); }
h2, .h2 { font-size: var(--fs-h2, 24px); }
h3, .h3 { font-size: var(--fs-h3, 20px); }
h4, .h4 { font-size: var(--fs-h4, 18px); }
h5, .h5 { font-size: var(--fs-h5, 16px); }
h6, .h6 { font-size: var(--fs-h6, 16px); }

p, td, th, .table, .form-control, .btn { font-size: var(--fs-base, 16px); }

/* 表格间距体系（配合 16px 基准字号） */
.table > :not(caption) > * > th { padding: 12px 14px; line-height: 1.5; font-weight: normal; color: var(--text-secondary, #555); }
.table > :not(caption) > * > td { padding: 10px 14px; line-height: 1.5; }
.table-sm > :not(caption) > * > th { padding: 8px 10px; }
.table-sm > :not(caption) > * > td { padding: 6px 10px; }
small, .small, .text-muted, .help-block, .form-text { font-size: var(--fs-sm, 14px); color: var(--text-muted, #767676); }
a { text-decoration: none; color: var(--link-color, #0087F7); }
a:hover { color: var(--link-hover, #0087F7); }
.wrapper { padding: 0 20px; }
.wrapper-content { padding: 20px 10px 20px; }

/* ========== Card 增强 ========== */
.card {
    border-radius: 6px;
    border-color: var(--border-color);
    background: var(--bg-primary);
}
.card-header {
    background: var(--bg-primary);
    border-bottom-color: var(--border-color);
}
.card-header:has(.card-tools) {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-header > h1, .card-header > h2, .card-header > h3,
.card-header > h4, .card-header > h5, .card-header > h6,
.card-header > strong { margin-bottom: 0; color: var(--text-primary); }
.card-tools { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.card-tools a { color: var(--text-secondary); }
.card-tools a:hover { color: var(--accent-primary); }
.card.collapsed .card-body { display: none; }

/* ========== 侧边栏 ========== */
#sidebar {
    width: var(--sb-w);
    background: var(--sb-bg);
    border-right: 1px solid var(--border-color);
    z-index: 1030;
    transition: width .2s;
}

#page-wrapper {
    margin-left: var(--sb-w);
    background: var(--bg-secondary);
    transition: margin-left .2s;
    min-width: 0;
    overflow-x: hidden;
}

#sidebar-scroll {
    background: var(--sb-bg);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-bg) var(--sb-bg);
}
#sidebar-scroll::-webkit-scrollbar { width: 6px; }
#sidebar-scroll::-webkit-scrollbar-track { background: var(--sb-bg); }
#sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--scrollbar-bg);
    border-radius: 3px;
}
#sidebar-scroll::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

.nav-header {
    padding: 15px 20px 10px;
    background: var(--sb-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sidebar-logo {
    display: flex;
    align-items: center;
    height: 32px;
    overflow: hidden;
    white-space: nowrap;
}
.sidebar-logo-name {
    color: var(--sb-text);
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}
.logo-element { display: none; }

.sidebar-controls { display: flex; gap: 8px; align-items: center; }
.sidebar-control-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--sb-text);
    cursor: pointer;
    border-radius: 4px;
    font-size: 15px;
}
.sidebar-control-btn:hover { background: var(--sb-hover-bg); }

/* 菜单 */
#side-menu { padding: 0; margin: 0; list-style: none; width: 100%; }
#side-menu .nav-item, #side-menu .nav { width: 100%; }
#side-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--sb-text);
    font-size: var(--fs-menu, 16px);
    font-weight: 400;
    transition: background .2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#side-menu a:hover {
    background: var(--sb-hover-bg);
    color: var(--sb-hover-text);
}
#side-menu a .fa-solid,
#side-menu a .fa-regular,
#side-menu a .fa-brands { margin-right: 6px; width: 16px; text-align: center; font-size: 15px; }
.nav-label { display: inline; }

.fa-solid.arrow {
    float: right;
    margin-top: 4px;
    transition: transform .2s;
}
.fa-solid.arrow::before { content: "\f105"; }
[aria-expanded="true"] .fa-solid.arrow { transform: rotate(90deg); }

#side-menu .collapse a { font-weight: 400; }
/* 无限层级缩进：每深一层 +16px，基础 20px */
#side-menu > .nav-item > .collapse a { padding-left: 36px; }
#side-menu > .nav-item > .collapse .collapse a { padding-left: 52px; }
#side-menu > .nav-item > .collapse .collapse .collapse a { padding-left: 68px; }
#side-menu > .nav-item > .collapse .collapse .collapse .collapse a { padding-left: 84px; }
#side-menu > .nav-item > .collapse .collapse .collapse .collapse .collapse a { padding-left: 100px; }

/* 展开/折叠动画平滑 */
#side-menu .collapse { transition: none; }
#side-menu .collapsing {
    transition: height .2s ease;
    overflow: hidden;
}

/* 一级菜单分组标题样式 */
#side-menu > .nav-item > a {
    font-weight: 600;
    font-size: 17px;
    letter-spacing: .3px;
    border-left: 3px solid transparent;
}
#side-menu > .nav-item > a:hover,
#side-menu > .nav-item > a[aria-expanded="true"] {
    border-left-color: var(--accent-primary, #0087F7);
}

/* 当前展开的菜单组高亮 */
#side-menu a[aria-expanded="true"] {
    color: var(--sb-hover-text);
    background: var(--sb-hover-bg);
}

.sidebar-footer {
    flex-shrink: 0;
    background: var(--sb-bg);
    border-top: 1px solid var(--border-color);
    position: relative;
    height: 48px;
}

.sidebar-user-btn {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 48px;
    background: rgba(0,0,0,.05);
    border: none;
    color: var(--sb-text);
    font-size: var(--fs-menu, 16px);
    cursor: pointer;
    transition: background .2s;
}
.sidebar-user-btn:hover { background: rgba(0,0,0,.1); }
.sidebar-user-btn > i:first-child { margin-right: 8px; font-size: 15px; }
.sidebar-user-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-arrow { font-size: 13px; transition: transform .2s; }

.sidebar-user-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--sb-bg);
    border-top: 1px solid var(--border-color);
    list-style: none;
    padding: 6px 0;
    margin: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,.1);
}
.sidebar-user-dropdown li a {
    display: block;
    padding: 8px 20px;
    color: var(--sb-text);
    font-size: var(--fs-menu, 16px);
    transition: background .2s;
}
.sidebar-user-dropdown li a:hover { background: var(--sb-hover-bg); color: var(--sb-hover-text); }
.sidebar-user-dropdown li a i { width: 20px; text-align: center; margin-right: 8px; font-size: 15px; }
.sidebar-user-dropdown hr { margin: 6px 0; border-color: var(--border-color); }

.nav-close {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--sb-text);
    cursor: pointer;
    z-index: 1040;
}

/* ========== Mini-navbar 折叠模式 ========== */
body.mini-navbar #sidebar { width: var(--sb-w-mini); }
body.mini-navbar #page-wrapper { margin-left: var(--sb-w-mini); }
body.mini-navbar .nav-label,
body.mini-navbar .sidebar-logo-name,
body.mini-navbar #sidebar-theme-toggle,
body.mini-navbar .sidebar-user-name,
body.mini-navbar .sidebar-user-arrow,
body.mini-navbar .fa-solid.arrow { display: none; }

body.mini-navbar .navbar-minimalize {
    display: flex;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

body.mini-navbar .logo-element {
    display: block;
    text-align: center;
    color: var(--sb-text);
    padding: 18px 0;
    font-weight: 800;
    font-size: 14px;
}

body.mini-navbar #side-menu > .nav-item { position: relative; }
body.mini-navbar #side-menu > .nav-item > .collapse.show { display: none !important; }
body.mini-navbar #side-menu > .nav-item:hover > .collapse {
    display: block !important;
    position: absolute;
    left: var(--sb-w-mini);
    top: 0;
    min-width: 200px;
    background: var(--sb-bg);
    z-index: 1031;
    box-shadow: 0 0.5rem 1rem #d4d4d4;
}
body.mini-navbar #side-menu > .nav-item:hover > .collapse a { padding-left: 20px; }
body.mini-navbar #side-menu .collapse a > .fa-solid,
body.mini-navbar #side-menu .collapse a > .fa-regular,
body.mini-navbar #side-menu .collapse a > .fa-brands { display: none; }
body.mini-navbar #side-menu > .nav-item:hover > .collapse .collapse a { padding-left: 36px; }
body.mini-navbar #side-menu > .nav-item:hover > .collapse .collapse .collapse a { padding-left: 52px; }
body.mini-navbar #side-menu > .nav-item:hover > .collapse .collapse .collapse .collapse a { padding-left: 68px; }

body.mini-navbar .sidebar-user-btn { justify-content: center; padding: 12px 0; }
body.mini-navbar .sidebar-user-dropdown {
    left: var(--sb-w-mini);
    bottom: 0;
    right: auto;
    min-width: 200px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* ========== 活动菜单高亮 ========== */
#side-menu a.active-menu {
    background: var(--sb-hover-bg);
    color: var(--accent-primary, #0087F7);
    border-left: 3px solid var(--accent-primary, #0087F7);
    font-weight: 600;
}

/* ========== 内容区 ========== */
#content-main { padding: 0; min-height: calc(100vh - 20px); }

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .nav-close { display: block; }
    #sidebar { left: calc(-1 * var(--sb-w)); transition: left .3s; }
    body:not(.mini-navbar) #sidebar { left: 0; }
    #page-wrapper { margin-left: 0 !important; }
    .wrapper-content { padding: 10px 5px 20px; }
}