/* 应用自定义样式 */

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

/* ===== 侧边栏 ===== */
/* 注释：深钢蓝侧边栏（SAP Fiori Shell 经典配色） */
#sidebar {
    width: 220px;
    min-height: 100vh;
    transition: width 0.2s ease;
    flex-shrink: 0;
    overflow-y: auto;
    background-color: #354a5f !important;
    color: #eaf1f7;
    z-index: 1;
}
#sidebar.collapsed {
    width: 0;
    overflow: hidden;
    padding: 0 !important;
}
#sidebar .nav-link {
    color: #dbe6ef !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: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
#sidebar .nav-link.active {
    background-color: #22384d !important;
    color: #8ab4f8 !important;
    font-weight: 500;
}
/* 注释：折叠箭头在深色底上改用半透明白 */
#sidebar .collapse-icon {
    color: rgba(255, 255, 255, 0.5);
}

/* ===== 右侧区域 ===== */
#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;
}

/* 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;
}

/* 注释：soft-secondary —— 行内「存在但当前不可用」的动作（如系统预置字典的删除）。
     不定义的话会退化成 Bootstrap 默认按钮（带边框），和旁边无边框的 soft 按钮不齐 */
.btn-soft-secondary {
    color: #6c757d;
    background: transparent;
    border: none;
}
.btn-soft-secondary:hover {
    background: #e2e3e5;
    color: #565e64;
}

/* 注释：soft-success —— 行内「非破坏性但要显眼一点」的动作（如产品的「图片」上传入口） */
.btn-soft-success {
    color: #198754;
    background: transparent;
    border: none;
}
.btn-soft-success:hover {
    background: #d1e7dd;
    color: #146c43;
}

/* 注释：soft-warning —— 行内「会把东西让出去」的动作（如客户「退公海」）：
     是放行不是破坏，但后果值得用户多看一眼，所以用琥珀色而不是红/绿 */
.btn-soft-warning {
    color: #b8860b;
    background: transparent;
    border: none;
}
.btn-soft-warning:hover {
    background: #fff3cd;
    color: #8a6806;
}

/* ===== 表格表头：标题一律不折行 ===== */
/* 注释：列宽不够时让表格整体变宽 + 外层 .table-responsive 横向滚动，
   而不是把标题挤成两行（历史上「序号」「供应商负责人」都被挤折行过）。
   确实需要折行的表头，用 <br> 手动指定断行位置（显式、不随列宽变化）：
     <th ...>XXX 公司 2026 销售利润<br>（元）</th> */
.table thead th {
    white-space: nowrap;
}

/* ===== 滚动表格容器 ===== */
.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;
}
/* 注释：合计行（tfoot）的最后一个单元格**不固定**——各模块的合计行末尾基本都是 colspan 到行尾的
   空占位单元格（列多时它本身还挺宽），跟着上面一起固定后，会被钉在容器右边缘、用白底压住左边的
   合计数字，不横向拖到最右就看不到（详情页「入库金额/折后金额…」合计就是这个原因）；
   固定操作列只对表头与数据行有意义（「操作」按钮在那里），所以这里整体放开。 */
.scroll-table tfoot td:last-child {
    position: static;
    z-index: auto;
    border-left: none;
    background: transparent;
}

/* ===== 分组表（主表 + 子表合并成一张表：一套表头 + 组行 + 明细行）===== */
/* 用法见 docs/ui.md「分组表」；先例：预收款页（templates/prepaid/_prepaid_card.html）。
   结构：一个 table，每个分组一个 <tbody>（首行 .group-row 是组汇总，其余 .group-detail 是明细行、默认 d-none）；
   展开/收起用 static/js/app.js 的 toggleGroupExpander。
   注释：这里连 :hover 一起指定——否则 table-hover 的悬停底色（.table-hover ... :hover > *）会盖掉组行底色，
   而末列固定（.scroll-table td:last-child）又只认 td 自己的背景，会出现"半个组行变灰、末格还是原色"的错位。
   一起写死组行底色，顺带也压过末列固定的白底（空操作列不再有白块）。 */
.scroll-table .group-row > td,
.scroll-table .group-row:hover > td {
    background: #eef4fb;
    font-weight: 600;
}
/* 组行里的次要信息（店铺名、"共 N 张"）→ 常规字重、灰色 */
.group-row-sub {
    margin-left: 0.4rem;
    font-weight: 400;
    color: #6c757d;
}
/* 明细行首列缩进，体现它从属于上面的组行；金额列与组行上下对齐 */
.group-detail > td:first-child {
    padding-left: 2rem;
}

/* ===== 列表页满屏布局（统一复用，所有模块 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;
    /* 地板高度：flex:1 会被上方内容（搜索卡 / 凭据卡）挤压，太小则表格区域
       只剩两三行、内部滚动条也看不全条目。空间不够时改为整页滚动，不压扁表格。 */
    min-height: 620px;
    display: flex;
    flex-direction: column;
}

/* 卡片本体与卡片体：纵向 flex，让表格区域占满剩余空间 */
.list-card-fill > .card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.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: #8a94a6;
}
[data-bs-toggle="collapse"]:not(.collapsed) .collapse-icon {
    transform: rotate(90deg);
}

/* ===== 详情页页头字段（三列排布时标签宽度固定，使同一列冒号对齐）===== */
.detail-label {
    min-width: 8.5em;
}
/* 注释：字段值超长时省略显示（悬浮可见完整内容），避免撑破列宽 */
.detail-value {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 搜索栏字段（所有列表页搜索区共用）===== */
/* 用法：标签 <label class="col-form-label search-label">，控件加 search-control
       例：<input class="form-control form-control-sm search-control">
           <select class="form-select form-select-sm search-control">
   目的：标签与控件的宽度都固定且全站一致，搜索项换行后上下仍能对齐成一列 */
.search-label {
    flex: 0 0 auto;
    width: 5.5em;      /* 固定宽度，容得下最长标签（如「供应商编码」5 个字） */
    white-space: nowrap;  /* 标签永不折行 */
    text-align: right;
}
.search-control {
    flex: 0 0 auto;
    width: 150px;      /* 所有文本框/下拉框统一宽度（容得下最长的已选值，如长公司名）220 */
}

/* ===== 可搜索下拉（components/searchable_select.html）===== */
/* 注释：清空按钮做成输入框内的右侧图标，观感与日期控件的日历图标、下拉控件的箭头一致 */
.searchable-select-clear {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1;
    /* 注释：字号与灰色对齐日期控件的日历图标、下拉控件的箭头，观感一致 */
    font-size: 0.875rem;
    color: #6c757d;
    cursor: pointer;
}
.searchable-select-clear:hover {
    color: #1a3a5c;
}

/* ===== 可展开行（点图标展开明细行，如候选列表的「可用量」）===== */
/* 用法：用 <button type="button" class="row-expander" aria-expanded="false"
   onclick="toggleRowExpander(this)">（JS 见 app.js），按钮里放
   <i class="bi bi-chevron-left row-expander-caret"></i>。
   注释：按钮里**只有图标**（数值是纯文本、不可点）；下面的 .row-expander 把浏览器默认按钮外观
   （背景/边框/内边距）全去掉，颜色与字号继承单元格，图标看起来就是个普通小箭头。
   布局：槽位固定宽、放在数字**右边**，单元格右对齐 → 数字右边缘与图标位置都对齐
   （数字位数不同也不会错位）；展开时图标从 < 顺时针转 -90° 变 ∨（始终朝向数字）。
   注释：没有明细可展开的行，放一个空的 .row-expander-caret 占位，数字右边缘才和别的行对齐。 */
.row-expander {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    line-height: inherit;
    cursor: pointer;
}
.row-expander-caret {
    display: inline-block;
    width: 1.4em;
    margin-left: 0.15em;
    font-size: 0.75rem;
    text-align: center;
    transition: transform 0.15s ease;
}
.row-expander[aria-expanded="true"] .row-expander-caret {
    transform: rotate(-90deg);
}
/* 变体：箭头放在**左边**、文字左对齐（先例：预收款页「客户名称」列——文字左对齐时，
   箭头留在右边会离内容很远，也不好找对齐基准）。
   用法：按钮放到文字**前面**，图标换成 <i class="bi bi-chevron-right row-expander-caret"></i>
   （向右指向文字），按钮 class 写 "row-expander row-expander-start"。
   方向：收起时 > 指向内容，展开时顺时针转 90° 变 ∨。 */
.row-expander-start .row-expander-caret {
    margin-left: 0;
    margin-right: 0.15em;
}
.row-expander-start[aria-expanded="true"] .row-expander-caret {
    transform: rotate(90deg);
}

/* ===== 文件拖拽上传区（components/import_drawer.html 共用）===== */
/* 注释：点一下区域 = 选择文件；拖入时 file-drop-zone-hover，已选到文件时 file-drop-zone-active。
   状态切换与文件回显见 app.js 的 initFileDropZones。 */
.file-drop-zone {
    border: 2px dashed #b6c4d4;
    border-radius: 0.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.file-drop-zone:hover {
    border-color: #1a3a5c;
}
.file-drop-zone-hover {
    border-color: #1a3a5c;
    background-color: #e3ecf5;
}
.file-drop-zone-active {
    border-color: #198754;
    background-color: #f0f9f4;
}
.file-drop-icon {
    font-size: 1.75rem;
    color: #1a3a5c;
}
.file-drop-name {
    margin-top: 0.25rem;
    font-size: 12px;
    color: #198754;
}

/* ===== 暗色主题 ===== */
[data-bs-theme="dark"] body {
    background-color: #1a1d21;
}
[data-bs-theme="dark"] #sidebar {
    /* 注释：深色主题下用更深的钢蓝，选中态改为更亮的叠底，保证可辨识 */
    background-color: #22303f !important;
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.2);
}
[data-bs-theme="dark"] #sidebar .nav-link {
    color: #c5d3e0 !important;
}
[data-bs-theme="dark"] #sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1) !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);
}
[data-bs-theme="dark"] .searchable-select-clear:hover {
    color: #c5d3e0;
}

/* ===== 跟进记录时间线 ===== */
/* 注释：左侧一条竖线 + 每个节点一个圆点。圆点用绝对定位压在竖线上，
   所以父级必须有 position: relative（.follow-up-item）。 */
.timeline-list .follow-up-item {
    position: relative;
}
.timeline-list .follow-up-item:last-child {
    padding-bottom: 0 !important;
}
.follow-up-dot {
    position: absolute;
    left: -6px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #1a73e8;
    border: 2px solid #fff;
    box-sizing: content-box;
}
[data-bs-theme="dark"] .follow-up-dot {
    border-color: #1a1d21;
}
/* 注释：详情页上「共 N 条」这类卡片标题在窄屏不被挤成两行 */
@media (max-width: 576px) {
    .card-header .fw-bold.small {
        white-space: normal;
    }
}