/**
 * ERP Office - 后台管理系统自定义样式
 * 基于 DCAT Plus Admin 框架
 * 
 * 文件说明:
 * - 本文件包含所有后台界面的自定义样式
 * - 使用 CSS 变量实现主题统一管理
 * - 样式分模块组织,便于维护
 */

/* ============================================
   全局 CSS 变量定义
   ============================================ */
:root {
    /* 布局尺寸 */
    --sidebar-width: 170px;
    --header-padding: 6rem;
    
    /* 输入框 */
    --input-height: 38px;
    --input-font-size: 18px;
    --input-padding: 6px 16px;
    --border-radius: 6px;
    
    /* 表格 */
    --table-max-height: calc(100vh - 200px);
    --action-column-width: 150px;
    --checkbox-column-width: 30px;
    
    /* 滚动条 */
    --scrollbar-width: 10px;
    --scrollbar-thumb-color: #c1c1c1;
    --scrollbar-thumb-hover: #a8a8a8;
    --scrollbar-track-color: #f1f1f1;
    
    /* 颜色 */
    --modal-overlay: rgba(255, 255, 255, 0.5);
}

/* ============================================
   模态框样式
   业务需求: 支持大表单编辑和数据展示
   ============================================ */
.modal {
    height: auto;
}

.modal-ssm {
    max-width: 60%;
    max-height: 50vh;
}

/* ============================================
   按钮样式
   业务需求: 统一按钮间距
   ============================================ */
.tools-button-margin {
    margin-right: 3px;
}

/* ============================================
   搜索框样式
   业务需求: 提升搜索体验,放大输入区域
   ============================================ */
.filter-box b {
    font-size: 13px;
}

.quick-search-input,
.filter-box .form-control {
    height: var(--input-height) !important;
    font-size: var(--input-font-size) !important;
    padding: var(--input-padding) !important;
    border-radius: var(--border-radius) !important;
}

/* ============================================
   页面头部样式
   业务需求: 优化header布局
   ============================================ */
.pb-0, .py-0 {
    float: right;
}

.card-header {
    float: left;
}

/* ============================================
   列选择器样式
   业务需求: 自定义列显示功能
   ============================================ */
.column-selector > button {
    padding: .54rem .9rem !important;
    font-size: 12px;
    line-height: 1.1;
    height: 30px;
}

.checkbox-grid {
    height: 100%;
}

th:has(> .checkbox-grid) {
    width: var(--checkbox-column-width) !important;
}

/* ============================================
   功能隐藏
   业务需求: 使用自定义导出和筛选功能
   ============================================ */
/* 隐藏默认导出按钮 - 使用自定义导出逻辑 */
.btn-group.dropdown:has(.icon-download) {
    display: none !important;
}

/* 隐藏默认筛选按钮 - 使用快捷搜索替代 */
.filter-button-group {
    display: none !important;
}

/* ============================================
   SKU 栏样式
   业务需求: 商品属性选择优化
   ============================================ */
.grid-selector .wrap {
    margin: 0 !important;
    padding: 0 !important;
    float: left;
}

.grid-selector .select-options {
    margin-left: 0 !important;
}

.grid-selector ul > li {
    font-size: 16px;
}

.filter-box {
    margin-bottom: 0px !important;
    width: 100%;
    float: left;
    background: none !important;
}

/* ============================================
   侧边栏样式
   业务需求: 缩窄侧边栏节省屏幕空间
   ============================================ */
.main-sidebar,
.main-sidebar:before {
    width: var(--sidebar-width);
}

.header-navbar.fixed-top {
    left: var(--sidebar-width);
}

body:not(.sidebar-mini-md) .content-wrapper,
body:not(.sidebar-mini-md) .main-footer,
body:not(.sidebar-mini-md) .main-header {
    margin-left: var(--sidebar-width);
}

.content .content-wrapper {
    padding: var(--header-padding) 1rem 0;
}

.main-sidebar .nav .nav-item .nav-link {
    padding: 10px 10px 10px 0px !important;
}

.main-sidebar .nav-treeview.nav .nav-item .nav-link {
    padding: 5px 10px 7px 0px !important;
}

/* ============================================
   底部版权隐藏
   业务需求: 简化界面
   ============================================ */
.main-footer span {
    display: none !important;
}

/* ============================================
   段落间距
   ============================================ */
p {
    margin-bottom: 1px;
}

/* ============================================
   面包屑隐藏
   业务需求: 节省垂直空间
   ============================================ */
.content-header {
    display: none;
}

/* ============================================
   表格操作列
   业务需求: 固定操作列宽度
   ============================================ */
.grid__actions__ {
    width: var(--action-column-width);
}

/* ============================================
   表格容器样式
   业务需求: 固定表头滚动,提升数据浏览体验
   ============================================ */
.table-responsive {
    margin-top: 0 !important;
}

.table-wrapper.complex-container {
    height: var(--table-max-height) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

.table-wrapper.complex-container .table {
    margin-bottom: 0;
}

/* 固定表头 */
.table-wrapper.complex-container .table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    border-bottom: 2px solid #dee2e6;
}

.table-wrapper.complex-container .table thead th:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 2px solid #dee2e6;
}

/* ============================================
   滚动条样式优化
   业务需求: 美化滚动条外观
   ============================================ */
.table-wrapper.complex-container::-webkit-scrollbar {
    width: var(--scrollbar-width) !important;
    height: var(--scrollbar-width) !important;
}

.table-wrapper.complex-container::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color) !important;
    border-radius: 4px !important;
}

.table-wrapper.complex-container::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color) !important;
    border-radius: 4px !important;
}

.table-wrapper.complex-container::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover) !important;
}