/* 应用自定义样式 */

/* ===== 全局 ===== */
body {
    font-size: 0.9375rem;
    background-color: #f5f6fa;
}

/* ===== 侧边栏 ===== */
#sidebar {
    width: 220px;
    min-height: 100vh;
    transition: width 0.2s ease;
    flex-shrink: 0;
    overflow-y: auto;
    background-color: #1e1e1e !important;
    border-right: none !important;
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.06);
    z-index: 1;
}
#sidebar.collapsed {
    width: 0;
    overflow: hidden;
    padding: 0 !important;
}
#sidebar .nav-link {
    color: #ccc !important;
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#sidebar .nav-link:hover {
    background-color: #333 !important;
    color: #fff !important;
}
#sidebar .nav-link.active {
    background-color: #3a3a3a !important;
    color: #fff !important;
    font-weight: 500;
}
#sidebar .nav-link.active i {
    color: #ddd;
}

/* ===== 右侧区域 ===== */
#right-area {
    flex-grow: 1;
    min-width: 0;
}

/* ===== 顶部导航栏 ===== */
#top-navbar {
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ===== 主内容区 ===== */
/* 高度 = 视口 - 顶栏；纵向 flex，供列表页撑满屏幕（非列表页内容超高时仍可整页滚动） */
#main-content {
    height: calc(100vh - 56px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ===== 表单焦点 ===== */
.form-control:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.12);
}

/* ===== 表格操作按钮 ===== */
.user-operations .btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.8125rem;
}

/* 表格表头不折行（避免列标题竖排，保持专业观感） */
.table thead th {
    white-space: nowrap;
}

/* Soft button — 默认纯文字，hover 浅底色 */
.btn-soft-primary {
    color: #1a73e8;
    background: transparent;
    border: none;
}
.btn-soft-primary:hover {
    background: #d2e3fc;
    color: #1557b0;
}

.btn-soft-danger {
    color: #dc3545;
    background: transparent;
    border: none;
}
.btn-soft-danger:hover {
    background: #f5c2c7;
    color: #b02a37;
}

/* ===== 滚动表格容器 ===== */
.scroll-table {
    overflow-y: scroll;
    max-height: 550px;
    -webkit-overflow-scrolling: touch;
}
.scroll-table::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}
.scroll-table::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.2);
}
.scroll-table::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.05);
}
.scroll-table thead th {
    position: sticky;
    top: 0;
    background: #e8e6dc;
    z-index: 1;
}
/* 固定操作列（最后一列） */
.scroll-table th:last-child,
.scroll-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    border-left: 1px solid #dee2e6;
}
.scroll-table th:last-child {
    background: #e8e6dc;
    z-index: 3;
}
.scroll-table td:last-child {
    background: #fff;
}

/* ===== 列表页满屏布局（统一复用，所有模块 list.html 共用） ===== */
/* 用法：在 list.html 的 <div id="xxx-list-card"> 上加 class="list-card-fill" */

/* 搜索卡片固定高度（不随表格伸缩） */
#main-content > .card {
    flex-shrink: 0;
}

/* 列表卡片容器：撑满剩余空间，纵向 flex */
.list-card-fill {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 卡片本体与卡片体：纵向 flex，让表格区域占满剩余空间 */
.list-card-fill > .card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* 统计汇总卡片：固定高度，不参与 flex 拉伸（列表卡片外的独立汇总卡） */
.list-card-fill > .card.stat-card {
    flex: 0 0 auto;
}
.list-card-fill > .card.stat-card > .card-body {
    flex: 0 0 auto;
    padding: 0.75rem 1rem;
}
.list-card-fill > .card > .card-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 表格容器：占满剩余空间并内部滚动（覆盖上方 550px 硬编码） */
.list-card-fill .scroll-table {
    flex: 1;
    min-height: 0;
    max-height: none;
}

/* 分页栏固定底部 */
.list-card-fill > .d-flex {
    flex-shrink: 0;
}

/* ===== Drawer ===== */
/* 宽度由系统参数 drawer_width 控制（layout.html 内联样式覆盖 --bs-offcanvas-width） */
.module-drawer .offcanvas-body {
    padding: 1.25rem 1.5rem;
}

/* ===== 用户下拉箭头 ===== */
.user-dropdown .dropdown-toggle::after {
    margin-left: 0.3rem;
}

/* ===== 侧边栏展开/折叠箭头 ===== */
.collapse-icon {
    transition: transform 0.2s ease;
    font-size: 0.7rem;
    color: #aaa;
}
[data-bs-toggle="collapse"]:not(.collapsed) .collapse-icon {
    transform: rotate(90deg);
}

/* ===== 暗色主题 ===== */
[data-bs-theme="dark"] body {
    background-color: #1a1d21;
}
[data-bs-theme="dark"] #sidebar {
    background-color: #1a1d21 !important;
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.2);
}
[data-bs-theme="dark"] #sidebar .nav-link {
    color: #aaa !important;
}
[data-bs-theme="dark"] #sidebar .nav-link:hover {
    background-color: #333539 !important;
    color: #fff !important;
}
[data-bs-theme="dark"] #sidebar .nav-link.active {
    background-color: #2a3a5c !important;
    color: #8ab4f8 !important;
}
[data-bs-theme="dark"] .scroll-table thead th {
    background: #33302a;
}
[data-bs-theme="dark"] .scroll-table td:last-child {
    background: #2a2d31;
    border-left-color: #3a3d41;
}
[data-bs-theme="dark"] #top-navbar {
    background-color: #1a1d21;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}