/* ===================== 卡片视图（飞书式）与配图相关样式 ===================== */

/* 视图切换开关 */
.view-toggle { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle__btn { border: 0; border-radius: 0; background: transparent; color: var(--c-text-muted); }
.view-toggle__btn + .view-toggle__btn { border-left: 1px solid var(--c-border); }
.view-toggle__btn.is-active { background: var(--c-primary-fill); color: var(--on-primary); }
.view-toggle__btn .icon { margin-right: 4px; }

/* 图片表单字段（KB.formModal type:image） */
.form__image { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form__image-prev { width: 96px; height: 96px; border: 1px dashed var(--c-border); border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--c-surface-2); flex: 0 0 auto; }
.form__image-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.form__image-prev .muted { font-size: 12px; padding: 6px; text-align: center; }
.form__image-ctrls { display: flex; gap: 8px; }

/* 卡片网格 */
.kb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 4px 2px 8px; }
.kb-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; cursor: pointer; }
.kb-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.18); transform: translateY(-2px); border-color: var(--c-primary, #06b6d4); }
.kb-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.18); transform: translateY(-2px); }
.kb-card__img { width: 100%; height: 150px; background: var(--c-surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kb-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-card__body { padding: 12px 14px; flex: 1 1 auto; min-width: 0; }
.kb-card__title { font-weight: 700; font-size: 15px; line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; }
.kb-card__sub { font-size: 12px; margin-top: 2px; }
.kb-card__row { display: flex; gap: 8px; padding: 3px 0; font-size: 13px; }
.kb-card__k { flex: 0 0 76px; color: var(--c-text-muted); }
.kb-card__v { flex: 1 1 auto; min-width: 0; font-weight: 600; word-break: break-word; overflow-wrap: anywhere; }
.kb-card__actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--c-border); background: var(--c-surface-2); }
/* 订单卡片视图：附图画廊 + 备注 */
.order-card__imgs { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 0; }
.order-card__imgs--empty { padding: 10px 12px; }
.order-card__imgs--empty .muted { font-size: 12px; }
.order-card__img { width: 84px; height: 84px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--c-border); background: var(--c-surface-2); }
.order-card__remark .kb-card__v { color: var(--c-text); font-weight: 500; white-space: pre-wrap; }

/* 列表中的缩略图 */
.cell-thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; display: inline-block; vertical-align: middle; background: var(--c-surface-2); border: 1px solid var(--c-border); }
.cell-thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--c-text-muted); font-size: 11px; }

/* 可放大缩略图：hover 出现放大镜角标，点击放大预览 */
.thumb-zoom { position: relative; display: inline-block; vertical-align: middle; cursor: zoom-in; line-height: 0; }
.thumb-zoom img { display: block; transition: filter .15s ease; }
.thumb-zoom__icon { position: absolute; right: 1px; bottom: 1px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: none; align-items: center; justify-content: center; }
.thumb-zoom__icon .icon { width: 12px; height: 12px; }
.thumb-zoom:hover .thumb-zoom__icon { display: inline-flex; }
.thumb-zoom:hover img { filter: brightness(.92); }

/* 订单附图画廊与管理弹窗 */
.order-imgs { display: flex; flex-wrap: wrap; gap: 10px; }
.order-img { width: 96px; height: 96px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--c-border); background: var(--c-surface-2); }
.order-img-item { position: relative; line-height: 0; }
.order-img-del { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--c-danger, #e5484d); color: #fff; font-size: 15px; line-height: 22px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.order-img-del:hover { filter: brightness(1.08); }
.order-imgs-box { margin-bottom: 8px; }

/* 放大灯箱（z-index 高于 AI 浮层 95） */
.img-zoom { z-index: 96; }
.purchase-script-host { z-index: 96; }
.img-zoom__inner { position: relative; z-index: 1; margin: auto; max-width: 92vw; text-align: center; }
.img-zoom__img { max-width: 92vw; max-height: 86vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); background: var(--c-surface); display: inline-block; }
.img-zoom__close { position: absolute; top: -16px; right: -16px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.img-zoom__close:hover { background: rgba(0,0,0,.85); }
.img-zoom__close .icon { width: 18px; height: 18px; }

/* 订单「更多」操作浮层菜单（z-index 高于灯箱 96） */
/* 不再屏幕居中：菜单由 JS 以 position:fixed 定位到「更多」按钮附近，并做视口边界收敛 */
.modal-host.order-more-host { z-index: 97; background: rgba(0,0,0,.32); display: block; }
.order-more-menu { position: fixed; z-index: 98; min-width: 168px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.order-more__item { display: block; width: 100%; text-align: left; padding: 11px 16px; border: 0; background: var(--c-surface); color: var(--c-text); font-size: 14px; cursor: pointer; }
.order-more__item + .order-more__item { border-top: 1px solid var(--c-border); }
.order-more__item:hover { background: var(--c-surface-2); }
.order-more__item--danger { color: var(--c-danger, #e5484d); }
.order-more__item--danger:hover { background: var(--c-danger-soft, rgba(229,72,77,.1)); }
/* 手机端（窄屏）：底部上滑面板，全宽、贴合底部，保持移动端友好 */
@media (max-width: 560px) {
    .order-more-menu {
        left: 0 !important; right: 0; top: auto !important; bottom: 0;
        width: 100%; min-width: 0; max-height: 64vh; overflow-y: auto;
        border-radius: 16px 16px 0 0; border-bottom: 0;
        animation: order-more-rise .22s ease;
    }
    @keyframes order-more-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
}
.img-zoom__cap { margin-top: 10px; color: #fff; font-size: 13px; text-align: center; }

/* 收货地址管理（系统设置） */
.addr-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; }
.addr-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface-2); }
.addr-card--default { border-color: var(--c-primary, #06b6d4); background: rgba(6,182,212,.08); }
.addr-card__label { font-weight: 700; font-size: 14px; }
.addr-card__badge { display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: var(--on-primary, #04231f); background: var(--c-primary, #06b6d4); border-radius: 999px; vertical-align: middle; }
.addr-card__line { font-size: 13px; color: var(--c-text-muted); margin-top: 2px; }
.addr-card__addr { font-size: 13px; margin-top: 2px; }
.addr-card__actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* 低库存补货弹窗 */
.restock-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; max-height: 42vh; overflow-y: auto; }
.restock-item { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface-2); }
.restock-item__img { flex: 0 0 auto; }
.restock-item__info { min-width: 0; }
.restock-item__name { font-weight: 700; }
.restock-item__sup { font-size: 13px; margin-top: 2px; }
.restock-item__actions { flex: 0 0 auto; margin-left: auto; }

/* 采购话术：按工厂分框 */
.rk-scripts { display: flex; flex-direction: column; gap: 12px; }
.rk-factory { border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface-2); overflow: hidden; }
.rk-factory__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.rk-factory__name { font-weight: 700; font-size: 14px; }
.rk-factory__text { border: 0; border-radius: 0; resize: vertical; background: var(--c-surface-2); }

/* 数据管理：危险操作卡片（清空业务数据） */
.card--danger { border-color: var(--c-danger, #e5484d); }
.card--danger .card__title { color: var(--c-danger, #e5484d); }
.card--danger .muted { color: var(--c-danger-soft, #b4232a); }

/* ===================== 角色权限管理 ===================== */
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.role-card { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.role-card__head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.role-card__meta { color: var(--c-text-muted); font-size: 13px; }
.role-card__acts { display: flex; gap: 8px; margin-top: auto; }

.badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 12px; line-height: 1.6; font-weight: 600; }
.badge--sys { background: var(--c-primary-soft); color: var(--c-primary); }
.badge--custom { background: rgba(124,179,120,.18); color: #a7d8a2; }
.badge--mgr { background: rgba(255,184,76,.18); color: #ffce8a; }

.role-form { display: flex; flex-direction: column; gap: 12px; }
.rf-label { font-size: 13px; color: var(--c-text-muted); }
.rf-perms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; max-height: 52vh; overflow: auto; padding: 4px; }
.perm-group { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--c-surface-2); }
.perm-group h4 { margin: 0 0 6px; font-size: 13px; color: var(--c-text); }
.perm-item { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin: 3px 0; }
.perm-manage { margin-top: 4px; padding: 8px 10px; border: 1px dashed var(--c-border); border-radius: var(--radius-sm); font-weight: 600; }