/**
 * 工厂管理系统 - 统一后台 UI 样式
 * 设计基准：progress_goods/index
 */

/* ==================== Design Tokens ==================== */
:root {
    --admin-accent: #FF6B35;
    --admin-accent-soft: #FF8A5B;
    --admin-surface: #ffffff;
    --admin-muted: #6b7280;
    --admin-border: #e8ecf0;
    --admin-bg: #f3f5f7;
    --factory-primary: #FF6B35;
    --factory-secondary: #2C3E50;
    --factory-accent: #F39C12;
    /* legacy aliases */
    --pg-accent: var(--admin-accent);
    --pg-accent-soft: var(--admin-accent-soft);
    --pg-surface: var(--admin-surface);
    --pg-muted: var(--admin-muted);
    --pg-border: var(--admin-border);
    --pg-bg: var(--admin-bg);
    --workshop-primary: var(--admin-accent);
    --workshop-secondary: var(--factory-secondary);
}

/* ==================== AdminLTE Layout Overrides ==================== */
.brand-link {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.brand-link:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.brand-text {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.brand-image {
    color: var(--admin-accent) !important;
    font-size: 2.2rem !important;
    margin-left: 0.8rem !important;
    margin-right: 0.8rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.brand-link:hover .brand-image {
    color: var(--factory-accent) !important;
    transform: scale(1.05);
}

.nav-treeview {
    background-color: rgba(0, 0, 0, 0.1);
}

.nav-treeview .nav-link {
    padding-left: 3rem;
    color: rgba(255, 255, 255, 0.8);
}

.nav-treeview .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-treeview .nav-link.active {
    background-color: var(--factory-primary);
    color: white;
}

.nav-icon {
    color: var(--factory-accent);
}

.app-header {
    border-bottom: 3px solid var(--factory-primary);
}

.nav-link-logout {
    color: #dc3545 !important;
    font-weight: 600;
}

.nav-link-logout:hover {
    color: #b02a37 !important;
}

.small-box .small-box-footer {
    color: rgba(255, 255, 255, 0.8);
}

/* ==================== Page Layout ==================== */
.admin-page,
.file-container {
    padding: 1.25rem 1.5rem 2rem;
    background: linear-gradient(180deg, #f7f8fa 0%, #eef1f4 100%);
    min-height: calc(100vh - 200px);
    margin: 0 -0.75rem;
}

/* ==================== Stat Cards ==================== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stat-card {
    background: var(--admin-surface);
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid var(--admin-border);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .08);
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.stat-card--all .stat-icon { background: #fff1ea; color: var(--admin-accent); }
.stat-card--normal .stat-icon,
.stat-card--success .stat-icon,
.stat-card--active .stat-icon { background: #e8f8ef; color: #1f9d57; }
.stat-card--stop .stat-icon,
.stat-card--warning .stat-icon { background: #fff4e5; color: #e67e22; }
.stat-card--drop .stat-icon,
.stat-card--danger .stat-icon,
.stat-card--inactive .stat-icon { background: #fdeceb; color: #d64545; }
.stat-card--info .stat-icon { background: #eef6ff; color: #2563eb; }

.stat-meta { min-width: 0; }
.stat-title { font-size: .8125rem; color: var(--admin-muted); margin-bottom: 4px; font-weight: 500; }
.stat-value { font-size: 1.65rem; font-weight: 700; color: #1f2937; line-height: 1.15; letter-spacing: -.02em; }
.stat-card--danger .stat-value { color: #dc2626; }

/* legacy purple stats-card (gradual migration) */
.stats-card {
    background: var(--admin-surface);
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid var(--admin-border);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    margin-bottom: 0;
    transition: transform .2s ease, box-shadow .2s ease;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .08);
}

.stats-number { font-size: 1.65rem; font-weight: 700; color: #1f2937; line-height: 1.15; margin-bottom: 4px; }
.stats-label { font-size: .8125rem; color: var(--admin-muted); font-weight: 500; }

/* ==================== Search Card ==================== */
.search-card {
    background: var(--admin-surface);
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--admin-border);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.search-card .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: .4rem;
}

.search-card .form-control,
.search-card .form-select {
    border: 1px solid #dce1e7;
    border-radius: 9px;
    padding: .5rem .75rem;
    min-height: 40px;
    background: #fbfcfd;
}

.search-card .form-control:focus,
.search-card .form-select:focus {
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 .2rem rgba(255, 107, 53, .12);
    background: #fff;
}

.search-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.search-toolbar .btn {
    border-radius: 9px;
    font-weight: 500;
    min-height: 40px;
    padding: .45rem .9rem;
}

/* ==================== Admin Buttons ==================== */
.btn-admin-primary,
.btn-pg-primary {
    background: linear-gradient(135deg, var(--admin-accent) 0%, var(--admin-accent-soft) 100%);
    border: none;
    color: #fff;
}

.btn-admin-primary:hover,
.btn-pg-primary:hover { color: #fff; filter: brightness(1.03); box-shadow: 0 4px 12px rgba(255, 107, 53, .28); }

.btn-admin-export,
.btn-pg-export {
    background: #fff8f0;
    border: 1px solid #ffd7b8;
    color: #c45a18;
}

.btn-admin-export:hover,
.btn-pg-export:hover { background: #fff1e4; border-color: #ffc898; color: #a84a10; }

.btn-admin-add,
.btn-pg-add {
    background: #edf9f1;
    border: 1px solid #b7e4c7;
    color: #1b7a45;
}

.btn-admin-add:hover,
.btn-pg-add:hover { background: #dff4e7; color: #166539; }

.btn-admin-import,
.btn-pg-import {
    background: #eef6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

.btn-admin-import:hover,
.btn-pg-import:hover { background: #e0effe; color: #1e40af; }

.btn-admin-reset,
.btn-pg-reset {
    background: #fff;
    border: 1px solid #dce1e7;
    color: #6b7280;
}

.btn-admin-reset:hover,
.btn-pg-reset:hover { background: #f8fafc; color: #374151; }

/* ==================== Table Card ==================== */
.table-card {
    background: var(--admin-surface);
    border-radius: 14px;
    border: 1px solid var(--admin-border);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    overflow: hidden;
}

.table-card .card-header {
    background: linear-gradient(135deg, var(--admin-accent) 0%, var(--admin-accent-soft) 100%);
    border-bottom: none;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-card .card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.table-card .card-body { padding: 0; }
.table-card table { margin: 0; }
.table-card thead { background: #f7f8fa; }
.table-card thead th {
    border-bottom: 1px solid var(--admin-border);
    padding: .85rem .7rem;
    font-weight: 650;
    color: #4b5563;
    font-size: .78rem;
    letter-spacing: .02em;
    white-space: nowrap;
}

.table-card tbody td {
    padding: .8rem .7rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f3f5;
}

.table-card tbody tr { transition: background .15s ease; }
.table-card tbody tr:hover { background: #fafbfc; }

.table-card .card-footer,
.card-footer {
    background: #fafbfc;
    border-top: 1px solid var(--admin-border);
    padding: .9rem 1.25rem;
}

.table-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: #9ca3af;
}

.table-empty i { font-size: 2rem; margin-bottom: .75rem; opacity: .55; }

/* ==================== Data Chips & Cells ==================== */
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .8125rem;
    color: #4b5563;
}

.code-chip,
.material-code,
.category-code,
.warehouse-code {
    display: inline-block;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    padding: .2rem .5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .8rem;
    color: #374151;
    font-weight: 600;
}

.name-cell { font-weight: 600; color: #1f2937; }

.category-chip {
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #f3f6fb;
    color: #456;
    border-radius: 999px;
    padding: .2rem .65rem;
    font-size: .75rem;
    font-weight: 500;
}

.unit-chip {
    display: inline-block;
    background: #eef7ff;
    color: #2563eb;
    border-radius: 999px;
    padding: .18rem .55rem;
    font-size: .75rem;
    font-weight: 600;
}

.stock-cell {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 64px;
}

.stock-cell .stock-num,
.stock-number { font-weight: 700; font-size: .95rem; }
.stock-cell .stock-hint { font-size: .7rem; color: var(--admin-muted); }
.stock-warning { color: #dc2626; }
.stock-safe { color: #16a34a; }
.stock-cell.is-low,
.stock-cell.low-stock {
    background: #fff1f1;
    border-radius: 8px;
    padding: .35rem .55rem;
}

.material-price { color: var(--admin-accent); font-weight: 600; }

.warehouse-cell { font-size: .8125rem; color: #374151; }
.warehouse-cell .muted { color: #9ca3af; font-size: .75rem; }

/* ==================== Status Badges ==================== */
.status-badge {
    display: inline-block;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .72rem;
}

.status-normal,
.status-active { background: #e8f8ef; color: #166534; }
.status-discontinued { background: #fff4e5; color: #c05600; }
.status-obsolete,
.status-inactive { background: #fdeceb; color: #b91c1c; }

.status-pending { background: #fff4e5; color: #c05600; }
.status-in-progress { background: #eef6ff; color: #1d4ed8; }
.status-completed { background: #e8f8ef; color: #166534; }
.status-approved { background: #e0f2fe; color: #0369a1; }
.status-cancelled { background: #fdeceb; color: #b91c1c; }

/* ==================== Actions ==================== */
.action-buttons {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}

.action-btn,
.btn-action {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: .8125rem;
    transition: all .15s ease;
}

.action-btn:hover,
.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.action-btn.btn-primary {
    background: var(--admin-accent);
    border-color: var(--admin-accent);
}

.batch-actions {
    padding: .7rem 1rem;
    margin-bottom: 1rem;
    background: #fff8f4;
    border: 1px solid #ffe0cc;
    border-radius: 12px;
}

.batch-actions-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; }
.batch-actions-toolbar .batch-actions-label { color: #7a3d12; font-size: .9rem; font-weight: 600; }
.batch-actions-toolbar .batch-actions-clear { margin-left: auto; }

/* ==================== Modals & Forms ==================== */
.admin-modal .modal-content,
.modal.admin-themed .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .18);
}

.admin-modal .modal-header,
.modal.admin-themed .modal-header {
    background: linear-gradient(135deg, var(--admin-accent) 0%, var(--admin-accent-soft) 100%);
    color: #fff;
    border-bottom: none;
    padding: 1rem 1.25rem;
}

.admin-modal .modal-header .btn-close,
.modal.admin-themed .modal-header .btn-close { filter: invert(1); opacity: .85; }

.admin-modal .modal-title { font-weight: 700; font-size: 1.05rem; }

.admin-modal .modal-body {
    padding: 1.15rem 1.25rem 1.35rem;
    background: #f8f9fb;
}

.admin-modal .modal-footer {
    border-top: 1px solid var(--admin-border);
    background: #fff;
    padding: .85rem 1.25rem;
}

.admin-modal .modal-footer .btn { border-radius: 9px; min-width: 96px; font-weight: 500; }

.admin-modal .modal-footer .btn-primary {
    background: linear-gradient(135deg, var(--admin-accent) 0%, var(--admin-accent-soft) 100%);
    border: none;
}

.admin-form-section,
.pg-form-section {
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 1rem 1.05rem .5rem;
    margin-bottom: .85rem;
}

.admin-form-section-title,
.pg-form-section-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .875rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 .85rem;
    padding-bottom: .55rem;
    border-bottom: 1px dashed #e5e7eb;
}

.admin-form-section-title i,
.pg-form-section-title i { color: var(--admin-accent); }

.admin-form .form-label,
.admin-modal .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: .35rem;
}

.admin-form .form-control,
.admin-form .form-select,
.admin-modal .form-control,
.admin-modal .form-select {
    border-radius: 9px;
    border-color: #dce1e7;
    min-height: 40px;
    background: #fbfcfd;
}

.admin-form .form-control:focus,
.admin-form .form-select:focus,
.admin-modal .form-control:focus,
.admin-modal .form-select:focus {
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 .2rem rgba(255, 107, 53, .12);
    background: #fff;
}

.admin-form .form-text { font-size: .75rem; color: #9ca3af; }

.modal-content { border-radius: 12px; border: 1px solid #e9ecef; }
.modal-header.admin-themed,
.modal.admin-themed .modal-header {
    background: linear-gradient(135deg, var(--admin-accent) 0%, var(--admin-accent-soft) 100%);
    color: #fff;
    border-bottom: none;
}
.modal-header.admin-themed .btn-close,
.modal.admin-themed .modal-header .btn-close { filter: invert(1); }

/* Detail meta panels */
.admin-detail-head,
.pgd-head,
.pgm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid #eceff3;
    border-radius: 8px;
    background: #fafbfc;
    margin-bottom: 10px;
}

.pgm-modal-header { background: #fff8f5; border-color: #ffe2d6; }

.admin-detail-title,
.pgd-title,
.pgm-title { font-weight: 600; color: #2f3a45; }

.admin-detail-meta,
.pgd-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.admin-detail-item,
.pgd-item {
    border: 1px solid #eceff3;
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
}

.admin-detail-k,
.pgd-k { font-size: .75rem; color: #7a8793; line-height: 1.2; }

.admin-detail-v,
.pgd-v { font-size: .88rem; color: #2f3a45; font-weight: 500; margin-top: 2px; word-break: break-word; }

.pgm-panel { border: 1px solid #e9ecef; border-radius: 10px; padding: 10px; background: #fff; }
.pgm-panel-title { font-weight: 600; color: #495057; margin-bottom: 8px; }

/* ==================== Image Upload ==================== */
.upload-box {
    width: 100%;
    max-width: 280px;
    min-height: 160px;
    border: 2px dashed #81c784;
    border-radius: 12px;
    background: #e8f5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.upload-box:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.upload-box.is-uploading { opacity: .75; pointer-events: none; }
.upload-box .upload-inner { text-align: center; color: #2e7d32; padding: 12px; }
.upload-box .upload-inner .icon { font-size: 34px; opacity: .7; margin-bottom: 8px; }
.upload-box .upload-inner .text { font-weight: 600; font-size: 14px; }
.upload-box .upload-inner .hint { font-size: 12px; opacity: .8; margin-top: 6px; }
.upload-box .preview-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.upload-box .remove-image {
    position: absolute; top: 10px; right: 10px; border: none; border-radius: 999px;
    background: rgba(0,0,0,.55); color: #fff; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.upload-box .remove-image:hover { background: rgba(0,0,0,.7); }

.material-thumb { width: 100%; height: 96px; object-fit: cover; display: block; cursor: pointer; }
.material-image-cell { display: flex; flex-direction: column; align-items: center; width: 96px; height: auto; border: none; background: transparent; }
.material-image-wrap { width: 96px; border-radius: 8px; overflow: hidden; border: 1px solid #dee2e6; background: #fff; }
.material-image-placeholder {
    width: 96px; height: 96px; border-radius: 8px; border: 2px dashed #ced4da;
    background: #f8f9fa; display: flex; align-items: center; justify-content: center; color: #adb5bd; cursor: pointer;
}
.material-image-toolbar { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 2px 0; background: #f8f9fa; border-top: 1px solid #e9ecef; }
.material-image-tool-btn {
    border: none; background: transparent; color: #6c757d; padding: 0 2px; font-size: 10px;
    line-height: 1; cursor: pointer; border-radius: 3px; width: 18px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
}
.material-image-tool-btn:hover { color: var(--admin-accent); background: #fff3ee; }
.material-image-tool-btn.js-material-image-remove:hover,
.material-image-tool-btn.js-progress-image-remove:hover { color: #dc3545; background: #fff5f5; }
.material-image-actions { display: flex; flex-direction: column; gap: 2px; }
.material-image-actions .btn { padding: 2px 6px; font-size: .7rem; line-height: 1.2; }

.progress-image-cell { width: 96px; }
.progress-image-cell .material-image-wrap { width: 96px; background: #f8fafc; }
.progress-image-cell .material-thumb { height: 96px; object-fit: contain; background: #f8fafc; }
.progress-image-cell .material-image-placeholder { width: 96px; height: 96px; font-size: 1.4rem; }
.progress-image-cell .material-image-tool-btn { width: 22px; height: 20px; font-size: 12px; }

.pg-image-preview-popup.swal2-popup {
    max-width: 96vw !important;
    width: auto !important;
}
.pg-image-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: min(92vw, 1100px);
}
.pg-image-preview__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 220px);
    object-fit: contain;
    margin: 0 auto;
    background: #f8fafc;
    border-radius: 8px;
}
.pg-image-preview__remark {
    text-align: left;
    padding: 0.7rem 0.85rem;
    background: #f8fafc;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    color: #334155;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.pg-image-preview__remark-label {
    display: block;
    margin-bottom: 0.25rem;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ==================== Warehouse Picker ==================== */
.warehouse-selection {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.75rem;
    background: #f8f9fa;
}

.warehouse-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: white;
}

.warehouse-item:hover { border-color: var(--admin-accent); background-color: #f8f9fa; }
.warehouse-item.selected { border-color: #28a745; background-color: #d4edda; }
.warehouse-info { flex: 1; }
.warehouse-name { font-weight: 600; font-size: 16px; color: #333; margin-bottom: 4px; }
.warehouse-location { font-size: 12px; color: #6c757d; }
.warehouse-actions { margin-left: 15px; }
.search-box { position: sticky; top: 0; background: white; z-index: 10; }
.warehouse-checkbox { margin-right: 10px; }
.warehouse-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.warehouse-badge {
    background: #e3f2fd; color: #1976d2; border: 1px solid #bbdefb;
    padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 500; white-space: nowrap;
}
.warehouse-badge:hover { background: #bbdefb; cursor: default; }
.material-form-warehouse-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px; border: 1px solid #e9ecef; border-radius: 8px; margin-bottom: 8px;
}
.material-form-warehouse-item.selected { border-color: #28a745; background: #d4edda; }

/* ==================== Dashboard ==================== */
.factory-card {
    border-top: 4px solid;
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.factory-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.factory-card.production { border-top-color: #D32F2F; }
.factory-card.inventory { border-top-color: #E85A2A; }
.factory-card.purchase { border-top-color: #388E3C; }
.factory-card.personnel { border-top-color: var(--admin-accent); }

.small-box.text-bg-production { background: linear-gradient(135deg, #D32F2F, #F44336) !important; color: white; }
.small-box.text-bg-inventory { background: linear-gradient(135deg, #E85A2A, var(--admin-accent)) !important; color: white; }
.small-box.text-bg-purchase { background: linear-gradient(135deg, #388E3C, #4CAF50) !important; color: white; }
.small-box.text-bg-personnel { background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-soft)) !important; color: white; }

.welcome-section {
    background: linear-gradient(135deg, var(--admin-accent), var(--factory-accent));
    color: white;
    border-radius: 14px;
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.alert-item {
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border-left: 4px solid;
    background: #f8f9fa;
    transition: all 0.2s ease;
}

.alert-item.warning { border-left-color: #E85A2A; background: #FFF3E0; }

.dashboard-stat-number,
.stat-number-lg {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2C3E50;
}

.activity-timeline { position: relative; padding-left: 2rem; }
.activity-timeline::before {
    content: ''; position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background: #e9ecef;
}
.timeline-item { position: relative; margin-bottom: 1.5rem; padding-left: 1rem; }
.timeline-item::before {
    content: ''; position: absolute; left: -0.5rem; top: 0.5rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--admin-accent); border: 2px solid white; box-shadow: 0 0 0 2px #e9ecef;
}
.timeline-time { font-size: 0.8rem; color: #6C757D; margin-bottom: 0.25rem; }

.update-indicator {
    position: fixed; top: 20px; right: 20px; background: rgba(0, 0, 0, 0.8);
    color: white; padding: 8px 16px; border-radius: 20px; font-size: 0.8rem; z-index: 9999;
    opacity: 0; transition: opacity 0.3s ease;
}
.update-indicator.show { opacity: 1; }

/* ==================== Log Viewer ==================== */
.log-viewer {
    height: 70vh;
    overflow: auto;
    background: #111;
    color: #ddd;
    padding: 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.log-meta-bar {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

/* ==================== Auth / Login ==================== */
body.auth-page {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2c3e50;
    --bg-card: #34495e;
    --accent-primary: var(--admin-accent);
    --accent-secondary: var(--admin-accent-soft);
    --text-primary: #ffffff;
    --text-secondary: #bdc3c7;
    --text-muted: #95a5a6;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --border-radius: 12px;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.auth-page .industrial-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.03;
    background-image:
        radial-gradient(circle at 25% 25%, var(--accent-primary) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, var(--accent-secondary) 1px, transparent 1px),
        linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0.05) 52%, transparent 52%);
    background-size: 50px 50px, 30px 30px, 20px 20px;
    animation: industrialFloat 60s linear infinite;
}

@keyframes industrialFloat {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-20px, -20px); }
    100% { transform: translate(0, 0); }
}

.auth-page .factory-icons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; }
.auth-page .factory-icon {
    position: absolute; color: rgba(255, 255, 255, 0.08); font-size: 24px;
    animation: floatIcon 20s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.08; }
    50% { transform: translateY(-20px) rotate(180deg); opacity: 0.15; }
}

.auth-page .login-container { width: 100%; max-width: 400px; padding: 20px; position: relative; z-index: 10; }
.auth-page .login-card {
    background: rgba(52, 73, 94, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 20px 40px var(--shadow-color);
    padding: 36px 32px 32px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.auth-page .login-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); z-index: 1;
}

.auth-page .logo-container { text-align: center; margin-bottom: 30px; }
.auth-page .logo-circle {
    width: 90px; height: 90px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center; position: relative;
    box-shadow: 0 10px 20px rgba(255, 107, 53, 0.3);
}

.auth-page .logo-circle i { font-size: 40px; color: white; position: relative; z-index: 2; }
.auth-page .pulse-ring {
    position: absolute; top: -10px; left: -10px; width: 110px; height: 110px;
    border-radius: 50%; border: 2px solid rgba(255, 107, 53, 0.3);
    animation: pulse 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes pulse {
    0% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(1.2); opacity: 0; }
}

.auth-page .logo-text { font-size: 26px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.auth-page .logo-subtext { font-size: 14px; color: var(--text-secondary); margin-bottom: 30px; }

/* 登录卡片内表单：选择器限定在 .login-card，避免影响其他带 .form-group 的页面 */
.auth-page .login-card form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.auth-page .login-card .form-group {
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.auth-page .login-card .form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.auth-page .login-card .input-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.auth-page .login-card .input-container input[type="text"],
.auth-page .login-card .input-container input[type="password"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 46px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 42px 0 14px;
    color: var(--text-primary);
    font-size: 15px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.auth-page .login-card .input-container input[type="text"]:focus,
.auth-page .login-card .input-container input[type="password"]:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

.auth-page .login-card .input-container i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-secondary);
    font-size: 18px;
    pointer-events: none;
}

.auth-page .login-card .remember-me {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
}
.auth-page .checkbox-container { position: relative; width: 22px; height: 22px; margin-right: 10px; }
.auth-page .remember-me input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 22px;
    height: 22px;
    z-index: 2;
}
.auth-page .checkmark {
    position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 6px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border-color);
}
.auth-page .remember-me input:checked ~ .checkmark { background: var(--accent-primary); border-color: var(--accent-primary); }
.auth-page .checkmark:after {
    content: ""; position: absolute; display: none; left: 7px; top: 3px;
    width: 6px; height: 12px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.auth-page .remember-me input:checked ~ .checkmark:after { display: block; }
.auth-page .remember-me label { color: var(--text-secondary); font-size: 14px; cursor: pointer; }
.auth-page .login-card .btn-login {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 46px;
    box-sizing: border-box;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 16px rgba(255, 107, 53, 0.3);
}
.auth-page .login-card .btn-login:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(255, 107, 53, 0.4); }
.auth-page .login-card .register-link {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.auth-page .register-link a { color: var(--accent-secondary); text-decoration: none; font-size: 14px; }

/* ==================== Workshop (Mobile) ==================== */
body.workshop-page {
    background: #f3f4f6;
    color: #1f2937;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}

.workshop-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: calc(8px + var(--safe-top)) 12px calc(20px + var(--safe-bottom));
}

.workshop-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(243, 244, 246, 0.92);
    backdrop-filter: blur(8px);
    padding: 8px 0 10px;
    margin: 0 -4px 10px;
}

.workshop-topbar {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    background: #fff; border-radius: 14px; padding: 14px 14px 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.workshop-user-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; line-height: 1.3; }
.workshop-user-meta { font-size: 13px; color: #6b7280; line-height: 1.45; }
.workshop-user-meta--hint { font-size: 12px; margin-top: 4px; color: #9ca3af; }
.workshop-topbar-actions { display: flex; flex-shrink: 0; gap: 6px; }
.workshop-icon-btn {
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 16px;
}

.workshop-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.workshop-page .stats-card {
    background: linear-gradient(135deg, var(--workshop-primary) 0%, #FF8A5B 100%);
    color: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    border: none;
    box-shadow: none;
    display: block;
}

.workshop-page .stats-card:nth-child(2) { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); }
.workshop-page .stats-card:nth-child(3) { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }
.workshop-page .stats-card:nth-child(4) { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.workshop-page .stats-card.stats-card--urgent { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); }
.workshop-page .stats-number { font-size: 1.65rem; font-weight: 700; line-height: 1.1; color: #fff; }
.workshop-page .stats-label { font-size: 0.82rem; opacity: 0.92; margin-top: 2px; color: #fff; }

.step-tabs-card {
    background: #fff;
    border-radius: 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.step-tabs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f3f4f6;
}

.step-tabs-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}

.step-tabs-hint {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}

.step-tabs {
    display: flex;
    gap: 10px;
    padding: 12px 16px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.step-tab {
    flex: 0 0 auto;
    min-width: 120px;
    max-width: 220px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 12px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.step-tab:hover {
    border-color: #ffb899;
    background: #fff8f4;
}

.step-tab.is-active {
    border-color: var(--workshop-primary);
    background: linear-gradient(135deg, #fff4ee 0%, #fffaf7 100%);
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.12);
}

.step-tab-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.35;
    word-break: break-word;
}

.step-tab-role {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.step-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    margin-top: 8px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 700;
    color: var(--workshop-primary);
}

.step-tab.is-active .step-tab-count {
    background: var(--workshop-primary);
    border-color: var(--workshop-primary);
    color: #fff;
}

.step-tab-urgent {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    margin-right: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 700;
}

.step-tabs-empty,
.step-tabs-loading {
    padding: 18px 16px;
    color: #9ca3af;
    font-size: 14px;
}

.status-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0 16px 16px;
    border-top: 1px solid #f3f4f6;
    margin-top: -2px;
    padding-top: 12px;
}

.status-tab {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 999px;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-tab:hover {
    border-color: #ffb899;
    color: var(--workshop-primary);
}

.status-tab.is-active {
    border-color: var(--workshop-primary);
    background: var(--workshop-primary);
    color: #fff;
}

.status-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
}

.status-tab.is-active .status-tab-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.selected-step-label {
    margin: -4px 0 12px;
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
}

.filter-card { background: #fff; border-radius: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); overflow: hidden; }
.filter-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border: none; background: #fff; font-size: 15px; font-weight: 600; color: #1f2937;
}
.filter-toggle i.fa-chevron-down { transition: transform 0.2s ease; color: #9ca3af; }
.filter-toggle.is-expanded i.fa-chevron-down { transform: rotate(180deg); }
.filter-body { display: none; padding: 0 16px 16px; border-top: 1px solid #f3f4f6; }
.filter-body.is-open { display: block; }
.filter-row { display: flex; flex-direction: column; gap: 12px; }
.filter-row.filter-row--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}
.filter-field {
    min-width: 0;
}
.filter-row-actions {
    display: flex;
    flex-direction: column;
    min-width: 0;
    grid-column: 1 / -1;
}
.filter-row-actions__label {
    visibility: hidden;
    height: 0;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
}
.filter-row-actions__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.filter-row-actions__buttons .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    white-space: nowrap;
}
.filter-row .form-control, .filter-row .form-select {
    min-height: 44px;
    font-size: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .filter-body.is-open,
    .filter-body { display: block; }
    .filter-row.filter-row--grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .filter-row-actions {
        grid-column: auto;
    }
    .filter-row-actions__label {
        height: auto;
        margin-bottom: 0.25rem !important;
    }
}

.tasks-section { background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.section-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.task-grid { display: flex; flex-direction: column; gap: 12px; }
.task-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.task-card-head { display: flex; gap: 12px; padding: 14px 14px 10px; }
.task-card-head-body { flex: 1; min-width: 0; }
.task-thumb { width: 112px; height: 56px; border-radius: 8px; object-fit: cover; background: #f3f4f6; flex-shrink: 0; }
.task-thumb-placeholder { display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 22px; width: 88px; height: 56px; flex-shrink: 0; }
.task-product-code-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}
.task-product-code-row .task-product-code { flex: 1 1 0; min-width: 0; }
.task-inline-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 2px 0 4px;
}
.task-item-id {
    flex: 0 0 auto;
    min-width: 118px;
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-align: right;
}
.task-item-id span { color: #374151; font-weight: 700; }
.task-product-code { font-size: 15px; font-weight: 700; word-break: break-all; }
.task-meta-line { font-size: 13px; color: #6b7280; line-height: 1.5; }
.task-meta-line--muted { color: #9ca3af; font-size: 12px; }
.task-card-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px 0;
    border-top: 1px dashed #e5e7eb;
    margin-top: 10px;
}
.task-card-secondary .btn { flex: 1 1 calc(50% - 8px); min-width: 120px; }
.task-card-work-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e5e7eb;
}
.task-card-work-extra {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.task-card-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.task-card-item-actions .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 120px;
}
.workshop-detail-item-actions {
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
}
.workshop-detail-item-actions .task-card-item-actions {
    margin-top: 8px;
}
.task-sign-badge {
    display: inline-block;
    margin-left: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}
.workshop-sticker-search {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}
.workshop-sticker-search__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #9a3412;
    margin-bottom: 8px;
}
.workshop-sticker-search__row {
    display: flex;
    gap: 8px;
}
.workshop-sticker-search__row .form-control { min-height: 42px; font-size: 16px; }
.workshop-sticker-search__row .btn { min-width: 72px; }
.task-card--highlight {
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.35);
    border-color: #ff6b35;
}
.workshop-detail-remark-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid #eef0f3;
}
.workshop-detail-remark-bar .task-meta-line { flex: 1; min-width: 0; word-break: break-word; }
.task-product-info { padding: 14px 10px; border-top: 1px solid #f3f4f6; }
.task-info-pair { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 0.35rem; }
.task-info-pair__label { color: #6b7280; min-width: 110px; }
.task-info-pair__value { color: #1f2937; text-align: right; flex: 1; word-break: break-all; }
.task-card-body { padding: 0 14px 10px; flex: 1; }
.task-step-name { font-size: 15px; font-weight: 600; color: var(--workshop-secondary); margin-bottom: 8px; }
.task-progress-bar { height: 6px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.task-progress-fill { height: 100%; background: linear-gradient(90deg, #28a745, #20c997); }
.task-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.task-badge--pending { background: #f3f4f6; color: #6b7280; }
.task-badge--in-progress { background: #dbeafe; color: #1d4ed8; }
.task-badge--rework { background: #ffedd5; color: #c2410c; }
.task-badge--urgent { background: #fee2e2; color: #b91c1c; }
.task-card--urgent { border-color: #fca5a5; box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.12); border-left: 4px solid #ef4444; }
.task-card-foot { padding: 12px 14px; border-top: 1px solid #f3f4f6; display: flex; flex-direction: column; gap: 10px; }
.task-actions { display: flex; flex-direction: column; gap: 8px; }
.task-actions .btn, .task-card-foot > .btn { min-height: 46px; font-size: 15px; font-weight: 600; border-radius: 10px; width: 100%; }
.tasks-empty, .tasks-loading { text-align: center; color: #9ca3af; padding: 40px 12px; }

.workshop-page .btn-primary { background: var(--workshop-primary); border-color: var(--workshop-primary); }
.workshop-page .btn-primary:hover { background: #e55a28; border-color: #e55a28; }

/* Workshop detail page */
.workshop-detail-page .workshop-wrap {
    padding-bottom: 24px;
}

.workshop-detail-loading {
    text-align: center;
    color: #9ca3af;
    padding: 48px 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.workshop-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.workshop-detail-summary,
.workshop-detail-timeline,
.workshop-detail-action {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #eef0f3;
    overflow: hidden;
}

.workshop-detail-summary { padding: 14px; }

.workshop-detail-hero {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.workshop-detail-thumb {
    width: 96px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    background: #f3f4f6;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
}

.workshop-detail-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 24px;
}

.workshop-detail-hero-body {
    flex: 1;
    min-width: 0;
}

.workshop-detail-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.workshop-detail-status--pending { background: #fef3c7; color: #b45309; }
.workshop-detail-status--in_progress { background: #dbeafe; color: #1d4ed8; }
.workshop-detail-status--completed { background: #dcfce7; color: #166534; }
.workshop-detail-status--shipped { background: #e0f2fe; color: #0369a1; }
.workshop-detail-status--cancelled { background: #fee2e2; color: #b91c1c; }

.workshop-detail-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.workshop-detail-metric {
    background: #f9fafb;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
}

.workshop-detail-metric__value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

.workshop-detail-metric__value--accent { color: var(--workshop-primary); }

.workshop-detail-metric__label {
    margin-top: 4px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}

.workshop-detail-progress-wrap { margin-bottom: 14px; }

.workshop-detail-progress-bar {
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 6px;
}

.workshop-detail-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #34d399);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.workshop-detail-progress-text {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
}

.workshop-detail-spec {
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

.workshop-detail-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 10px;
}

.workshop-detail-section-title i {
    color: var(--workshop-primary);
    margin-right: 6px;
}

.workshop-detail-spec .task-info-pair {
    padding: 8px 10px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 6px;
    border: 1px solid #f3f4f6;
}

.workshop-detail-spec .task-info-pair:last-child { margin-bottom: 0; }

.workshop-detail-timeline { padding: 14px; }

.workshop-detail-timeline .process-timeline-section {
    border: none;
    padding: 0;
    background: transparent;
}

.workshop-detail-timeline .process-timeline-progress { margin-bottom: 12px; }

.workshop-detail-action {
    padding: 14px;
    border-left: 4px solid var(--workshop-primary);
}

.workshop-detail-action-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.workshop-detail-action-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--workshop-secondary);
}

.workshop-detail-actions .btn {
    min-height: 46px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    width: 100%;
}

.workshop-detail-page .process-step-row {
    background: #fff;
    border-color: #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.workshop-detail-page .process-timeline-empty {
    text-align: center;
    color: #9ca3af;
    padding: 24px 12px;
    font-size: 14px;
}

.workshop-bottom-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    display: flex; gap: 8px; padding: 10px 12px calc(10px + var(--safe-bottom));
    background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px);
    border-top: 1px solid #e5e7eb; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}
.workshop-bottom-bar .btn { flex: 1; min-height: 46px; font-size: 15px; font-weight: 600; border-radius: 10px; }

.workshop-scroll-top {
    position: fixed;
    right: 16px;
    bottom: calc(16px + var(--safe-bottom));
    z-index: 110;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--workshop-primary, #FF6B35), #FF8A5B);
    color: #fff;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.4);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.workshop-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.workshop-scroll-top:active {
    transform: scale(0.95);
}

.manager-info { color: var(--admin-accent); font-weight: 500; }
.warehouse-location { color: #6c757d; font-size: 0.9rem; }

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-soft));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
}

.approve-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}
.approve-approved { background: #E3F2FD; color: var(--admin-accent); }
.approve-pending { background: #FFF3E0; color: #E85A2A; }

.required { color: #e74c3c; }

/* ==================== Production Plan List ==================== */
.wl-thumb {
    width: 112px;
    height: 56px;
    max-width: 112px;
    max-height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--admin-border);
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    background: #f8f9fa;
}

.wl-export-page .wl-thumb {
    width: 140px;
    height: 140px;
    max-width: 140px;
    max-height: 140px;
    object-fit: contain;
}

.wl-export-page .wl-export-sku {
    line-height: 1.35;
}

.wl-export-page .wl-export-sku strong {
    display: block;
}

.wl-export-page .wl-export-plan-link {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.wl-export-page .wl-export-plan-link:hover {
    text-decoration: underline;
}

.wl-export-page .wl-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.wl-export-page .wl-export-stock {
    line-height: 1.35;
    font-size: 13px;
}

.wl-export-page .wl-export-stock--ok,
.wl-export-page .wl-export-stock--ok strong {
    color: #1e40af;
}

.wl-export-page .wl-export-stock--low,
.wl-export-page .wl-export-stock--low strong {
    color: #c2410c;
}

.wl-export-page .wl-export-stock--empty,
.wl-export-page .wl-export-stock--empty strong,
.wl-export-page .wl-export-stock--error,
.wl-export-page .wl-export-stock--error strong {
    color: #b91c1c;
}

.wl-export-page .wl-export-stock--miss,
.wl-export-page .wl-export-stock--miss strong {
    color: #6b7280;
}

.wl-thumb:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.progress-bar-container {
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-bar-container > .progress-bar {
    height: 100%;
    min-height: 8px;
    background: linear-gradient(90deg, var(--admin-accent), var(--admin-accent-soft)) !important;
    border-radius: 999px;
    display: block;
    flex-direction: unset;
    justify-content: unset;
    color: transparent;
    font-size: 0;
    line-height: 0;
    transition: width 0.3s ease;
}

.progress-bar-container > .progress-bar.progress-bar--completed {
    background: linear-gradient(90deg, #16a34a, #4ade80) !important;
}

.progress-bar-container > .progress-bar.progress-bar--started {
    background: linear-gradient(90deg, #2563eb, #60a5fa) !important;
}

.plan-progress-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 120px;
}

.plan-progress-stack__item {
    display: grid;
    grid-template-columns: 28px 1fr 36px;
    align-items: center;
    gap: 6px;
}

.plan-progress-stack__label {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
}

.plan-progress-stack__item .progress-bar-container {
    margin-bottom: 0;
}

.plan-progress-stack__pct {
    font-size: 11px;
    color: #6b7280;
    text-align: right;
    white-space: nowrap;
}

.plan-type-internal {
    background: #eef6ff;
    color: #1d4ed8;
}

.plan-type-supply-chain {
    background: #e8f8ef;
    color: #166534;
}

/* ==================== Production Plan Detail ==================== */
.detail-page .detail-container {
    margin: 0 auto;
}

.detail-page .plan-info-card {
    background: linear-gradient(135deg, var(--admin-accent), var(--factory-accent));
    color: #fff;
    border-radius: 14px;
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.detail-page .plan-info-card.supply-chain {
    background: linear-gradient(135deg, #28a745, #20c997);
    box-shadow: 0 8px 24px rgba(40, 167, 69, 0.25);
}

.detail-page .plan-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.detail-page .plan-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.detail-page .meta-item {
    background: rgba(255, 255, 255, 0.12);
    padding: 0.85rem 1rem;
    border-radius: 10px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.detail-page .meta-label {
    font-size: 0.78rem;
    opacity: 0.9;
    margin-bottom: 0.35rem;
}

.detail-page .meta-value {
    font-size: 0.95rem;
    font-weight: 600;
}

.detail-page .meta-item--full {
    grid-column: 1 / -1;
}

.detail-page .meta-value--remark {
    font-weight: 500;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.detail-page .plan-info-card .status-badge {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.detail-page .progress-container {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-top: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-page .progress-bar-large {
    height: 10px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    overflow: hidden;
}

.detail-page .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #86efac);
    border-radius: 999px;
    transition: width 0.35s ease;
    width: 0;
}

.detail-page .progress-text {
    font-size: 0.85rem;
    opacity: 0.95;
}

.detail-page .plan-pending-patterns-alert {
    border-radius: 12px;
    margin-bottom: 1rem;
}

.detail-page .plan-pending-patterns-list {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-page .plan-pending-pattern-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 8px;
}

.detail-page .items-card {
    background: var(--admin-surface);
    border-radius: 14px;
    border: 1px solid var(--admin-border);
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.detail-page .items-card > .card-header {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    padding: 1rem 1.25rem;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.detail-page .items-card > .card-header.supply-chain {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.detail-page .items-card > .card-body {
    padding: 1.25rem;
    background: #e9edf2;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.detail-page .item-status-filter-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.85rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--admin-border);
}

.detail-page .item-status-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.detail-page .item-status-filter-bar__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4b5563;
    margin-right: 0.35rem;
}

.detail-page .item-status-filter-btn {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.detail-page .item-status-filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.detail-page .item-status-filter-btn.filter-all {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

.detail-page .item-status-filter-btn.filter-all:hover,
.detail-page .item-status-filter-btn.filter-all.active {
    background: #4b5563;
    border-color: #4b5563;
    color: #fff;
}

.detail-page .item-status-filter-btn.filter-pending {
    background: #fffbeb;
    border-color: #fbbf24;
    color: #b45309;
}

.detail-page .item-status-filter-btn.filter-pending:hover,
.detail-page .item-status-filter-btn.filter-pending.active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
}

.detail-page .item-status-filter-btn.filter-in-progress {
    background: #eff6ff;
    border-color: #60a5fa;
    color: #1d4ed8;
}

.detail-page .item-status-filter-btn.filter-in-progress:hover,
.detail-page .item-status-filter-btn.filter-in-progress.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

.detail-page .item-status-filter-btn.filter-shipped {
    background: #ecfeff;
    border-color: #22d3ee;
    color: #0e7490;
}

.detail-page .item-status-filter-btn.filter-shipped:hover,
.detail-page .item-status-filter-btn.filter-shipped.active {
    background: #06b6d4;
    border-color: #06b6d4;
    color: #fff;
}

.detail-page .item-status-filter-btn.filter-completed {
    background: #f0fdf4;
    border-color: #4ade80;
    color: #166534;
}

.detail-page .item-status-filter-btn.filter-completed:hover,
.detail-page .item-status-filter-btn.filter-completed.active {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.detail-page .item-status-filter-btn.filter-cancelled {
    background: #fef2f2;
    border-color: #f87171;
    color: #b91c1c;
}

.detail-page .item-status-filter-btn.filter-cancelled:hover,
.detail-page .item-status-filter-btn.filter-cancelled.active {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.detail-page .item-status-filter-btn.filter-material {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}

.detail-page .item-status-filter-btn.filter-material:hover,
.detail-page .item-status-filter-btn.filter-material.active {
    background: #ea580c;
    border-color: #ea580c;
    color: #fff;
}

.detail-page .item-status-filter-btn.filter-uv-yes {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #047857;
}

.detail-page .item-status-filter-btn.filter-uv-yes:hover,
.detail-page .item-status-filter-btn.filter-uv-yes.active {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

.detail-page .item-status-filter-btn.filter-uv-no {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
}

.detail-page .item-status-filter-btn.filter-uv-no:hover,
.detail-page .item-status-filter-btn.filter-uv-no.active {
    background: #64748b;
    border-color: #64748b;
    color: #fff;
}

.detail-page .item-status-filter-row--search {
    align-items: center;
}

.detail-page .wl-detail-search-input {
    width: 140px;
    display: inline-block;
    max-width: 40vw;
}

.detail-page #wlSearchFace.wl-detail-search-input {
    width: 100px;
}

.detail-page .wl-detail-group {
    margin-bottom: 1.25rem;
}

.detail-page .wl-detail-group__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    padding: 0.65rem 1rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(90deg, #fff7f2 0%, #ffffff 100%);
    border: 1px solid #ffd7b8;
    border-left: 4px solid var(--admin-accent);
    border-radius: 10px;
    font-size: 0.9rem;
}

.detail-page .wl-detail-group__body .product-card {
    margin-bottom: 0.75rem;
}

.detail-page .wl-detail-group__body .product-card:last-child {
    margin-bottom: 0;
}

.detail-page .wl-detail-group__body--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.85rem;
}

.detail-page .wl-detail-group__body--grid .product-card {
    margin-bottom: 0;
    height: 100%;
}

.detail-page .product-card--sku {
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.7rem 0.55rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.detail-page .product-card.is-highlight-item {
    border-color: #FF6B35;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.25);
}

.detail-page .product-card.product-card--sku .sku-card__top,
.detail-page .product-card--sku .sku-card__top {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.45rem;
    width: 100%;
}

.detail-page .product-card--sku .sku-card__top-left {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.4rem 0.55rem;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.detail-page .product-card--sku .sku-card__item-id {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2563eb;
    white-space: nowrap !important;
}

.detail-page .product-card--sku .sku-card__status {
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    color: #f97316;
    white-space: nowrap !important;
}

.detail-page .product-card--sku .sku-card__status--pending { color: #d97706; }
.detail-page .product-card--sku .sku-card__status--in_progress { color: #ea580c; }
.detail-page .product-card--sku .sku-card__status--completed { color: #16a34a; }
.detail-page .product-card--sku .sku-card__status--shipped { color: #0891b2; }
.detail-page .product-card--sku .sku-card__status--cancelled { color: #dc2626; }

.detail-page .product-card--sku .sku-card__top-right {
    display: none;
}

.detail-page .product-card--sku .sku-card__top-right-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left;
    line-height: 1.25;
    font-size: 0.86rem;
    font-weight: 700;
    color: #111827;
}

.detail-page .product-card--sku .sku-card__plan-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
    color: #64748b;
}

.detail-page .product-card--sku .sku-card__plan-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.detail-page .product-card--sku .sku-card__plan-link:hover {
    text-decoration: underline;
}

.detail-page .wl-material-board-tabs .item-status-filter-btn {
    text-decoration: none;
}

.detail-page .product-card--sku .sku-card__top-right .badge,
.detail-page .product-card--sku .sku-card__top-right .badge-urgent-flag {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    margin: 0 !important;
    vertical-align: middle;
}
.detail-page .product-card--sku .sku-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    max-height: 180px;
    margin-bottom: 0.55rem;
    background: #fff;
    overflow: hidden;
}

.detail-page .product-card--sku .sku-card__image {
    max-width: 100%;
    max-height: 210px;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    min-height: 0;
}

.detail-page .product-card--sku .sku-card__media--single {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    margin-bottom: 0.55rem;
}

.detail-page .product-card--sku .sku-card__media--single .sku-card__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: 240px;
    object-fit: contain;
    object-position: center;
}

.detail-page .product-card--sku .sku-card__image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 120px;
    color: #9ca3af;
    font-size: 0.75rem;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
}

.detail-page .product-card--sku .sku-card__image-placeholder i {
    font-size: 1.5rem;
}

.detail-page .product-card--sku .sku-card__media--dual {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    min-height: 0;
    max-height: none;
    margin-bottom: 0.55rem;
}

.detail-page .product-card--sku .sku-card__shot {
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
    min-width: 0;
    width: 100%;
}

.detail-page .product-card--sku .sku-card__shot .sku-card__image {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 280px;
    min-height: 0;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.detail-page .product-card--sku .sku-card__image--flip {
    transform: scaleX(-1);
}

.detail-page .product-card--sku .sku-card__image-placeholder--dual {
    min-height: 180px;
}

/* 参考图：双列彩色标签 */
.detail-page .product-card--sku .sku-card__tags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}

.detail-page .product-card--sku .sku-tag {
    display: block;
    padding: 0.32rem 0.45rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-page .product-card--sku .sku-tag--full {
    grid-column: 1 / -1;
}

.detail-page .product-card--sku .sku-tag--amber {
    background: #fef3c7;
    color: #92400e;
}

.detail-page .product-card--sku .sku-tag--violet {
    background: #ede9fe;
    color: #5b21b6;
}

.detail-page .product-card--sku .sku-tag--cyan {
    background: #cffafe;
    color: #0e7490;
}

.detail-page .product-card--sku .sku-tag--mint {
    background: #d1fae5;
    color: #047857;
}

.detail-page .product-card--sku .sku-tag--plain {
    background: #fff;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.detail-page .product-card--sku .sku-tag--orange {
    background: #ffedd5;
    color: #c2410c;
}

.detail-page .product-card--sku .sku-card__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.55rem;
    padding: 0.4rem 0.5rem;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #9a3412;
    line-height: 1.35;
}

.detail-page .product-card--sku .sku-card__meta strong {
    font-size: 1.2rem;
    font-weight: 800;
    color: #c2410c;
}

.detail-page .product-card--sku .sku-card__meta-done {
    color: #166534;
}

.detail-page .product-card--sku .sku-card__meta-done strong {
    color: #15803d;
}

.detail-page .product-card--sku .sku-card__meta-stock {
    color: #1d4ed8;
}

.detail-page .product-card--sku .sku-card__meta-stock strong {
    color: #1e40af;
}

.detail-page .product-card--sku .sku-card__meta-stock--low,
.detail-page .product-card--sku .sku-card__meta-stock--low strong {
    color: #c2410c;
}

.detail-page .product-card--sku .sku-card__meta-stock--empty,
.detail-page .product-card--sku .sku-card__meta-stock--empty strong,
.detail-page .product-card--sku .sku-card__meta-stock--error,
.detail-page .product-card--sku .sku-card__meta-stock--error strong {
    color: #b91c1c;
}

.detail-page .product-card--sku .sku-card__meta-stock--miss,
.detail-page .product-card--sku .sku-card__meta-stock--miss strong {
    color: #6b7280;
}

.detail-page .product-card--sku .sku-card__meta-stock-total {
    color: #4338ca;
}

.detail-page .product-card--sku .sku-card__meta-stock-total strong {
    color: #3730a3;
}

.detail-page .product-card--sku .sku-card__related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.65rem;
    margin: 0 0 0.4rem;
    padding: 0.32rem 0.5rem;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #3730a3;
    line-height: 1.35;
}

.detail-page .product-card--sku .sku-card__related-label {
    display: inline-block;
    padding: 0 6px;
    border-radius: 999px;
    background: #4338ca;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.detail-page .product-card--sku .sku-card__related-item strong {
    font-weight: 800;
}

.detail-page .sku-card-stack {
    min-width: 0;
}

.detail-page .sku-card-stack--pair {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: #eef2ff;
    border: 1px dashed #818cf8;
    border-radius: 12px;
}

.detail-page .sku-card-stack__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    padding: 0 4px 2px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #3730a3;
}

.detail-page .sku-card-stack__label {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: #4338ca;
    color: #fff;
    font-size: 0.72rem;
}

.detail-page .sku-card-stack__total strong {
    font-size: 1.05rem;
    font-weight: 800;
}

.detail-page .sku-card-stack--pair .product-card {
    height: auto;
}

.detail-page .product-card--sku .sku-card__stats {
    padding: 0;
    margin-bottom: 0.4rem;
}

.detail-page .product-card--sku .part-qty-section--compact {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.detail-page .product-card--sku .part-qty-row--compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    align-items: end;
}

.detail-page .product-card--sku .part-qty-row--temple-only {
    grid-template-columns: 1fr;
}

.detail-page .product-card--sku .part-qty-label {
    font-size: 0.72rem;
    color: #4b5563;
    font-weight: 600;
}

.detail-page .product-card--sku .part-qty-field {
    min-width: 0;
}

.detail-page .product-card--sku .part-qty-input {
    width: 100%;
    min-width: 0;
    height: 30px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    text-align: center;
}

.detail-page .product-card--sku .part-qty-totals {
    margin-bottom: 0.3rem;
    padding-bottom: 0.3rem;
}
.detail-page .product-card--sku .part-qty-total-value {
    font-size: 0.9rem;
}
.detail-page .product-card--sku .part-qty-actions {
    margin-left: 0;
    grid-column: 1 / -1;
}
.detail-page .product-card--sku .part-qty-submit {
    width: 100%;
}
.detail-page .product-card--sku .part-qty-history {
    margin-top: 0.35rem;
}

.detail-page .product-card--sku .part-qty-status {
    width: 100%;
    min-width: 0;
    font-size: 0.68rem;
    padding: 0.28rem 0.35rem;
    text-align: center;
}

.detail-page .product-card--sku .sku-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding-top: 0.25rem;
    margin-top: auto;
    border-top: 1px solid #f3f4f6;
}

.detail-page .product-card--sku .sku-card__action-btn {
    font-size: 0.68rem;
    padding: 0.15rem 0.45rem;
    line-height: 1.3;
}

.detail-page .item-status-filter-empty {
    display: none;
    text-align: center;
    padding: 2rem 1rem;
    color: #9ca3af;
    background: #fff;
    border-radius: 12px;
    border: 1px dashed #d1d5db;
}

.detail-page .product-card {
    background: #fff;
    border: 2px solid #cfd6df;
    border-radius: 14px;
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
    transition: box-shadow 0.2s ease;
    position: relative;
}

.detail-page .product-card--pending {
    border-color: #fbbf24;
    border-left-width: 8px;
    border-left-color: #f59e0b;
    border-top: 4px solid #f59e0b;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.22);
}

.detail-page .product-card--pending:hover {
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}

.detail-page .product-card--in_progress {
    border-color: #60a5fa;
    border-left-width: 8px;
    border-left-color: #2563eb;
    border-top: 4px solid #3b82f6;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.22);
}

.detail-page .product-card--in_progress:hover {
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.detail-page .product-card--completed {
    border-color: #4ade80;
    border-left-width: 8px;
    border-left-color: #16a34a;
    border-top: 4px solid #22c55e;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.22);
}

.detail-page .product-card--completed:hover {
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
}

.detail-page .product-card--shipped {
    border-color: #22d3ee;
    border-left-width: 8px;
    border-left-color: #0891b2;
    border-top: 4px solid #06b6d4;
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.22);
}

.detail-page .product-card--shipped:hover {
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.3);
}

.detail-page .product-card--cancelled {
    border-color: #f87171;
    border-left-width: 8px;
    border-left-color: #dc2626;
    border-top: 4px solid #ef4444;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
    opacity: 0.96;
}

.detail-page .product-card--cancelled:hover {
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.28);
}

.detail-page .product-card--urgent {
    border: 2px solid #ef4444 !important;
    border-left-color: #dc2626 !important;
    background: linear-gradient(180deg, #fff1f2 0%, #ffffff 40%);
    box-shadow: 0 6px 22px rgba(220, 38, 38, 0.22);
}

.detail-page .product-urgent-ribbon {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    background: #dc2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
    pointer-events: none;
    animation: urgentPulse 1.6s ease-in-out infinite;
}

.detail-page .product-card--urgent .product-header {
    background: linear-gradient(90deg, #fecaca 0%, #fee2e2 45%, #fff5f5 100%);
    border-bottom-color: #f87171;
}

.detail-page .badge-urgent-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dc2626 !important;
    color: #fff !important;
    font-weight: 700;
    padding: 0.35em 0.65em;
    animation: urgentPulse 1.6s ease-in-out infinite;
}

@keyframes urgentPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
    50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

.detail-page .item-status-filter-btn.filter-urgent {
    border-color: #fca5a5;
    color: #b91c1c;
    background: #fff;
}

.detail-page .item-status-filter-btn.filter-urgent:hover,
.detail-page .item-status-filter-btn.filter-urgent.active {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.detail-page .product-card--pending .product-header {
    background: linear-gradient(90deg, #fef3c7 0%, #fffbeb 100%);
    border-bottom-color: #fcd34d;
}

.detail-page .product-card--in_progress .product-header {
    background: linear-gradient(90deg, #dbeafe 0%, #eff6ff 100%);
    border-bottom-color: #93c5fd;
}

.detail-page .product-card--completed .product-header {
    background: linear-gradient(90deg, #bbf7d0 0%, #f0fdf4 100%);
    border-bottom-color: #86efac;
}

.detail-page .product-card--shipped .product-header {
    background: linear-gradient(90deg, #a5f3fc 0%, #ecfeff 100%);
    border-bottom-color: #67e8f9;
}

.detail-page .product-card--cancelled .product-header {
    background: linear-gradient(90deg, #fecaca 0%, #fef2f2 100%);
    border-bottom-color: #fca5a5;
}

.detail-page .product-card--pending .product-item-foot { border-top-color: #fcd34d; background: #fffbeb; }
.detail-page .product-card--in_progress .product-item-foot { border-top-color: #93c5fd; background: #eff6ff; }
.detail-page .product-card--completed .product-item-foot { border-top-color: #86efac; background: #f0fdf4; }
.detail-page .product-card--shipped .product-item-foot { border-top-color: #67e8f9; background: #ecfeff; }
.detail-page .product-card--cancelled .product-item-foot { border-top-color: #fca5a5; background: #fef2f2; }

.detail-page .kokofuse-order-cancelled {
    border-color: #fca5a5;
    background: #fffbfb;
}

.detail-page .kokofuse-order-cancelled-banner {
    background: #fee2e2;
    color: #b91c1c;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-page .product-header {
    background: #f8f9fa;
    padding: 0.9rem 1.1rem;
    border-bottom: 3px solid #e2e8f0;
}

.detail-page .product-title {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.detail-page .product-body {
    padding: 1rem;
}

.detail-page .product-item-foot {
    border-top: 3px solid #e2e8f0;
    background: #f8fafc;
    padding: 0.9rem 1.1rem 1.1rem;
}

.detail-page .btn-edit-item {
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    border-radius: 8px;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    margin-left: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.detail-page .btn-edit-item:hover {
    border-color: var(--admin-accent);
    color: var(--admin-accent);
    background: #fff8f4;
}

.detail-page .info-section {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 0.85rem;
    margin-bottom: 0.85rem;
    border-left: 3px solid var(--admin-accent);
    height: calc(100% - 0.85rem);
}

.detail-page .info-section.supply-chain {
    border-left-color: #28a745;
}

.detail-page .supply-subcard {
    min-height: 100%;
}

.detail-page .section-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.detail-page .section-title i {
    color: var(--admin-accent);
}

.detail-page .section-title.supply-chain i {
    color: #28a745;
}

.detail-page .info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
}

.detail-page .info-item:last-child {
    margin-bottom: 0;
}

.detail-page .info-item--remark {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}

.detail-page .info-item--remark .info-value {
    text-align: left;
    white-space: pre-wrap;
}

.detail-page .info-label {
    color: #6c757d;
    font-weight: 500;
    min-width: 72px;
    flex-shrink: 0;
}

.detail-page .info-value {
    color: #2c3e50;
    font-weight: 600;
    text-align: right;
    flex: 1;
    word-break: break-word;
}

.detail-page .info-pair-line {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    font-size: 0.94rem;
    line-height: 1.45;
}

.detail-page .info-pair-line--block {
    gap: 0.2rem;
}

.detail-page .section-title.info-pair-line {
    font-size: 0.94rem;
}

.detail-page .info-pair-line__title {
    color: #6c757d;
    font-weight: 600;
}

.detail-page .info-pair-line__value {
    color: #2c3e50;
    font-weight: 700;
    font-size: 1rem;
}

.detail-page .image-preview-medium,
.detail-page .supply-thumb {
    max-width: 88px;
    max-height: 68px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
}

.detail-page .image-preview-medium:hover,
.detail-page .supply-thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.detail-page .supply-basic-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.detail-page .supply-basic-image {
    flex: 0 0 auto;
    width: 200px;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.detail-page .supply-basic-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    object-fit: contain;
    cursor: pointer;
    background: #fff;
    display: block;
    transition: box-shadow 0.2s ease;
}

.detail-page .supply-basic-image img:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.detail-page .supply-basic-content {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.detail-page .basic-info-image-wrap {
    margin-top: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.detail-page .basic-info-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.detail-page .basic-info-image:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.image-preview-modal__body {
    padding: 0;
}

.image-preview-modal__img {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    border-radius: 0 0 0.5rem 0.5rem;
}

.wl-factory-info-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 0.85rem;
    padding: 0.75rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #e9ecef;
    border-radius: 10px;
}

.wl-factory-info-head__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 120px;
}

.wl-factory-info-head__label {
    font-size: 0.75rem;
    color: #6c757d;
}

.wl-factory-sku-panel,
.wl-factory-options-panel {
    margin-bottom: 0.9rem;
}

.wl-factory-sku-panel__title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.55rem;
}

.wl-factory-preview {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    margin-bottom: 0.9rem;
}

.wl-factory-preview__title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.55rem;
}

.wl-factory-preview__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.wl-factory-preview__cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.wl-factory-preview__label {
    font-size: 0.74rem;
    color: #6c757d;
}

.wl-factory-preview__cell strong {
    font-size: 0.94rem;
    color: #2c3e50;
    word-break: break-word;
}

.wl-factory-preview__sku {
    margin-top: 0.45rem;
}

@media (max-width: 768px) {
    .wl-factory-preview__grid {
        grid-template-columns: 1fr;
    }
}

.detail-page .supply-spec-panel {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.detail-page .supply-spec-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.detail-page .supply-spec-panel__title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
}

.detail-page .supply-spec-panel__tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: #c05600;
    background: #fff4e5;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

.detail-page .supply-spec-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.detail-page .supply-spec-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
}

.detail-page .supply-spec-badge--size {
    background: #eef6ff;
    border-color: #bfdbfe;
}

.detail-page .supply-spec-badge__group {
    color: #6b7280;
    font-weight: 600;
}

.detail-page .supply-spec-badge__val {
    color: #1f2937;
    font-weight: 700;
}

.detail-page .item-pending-work-alert {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.detail-page .engraving-preview-wrap {
    margin-top: 0.65rem;
    padding: 0.65rem;
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
}

.detail-page .engraving-preview-label {
    font-size: 0.78rem;
    color: #6b7280;
    margin-bottom: 0.35rem;
}

.detail-page .json-pretty {
    background: #1f2937;
    color: #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.75rem;
    max-height: 220px;
    overflow: auto;
    margin: 0;
}

.detail-page .status-actions {
    margin-bottom: 0.75rem;
}

.detail-page .status-buttons-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.84rem;
}

.detail-page .status-btn {
    border: none;
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.detail-page .status-btn-progress {
    background: #dbeafe;
    color: #1d4ed8;
}

.detail-page .status-btn-completed {
    background: #dcfce7;
    color: #166534;
}

.detail-page .status-btn-cancelled {
    background: #fee2e2;
    color: #b91c1c;
}

.detail-page .status-btn-urgent {
    background: #fecaca;
    color: #b91c1c;
    border: 1px solid #f87171;
}

.detail-page .status-buttons-group--urgent {
    margin-bottom: 0.35rem;
}

.detail-page .status-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.detail-page .empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #6c757d;
}

.detail-page .btn-back {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    border: none;
    padding: 0.7rem 1.75rem;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.25);
}

.detail-page .btn-back:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.35);
    text-decoration: none;
}

/* Process timeline (detail + shared partial) */
.process-timeline-section {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 0.85rem;
}

.process-timeline-section--card {
    margin-top: 0;
}

.process-timeline-section.supply-chain {
    border-left: 3px solid #28a745;
}

.process-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.process-timeline-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
}

.process-timeline-title i {
    color: var(--admin-accent);
    margin-right: 0.35rem;
}

.process-timeline-summary {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 600;
}

.process-timeline-progress {
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.process-timeline-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--admin-accent), var(--admin-accent-soft));
    border-radius: 999px;
}

.process-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.process-step-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 0.55rem;
    align-items: start;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    border: 1px solid #eef0f3;
    background: #fafbfc;
}

.process-step-order {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    background: #e5e7eb;
    color: #374151;
}

.process-step-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: #1f2937;
}

.process-step-meta {
    font-size: 0.74rem;
    color: #6b7280;
    margin-top: 0.15rem;
    line-height: 1.45;
}

.process-step-extra {
    font-size: 0.72rem;
    line-height: 1.45;
    margin-top: 0.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.15rem;
    flex-wrap: wrap;
    word-break: break-word;
}

.process-step-extra--rework {
    color: #c05600;
}

.process-step-extra--cancel {
    color: #b91c1c;
}

.process-step-remark {
    font-size: 0.72rem;
    color: #4b5563;
    line-height: 1.45;
    margin-top: 0.3rem;
    padding: 0.35rem 0.5rem;
    background: #f3f4f6;
    border-radius: 6px;
    word-break: break-word;
}

.process-step-remark-label {
    display: inline-block;
    font-weight: 700;
    color: #6b7280;
    margin-right: 0.35rem;
}

.process-step-badge {
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

.process-step--pending { border-left: 3px solid #f59e0b; }
.process-step--pending .process-step-badge { background: #fff4e5; color: #c05600; }
.process-step--in-progress { border-left: 3px solid #3b82f6; }
.process-step--in-progress .process-step-badge { background: #eef6ff; color: #1d4ed8; }
.process-step--completed { border-left: 3px solid #22c55e; }
.process-step--completed .process-step-badge { background: #e8f8ef; color: #166534; }
.process-step--rework { border-left: 3px solid #f97316; }
.process-step--rework .process-step-badge { background: #fff4e5; color: #c05600; }
.process-step--skipped { border-left: 3px solid #9ca3af; opacity: 0.85; }
.process-step--skipped .process-step-badge { background: #f3f4f6; color: #6b7280; }

/* Part usage (frame / temple) — temporary replacement for process timeline */
.part-usage-section {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 0.85rem;
}
.part-usage-section--card { margin-top: 0; }
.part-usage-section.supply-chain { border-left: 3px solid #28a745; }
.part-usage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.part-usage-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
}
.part-usage-title i {
    color: var(--admin-accent);
    margin-right: 0.35rem;
}
.part-usage-summary {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 600;
}
.part-usage-table { font-size: 0.82rem; }
.part-usage-table th {
    white-space: nowrap;
    color: #6b7280;
    font-weight: 600;
}
.part-usage-table td { vertical-align: middle; }
.part-usage-table .form-control-sm { min-width: 72px; }
.part-usage-record-list {
    list-style: none;
    padding-left: 0;
    font-size: 0.75rem;
    color: #4b5563;
}
.part-usage-record-list li {
    padding: 0.2rem 0;
    border-bottom: 1px dashed #eef0f3;
}
.part-usage-record-list li:last-child { border-bottom: none; }
.part-usage-empty { text-align: center; }

/* Part qty (frame / temple counts) */
.part-qty-section {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 0.85rem;
}
.part-qty-section--card { margin-top: 0; }
.part-qty-section.supply-chain { border-left: 3px solid #28a745; }
.part-qty-section--saving { opacity: 0.75; }
.part-qty-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}
.part-qty-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
}
.part-qty-title i {
    color: var(--admin-accent);
    margin-right: 0.35rem;
}
.part-qty-model {
    font-size: 0.78rem;
    font-weight: 600;
}
.part-qty-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem 1.25rem;
}
.part-qty-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}
.part-qty-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
}
.part-qty-input {
    width: 96px;
    min-width: 96px;
}
.part-qty-status-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.part-qty-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}
.part-qty-status--pending {
    background: #fef3c7;
    color: #b45309;
}
.part-qty-status--progress {
    background: #e0f2fe;
    color: #0369a1;
}

.part-qty-row--scrap {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed #e5e7eb;
}

.part-qty-totals-wrap {
    margin-bottom: 0.45rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #eef0f3;
}
.part-qty-totals-summary {
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    user-select: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    list-style: none;
}
.part-qty-totals-summary::-webkit-details-marker { display: none; }
.part-qty-totals-preview {
    font-weight: 500;
    font-size: 0.72rem;
}
.part-qty-totals-preview strong {
    font-weight: 700;
    color: #334155;
}
.part-qty-totals-wrap[open] .part-qty-totals-preview {
    display: none;
}
.part-qty-totals {
    margin-top: 0.4rem;
}
.part-qty-total-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 64px;
}
.part-qty-total-label {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 600;
}
.part-qty-total-value {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.part-qty-total-item--scrap .part-qty-total-value {
    color: #b91c1c;
}
.part-qty-add-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    margin: 0.15rem 0 0.35rem;
}
.part-qty-actions {
    display: flex;
    align-items: flex-end;
    margin-left: auto;
}
.part-qty-submit {
    min-width: 64px;
}
.part-qty-history {
    margin-top: 0.55rem;
    border-top: 1px dashed #e5e7eb;
    padding-top: 0.35rem;
}
.part-qty-history-summary {
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    user-select: none;
}
.part-qty-history-list {
    margin-top: 0.35rem;
    max-height: 140px;
    overflow: auto;
}
.part-qty-history-head {
    font-weight: 600;
    color: #475569;
}
.part-qty-history-body {
    color: #6b7280;
}

.part-qty-label--make {
    color: #0369a1;
}

.part-qty-input--make:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 0.15rem rgba(56, 189, 248, 0.2);
}

.part-qty-label--scrap {
    color: #dc2626;
}

.part-qty-input--scrap:focus {
    border-color: #f87171;
    box-shadow: 0 0 0 0.15rem rgba(248, 113, 113, 0.2);
}

.detail-page .product-card--sku .part-qty-row--scrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workshop-complete-form {
    text-align: left;
}

.workshop-complete-field + .workshop-complete-field {
    margin-top: 0.85rem;
}

.workshop-complete-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
}

/* manage_items shared plan card */
.admin-page .plan-info-card {
    background: linear-gradient(135deg, var(--admin-accent), var(--factory-accent));
    color: #fff;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 6px 18px rgba(255, 107, 53, 0.2);
}

.admin-page .plan-info-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.admin-page .plan-info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    font-size: 0.85rem;
    opacity: 0.95;
}

.admin-page .items-card {
    background: var(--admin-surface);
    border-radius: 14px;
    border: 1px solid var(--admin-border);
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.admin-page .items-card > .card-header {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    padding: 1rem 1.25rem;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-page .product-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.admin-page .product-header {
    background: #f8f9fa;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e9ecef;
}

.admin-page .product-title {
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.admin-page .product-body { padding: 1rem; }

.admin-page .info-section {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 0.85rem;
    margin-bottom: 0.85rem;
    border-left: 3px solid var(--admin-accent);
}

.admin-page .section-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.65rem;
}

.admin-page .info-item {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
}

.admin-page .info-label { color: #6c757d; font-weight: 500; }
.admin-page .info-value { color: #2c3e50; font-weight: 600; text-align: right; }

/* ==================== Form Pages ==================== */
.form-container {
    padding: 1.25rem 1.5rem 2rem;
    background: linear-gradient(180deg, #f7f8fa 0%, #eef1f4 100%);
    min-height: calc(100vh - 200px);
    margin: 0 -0.75rem;
}

.form-container .form-card {
    background: var(--admin-surface);
    border-radius: 14px;
    border: 1px solid var(--admin-border);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    overflow: hidden;
    max-width: 960px;
    margin: 0 auto;
}

.form-container .form-card > .card-header {
    background: linear-gradient(135deg, var(--admin-accent) 0%, var(--admin-accent-soft) 100%);
    color: #fff;
    border-bottom: none;
    padding: 1rem 1.25rem;
}

.form-container .form-card > .card-header h4,
.form-container .form-card > .card-header h5 {
    color: #fff;
    font-weight: 650;
    margin: 0;
}

.form-container .form-card > .card-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.form-container .form-group {
    margin-bottom: 1rem;
}

.form-container .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: .35rem;
}

.form-container .form-control,
.form-container .form-select {
    border-radius: 9px;
    border-color: #dce1e7;
    min-height: 40px;
    background: #fbfcfd;
}

.form-container .form-control:focus,
.form-container .form-select:focus {
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 .2rem rgba(255, 107, 53, .12);
    background: #fff;
}

.form-container .form-text,
.form-container small.form-text {
    display: block;
    font-size: .75rem;
    color: #9ca3af;
    margin-top: .25rem;
}

.form-container .required {
    color: #dc2626;
    font-weight: 700;
}

.row-spacing {
    margin-bottom: .5rem;
}

.btn-group-custom {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--admin-border);
}

.btn-submit {
    background: linear-gradient(135deg, var(--admin-accent) 0%, var(--admin-accent-soft) 100%);
    border: none;
    color: #fff;
    border-radius: 9px;
    padding: .55rem 1.25rem;
    font-weight: 600;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: filter .15s ease, box-shadow .15s ease;
}

.btn-submit:hover {
    color: #fff;
    filter: brightness(1.03);
    box-shadow: 0 4px 12px rgba(255, 107, 53, .28);
}

.btn-cancel {
    background: #fff;
    border: 1px solid #dce1e7;
    color: #6b7280;
    border-radius: 9px;
    padding: .55rem 1.25rem;
    font-weight: 500;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn-cancel:hover {
    background: #f8fafc;
    color: #374151;
    border-color: #cbd5e1;
}

/* ==================== Permission Assignment ==================== */
.permission-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--admin-border);
}

.permission-section > h6 {
    font-weight: 700;
    color: #1f2937;
}

.permission-module {
    background: #fafbfc;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    margin-bottom: .85rem;
    overflow: hidden;
}

.permission-module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    background: #f3f4f6;
    border-bottom: 1px solid var(--admin-border);
}

.permission-module-title {
    margin: 0;
    font-size: .875rem;
    font-weight: 700;
    color: #374151;
}

.module-select-all {
    font-size: .8rem;
    color: var(--admin-accent);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.module-select-all:hover {
    color: #c45a18;
    text-decoration: underline;
}

.permission-module-body {
    padding: .85rem 1rem;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .5rem .75rem;
}

.permission-item {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    padding: .45rem .55rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eceff3;
    transition: border-color .15s ease, background .15s ease;
}

.permission-item:hover {
    border-color: #ffd7b8;
    background: #fffaf7;
}

.permission-checkbox {
    margin-top: .15rem;
    flex-shrink: 0;
}

.permission-label {
    font-size: .8125rem;
    color: #374151;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.35;
    margin: 0;
}

/* ==================== Sub Pages (page-wrap) ==================== */
.page-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 2rem;
    background: linear-gradient(180deg, #f7f8fa 0%, #eef1f4 100%);
    min-height: calc(100vh - 200px);
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.admin-page .page-wrap {
    padding: 0;
    background: transparent;
    min-height: 0;
    margin: 0;
    max-width: none;
}

.form-container .form-card:has(.permission-section) {
    max-width: 1100px;
}

.info-card:has(.info-title) {
    background: linear-gradient(135deg, var(--admin-accent) 0%, var(--factory-accent) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 1.15rem 1.35rem;
    margin-bottom: 1rem;
    box-shadow: 0 6px 18px rgba(255, 107, 53, .2);
}

.info-card .info-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .65rem;
}

.info-card .info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    font-size: .85rem;
    opacity: .95;
}

.hero {
    background: linear-gradient(135deg, var(--admin-accent) 0%, var(--factory-accent) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 6px 18px rgba(255, 107, 53, .2);
}

.hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.hero-sub {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.hero-badge {
    background: rgba(255, 255, 255, .2) !important;
    font-weight: 600;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(255, 255, 255, .15);
    border-radius: 999px;
    padding: .25rem .65rem;
    font-size: .8rem;
}

.section-card {
    background: var(--admin-surface);
    border-radius: 14px;
    border: 1px solid var(--admin-border);
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.section-card > .section-title,
.section-card .section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0;
}

.section-card .section-title .icon {
    color: var(--admin-accent);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
}

.info-grid .info-item {
    border: 1px solid #eceff3;
    border-radius: 10px;
    padding: .75rem .85rem;
    background: #fafbfc;
}

.info-grid .info-k {
    font-size: .75rem;
    color: #7a8793;
    margin-bottom: .2rem;
}

.info-grid .info-v {
    font-size: .9rem;
    font-weight: 600;
    color: #2f3a45;
    word-break: break-word;
}

/* ==================== Mobile Stock (standalone) ==================== */
body.mobile-stock-page {
    background: linear-gradient(180deg, #f7f8fa 0%, #eef1f4 100%);
    min-height: 100vh;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.mobile-stock-page .page-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
}

.mobile-stock-page .type-badge {
    display: inline-block;
    background: #fff1ea;
    color: var(--admin-accent);
    border: 1px solid #ffd7b8;
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .75rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.mobile-stock-page .page-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 .35rem;
}

.mobile-stock-page .page-subtitle {
    font-size: .875rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

.mobile-stock-page .info-card:has(.info-row) {
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    color: inherit;
}

.mobile-stock-page .info-row {
    display: flex;
    gap: .75rem;
    margin-bottom: .65rem;
}

.mobile-stock-page .info-row:last-child {
    margin-bottom: 0;
}

.mobile-stock-page .info-col {
    flex: 1;
    min-width: 0;
}

.mobile-stock-page .info-label {
    display: block;
    font-size: .72rem;
    color: #9ca3af;
    font-weight: 600;
    margin-bottom: .15rem;
    letter-spacing: .03em;
}

.mobile-stock-page .info-value {
    display: block;
    font-size: .95rem;
    font-weight: 600;
    color: #1f2937;
    word-break: break-all;
}

.mobile-stock-page .stock-value {
    color: var(--admin-accent);
    font-size: 1.1rem;
}

.mobile-stock-page .form-card {
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    padding: 1.15rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.mobile-stock-page .form-section {
    margin-bottom: 1rem;
}

.mobile-stock-page .form-section:last-of-type {
    margin-bottom: .5rem;
}

.mobile-stock-page .form-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: .4rem;
}

.mobile-stock-page .form-control,
.mobile-stock-page .form-select {
    border-radius: 9px;
    border: 1px solid #dce1e7;
    min-height: 44px;
    width: 100%;
    padding: .5rem .75rem;
    font-size: 1rem;
    background: #fbfcfd;
}

.mobile-stock-page .form-control:focus,
.mobile-stock-page .form-select:focus {
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 .2rem rgba(255, 107, 53, .12);
    outline: none;
    background: #fff;
}

.mobile-stock-page textarea.form-control {
    min-height: 80px;
    resize: vertical;
}

.mobile-stock-page .form-hint {
    font-size: .75rem;
    color: #9ca3af;
    margin-top: .35rem;
}

.mobile-stock-page .type-toggle {
    display: flex;
    gap: .5rem;
}

.mobile-stock-page .type-toggle-btn {
    flex: 1;
    border: 2px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    padding: .65rem .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all .15s ease;
}

.mobile-stock-page .type-toggle-btn.active-outbound {
    border-color: #f97316;
    background: #fff7ed;
    color: #c2410c;
}

.mobile-stock-page .type-toggle-btn.active-inbound {
    border-color: #22c55e;
    background: #f0fdf4;
    color: #15803d;
}

.mobile-stock-page .type-toggle-btn.active-stocktake {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1d4ed8;
}

.mobile-stock-page .submit-btn {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: .85rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: #22c55e;
    cursor: pointer;
    margin-top: .5rem;
    transition: filter .15s ease;
}

.mobile-stock-page .submit-btn:hover {
    filter: brightness(1.05);
}

.mobile-stock-page .pair-action-btns {
    display: flex;
    gap: .5rem;
    margin-bottom: .5rem;
}

.mobile-stock-page .pair-action-btns.is-hidden {
    display: none;
}

.mobile-stock-page #pairBox {
    border-radius: 10px;
    font-size: .875rem;
    margin-bottom: .75rem;
}

.mobile-stock-page .next-scan-btn {
    width: 100%;
    border: 2px solid var(--admin-accent);
    border-radius: 10px;
    padding: .85rem;
    margin-top: .75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--admin-accent);
    background: #fff;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.mobile-stock-page .next-scan-btn:hover {
    background: #fff1ea;
}

.mobile-scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.mobile-scan-overlay[hidden] {
    display: none !important;
}

.mobile-scan-panel {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}

.mobile-scan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    background: linear-gradient(135deg, var(--admin-accent) 0%, var(--admin-accent-soft) 100%);
    color: #fff;
}

.mobile-scan-title {
    font-size: .95rem;
    font-weight: 700;
}

.mobile-scan-close {
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border-radius: 8px;
    padding: .3rem .65rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.mobile-scan-reader {
    width: 100%;
    min-height: 280px;
    background: #000;
}

.mobile-scan-reader video {
    border-radius: 0 !important;
}

.mobile-scan-hint {
    padding: .75rem 1rem 1rem;
    font-size: .8rem;
    color: #6b7280;
    text-align: center;
}

/* ==================== File Manager ==================== */
.file-thumb,
.thumb {
    width: 56px;
    height: 56px;
    max-width: 56px;
    max-height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--admin-border);
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    background: #f8f9fa;
}

.file-thumb:hover,
.thumb:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.badge-soft {
    display: inline-block;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: .15rem .45rem;
    font-size: .72rem;
    color: #4b5563;
    font-weight: 600;
}

.file-preview-body {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-preview-media {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 10px;
    border: 1px solid var(--admin-border);
    background: #fff;
}

.file-preview-placeholder {
    padding: 1.5rem 1rem;
    color: #6b7280;
}

.file-path-text {
    max-width: 280px;
    word-break: break-all;
}

/* ==================== Responsive ==================== */
@media (max-width: 992px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .admin-page,
    .file-container,
    .form-container,
    .detail-page { padding: 1rem; }
    .form-container .form-card > .card-body { padding: 1rem; }
    .permission-grid { grid-template-columns: 1fr; }
    .permission-module-header { flex-direction: column; align-items: flex-start; }
    .detail-page .plan-title { font-size: 1.1rem; }
    .detail-page .supply-basic-image { width: 100%; }
    .detail-page .item-status-filter-bar { padding: 0.65rem 0.85rem; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .search-card .row > [class*="col-"] { margin-bottom: .35rem; }
    .admin-detail-meta,
    .pgd-meta { grid-template-columns: 1fr; }
    .action-buttons { flex-wrap: wrap; }
    .auth-page .login-card { padding: 28px 20px 24px; }
}

@media (min-width: 768px) {
    .workshop-wrap { padding: 20px 20px 40px; }
    .workshop-header { position: static; padding: 0; margin-bottom: 18px; background: transparent; }
    .workshop-topbar { flex-wrap: wrap; padding: 18px 22px; }
    .workshop-user-title { font-size: 22px; }
    .workshop-page .stats-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
    .workshop-page .stats-card { padding: 18px 20px; }
    .workshop-page .stats-number { font-size: 2rem; }
    .step-tabs { flex-wrap: wrap; overflow: visible; }
    .step-tab { min-width: 140px; }
    .filter-toggle { display: none; }
    .filter-body { display: block !important; padding: 18px 20px; }
    .filter-row { display: grid; grid-template-columns: 180px 1fr auto; align-items: end; }
    .task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
    .task-actions { flex-direction: row; flex-wrap: wrap; }
    .task-actions .btn, .task-card-foot > .btn { width: auto; min-height: auto; font-size: inherit; border-radius: 0.375rem; }
    .workshop-bottom-bar { display: none; }
    .workshop-icon-btn { display: none; }
    .workshop-detail { gap: 16px; }
    .workshop-detail-summary,
    .workshop-detail-timeline,
    .workshop-detail-action { padding: 18px 20px; }
    .workshop-detail-actions { flex-direction: row; flex-wrap: wrap; }
    .workshop-detail-actions .btn { width: auto; min-height: auto; font-size: inherit; border-radius: 0.375rem; }
}

@media (max-width: 767px) {
    .workshop-topbar-actions .btn-desktop { display: none; }
    .workshop-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workshop-detail-metric__value { font-size: 1.05rem; }
}

/* Material form image upload in modal */
.material-form-image-wrap {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}
.material-form-image-wrap .upload-box {
    width: 100%;
    max-width: 280px;
    min-height: 200px;
    margin: 0 auto;
}
.material-form-image-wrap .upload-box .upload-inner .icon { font-size: 40px; }

/* Mobile progress goods image upload */
.mobile-image-upload-box {
    width: 100%;
    min-height: 200px;
    border: 2px dashed #81c784;
    border-radius: 12px;
    background: #e8f5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.mobile-image-upload-box .upload-placeholder {
    text-align: center;
    color: #2e7d32;
    padding: 16px;
}
.mobile-image-upload-box .upload-placeholder i {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
    opacity: .75;
}
.mobile-image-upload-box .upload-placeholder small {
    display: block;
    margin-top: 6px;
    opacity: .8;
}
.mobile-image-preview {
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    display: block;
}

/* Progress goods unified mobile upload page */
.pg-mobile-upload-page .page-wrap {
    padding-bottom: 110px;
}
.pg-mobile-search-card {
    margin-bottom: 12px;
    padding: 12px;
}
.pg-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pg-mobile-list-empty {
    text-align: center;
    color: #6c757d;
    padding: 24px 12px;
}
.pg-mobile-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.pg-mobile-item.is-selected {
    border-color: #FF6B35;
    background: #fff8f4;
    box-shadow: 0 0 0 2px rgba(255, 107, 53, .12);
}
.pg-mobile-item.is-anchor {
    border-color: #FF6B35;
}
.pg-mobile-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.pg-mobile-meta-code {
    flex: 0 1 auto;
    max-width: 42%;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-mobile-meta-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-mobile-meta-cat {
    flex: 0 0 auto;
    max-width: 28%;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-mobile-item-select {
    display: none;
}
.pg-mobile-item.is-selected .pg-mobile-item-select {
    display: none;
}
.pg-mobile-pair-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}
.pg-mobile-selection-bar,
.pg-mobile-remarks-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    z-index: 90;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.pg-mobile-selection-bar {
    bottom: 118px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.pg-mobile-selection-main {
    flex: 1;
    min-width: 0;
}
.pg-mobile-selection-title {
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-mobile-selection-sub {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.pg-mobile-selection-clear {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    flex-shrink: 0;
}
.pg-mobile-remarks-bar {
    bottom: 72px;
    padding: 8px 10px;
}
.pg-mobile-camera-btn.is-disabled,
.pg-mobile-camera-btn:disabled {
    opacity: .55;
    box-shadow: none;
}
.pg-mobile-item-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pg-mobile-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pg-mobile-item-thumb .no-thumb {
    color: #9ca3af;
    font-size: 22px;
}
.pg-mobile-item-main {
    flex: 1;
    min-width: 0;
}
.pg-mobile-item-name {
    font-weight: 700;
    color: #1f2937;
    font-size: 15px;
}

.pg-mobile-item-category {
    margin-top: 2px;
    color: #495057;
    font-size: 12px;
}
.pg-mobile-item-category.muted {
    color: #adb5bd;
}
.pg-mobile-item-code {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.pg-mobile-stock-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.pg-mobile-stock-label {
    flex: 0 0 auto;
    color: #6c757d;
    font-size: 13px;
}
.pg-mobile-stock-input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 34px;
    padding: 4px 10px;
    font-size: 14px;
}
.pg-mobile-stock-unit {
    flex: 0 0 auto;
    color: #6c757d;
    font-size: 12px;
}
.pg-mobile-stock-save {
    flex: 0 0 auto;
    min-width: 52px;
    padding: 5px 12px;
    white-space: nowrap;
}
.pg-mobile-item-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: #0d6efd;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.pg-mobile-item-stock i {
    font-size: 11px;
    opacity: .75;
}
.pg-mobile-search-card .form-control.mb-2 {
    margin-bottom: 8px !important;
}
.pg-mobile-item-remarks {
    font-size: 12px;
    color: #4b5563;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-mobile-item-remarks.muted {
    color: #9ca3af;
}
.pg-mobile-item-edit {
    border: none;
    background: #f3f4f6;
    color: #4b5563;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pg-mobile-camera-btn {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 999px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #FF6B35, #FF8A5B);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(255, 107, 53, .35);
}
.pg-mobile-camera-btn i {
    font-size: 18px;
}
.pg-mobile-sheet {
    position: fixed;
    inset: 0;
    z-index: 200;
}
.pg-mobile-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}
.pg-mobile-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pg-mobile-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e9ecef;
}
.pg-mobile-sheet-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}
.pg-mobile-sheet-close {
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #6b7280;
}
.pg-mobile-sheet-body {
    padding: 14px 16px 24px;
    overflow-y: auto;
}
.pg-mobile-preview-wrap {
    text-align: center;
    margin-bottom: 14px;
}
.pg-mobile-preview-wrap img {
    max-width: 100%;
    max-height: 180px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}
.pg-mobile-picker-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pg-mobile-picker-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: 10px 12px;
    text-align: left;
}
.pg-mobile-picker-item.is-selected {
    border-color: #FF6B35;
    background: #fff7f2;
}
.pg-mobile-picker-item .name {
    display: block;
    font-weight: 600;
    color: #1f2937;
}
.pg-mobile-picker-item .code {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.pg-mobile-item-summary {
    background: #f8f9fb;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
body.pg-mobile-sheet-open {
    overflow: hidden;
}

/* ==================== Import Pages ==================== */
.import-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.08); border: 1px solid #e9ecef; overflow: hidden; }
.import-card .card-header { background: linear-gradient(135deg, #FF6B35, #FF8A5B); color: #fff; padding: 1rem 1.25rem; }
.import-card .card-body { padding: 1.25rem; }
.import-tip { color: #6c757d; }
.import-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.import-table th, .import-table td { border: 1px solid #e9ecef; padding: .6rem .75rem; vertical-align: top; }
.import-table th { background: #f8f9fa; }

/* ==================== Back To Top ==================== */
.back-to-top-btn {
    position: fixed;
    right: 1.25rem;
    bottom: 1.5rem;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35, #FF8A5B);
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease, box-shadow .2s ease;
}

.back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn:hover,
.back-to-top-btn:focus {
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 107, 53, 0.45);
    outline: none;
}

.back-to-top-btn__text {
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
}

@media (min-width: 768px) {
    .back-to-top-btn {
        right: 1.75rem;
        bottom: 2rem;
        width: 3.25rem;
        height: 3.25rem;
    }
}

/* ==================== WL Material Board Standalone ==================== */
body.wl-board-page {
    background: #f3f4f6;
    color: #1f2937;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}

.wl-board-wrap {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: calc(8px + var(--safe-top)) 16px 0;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
}

body.wl-board-page .wl-board-content {
    padding-bottom: calc(28vh + var(--safe-bottom));
}

body.wl-board-page .admin-page,
body.wl-board-page .detail-page {
    padding: 0;
    margin: 0;
    background: transparent;
    min-height: 0;
}

body.wl-board-page .detail-page .wl-detail-group__body--grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

body.wl-board-page .detail-page .product-card--sku .sku-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.wl-board-page .detail-page .product-card--sku .sku-card__media--dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: unset;
    gap: 8px;
    min-height: 0;
    max-height: none;
    margin-bottom: 0.45rem;
}

body.wl-board-page .detail-page .product-card--sku .sku-card__media--single {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    margin-bottom: 0.55rem;
}

body.wl-board-page .detail-page .product-card--sku .sku-card__media--single .sku-card__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: 240px;
    object-fit: contain;
    object-position: center;
}

body.wl-board-page .detail-page .product-card--sku .sku-card__main {
    position: relative;
    z-index: 1;
    min-width: 0;
    background: #fff;
}

body.wl-board-page .detail-page .product-card--sku .sku-card__shot .sku-card__image {
    max-height: 280px;
    min-height: 0;
}

body.wl-board-page .detail-page .product-card--sku .sku-card__tags,
body.wl-board-page .detail-page .product-card--sku .sku-card__meta {
    margin-bottom: 0.35rem;
}

.wl-board-header {
    position: sticky;
    top: var(--safe-top, 0px);
    z-index: 110;
    padding: 0 0 10px;
    margin: 0 -4px 10px;
    background: #f3f4f6;
}

.wl-board-topbar {
    position: relative;
    z-index: 111;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border-radius: 14px;
    padding: 8px 14px;
    box-shadow: 0 0 0 10px #f3f4f6, 0 1px 4px rgba(0, 0, 0, 0.06);
}

.wl-board-topbar .wl-board-title {
    margin: 0;
}

.wl-board-toolbar {
    margin-top: 8px;
    background: #fff;
    border-radius: 14px;
    padding: 10px 14px 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.wl-board-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
}

.wl-board-meta {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.45;
}

.wl-board-stats-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    margin-top: 8px;
    font-size: 13px;
    color: #4b5563;
}

.wl-board-stats-inline strong {
    color: #111827;
}

.wl-board-topbar-actions {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
}

.wl-board-icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
}

.wl-board-text-btn {
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 14px;
    white-space: nowrap;
}

.wl-combo-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px 24px;
    background: rgba(15, 23, 42, 0.45);
}

.wl-combo-modal[hidden] {
    display: none !important;
}

.wl-combo-modal__dialog {
    width: min(720px, 100%);
    max-height: calc(100vh - 72px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.wl-combo-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e8ecf0;
}

.wl-combo-modal__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.wl-combo-modal__body {
    overflow: auto;
    padding: 0;
}

.wl-combo-modal__body .table {
    margin: 0;
}

.wl-combo-modal__body th,
.wl-combo-modal__body td {
    padding: 10px 16px;
}

body.wl-combo-modal-open {
    overflow: hidden;
}

.wl-board-filter-toggle {
    display: none;
}

.wl-board-header.is-compact .wl-board-toolbar {
    display: none;
}

.wl-board-header.is-compact .wl-board-filter-toggle {
    display: inline-flex;
}

.wl-board-header.is-compact.is-filter-open .wl-board-toolbar {
    display: block;
}

.wl-board-header.is-compact.is-filter-open .wl-board-filter-toggle {
    color: #fff;
    background: #FF6B35;
    border-color: #FF6B35;
}

.wl-board-content {
    padding: 0;
}

.wl-board-content .detail-container {
    padding: 0;
}

.wl-board-content .items-card {
    margin-bottom: 0;
}

.wl-board-scroll-top {
    bottom: calc(1.5rem + var(--safe-bottom));
}

.wl-board-admin-link-bar {
    margin-bottom: 0.75rem;
    text-align: right;
}

.sku-card__urgent {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 0 6px;
    min-height: 18px;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.sku-card__replenish {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 6px;
    padding: 2px 6px;
    min-height: 18px;
    border-radius: 999px;
    background: #fef3c7;
    color: #b45309;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
}

.sku-card__rework {
    margin: 8px 10px 0;
    padding: 8px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
}

.sku-card__rework-title {
    font-size: 12px;
    font-weight: 700;
    color: #b45309;
    margin-bottom: 6px;
}

.sku-card__rework-line {
    display: grid;
    grid-template-columns: minmax(3.6em, 1fr) 1fr 1fr;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.sku-card__rework-line + .sku-card__rework-line {
    margin-top: 4px;
}

.sku-card__rework-part {
    color: #0f172a;
}

.sku-card__rework-have {
    text-align: center;
    color: #334155;
}

.sku-card__rework-line.is-done .sku-card__rework-state {
    color: #15803d;
    text-align: right;
}

.sku-card__rework-line.is-gap .sku-card__rework-state {
    color: #b45309;
    text-align: right;
}

.sku-card__media--dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: start;
}

.sku-card__shot {
    margin: 0;
    text-align: center;
}

.sku-card__shot .sku-card__image {
    width: 100%;
}

.sku-card__shot figcaption {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
}

.sku-card__image-placeholder--dual {
    grid-column: 1 / -1;
}

.sku-card__make {
    margin: 6px 0 0;
    padding: 8px 0 0;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.sku-card__make-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.sku-card__make-head,
.sku-card__make-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.2em 4.2em;
    gap: 4px;
    align-items: center;
}

.sku-card__make:not(.sku-card__make--qc) .sku-card__make-row {
    grid-template-columns: minmax(3.2em, 0.72fr) minmax(5.5em, 1fr) minmax(5.5em, 1fr);
    gap: 8px;
    align-items: end;
}

.sku-card__make-head {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-align: center;
}

.sku-card__make-head span:first-child {
    text-align: left;
}

.sku-card__make-row--qc {
    grid-template-columns: 2.6em minmax(0, 1fr) 4.8em;
    gap: 8px;
}

.sku-card__make-partcell,
.sku-card__make-part {
    display: flex;
    min-width: 0;
}

.sku-card__make-partcell {
    align-items: baseline;
    gap: 4px;
}

.sku-card__make:not(.sku-card__make--qc) .sku-card__make-part {
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    padding-bottom: 6px;
}

.sku-card__make-name {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.sku-card__make-hint {
    font-size: 11px;
    color: #64748b;
    min-width: 0;
    line-height: 1.35;
}

.sku-card__make-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
}

.sku-card__make-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.3;
}

.sku-card__make-inputs {
    display: flex;
    gap: 4px;
}

.sku-card__make .js-uv-print,
.sku-card__make .js-uv-scrap,
.sku-card__make .js-qc-confirm {
    width: 100%;
    min-height: 36px;
    height: 36px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding: 4px 6px;
}

.sku-card__make .js-qc-confirm {
    min-height: 30px;
    height: 30px;
    font-size: 14px;
    padding: 2px 4px;
}

.sku-card__make .js-uv-make {
    width: 100%;
    min-height: 36px;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 8px;
}

.product-card--urgent {
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

.product-card--rework {
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.22);
}

.wl-uv-top-filter {
    margin-top: 12px;
    padding: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wl-uv-top-filter .item-status-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wl-uv-top-filter .item-status-filter-bar__label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
    margin-right: 2px;
}

.wl-uv-top-filter .item-status-filter-btn {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 999px;
    min-height: 30px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
}

.wl-uv-top-filter .item-status-filter-btn.filter-all.active,
.wl-uv-top-filter .item-status-filter-btn.filter-all:hover {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.wl-uv-top-filter .item-status-filter-btn.filter-urgent {
    border-color: #fca5a5;
    color: #b91c1c;
}

.wl-uv-top-filter .item-status-filter-btn.filter-urgent:hover,
.wl-uv-top-filter .item-status-filter-btn.filter-urgent.active {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.wl-uv-top-filter .item-status-filter-btn.filter-normal:hover,
.wl-uv-top-filter .item-status-filter-btn.filter-normal.active {
    background: #4b5563;
    border-color: #4b5563;
    color: #fff;
}

.wl-uv-top-filter .item-status-filter-btn.filter-print.active,
.wl-uv-top-filter .item-status-filter-btn.filter-print:hover {
    background: #ea580c;
    border-color: #ea580c;
    color: #fff;
}

.wl-uv-top-filter .item-status-filter-btn.filter-rework {
    border-color: #fcd34d;
    color: #b45309;
}

.wl-uv-top-filter .item-status-filter-btn.filter-rework:hover,
.wl-uv-top-filter .item-status-filter-btn.filter-rework.active {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
}

.wl-uv-top-filter .item-status-filter-row--search .wl-uv-search-input {
    width: 140px;
    min-height: 30px;
}

.wl-uv-filter-empty {
    text-align: center;
    padding: 2rem 1rem;
}

.wl-uv-type-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

.wl-uv-type-chip--1 { background: #fff7ed; color: #c2410c; }
.wl-uv-type-chip--2 { background: #ecfeff; color: #0e7490; }
.wl-uv-type-chip--3 { background: #f5f3ff; color: #6d28d9; }
.wl-uv-type-chip--4 { background: #ecfdf5; color: #047857; }

.wl-uv-priority {
    margin-bottom: 1.5rem;
}

.wl-uv-priority__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
}

.wl-uv-priority--urgent .wl-uv-priority__title {
    color: #b91c1c;
    border-bottom-color: #fecaca;
}

.wl-uv-print-type {
    margin-bottom: 1.25rem;
}

.wl-uv-print-type__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.wl-uv-print-type__name {
    font-weight: 700;
    color: #111827;
}

.wl-uv-top-filter .item-status-filter-btn.filter-scrap {
    border-color: #fcd34d;
    color: #b45309;
}

.wl-uv-top-filter .item-status-filter-btn.filter-scrap:hover,
.wl-uv-top-filter .item-status-filter-btn.filter-scrap.active {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
}

.wl-uv-top-filter .item-status-filter-btn.filter-pass {
    border-color: #6ee7b7;
    color: #047857;
}

.wl-uv-top-filter .item-status-filter-btn.filter-pass:hover,
.wl-uv-top-filter .item-status-filter-btn.filter-pass.active {
    background: #059669;
    border-color: #059669;
    color: #fff;
}

.product-card--qc-scrap {
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.22);
}

.sku-card__make--qc {
    gap: 6px;
    padding: 10px 10px 8px;
    margin-top: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.sku-card__make-head--qc {
    grid-template-columns: 2.6em minmax(0, 1fr) 4.8em;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
}

.sku-card__make-head--qc span:first-child,
.sku-card__make-row--qc .sku-card__make-name {
    text-align: left;
}

.sku-card__make-head--qc span:nth-child(2),
.sku-card__make-row--qc .sku-card__make-hint {
    text-align: center;
}

.sku-card__make-head--qc span:last-child {
    text-align: center;
}

.sku-card__make-row--qc .sku-card__make-hint {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.sku-card__make-row--qc .sku-card__make-hint small {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #c2410c;
}

.sku-card__qc-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.sku-card__qc-actions .btn {
    min-height: 36px;
    font-size: 13px;
    padding: 6px 8px;
    font-weight: 700;
    width: 100%;
    margin: 0;
}

.sku-card__qc-actions .js-qc-submit {
    margin-left: 0;
}

/* ==================== Part usage daily records ==================== */
/* 全宽铺满主内容区 */
body:has(.part-usage-page) .app-content {
    padding-left: 0;
    padding-right: 0;
}

body:has(.part-usage-page) .app-content > .container-fluid {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body:has(.part-usage-page) .app-footer {
    display: none;
}

.part-usage-page {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 1rem 1.25rem 1.25rem;
    min-height: calc(100vh - 120px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.part-usage-page .part-usage-stats,
.part-usage-page .part-usage-filter {
    flex-shrink: 0;
    margin-bottom: 0;
}

.part-usage-page .part-usage-table-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
}

.part-usage-page .part-usage-table-card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.part-usage-page .part-usage-table-card .table-responsive {
    flex: 1 1 auto;
    max-height: none;
    overflow: auto;
}

.part-usage-stat--temple .stat-icon {
    background: #eef6ff;
    color: #2563eb;
}

.part-usage-stat--scrap .stat-icon {
    background: #fdeceb;
    color: #d64545;
}

.part-usage-stat--scrap .stat-value {
    color: #dc2626;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.part-usage-stat-sep {
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.85em;
}

.part-usage-filter {
    margin-bottom: 1rem;
}

.part-usage-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--admin-border);
}

.part-usage-table-card {
    overflow: hidden;
}

.part-usage-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.part-usage-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.part-usage-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.part-usage-legend-item::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.part-usage-legend-item--make::before {
    background: #2563eb;
}

.part-usage-legend-item--scrap::before {
    background: #dc2626;
}

.part-usage-table thead th {
    white-space: nowrap;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: #64748b;
    border-bottom: 1px solid #e8ecf0;
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 1;
}

.part-usage-table tbody td {
    vertical-align: middle;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    border-color: #f1f5f9;
}

.part-usage-table tbody tr:hover {
    background: #fffaf7;
}

.part-usage-date {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #334155;
    letter-spacing: 0.01em;
}

.part-usage-operator {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #fff1ea;
    color: #c2410c;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
}

.part-usage-item-id {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
}

.part-usage-product {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: #0f172a;
    vertical-align: bottom;
}

.part-usage-color {
    display: inline-block;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.12rem 0.45rem;
    vertical-align: bottom;
}

.part-usage-qty {
    display: inline-flex;
    min-width: 2rem;
    height: 1.7rem;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0 0.45rem;
}

.part-usage-qty--make {
    background: #eff6ff;
    color: #1d4ed8;
}

.part-usage-qty--scrap {
    background: #fef2f2;
    color: #b91c1c;
}

.part-usage-qty--zero {
    background: transparent;
    color: #cbd5e1;
    font-weight: 500;
}

.part-usage-plan-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--admin-accent);
    text-decoration: none;
    font-weight: 700;
    max-width: 100%;
}

.part-usage-plan-link:hover {
    color: #e85a24;
    text-decoration: underline;
}

.part-usage-plan-name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.part-usage-plan-icon {
    font-size: 0.68rem;
    opacity: 0.75;
    flex-shrink: 0;
}

.part-usage-plan-meta {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: #94a3b8;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
}

.part-usage-dot {
    opacity: 0.7;
}

.part-usage-empty {
    text-align: center;
    padding: 3.2rem 1rem 3.5rem;
}

.part-usage-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.9rem;
    border-radius: 18px;
    background: #fff1ea;
    color: var(--admin-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
}

.part-usage-empty-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
}

.part-usage-empty-desc {
    margin: 0;
    font-size: 0.86rem;
    color: #94a3b8;
}

@media (max-width: 768px) {
    .part-usage-filter-actions {
        margin-top: 0.85rem;
    }

    .part-usage-plan-name {
        max-width: 140px;
    }

    .part-usage-product,
    .part-usage-color {
        max-width: 110px;
    }
}

/* ===== WL UV 看板（不影响品检 / 计划详情） ===== */
body.wl-uv-compact.wl-board-page {
    background: #fff;
}

body.wl-uv-compact .wl-board-wrap {
    background: #fff;
}
body.wl-uv-compact .wl-board-topbar {
    gap: 12px;
    padding: 6px 12px;
    border-radius: 12px;
    background: #f3f4f6;
    box-shadow: none;
}

body.wl-uv-compact .wl-board-title {
    font-size: 16px;
    margin: 0;
}

body.wl-uv-compact .wl-uv-compact-stats {
    flex: 1 1 auto;
    margin: 0;
    justify-content: flex-end;
    gap: 0.4rem 0.85rem;
    font-size: 12px;
}

body.wl-uv-compact .wl-board-toolbar {
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #f3f4f6;
    box-shadow: none;
}

body.wl-uv-compact .wl-uv-top-filter {
    margin-top: 0;
    padding: 0;
    gap: 6px;
}

body.wl-uv-compact .wl-uv-top-filter .item-status-filter-btn {
    min-height: 26px;
    padding: 0 10px;
    font-size: 12px;
}

body.wl-uv-compact .wl-uv-top-filter .item-status-filter-bar__label {
    font-size: 12px;
    min-width: 2.2em;
}

body.wl-uv-compact .wl-uv-rules {
    position: relative;
}

body.wl-uv-compact .wl-uv-rules summary {
    list-style: none;
    cursor: pointer;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    min-height: 40px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    background: #fff;
}

body.wl-uv-compact .wl-uv-rules summary::-webkit-details-marker {
    display: none;
}

body.wl-uv-compact .wl-uv-rules p {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 120;
    width: min(360px, 70vw);
    margin: 0;
    padding: 10px 12px;
    background: #111827;
    color: #f9fafb;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

body.wl-uv-compact .wl-board-content .items-card,
body.wl-uv-compact .admin-page .items-card,
body.wl-uv-compact .detail-page .items-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    margin-bottom: 0;
}

body.wl-uv-compact .wl-board-content .items-card > .card-body,
body.wl-uv-compact .detail-page .items-card > .card-body {
    padding: 0;
    background: transparent;
    gap: 0.15rem;
}

body.wl-uv-compact .wl-uv-priority {
    margin-bottom: 1rem;
}

body.wl-uv-compact .wl-uv-priority__title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 8px;
    padding: 0 0 4px;
    letter-spacing: 0.04em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

body.wl-uv-compact .wl-uv-priority--urgent .wl-uv-priority__title {
    color: #b91c1c;
    border-bottom-color: #fecaca;
}

body.wl-uv-compact .wl-uv-print-type {
    margin-bottom: 0.85rem;
}

body.wl-uv-compact .wl-uv-print-type__header {
    gap: 6px;
    margin-bottom: 6px;
}

body.wl-uv-compact .wl-uv-print-type__name {
    font-size: 13px;
    font-weight: 700;
}

body.wl-uv-compact .detail-page .wl-detail-group {
    margin-bottom: 0.7rem;
}

body.wl-uv-compact .detail-page .wl-detail-group__header--compact {
    gap: 0.5rem 1rem;
    padding: 0.55rem 0.9rem;
    margin-bottom: 0.7rem;
    background: #f3f4f6;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    color: #64748b;
}

body.wl-uv-compact .detail-page .wl-detail-group__header--compact .wl-detail-group__model {
    color: #111827;
    font-size: 15px;
}

body.wl-uv-compact .detail-page .wl-detail-group__header--compact .wl-detail-group__pair {
    color: #334155;
}

body.wl-uv-compact .detail-page .wl-detail-group__header--compact .wl-detail-group__qty {
    margin-left: auto;
    background: none;
    color: #334155;
    font-weight: 700;
}

body.wl-uv-compact .detail-page .wl-detail-group__body--grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 0.9rem;
    align-items: stretch;
}

body.wl-uv-compact .detail-page .wl-detail-group__body--grid .sku-card-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

body.wl-uv-compact .detail-page .product-card--uv-compact {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    padding: 0.85rem 0.95rem 0.9rem;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    box-shadow: none;
}

body.wl-uv-compact .detail-page .product-card--uv-compact.product-card--stock-empty,
body.wl-uv-compact .detail-page .product-card--uv-compact.product-card--stock-low,
body.wl-uv-compact .detail-page .product-card--uv-compact.product-card--rework {
    background: #f3f4f6;
    border-width: 2px;
    border-style: solid;
    box-shadow: none;
}

body.wl-uv-compact .detail-page .product-card--uv-compact.product-card--urgent {
    background: #f3f4f6;
    border: 2px solid #dc2626;
    box-shadow: none;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__top {
    margin-bottom: 0.55rem;
    gap: 0.35rem 0.5rem;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__top-right-text {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__status {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__urgent {
    margin-left: 0;
    background: #dc2626;
    color: #fff;
    min-height: 16px;
    font-size: 10px;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__replenish {
    margin-left: 0;
    background: #f3f4f6;
    color: #6b7280;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__media--dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 0.7rem;
    max-height: none;
    align-items: end;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__shot {
    margin: 0;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__shot .sku-card__image,
body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__image {
    width: 100%;
    height: auto;
    max-height: 220px;
    min-height: 0;
    object-fit: contain;
    object-position: center bottom;
    border-radius: 8px;
    cursor: zoom-in;
    background: transparent;
    display: block;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__image-placeholder {
    min-height: 120px;
    height: auto;
    font-size: 13px;
    background: #fff;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__parts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0.7rem;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__part-row {
    display: grid;
    grid-template-columns: 3em minmax(0, 1fr) 3em minmax(0, 1fr);
    gap: 6px 10px;
    align-items: baseline;
    padding: 6px 8px;
    background: #fff;
    border-radius: 8px;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__part-row--paint {
    grid-template-columns: 3em minmax(0, 1fr);
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__part-label {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__part-code {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.02em;
    word-break: break-all;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__metrics {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 0.55rem;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 8px;
    line-height: 1.2;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__metric-label {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__metric-value {
    font-size: 18px;
    font-weight: 800;
    color: #334155;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__metric--stock .sku-card__metric-value {
    font-size: 24px;
    letter-spacing: -0.03em;
    color: #111827;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__meta-stock--empty .sku-card__metric-value,
body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__meta-stock--error .sku-card__metric-value {
    color: #dc2626;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__meta-stock--low .sku-card__metric-value {
    color: #c2410c;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__meta-stock--miss .sku-card__metric-value {
    color: #94a3b8;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__metric--done .sku-card__metric-value {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__related {
    margin: 0 0 0.55rem;
    padding: 0;
    background: none;
    border: 0;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

body.wl-uv-compact .detail-page .sku-card-stack--pair {
    gap: 8px;
    padding: 8px;
    background: #f3f4f6;
    border: 0;
}

body.wl-uv-compact .detail-page .sku-card-stack__head {
    color: #475569;
    font-size: 12px;
}

body.wl-uv-compact .detail-page .sku-card-stack__label {
    background: #64748b;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__make {
    margin-top: auto;
    padding-top: 10px;
    gap: 8px;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__make-title {
    display: none;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__make .js-uv-print,
body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__make .js-uv-scrap {
    min-height: 34px;
    height: 34px;
    font-size: 16px;
}

body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__make .js-uv-make {
    min-height: 34px;
    font-size: 13px;
}

@media (max-width: 720px) {
    body.wl-uv-compact .wl-uv-compact-stats {
        display: none;
    }

    body.wl-uv-compact .detail-page .wl-detail-group__body--grid {
        grid-template-columns: 1fr;
    }
}

.detail-page .product-card--sku .sku-card__created-at,
body.wl-uv-compact .detail-page .product-card--uv-compact .sku-card__created-at {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

.detail-page .sku-card__make-head--qc,
.detail-page .sku-card__make-row--qc {
    display: grid;
    grid-template-columns: 2.6em minmax(2.2em, 1fr) minmax(3.2em, 1fr) 4.6em;
    gap: 6px;
    align-items: center;
}

.detail-page .sku-card__make-head--qc span {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-align: center;
}

.detail-page .sku-card__make-head--qc span:first-child,
.detail-page .sku-card__make-row--qc .sku-card__make-name {
    text-align: left;
}

.detail-page .sku-card__make-row--qc .sku-card__make-hint,
.detail-page .sku-card__make-row--qc .sku-card__print-scrap {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

.detail-page .sku-card__make-row--qc .sku-card__print-scrap {
    color: #64748b;
    font-weight: 600;
}