/**
 * ============================================================================
 * Components - 通用 UI 组件库
 * ============================================================================
 * 依赖: design-tokens.css (必须在本文件之前加载)
 * 断点系统: xxs(<375px), xs(>=375px), sm(>=576px), md(>=768px), lg(>=992px), xl(>=1200px)
 * ============================================================================
 */

/* ==========================================================================
   1. Action Bar - 交互区容器
   ========================================================================== */
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-background-surface);
    border-bottom: 1px solid var(--color-border-light);
    gap: var(--spacing-1);
    flex-wrap: nowrap;
}

.action-bar-left,
.action-bar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

/* 移动端 action-bar 紧凑布局 */
@media (max-width: 575.98px) {
    .action-bar {
        padding: var(--spacing-1) var(--spacing-2);
        gap: var(--spacing-1);
        flex-wrap: wrap;
    }

    .action-bar-left,
    .action-bar-right {
        gap: var(--spacing-1);
        flex-wrap: wrap;
    }

    /* summary-bar 移动端：4 列固定改为 2x2 自适应换行，避免溢出 */
    .summary-bar {
        flex-wrap: wrap;
        gap: var(--spacing-1);
        margin: var(--spacing-1) var(--spacing-2);
    }

    .summary-item {
        font-size: var(--font-sm);
        min-width: 0;
        flex: 1 1 calc(50% - var(--spacing-1));
    }

    /* T1 action-bar 按钮高度提升至触控标准 44px */
    .action-bar .btn {
        height: 44px;
    }
}

/* Action Bar 内按钮基础样式 */
.action-bar .btn {
    font-size: var(--font-base);
    height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 覆盖 Bootstrap 默认边框色 */
.action-bar .btn-outline-secondary {
    border-color: var(--color-border-default);
    color: var(--color-text-secondary);
}

.action-bar .btn-outline-secondary:hover {
    background: var(--color-background-hover);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

/* btn-outline-primary 使用品牌色边框 */
.action-bar .btn-outline-primary {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
}

.action-bar .btn-outline-primary:hover {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: #fff;
}

/* 下拉菜单字体约束：使用 --font-base，与按钮字号相等 */
/* 选择器优先级 (0,4,0) 高于 style.css 的 .dropdown .dropdown-menu .dropdown-item (0,3,0) */
.action-bar .dropdown .dropdown-menu {
    font-size: var(--font-base);
}

.action-bar .dropdown .dropdown-menu .dropdown-item {
    font-size: var(--font-base);
    padding: var(--spacing-1) var(--spacing-2);
}

/* 分割线样式：垂直 padding 约为文字大小的 10% */
.action-bar .dropdown .dropdown-menu .dropdown-divider {
    margin: 1px 0;
}

/* ==========================================================================
   2. Responsive Button - 响应式按钮
   ========================================================================== */
/* 桌面端显示文字 */
.btn .btn-text {
    display: inline;
}

.btn .btn-icon-only {
    display: none;
}

/* 移动端 (< sm) 显示图标 */
@media (max-width: 575.98px) {
    .btn-responsive .btn-text {
        display: none;
    }

    .btn-responsive .btn-icon-only {
        display: flex;
    }

    /* 带下拉的图标按钮: 44px */
    .btn-responsive.dropdown-toggle {
        width: 44px;
        min-width: 44px;
        padding: 0 6px 0 10px;
    }

    /* 纯图标按钮: 44x44（触控标准） */
    .btn-responsive:not(.dropdown-toggle) {
        width: 44px;
        min-width: 44px;
        padding: 0;
    }
}

/* ==========================================================================
   3. Icon Button - 图标按钮
   ========================================================================== */
.btn-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

/* 主色图标按钮 (添加按钮) */
.btn-icon-primary {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: #fff;
    font-size: var(--font-lg);
}

.btn-icon-primary:hover {
    background: var(--color-primary-700);
    border-color: var(--color-primary-700);
    color: #fff;
}

/* ==========================================================================
   4. Summary Bar - 统计摘要条
   ========================================================================== */
.summary-bar {
    display: flex;
    background: var(--color-primary-500);
    border-radius: var(--radius-md);
    margin: var(--spacing-2) var(--spacing-4);
    overflow: hidden;
}

.summary-item {
    flex: 1;
    text-align: center;
    padding: var(--spacing-2) var(--spacing-1);
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.summary-item:last-child {
    border-right: none;
    background: rgba(0, 0, 0, 0.15);
}

.summary-value {
    font-size: var(--font-lg);
    font-weight: 700;
    line-height: 1.2;
}

.summary-label {
    font-size: var(--font-sm);
    opacity: 0.85;
}

/* ==========================================================================
   5. Data Table - 数据表格
   ========================================================================== */
.data-table {
    width: 100%;
    font-size: var(--font-base);
    border-collapse: collapse;
    background: var(--color-background-surface);
}

.data-table th,
.data-table td {
    padding: var(--spacing-1) var(--spacing-2);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
    white-space: nowrap;
}

.data-table th {
    background: var(--color-background-body);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
}

.data-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}

.data-table tbody tr:hover {
    background: var(--color-background-hover);
}

/* 常用列宽 */
.col-check {
    width: 40px;
    text-align: center;
}

.col-date {
    width: 100px;
}

.col-qty {
    width: 60px;
    text-align: center;
}

.col-amount {
    width: 100px;
    text-align: center;
}

.col-status {
    width: 80px;
    text-align: center;
}

/* ==========================================================================
   6. Status Badge - 状态徽章
   ========================================================================== */
.badge-status {
    font-size: var(--font-sm);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.badge-success,
.badge-paid {
    background: var(--color-success);
    color: #fff;
}

.badge-danger,
.badge-unpaid {
    background: var(--color-danger);
    color: #fff;
}

.badge-warning {
    background: var(--color-warning);
    color: #fff;
}

.badge-secondary,
.badge-partial {
    background: var(--color-neutral-500);
    color: #fff;
}

/* ==========================================================================
   7. Card Section - 卡片区块
   ========================================================================== */
.card-section {
    background: var(--color-background-surface);
    margin: 0 var(--spacing-4);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* ==========================================================================
   app-management.php — 基础数据管理中转页样式
   ========================================================================== */

/* 列表项左侧图标容器：替代原 inline style="margin-right:16px; text-align:center;" */
.app-management .listview .imaged.w36 {
    margin-right: 16px;
    text-align: center;
}

/* 底部安全留白：替代原 <div style="margin-bottom: 90%;"></div> 的 hack */
.app-management {
    padding-bottom: 96px;
}

/* 分组标题之间的视觉间距 */
.app-management .listview-title {
    margin-top: 16px;
}

/* 退出登录按钮：与普通项视觉/空间隔离（destructive-nav-separation） */
.app-management .logout-section {
    margin-top: 24px;
}

.app-management .logout-item .logout-icon ion-icon {
    color: var(--bs-danger, #dc3545);
}

.app-management .logout-item .list-text > div {
    color: var(--bs-danger, #dc3545);
    font-weight: 500;
}

/* ==========================================================================
   app-management.php — 视觉风格微调（UI/UX Pro Max 推荐）
   ========================================================================== */

/* 页面背景：从纯白改为浅灰，让 inset listview 卡片更立体 */
.app-management {
    background: var(--color-neutral-50, #f9fafb);
}

/* 分组标题：去除 mobile-kit 默认 uppercase（不适合中文），加深字色 */
.app-management .listview-title {
    font-weight: 600;
    color: var(--color-neutral-700, #374151);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--font-base);
    margin-top: 20px;
    margin-bottom: 4px;
}

/* 列表项按压反馈：150ms ease-out 平滑过渡 */
.app-management .listview .item {
    transition: background-color 150ms ease-out;
}

.app-management .listview .item:active {
    background-color: var(--color-neutral-100, #f3f4f6);
}

/* 计数数字等宽：避免计数变化时布局跳动 */
.app-management .list-text > div {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   从 style.css 末尾迁移的手写规则（恢复 SCSS 编译流程时归位 2026-05-10）
   ========================================================================== */

.modal-footer {
    position: sticky;
    bottom: 0px;
    z-index: 1;
}

.hide {
    display: none;
}

.custom-file-upload label.file-uploaded:before {
    display: none;
}

.autocomplete-items div.p-1:hover {
    background-color: grey;
    color: white;
}

.hoverGray {
    background-color: gray !important;
    opacity: 0.5 !important;
}

.selectize-dropdown {
    height: auto;
}

/* === 移动端筛选栏优化 === */
@media (max-width: 480px) {
    .table-filter {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
    }

    .table-filter .btn {
        min-width: auto;
        padding: 6px 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .table-filter .mr-1 {
        margin-right: 0;
    }

    .table-filter .dropdown .btn {
        min-width: auto;
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* =============================================================
   BI 仪表盘 KPI 卡（阶段 1）
   - 嫁接到 app-tongji.php 顶部 .wallet-card 内
   - PC: flex 一字排开；Mobile: 横向滑动
   ============================================================= */
.kpi-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 12px;
    padding: 4px 2px;
}

@media (max-width: 991.98px) {
    .kpi-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .kpi-card {
        flex: 0 0 140px;
    }
}

@media (min-width: 992px) {
    .kpi-card {
        flex: 1 1 0;
        min-width: 0;
    }
}

.kpi-card {
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid #ececec;
}

.kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.kpi-card .kpi-title {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-card .kpi-value {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-card .kpi-deltas {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    line-height: 1.3;
}

.kpi-card .kpi-deltas .text-success { color: #1dcc70; }
.kpi-card .kpi-deltas .text-danger  { color: #ff396f; }
.kpi-card .kpi-deltas .text-muted   { color: #aaa; }

.kpi-card.kpi-empty .kpi-value,
.kpi-card.kpi-empty .kpi-deltas {
    color: #ccc;
}

/* profit 卡空数据时隐藏 (—%) 后缀，与其他卡显示一致 */
.kpi-card.kpi-empty .kpi-value-suffix {
    display: none;
}

/* ==========================================================================
   DetailModal — 订单/备货单详情对话框
   ========================================================================== */

/* 产品图片：桌面最高 300px，手机全屏时限高 160px 避免撑满屏幕 */
.detail-modal-img {
    max-height: 300px;
    max-width: 100%;
    border-radius: 8px;
}

/* 图片列：桌面右分隔线，手机改底部分隔线 */
.detail-modal-img-col {
    border-right: 1px solid rgba(108, 117, 125, 0.1);
}

@media (max-width: 767.98px) {
    .detail-modal-img {
        max-height: 160px;
    }

    .detail-modal-img-col {
        border-right: none;
        border-bottom: 1px solid rgba(108, 117, 125, 0.1);
        padding-bottom: 0.75rem;
    }
}

/* ==========================================================================
   只读字段显式锁定
   ==========================================================================
   GP12 沿用 design token；让 readonly / disabled 在视觉上与可编辑输入区分，
   避免用户误以为可编辑（DialogFormChangeCost 等弹窗内的派生计算字段）。 */
.form-control[readonly],
.form-control[disabled],
.form-select[disabled] {
    background-color: var(--color-background-muted);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    border-color: var(--color-border-subtle);
}

.form-control[readonly]:focus,
.form-control[disabled]:focus {
    background-color: var(--color-background-muted);
    border-color: var(--color-border-subtle);
    box-shadow: none;
}

/* ============================================================
   加工项目列表（app-modal-add.php 左侧第三列 work_panel_info）
   ------------------------------------------------------------
   作用域仅限 .modal-add-material-quantity.work_panel_info：
   1) 固定 table-layout 并分配列宽，避免表头被压成竖排单字（C2）
   2) 操作列两按钮纵向堆叠并解除全局 .btn min-width:88px，
      让第 4 列在 col-lg-3 窄容器下能正常容纳（C1）
   ============================================================ */
.modal-add-material-quantity.work_panel_info {
    table-layout: fixed;
    width: 100%;
}
.modal-add-material-quantity.work_panel_info th.order-no,
.modal-add-material-quantity.work_panel_info td:nth-child(1) {
    width: 32%;
}
.modal-add-material-quantity.work_panel_info th.order-customer,
.modal-add-material-quantity.work_panel_info td:nth-child(2) {
    width: 18%;
    white-space: nowrap;
    text-align: right;
    padding-right: var(--spacing-2);
}
.modal-add-material-quantity.work_panel_info th.order-amount,
.modal-add-material-quantity.work_panel_info td:nth-child(3) {
    width: 28%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.modal-add-material-quantity.work_panel_info th.order-cost,
.modal-add-material-quantity.work_panel_info td:nth-child(4) {
    width: 22%;
}
.modal-add-material-quantity.work_panel_info td:last-child {
    padding-right: 0;
}
/* 关键修复：.btn 默认 inline-block，margin-top 无法纵向堆叠 → 用 block + width:100% 真正竖排，
   避免两个按钮横排撑出 col 4 进而挤压 col 3「工厂名称」头被截 */
.modal-add-material-quantity.work_panel_info td:last-child .btn {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: var(--spacing-1) var(--spacing-2);
    margin-right: 0 !important;
}
.modal-add-material-quantity.work_panel_info td:last-child .btn + .btn {
    margin-top: var(--spacing-1);
}