/* Shared workspace layout and controls. Keep business pages quiet and readable. */
:root {
    --sidebar-width: 224px;
    --topbar-height: 64px;
    --primary: #245bd7;
    --primary-hover: #194bbb;
    --primary-light: #edf3ff;
    --bg-body: #f5f7fa;
    --text-primary: #243247;
    --text-secondary: #69778b;
    --text-muted: #7c899b;
    --border: #e7ecf2;
    --radius: 6px;
    --radius-lg: 10px;
    --shadow: 0 2px 8px rgba(28, 43, 65, .025);
    --bs-primary: #245bd7;
    --bs-primary-rgb: 36, 91, 215;
}
body { font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #b9cdfa; outline-offset: 3px; }
.sidebar { background: #fff; border-right: 1px solid var(--border); color: var(--text-primary); z-index: 1045; padding: 0 12px 20px; }
.sidebar .sidebar-brand { justify-content: flex-start; padding: 0 12px; color: #182944; border-bottom: 1px solid var(--border); height: 76px; font-size: 16px; gap: 10px; letter-spacing: 0; }
.sidebar .sidebar-brand i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #fff; background: var(--primary); font-size: 17px; }
.sidebar .sidebar-heading { padding: 22px 14px 8px; font-size: 11px; font-weight: 500; color: #8a97a8; letter-spacing: 1px; }
.sidebar hr.sidebar-divider { border-color: var(--border); margin: 8px 12px; opacity: 1; }
.sidebar .nav-item .nav-link { color: #637187; margin: 3px 0; padding: 11px 14px; font-size: 13px; border: 0; border-radius: 6px; gap: 10px; }
.sidebar .nav-item .nav-link:hover { color: var(--text-primary); background: #f4f6fa; }
.sidebar .nav-item .nav-link.active, .sidebar .nav-item .nav-link.nav-parent.active { color: var(--primary); background: #edf3ff; font-weight: 600; }
.sidebar .nav-item .nav-link.nav-sublink.active { color: var(--primary); background: #edf3ff; border: 0; }
.sidebar .nav-item .nav-submenu, .sidebar .nav-item .collapse { background: transparent; }
.sidebar .nav-item .nav-submenu .nav-link { padding: 9px 14px 9px 38px; font-size: 12px; }
.sidebar .nav-item .nav-link .nav-chevron { font-size: 10px; }
.sidebar .nav-parent[aria-expanded="false"] .nav-chevron { transform: rotate(0); }
.sidebar .nav-parent[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.main-content { min-width: 0; min-height: calc(100vh - 58px); }
.topbar { padding: 0 32px; box-shadow: none; background: #fff; }
.topbar .page-title { font-size: 16px; font-weight: 600; letter-spacing: .2px; }
.topbar .user-avatar { width: 30px; height: 30px; background: #edf3ff; color: var(--primary); border-radius: 8px; }
.topbar .user-dropdown { font-size: 12px; }
.content-wrapper { padding: 24px 32px 32px; width: 100%; max-width: 1680px; margin: 0 auto; }
.breadcrumb-wrapper { padding: 0; margin-bottom: 22px; }
.breadcrumb-wrapper .breadcrumb { font-size: 12px; }
.breadcrumb a { color: #7f8b9b; }
.page-intro { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.page-intro h2 { font-size: 24px; line-height: 1.4; font-weight: 600; letter-spacing: -.4px; margin: 0 0 6px; color: #1e2b40; }
.page-intro p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.eyebrow { color: var(--text-muted); font-size: 11px; letter-spacing: 1px; display: block; margin-bottom: 5px; }
.card, .table-card, .form-card, .detail-card { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.card-header, .table-card .card-header, .form-card .card-header, .detail-card .card-header { min-height: 58px; background: #fff; padding: 16px 22px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--border); }
.table-card .card-header { justify-content: flex-start; }
.card-header > i, .card-header > span > i { color: #8491a4; }
.card-body, .form-card .card-body, .detail-card .card-body { padding: 22px; }
.record-count { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 8px; }
.table-hint { margin-left: auto; font-size: 11px; font-weight: 400; color: #8794a5; }
.toolbar, .filter-bar { background: #fff; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 18px; gap: 12px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; }
.filter-bar label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.filter-bar .filter-grow { flex: 1; min-width: 220px; max-width: 420px; }
.filter-bar .filter-buttons { display: flex; align-self: flex-end; gap: 8px; }
.search-form { max-width: 100%; }
.toolbar .search-form { margin-left: auto; }
.btn { border-radius: 6px; font-weight: 500; font-size: 13px; padding: 8px 14px; line-height: 1.45; box-shadow: none; transition: background-color .15s, border-color .15s, color .15s; }
.btn-sm { font-size: 12px; padding: 7px 12px; }
.btn i { margin-right: 4px; }
.btn-primary, .btn-info, .btn-success { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; color: #fff; background: var(--primary); border-color: var(--primary); }
.btn-primary:hover, .btn-info:hover, .btn-success:hover { color: #fff; background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning { color: #4b5d74; border-color: #dce3ed; background: #fff; }
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover, .btn-outline-info:hover, .btn-outline-warning:hover { color: var(--primary); background: #f3f6fc; border-color: #bed0f0; }
.btn-outline-danger { color: #b24b52; border-color: #ecd8da; }
.btn-outline-danger:hover { color: #a3343c; background: #fdf1f2; border-color: #e5bdc1; }
.action-link, .btn-sm-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 7px; border: 0; border-radius: 4px; background: transparent; color: var(--primary); font-size: 12px; line-height: 1.5; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; }
.action-link i, .btn-sm-action i { font-size: 13px; margin: 0; }
.action-link:hover, .btn-sm-action:hover { background: var(--primary-light); color: var(--primary-hover); }
.action-danger, .btn-sm-action.btn-outline-danger { color: #b05259; }
.action-danger:hover, .btn-sm-action.btn-outline-danger:hover { background: #fff0f1; color: #a5333d; }
.action-muted { color: #7a889b; }
.row-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.row-actions > form { margin: 0; }
.table, .table-card .table { font-size: 13px; --bs-table-hover-bg: #f4f7fd; --bs-table-hover-color: #243247; }
.table > :not(caption) > * > * { border-color: var(--border); }
.table thead th, .table-card .table thead th { background: #f8fafc; color: #6c7a8f; padding: 13px 18px; font-size: 11px; letter-spacing: .2px; font-weight: 500; white-space: nowrap; }
.table tbody td, .table-card .table td { padding: 16px 18px; color: #43516a; vertical-align: middle; border-color: #edf0f5; }
.table td strong { font-weight: 500; color: #243247; }
.table td a.fw-bold, .table-card .table td a.fw-bold { color: #283b56; font-weight: 500 !important; }
.table tbody tr[data-href] { cursor: pointer; outline-offset: -3px; }
.table tbody tr[data-href]:hover td { background-color: #f4f7fd; }
.table tbody tr[data-href]:hover .record-title { color: var(--primary); }
.table .record-title { font-weight: 600; color: #263850; display: inline-block; margin-bottom: 4px; }
.record-secondary { display: block; color: #8a96a6; font-size: 11px; font-weight: 400; }
.tabular, .amount { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-family: inherit; }
code { color: #6c7c92; font-family: Consolas, monospace; font-size: 11px; }
.stock-value { font-size: 16px; font-weight: 600; color: #263850; }
.stock-unit { color: #8a96a6; font-size: 11px; margin-left: 3px; }
.stock-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #2b856c; }
.stock-status::before { content: ''; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.stock-status.is-empty { color: #b06e30; }
.badge { border-radius: 4px; font-size: 11px; font-weight: 500; padding: 5px 8px; line-height: 1.4; }
.badge.bg-success, .badge-completed, .badge-received, .badge-shipped, .badge-delivered { background: #e9f5ef !important; color: #32775b !important; }
.badge.bg-secondary, .badge-draft { background: #f0f3f7 !important; color: #778398 !important; }
.badge.bg-warning, .badge-pending { background: #fff5df !important; color: #a5752e !important; }
.badge.bg-danger, .badge-cancelled { background: #fbeff0 !important; color: #b15b64 !important; }
.badge-approved { background: #edf2ff; color: #496db6; }
.form-control, .form-select, .form-card .form-control, .form-card .form-select { border-color: #dfe5ee; font-size: 13px; padding: 9px 11px; border-radius: 6px; color: #34445c; box-shadow: none; }
.form-control::placeholder { color: #9aa6b5; }
.form-control:focus, .form-select:focus { border-color: #8eadeb; box-shadow: 0 0 0 3px #245bd70d; }
.form-label, .form-card .form-label { color: #657388; font-size: 12px; font-weight: 500; margin-bottom: 7px; }
.field-group { background: #fff; padding: 20px; border-color: var(--border); }
.field-group-title { color: #35445a; font-size: 13px; font-weight: 600; border-bottom-style: solid; padding-bottom: 12px; }
.detail-info dt { color: #8a97a9; font-size: 11px; font-weight: 400; margin-bottom: 6px; }
.detail-info dd { color: #34445c; font-size: 13px; }
.detail-card .card-header .d-flex { flex-wrap: wrap; }
.detail-card .card-header form { margin-bottom: 0; }
.material-table { min-width: 0; white-space: normal; }
.material-table td, .material-table th { white-space: nowrap; }
.material-table .sticky-col { box-shadow: none; position: static; }
.material-detail-table { border-color: #edf0f5; }
.material-detail-table th { background: #fafbfd; color: #8090a4; font-size: 12px; font-weight: 400; padding: 14px 18px; }
.material-detail-table td { padding: 14px 18px; }
.summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; background: #f8fafd; border: 1px solid #eaf0f7; border-radius: 8px; }
.summary-stat { padding: 18px 22px; border-right: 1px solid #e7edf5; }
.summary-stat:last-child { border: 0; }
.summary-stat span { display: block; font-size: 11px; color: #8190a5; margin-bottom: 6px; }
.summary-stat strong { color: #253951; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.summary-stat small { color: #8190a5; font-size: 12px; font-weight: 400; }
.weight-details { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; }
.weight-details summary { padding: 17px 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; cursor: pointer; list-style: none; font-size: 13px; }
.weight-details summary::before { content: '›'; color: #8b99ac; font-size: 20px; line-height: 1; transition: transform .15s; }
.weight-details[open] summary::before { transform: rotate(90deg); }
.weight-details summary::-webkit-details-marker { display: none; }
.weight-details .weight-detail-body { padding: 0 20px 8px; }
.weight-details .piece-stock { margin-left: auto; color: #59718c; font-variant-numeric: tabular-nums; font-size: 12px; }
.modal-content { border: 0; border-radius: 12px; box-shadow: 0 24px 80px #17263c30; overflow: hidden; }
.modal-header { padding: 22px 26px; align-items: flex-start; border-color: var(--border); }
.modal-title { font-size: 18px; font-weight: 600; color: #25344c; }
.modal-description { color: #8995a6; font-size: 12px; margin: 6px 0 0; }
.modal-body { padding: 24px 26px; }
.modal-footer { padding: 16px 26px; border-color: var(--border); background: #fafbfd; }
.modal-backdrop.show { opacity: .32; }
.receipt-form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.receipt-help { background: #f3f6fc; border-radius: 6px; font-size: 12px; color: #687d99; padding: 12px 14px; margin-bottom: 20px; }
.receipt-help i { color: #537bb7; margin-right: 6px; }
.receipt-item { border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 18px; }
.receipt-item-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.receipt-item-heading h6 { margin: 0 0 5px; font-size: 14px; font-weight: 600; }
.receipt-weight-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11px; color: #8c99aa; }
.receipt-weight-summary strong { font-size: 22px; color: #2c4260; font-weight: 600; font-variant-numeric: tabular-nums; }
.receipt-weight-summary strong small { font-size: 11px; color: #8a98a9; font-weight: 400; }
.weight-piece { border: 1px solid #e6edf6; background: #fafcfe; border-radius: 7px; padding: 16px; margin-bottom: 14px; }
.piece-heading { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.piece-label { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #7d8ca1; }
.piece-name { max-width: 145px; background: #fff; }
.piece-subtotal { color: #7e8fa5; font-size: 12px; }
.piece-subtotal strong { font-weight: 600; color: #3d5573; }
.remove-piece { margin-left: auto; }
.strips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin-bottom: 8px; }
.weight-strip { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.weight-strip label { flex: 1; min-width: 0; }
.strip-number { color: #9ba7b7; width: 18px; font-variant-numeric: tabular-nums; }
.strip-weight { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.receipt-review { padding: 8px 0; }
.receipt-review h5 { font-size: 18px; margin: 14px 0 10px; }
.receipt-review p { font-size: 13px; }
.review-icon { width: 42px; height: 42px; display: grid; place-items: center; background: #fff5e2; color: #b88330; border-radius: 10px; font-size: 20px; }
.confirm-icon { width: 42px; height: 42px; background: #fdf0f1; color: #be6973; border-radius: 10px; display: grid; place-items: center; font-size: 20px; margin-bottom: 16px; }
.alert { border-radius: 7px; font-size: 12px; padding: 13px 16px; }
.alert-info { background: #f0f5fc; color: #60799a; }
.dropdown-menu { border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 28px #21364f14; padding: 6px; font-size: 12px; }
.dropdown-item { border-radius: 5px; padding: 9px 12px; }
.dropdown-item:hover { background: #f4f7fb; }
.pagination-wrapper { justify-content: flex-end; margin-top: 20px; }
.pagination .page-link { border-radius: 5px; border-color: transparent; background: transparent; color: #73839a; margin: 0 2px; min-width: 30px; text-align: center; }
.pagination .page-item.active .page-link { background: var(--primary); }
.empty-state { padding: 58px 20px; }
.empty-state i { display: block; font-size: 30px; color: #b4c1d3; opacity: 1; }
.stat-card { border: 1px solid var(--border); box-shadow: none; }
.stat-card .stat-value { font-weight: 600; color: #2a3c55; font-variant-numeric: tabular-nums; }
.stat-card .stat-icon { background: #eef3fb !important; color: #6787bb !important; }
.site-footer { margin-left: var(--sidebar-width); padding: 18px 24px; border-top: 0; background: transparent; }
.footer-content { font-size: 11px; text-align: center; color: #9ca7b6; }
.footer-divider { margin: 0 12px; color: #d2d9e3; }
.footer-icp { color: #a5afbc; }
@media (max-width: 1199px) {
    .content-wrapper { padding: 22px; }
    .table tbody td, .table-card .table td, .table thead th, .table-card .table thead th { padding-left: 13px; padding-right: 13px; }
}
@media (max-width: 991px) {
    .main-content, .site-footer { margin-left: 0; }
    .sidebar.show { box-shadow: 8px 0 32px #1d355422; }
    .topbar { padding: 0 20px; }
    .page-intro h2 { font-size: 22px; }
    .strips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .content-wrapper { padding: 18px 14px; }
    .toolbar { align-items: flex-start; padding: 14px; }
    .toolbar .search-form { margin-left: 0; width: 100%; }
    .toolbar .search-form .form-control, .toolbar .search-form .form-select { width: auto !important; flex: 1; min-width: 140px; }
    .filter-bar { padding: 14px; }
    .filter-bar label { flex: 1; min-width: 140px; }
    .filter-bar .filter-grow { min-width: 100%; }
    .page-actions { width: 100%; }
    .table-card .table { display: table; min-width: 680px; }
    .table-card .table thead { display: table-header-group; }
    .table-card .table tbody { display: table-row-group; }
    .table-card .table tbody tr { display: table-row; padding: 0; }
    .table-card .table tbody td { display: table-cell; border-bottom: 1px solid var(--border); padding: 14px; }
    .modal-header, .modal-body, .modal-footer { padding: 18px; }
    .modal-footer .me-auto { display: none; }
    .receipt-item { padding: 14px; }
    .piece-heading { gap: 10px; }
    .piece-subtotal { margin-right: auto; }
    .remove-piece { margin-left: 0; }
    .strips { grid-template-columns: 1fr; }
    .summary-stat { padding: 14px 12px; }
    .summary-stat strong { font-size: 18px; }
    .weight-details .piece-stock { width: 100%; margin-left: 28px; }
    .material-detail-table { min-width: 560px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

.info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; }
.info-grid dt { font-size: 11px; color: #8593a7; font-weight: 400; margin-bottom: 8px; }
.info-grid dd { font-size: 13px; color: #354760; margin-bottom: 0; overflow-wrap: anywhere; }
.info-wide { grid-column: span 3; }
.summary-stat .summary-date { font-size: 21px; }
.detail-card .card-header { display: flex; align-items: center; }
@media (max-width: 767px) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .info-wide { grid-column: span 2; } .summary-stat .summary-date { font-size: 15px; } }

/* Sales lines carry their own source plan, visible before approval. */
#salesOrderForm .item-row { padding-bottom: 24px; margin-bottom: 24px !important; border-bottom: 1px solid var(--border); }
#salesOrderForm .item-row:last-child { border-bottom: 0; margin-bottom: 0 !important; }
#salesOrderForm .allocation-panel { margin-top: 16px; padding: 18px; background: #f8fafd; border: 1px solid #e4ebf5; border-radius: 8px; }
.allocation-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.allocation-heading strong { color: #354b69; font-size: 13px; font-weight: 600; }
.allocation-progress { margin: 12px 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.allocation-search { max-width: 300px; margin-bottom: 14px; background: #fff; }
.allocation-piece { border: 1px solid #e2e9f2; border-radius: 6px; overflow: hidden; background: #fff; margin-top: 10px; }
.allocation-piece summary { padding: 12px 16px; display: flex; align-items: center; gap: 14px; list-style: none; cursor: pointer; background: #f5f8fd; }
.allocation-piece summary::before { content: '›'; font-size: 18px; color: #8a9bb1; }
.allocation-piece[open] summary::before { transform: rotate(90deg); }
.allocation-piece summary::-webkit-details-marker { display: none; }
.allocation-piece summary strong { font-size: 12px; font-weight: 600; color: #465c79; }
.allocation-piece summary .small { margin-left: auto; font-size: 11px; }
.allocation-table th, .allocation-table td { padding: 10px 14px !important; font-size: 12px; white-space: nowrap; }
.allocation-table thead th { font-size: 11px; background: #fff !important; }
.allocation-table th:first-child, .allocation-table td:first-child { width: 46px; text-align: center; }
.allocation-table td:last-child { width: 180px; }
.allocation-table tr:has(input[type="checkbox"]:checked) td { background: #f1f6ff; }
.allocation-weight { min-width: 110px; max-width: 160px; font-variant-numeric: tabular-nums; text-align: right; }
@media(max-width:767px) { #salesOrderForm .allocation-panel { padding: 12px; } .allocation-heading .d-flex { margin-left: -6px; } .allocation-table { min-width: 580px; } .allocation-piece summary { padding: 10px 12px; } }

.allocation-piece summary { flex-wrap: wrap; }
.allocation-piece .piece-selected { font-variant-numeric: tabular-nums; font-weight: 400; font-size: 10px; }

/* Soft slate workspace: less white surface, with clearer navigation contrast. */
:root { --bg-body:#e8eef3; --bg-card:#f7f9fb; --border:#d8e1e9; --text-primary:#293d52; --text-secondary:#65788c; }
body { background:#e8eef3; }
.sidebar { background:#283f54; border-right:1px solid #20374a; }
.sidebar .sidebar-brand { color:#f0f5f9; border-color:#3d5266; }
.sidebar .sidebar-brand i { background:#4c7395; }
.sidebar .sidebar-heading { color:#98adbf; }
.sidebar hr.sidebar-divider { border-color:#405569; }
.sidebar .nav-item .nav-link { color:#c3d0dc; }
.sidebar .nav-item .nav-link:hover { background:#344e65; color:#f3f7fb; }
.sidebar .nav-item .nav-link.active, .sidebar .nav-item .nav-link.nav-parent.active, .sidebar .nav-item .nav-link.nav-sublink.active { background:#3c5871; color:#f4f8fb; }
.topbar { background:#eef3f7; border-bottom-color:#d5e0e8; }
.card, .table-card, .form-card, .detail-card { background:#f8fafb; border-color:#d8e2e9; }
.card-header, .table-card .card-header, .form-card .card-header, .detail-card .card-header { background:#edf2f6; border-bottom-color:#d9e2ea; }
.card-body { background:#f8fafb; }
.toolbar, .filter-bar { background:#f2f6f9; border-color:#d5e0e8; }
.summary-strip { background:#edf3f7; border-color:#d8e3eb; }
.table { --bs-table-bg:#f8fafb; --bs-table-hover-bg:#eaf2f8; }
.table thead th, .table-card .table thead th { background:#eaf0f5; color:#5e748a; }
.table tbody td, .table-card .table td { border-color:#e1e8ee; }
.table tbody tr[data-href]:hover td { background:#eaf2f8; }
.table tbody tr.is-selected td { background:#e3edf8; }
.table tbody tr.is-selected:hover td { background:#dce9f6; }
.field-group { background:#f4f7fa; }
.form-control, .form-select { background-color:#fdfefe; }
.modal-content, .modal-header, .modal-body { background:#f7f9fb; }
.modal-footer { background:#edf2f6; }
#salesOrderForm .allocation-panel { background:#edf3f7; border-color:#d5e2eb; }
.selected-sources { background:#f6f9fb; border:1px solid #d5e1eb; border-radius:7px; padding:14px; margin:14px 0; }
.selected-sources-title { font-size:12px; font-weight:600; color:#455e77; margin-bottom:10px; }
.source-browser-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 10px; }
.source-browser-toolbar input { flex:1 1 260px; min-width:180px; }
.source-browser-toolbar select { flex:0 0 150px; min-width:150px; }
.source-piece-heading { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:10px 14px; background:#e8f0f7; }
.source-piece-heading strong { color:#38536f; font-size:12px; }
.source-piece-heading .action-link { margin-left:auto; }
.source-pager { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:12px; }
.source-result-count { margin-bottom:8px; }
.selection-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:10px 16px; margin-bottom:12px; background:#e2ebf4; border:1px solid #ccdce9; border-radius:7px; color:#536d85; font-size:12px; }
.selection-cell { width:44px; min-width:44px; text-align:center; }
.form-check-input { border-color:#9eafc1; cursor:pointer; }
.purchase-filters .keyword-filter { flex:1 1 250px; min-width:220px; }
.purchase-filters .model-filter { flex:1 1 240px; min-width:220px; }
.purchase-filters .status-filter { flex:0 0 190px; min-width:190px; }
.purchase-filters .status-filter select { width:100%; min-width:190px; padding-right:36px; white-space:nowrap; }
.purchase-filters label { font-size:12px; }
.purchase-filters input, .purchase-filters select { min-height:42px; }
.attachment-upload { background:#edf3f8; border:1px dashed #b6c9db; border-radius:8px; padding:16px; margin-bottom:20px; }
.attachment-upload .form-control { flex:1 1 280px; }
.file-preview-body { padding:0; background:#d8e1e9; min-height:65vh; }
.file-preview-body iframe, .file-viewer iframe { width:100%; height:72vh; border:0; display:block; background:#d8e1e9; }
.file-preview-body img, .file-viewer img { display:block; max-width:100%; max-height:76vh; margin:0 auto; object-fit:contain; }
.file-viewer { border:1px solid #cbd9e5; border-radius:8px; overflow:hidden; background:#dce6ee; }
@media(max-width:767px) { .purchase-filters .keyword-filter, .purchase-filters .model-filter, .purchase-filters .status-filter { flex:1 1 100%; min-width:0; } .purchase-filters .status-filter select { min-width:0; } .source-browser-toolbar select { flex-basis:140px; } .selected-sources .table { min-width:520px; } .selection-toolbar { gap:8px; } }

.source-browser { max-height:520px; overflow:auto; padding-right:6px; border-top:1px solid #cfdae5; margin-top:14px; }
.source-browser .source-browser-toolbar { position:sticky; top:0; z-index:2; background:#edf3f7; padding:10px 0; margin-top:0; }
.source-browser .source-pager { position:sticky; bottom:0; z-index:2; padding:10px 0; background:#edf3f7; border-top:1px solid #d2dee8; }

.source-sort { width:150px; min-width:150px; }

.pdf-reader{width:100%;background:#dce4eb;min-height:420px}.pdf-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;background:#edf2f6;border-bottom:1px solid #cbd6df;position:sticky;top:0;z-index:1}.pdf-toolbar input{width:66px}.pdf-toolbar [role=status]{margin-left:auto;color:#546a7e;font-size:12px}.pdf-viewport{overflow:auto;max-height:68vh;padding:18px;text-align:center}.pdf-viewport canvas{display:block;margin:0 auto;background:white;box-shadow:0 3px 14px #23384c25}.file-viewer:has(.pdf-reader){padding:0;height:auto}.file-preview-body:has(.pdf-reader){padding:0;overflow:auto}

/* Compact business pages: one primary surface, with actions aligned left. */
.order-toolbar{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.order-filters{margin-bottom:18px}.order-filters .keyword-filter{flex:1 1 300px}.order-filters .status-filter{flex:0 0 190px}
.detail-page .page-intro{display:block;margin-bottom:18px}.detail-page .page-actions{justify-content:flex-start;margin-top:16px}
.detail-page .card-header{justify-content:flex-start;gap:12px;flex-wrap:wrap}.detail-page .card-header .detail-actions{flex:0 0 100%;justify-content:flex-start;margin-top:6px}
.detail-page .card-header .action-link{margin-left:0!important}.modal-footer{justify-content:flex-start}
.detail-page .attachment-upload{margin-bottom:20px}.detail-page .modal-header{background:#edf2f6}
#salesOrderForm .allocation-panel{background:#f4f7fa;padding:16px;border-color:#dce4eb}
#salesOrderForm .allocation-heading{align-items:center;justify-content:flex-start;gap:20px;margin-bottom:10px}
#salesOrderForm .allocation-heading .d-flex{margin-left:0}
#salesOrderForm .source-browser{border-top:0;margin-top:0;padding-right:0;max-height:500px}
#salesOrderForm .source-browser-toolbar{margin:0 0 10px;padding:8px 0;background:#f4f7fa;align-items:center}
#salesOrderForm .source-browser-toolbar .allocation-search{flex:1 1 240px;max-width:450px}
.selected-only{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap;margin:0}.selected-only input{margin:0}
#salesOrderForm .allocation-piece{margin-top:8px}.allocation-piece .table th{font-size:12px}.allocation-piece .table td{padding-top:9px;padding-bottom:9px}
#salesOrderForm .allocation-progress{margin-bottom:10px}.allocation-piece .allocation-weight{max-width:160px}
@media(max-width:767px){.order-filters .status-filter{flex:1 1 100%}.detail-page .page-actions{gap:8px}#salesOrderForm .allocation-table{min-width:430px}}

#material-files .attachment-upload .d-flex{flex-direction:column;align-items:flex-start}#material-files .attachment-upload input[type=file]{width:100%}
/* A unified list surface: actions, filters, and records share one card. */
.business-list{overflow:hidden;border-color:#dce3e9;box-shadow:0 2px 10px #23384c05}
.business-list>.card-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:64px;padding:16px 20px;background:#f9fafb;border-bottom:1px solid #e4e9ee}
.business-list>.card-header>i{display:none}.business-list .list-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
.business-list .btn{padding:7px 13px;font-size:12px;line-height:20px;border-radius:6px;font-weight:500;box-shadow:none}
.business-list .btn-primary{background:#355e7c;border-color:#355e7c}.business-list .btn-primary:hover{background:#284d69;border-color:#284d69}
.business-list .btn-outline-secondary{background:#fff;border-color:#d5dde4;color:#526475}.business-list .btn-outline-secondary:hover{background:#eaf0f4;color:#304b62}
.business-list>.filter-bar{background:#f2f5f7;border:0;border-bottom:1px solid #e0e6eb;border-radius:0;box-shadow:none;margin:0;padding:16px 20px;gap:14px;align-items:flex-end}
.business-list>.filter-bar label{color:#667786;font-size:11px;line-height:1.5;gap:5px;margin:0}
.business-list>.filter-bar .form-control,.business-list>.filter-bar .form-select{background:#fff;border-color:#d9e1e7;min-height:36px;height:36px;border-radius:6px;padding-top:6px;padding-bottom:6px;font-size:12px;box-shadow:none}
.business-list>.filter-bar .form-control:focus,.business-list>.filter-bar .form-select:focus{border-color:#7396b0;box-shadow:0 0 0 2px #7396b015}
.business-list .filter-buttons{gap:12px;padding-bottom:0;align-items:center}.filter-reset{font-size:12px;color:#768693;padding:8px 0}.filter-reset:hover{color:#355e7c}
.business-list .order-filters .keyword-filter{flex:1 1 230px;min-width:180px}.business-list .order-filters .model-filter{flex:1 1 220px;min-width:180px}.business-list .order-filters .status-filter{flex:0 0 170px;min-width:170px}.business-list .order-filters .status-filter select{min-width:170px}
.business-list .material-filters .filter-grow{flex:1 1 300px}.business-list .material-filters label:not(.filter-grow){flex:0 1 230px}
.business-list .selection-toolbar{margin:0;border:0;border-radius:0;padding:10px 20px;background:#f8fafb;border-bottom:1px solid #e4e9ee;font-size:11px}
.business-list .table thead th{background:#edf1f5;font-size:11px;letter-spacing:0;padding-top:13px;padding-bottom:13px;color:#627484}
.detail-page .material-detail-actions{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;width:100%}.detail-primary-actions{display:flex;flex-wrap:wrap;gap:8px}.attachment-center{justify-self:center}
.attachment-center .btn{border-color:#bccbd6;background:#f8fafb;color:#355e7c;min-width:116px}
@media(max-width:767px){.business-list .list-actions{width:100%;margin-left:0}.business-list>.filter-bar{padding:14px}.business-list .order-filters .keyword-filter,.business-list .order-filters .model-filter,.business-list .order-filters .status-filter{flex:1 1 100%;min-width:0}.business-list .material-filters label:not(.filter-grow){flex:1 1 100%}.detail-page .material-detail-actions{grid-template-columns:1fr}.attachment-center{grid-row:1}.detail-primary-actions{grid-row:2}}

/* Material identity and actions form a single, compact header. */
.material-hero{border:1px solid #d9e2e9;border-radius:10px;background:#f9fafb;overflow:hidden;margin:0 0 18px}
.material-identity{padding:18px 20px 16px}.material-name-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.material-name-line h2{font-size:22px;font-weight:600;line-height:1.4;color:#24384b;margin:0;overflow-wrap:anywhere}
.material-code{font-size:11px;line-height:22px;padding:0 8px;border:1px solid #e0e6eb;border-radius:4px;color:#6a7d8d;background:#f1f5f7;overflow-wrap:anywhere}
.material-meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin:10px 0 0;font-size:12px;line-height:20px}.material-meta>div{display:flex;gap:10px;min-width:0}.material-meta dt{font-weight:400;color:#8996a2;white-space:nowrap}.material-meta dd{margin:0;color:#526779;overflow-wrap:anywhere}
.detail-page .material-hero .material-detail-actions{margin:0;padding:11px 20px;background:#eef3f6;border-top:0;border-bottom:1px solid #e0e7ed;gap:12px;grid-template-columns:1fr auto 1fr}
.material-hero .btn{font-size:12px;line-height:20px;padding:6px 12px;border-radius:6px;box-shadow:none}.material-hero .btn-primary{background:#355e7c;border-color:#355e7c}.material-hero .btn-primary:hover{background:#284d69;border-color:#284d69}
.material-hero .btn-outline-secondary{background:#f9fafb;border-color:#d3dde5;color:#5e7384}.material-hero .attachment-center .btn{display:inline-flex;align-items:center;gap:5px;min-width:0;background:#f9fafb;border-color:#cbd8e2;color:#355e7c}
.attachment-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;margin-left:3px;border-radius:4px;background:#e5edf3;color:#355e7c;font-size:11px;font-variant-numeric:tabular-nums}
@media(max-width:575px){.material-identity{padding:16px}.material-name-line h2{font-size:20px}.material-meta{gap:8px 18px}.detail-page .material-hero .material-detail-actions{padding:10px 12px;grid-template-columns:1fr auto}.material-hero .detail-primary-actions{grid-row:auto}.material-hero .attachment-center{grid-row:auto;justify-self:end}.material-hero .material-detail-actions>[aria-hidden=true]{display:none}}

/* Material detail: one overview surface and balanced supporting information. */
.material-detail-page{max-width:1240px;margin:0 auto}.material-detail-page>.breadcrumb-wrapper{margin-bottom:16px}
.material-detail-page .material-hero{background:#f9fbfc;border-color:#dce4ea;border-radius:10px;margin-bottom:18px;box-shadow:0 2px 8px #293d5004}
.material-detail-page .material-hero .material-detail-actions{background:transparent;padding:12px 22px;border-color:#e5ebef;gap:10px}
.material-detail-page .material-hero .detail-primary-actions{gap:9px}.material-detail-page .material-hero .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;min-height:32px;padding:5px 11px}
.material-detail-page .material-hero .btn-outline-secondary{background:transparent;border-color:transparent;color:#708291;padding-left:0}.material-detail-page .material-hero .btn-outline-secondary:hover{color:#2f536e}
.material-detail-page .material-hero .attachment-center .btn{background:transparent;border-color:transparent;color:#526e83;padding:5px 10px}.material-detail-page .material-hero .attachment-center .btn:hover{background:#eaf0f4}
.material-detail-page .material-hero .attachment-count{background:#e9eff3;color:#647c8f}
.material-detail-page .material-identity{padding:22px 24px 20px}.material-detail-page .material-name-line{gap:14px}.material-detail-page .material-name-line h2{font-size:22px;font-weight:600;letter-spacing:.1px}.material-detail-page .material-code{background:transparent;border:0;border-left:1px solid #dce4ea;border-radius:0;font-size:11px;line-height:18px;padding:0 0 0 14px;color:#83929f}
.material-detail-page .material-meta{gap:10px 30px;margin-top:10px}.material-detail-page .material-meta dt{color:#8797a4}.material-detail-page .material-meta dd{color:#627889}
.material-detail-page .material-hero .summary-strip{margin:0;border:0;border-top:1px solid #e5ebef;border-radius:0;background:#f0f5f8;box-shadow:none}.material-detail-page .material-hero .summary-stat{padding:17px 24px;border-color:#e0e8ee}.material-detail-page .material-hero .summary-stat>span{font-size:11px;color:#7d909f;margin-bottom:5px}.material-detail-page .material-hero .summary-stat strong{font-size:25px;font-weight:500;color:#355b76;letter-spacing:-.5px;line-height:1.25}.material-detail-page .material-hero .summary-stat small{font-size:11px;font-weight:400;color:#92a0ab;margin-left:3px}.material-detail-page .material-hero .summary-date{font-size:19px!important;letter-spacing:0!important}
.material-facts-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin-bottom:18px}.material-facts-grid>.detail-card{margin-bottom:0;min-width:0;height:100%}
.material-detail-page>.detail-card,.material-facts-grid>.detail-card{background:#f9fbfc;border-color:#dce4ea;box-shadow:0 2px 8px #293d5003}
.material-detail-page .detail-card .card-header{background:#f9fbfc;min-height:0;padding:15px 22px;border-bottom-color:#e8edf1;font-size:13px;color:#3e566a;font-weight:600}.material-detail-page .detail-card .card-body{background:#f9fbfc;padding:20px 22px}.material-facts-grid .info-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:19px 20px;margin:0}.material-facts-grid .info-wide{grid-column:1/-1}.material-facts-grid .info-grid dt{font-size:11px;color:#8a99a5;margin-bottom:7px}.material-facts-grid .info-grid dd{font-size:12px;line-height:1.7;color:#435d71;margin:0;overflow-wrap:anywhere}
.material-detail-page .detail-card .card-header>.badge{font-weight:400;font-size:10px;border:0;background:#edf5f1!important;color:#638676!important;padding:4px 7px}
.material-detail-page #weight-details .card-header{gap:10px}.material-detail-page #weight-details .card-header .record-count{font-size:11px;color:#91a0ac}.material-detail-page #weight-details .card-header .action-link{font-size:11px;color:#6a8498}
.material-detail-page .weight-details{border-color:#e4ebf0;background:#f9fbfc}.material-detail-page .weight-details summary{background:#f2f6f9}
@media(max-width:1050px){.material-facts-grid{grid-template-columns:1fr 1fr}.material-facts-grid .info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.material-facts-grid{grid-template-columns:1fr}.material-detail-page .material-identity{padding:18px}.material-detail-page .material-hero .material-detail-actions{padding:10px 16px}.material-detail-page .material-hero .summary-stat{padding:14px 18px}.material-detail-page .material-hero .summary-stat strong{font-size:22px}}