.materials-module { min-width: 0; padding: 28px 30px 36px; color: #182a30; }
.materials-toolbar { display: grid; grid-template-columns: minmax(260px,1.2fr) minmax(150px,.45fr) minmax(150px,.45fr) auto auto auto; gap: 12px; align-items: stretch; margin-bottom: 16px; }
.materials-search,.materials-filter { display: flex; min-width: 0; min-height: 52px; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid #d8e4e2; border-radius: 14px; background: #fff; }
.materials-search svg { width: 20px; height: 20px; color: #71858c; }.materials-search input,.materials-filter select,.materials-filter input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #243a41; font: inherit; }.materials-filter span { flex: 0 0 auto; color: #7a8d93; font-size: 13px; }
.materials-tabs { display: flex; align-items: center; padding: 4px; border: 1px solid #d8e4e2; border-radius: 14px; background: #f8fbfa; }.materials-tabs button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: #64787f; font-weight: 800; white-space: nowrap; }.materials-tabs button.active { background: #168c80; color: #fff; box-shadow: 0 7px 16px rgba(22,140,128,.18); }
.materials-metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; margin-bottom: 20px; border: 1px solid #dce7e5; border-radius: 18px; background: #fff; box-shadow: 0 8px 26px rgba(25,59,62,.055); }.materials-metric { display: flex; min-width: 0; min-height: 112px; align-items: center; gap: 16px; padding: 22px 24px; border-right: 1px solid #e1eae8; }.materials-metric:last-child { border-right: 0; }.materials-metric > span { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 16px; background: #edf8f6; color: #168c80; }.materials-metric > span svg { width: 23px; height: 23px; }.materials-metric.warning > span { background: #fff0ef; color: #d84743; }.materials-metric.pending > span { background: #fff6e9; color: #d98221; }.materials-metric.value > span { background: #eff5ff; color: #397dcc; }.materials-metric small { display: block; color: #778a90; font-size: 13px; }.materials-metric strong { display: block; overflow: hidden; margin-top: 5px; color: #173138; font-size: 27px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }.materials-metric em { margin-left: 4px; color: #71858c; font-size: 13px; font-style: normal; }
.materials-workspace { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(370px,.72fr); gap: 18px; align-items: start; }.materials-panel { min-width: 0; overflow: hidden; border: 1px solid #dce7e5; border-radius: 18px; background: #fff; box-shadow: 0 8px 26px rgba(25,59,62,.05); }.materials-panel-head { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-bottom: 1px solid #e4eceb; }.materials-panel-head h2 { margin: 0; font-size: 20px; }.materials-panel-head p { margin: 5px 0 0; color: #7a8d93; font-size: 13px; }.materials-panel-head > strong { color: #168c80; white-space: nowrap; }
.materials-list { min-height: 350px; }.materials-row { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(125px,.65fr) 132px 118px 22px; gap: 14px; align-items: center; width: 100%; min-height: 98px; padding: 16px 18px; border: 0; border-bottom: 1px solid #e8efee; background: #fff; color: inherit; text-align: left; cursor: pointer; }.materials-row:hover { background: #f8fbfa; }.materials-row.active { box-shadow: inset 4px 0 #168c80; background: #f1f8f6; }.materials-row-main { display: grid; min-width: 0; grid-template-columns: 42px minmax(0,1fr); gap: 12px; align-items: center; }.materials-row-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: #edf8f6; color: #168c80; }.materials-row-icon.pending { background: #fff6e9; color: #d98221; }.materials-row-icon.approved { background: #eff5ff; color: #397dcc; }.materials-row-icon.rejected { background: #fff0ef; color: #d84743; }.materials-row-icon svg { width: 21px; height: 21px; }.materials-row span { min-width: 0; }.materials-row strong { display: block; overflow: hidden; color: #314a51; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.materials-row-main strong { color: #20363c; font-size: 15px; }.materials-row small { display: block; overflow: hidden; margin-top: 5px; color: #87979c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.materials-row-arrow { width: 18px; height: 18px; color: #91a2a6; }
.materials-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }.materials-badge.active,.request-fulfilled { background: #ecf8f6; color: #137d72; }.materials-badge.low,.request-rejected { background: #fff0ef; color: #c94440; }.materials-badge.inactive { background: #eef2f3; color: #64777d; }.request-pending { background: #fff5e6; color: #bb6d12; }.request-approved { background: #edf4ff; color: #3975b9; }.materials-danger { color: #d84743 !important; }
.materials-detail-panel { position: sticky; top: 18px; min-height: 520px; max-height: calc(100vh - 178px); overflow-y: auto; }.materials-detail-empty,.materials-empty { display: grid; min-height: 340px; place-items: center; align-content: center; padding: 34px; color: #7a8d93; text-align: center; }.materials-detail-empty > span,.materials-empty > span { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 20px; background: #edf8f6; color: #168c80; }.materials-detail-empty svg,.materials-empty svg { width: 27px; height: 27px; }.materials-detail-empty h3,.materials-empty h3 { margin: 16px 0 5px; color: #2d444b; }.materials-detail-empty p,.materials-empty p { margin: 0; }.materials-detail-content { padding: 24px; }.materials-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid #e4eceb; }.materials-detail-head p { margin: 0 0 5px; color: #168c80; font-size: 12px; font-weight: 800; text-transform: uppercase; }.materials-detail-head h2 { margin: 0; color: #1e353b; font-size: 21px; line-height: 1.35; }.materials-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 0; }
.materials-stock-hero { margin-bottom: 18px; padding: 18px; border-radius: 15px; background: linear-gradient(135deg,#eef8f6,#f8fbfa); }.materials-stock-hero > span { color: #71858c; font-size: 12px; }.materials-stock-hero > strong { display: block; margin-top: 4px; color: #168c80; font-size: 30px; }.materials-stock-hero strong small { font-size: 14px; }.materials-stock-hero p { margin: 7px 0 0; color: #64787f; font-size: 12px; }.materials-detail-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 0; padding: 0 0 18px; border-bottom: 1px solid #e4eceb; }.materials-detail-meta div { min-width: 0; }.materials-detail-meta dt { color: #819298; font-size: 12px; }.materials-detail-meta dd { overflow-wrap: anywhere; margin: 5px 0 0; color: #30474e; font-size: 14px; font-weight: 700; }.materials-detail-section { padding: 18px 0 0; }.materials-detail-section h3 { margin: 0 0 10px; font-size: 15px; }.materials-detail-section > p { margin: 0; color: #556a71; line-height: 1.75; white-space: pre-wrap; }.materials-detail-section.note { margin-top: 18px; padding: 16px; border-radius: 14px; background: #f2f7f6; }
.materials-attachment-links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }.materials-attachment-links a { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 8px 10px; border-radius: 10px; background: #f2f7f6; color: #167e74; text-decoration: none; }.materials-attachment-links svg { width: 16px; height: 16px; }.materials-attachment-links span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.materials-transaction-list,.materials-lines-table { display: grid; gap: 8px; }.materials-transaction-list > div,.materials-lines-table > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 11px; background: #f7faf9; }.materials-transaction-list > div > b { min-width: 48px; color: #168c80; font-size: 12px; }.materials-transaction-list > div > b.outbound { color: #d98221; }.materials-transaction-list > div > b.adjustment { color: #397dcc; }.materials-transaction-list > div > span,.materials-lines-table span { min-width: 0; flex: 1; }.materials-transaction-list strong,.materials-transaction-list small,.materials-lines-table strong,.materials-lines-table small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.materials-transaction-list strong,.materials-lines-table strong { color: #30474e; font-size: 13px; }.materials-transaction-list small,.materials-lines-table small { margin-top: 3px; color: #85969b; font-size: 11px; }.materials-transaction-list em,.materials-lines-table > div > b { color: #334c53; font-size: 12px; font-style: normal; white-space: nowrap; }.materials-muted { color: #819298 !important; font-size: 13px; }
.materials-editor-dialog { width: min(1060px,calc(100vw - 32px)); }.materials-stock-dialog,.materials-request-dialog,.materials-process-dialog { width: min(900px,calc(100vw - 32px)); }.materials-dialog-scroll { overflow-y: auto; max-height: calc(100vh - 210px); padding: 26px 34px 28px; }.materials-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }.materials-form-grid .materials-span-2 { grid-column: 1 / -1; }.materials-upload-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid #e1eae8; }.materials-upload-section > div:first-child { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 12px; }.materials-upload-section strong { color: #30474e; }.materials-upload-section span { color: #819298; font-size: 12px; }.materials-upload-box { display: flex; position: relative; min-height: 74px; align-items: center; justify-content: center; gap: 10px; border: 1px dashed #86c5bc; border-radius: 14px; background: #f8fcfb; color: #168c80; cursor: pointer; }.materials-upload-box input { position: absolute; width: 1px; height: 1px; opacity: 0; }.materials-upload-box svg { width: 21px; height: 21px; }.materials-upload-box span { color: #168c80; font-size: 14px; font-weight: 800; }.materials-upload-preview { display: grid; gap: 8px; margin-top: 10px; }.materials-upload-item { display: grid; grid-template-columns: 42px minmax(0,1fr) 34px; gap: 10px; align-items: center; padding: 9px; border: 1px solid #e1eae8; border-radius: 12px; }.materials-upload-item > span { display: grid; width: 42px; height: 42px; overflow: hidden; place-items: center; border-radius: 9px; background: #eef7f5; color: #168c80; }.materials-upload-item img { width: 100%; height: 100%; object-fit: cover; }.materials-upload-item svg { width: 19px; height: 19px; }.materials-upload-item strong,.materials-upload-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.materials-upload-item small { margin-top: 3px; color: #8b9a9f; font-size: 11px; }.materials-upload-item button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #7c8d92; }.materials-upload-item button:hover { background: #fff0ef; color: #d84743; }
.materials-stock-preview { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; padding: 18px; border-radius: 14px; background: #f2f8f7; color: #61757b; }.materials-stock-preview svg { width: 20px; height: 20px; color: #168c80; }.materials-stock-preview strong { color: #168c80; }.materials-request-lines { margin-top: 22px; padding-top: 20px; border-top: 1px solid #e1eae8; }.materials-request-lines-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }.materials-request-lines-head strong { display: block; }.materials-request-lines-head span { display: block; margin-top: 3px; color: #819298; font-size: 12px; }.materials-request-line { display: grid; grid-template-columns: 32px minmax(0,1fr) minmax(120px,.28fr) 38px; gap: 12px; align-items: end; padding: 14px 0; border-bottom: 1px solid #e7eeed; }.materials-line-number { display: grid; width: 28px; height: 42px; place-items: center; color: #168c80; font-weight: 800; }.materials-request-line label > span { display: block; margin-bottom: 6px; color: #687c82; font-size: 12px; font-weight: 700; }.materials-request-line select,.materials-request-line input { width: 100%; min-height: 42px; border: 1px solid #cbdad8; border-radius: 10px; background: #fff; padding: 0 11px; color: #263c42; font: inherit; }.materials-request-line > button { display: grid; width: 38px; height: 42px; place-items: center; border: 0; border-radius: 10px; background: #fff0ef; color: #c94440; }.materials-request-line > button svg { width: 18px; height: 18px; }.materials-process-summary { display: grid; gap: 8px; margin-bottom: 22px; }.materials-process-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 12px; background: #f4f8f7; }.materials-process-summary strong,.materials-process-summary small { display: block; }.materials-process-summary small { margin-top: 4px; color: #7c8e93; font-size: 12px; }.materials-process-summary b { color: #168c80; font-size: 13px; white-space: nowrap; }
.materials-import-entry { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; padding:18px 20px; border:1px solid #cde2df; border-radius:16px; background:linear-gradient(135deg,#edf8f6,#f8fcfb); }.materials-import-entry > div:first-child { display:flex; min-width:0; align-items:center; gap:14px; }.materials-import-entry > div:first-child > span { display:grid; width:46px; height:46px; flex:0 0 auto; place-items:center; border-radius:14px; background:#168c80; color:#fff; }.materials-import-entry svg { width:20px; height:20px; }.materials-import-entry strong { display:block; color:#203a40; font-size:15px; }.materials-import-entry p { margin:5px 0 0; color:#70848a; font-size:13px; line-height:1.55; }.materials-import-entry-actions { display:flex; flex:0 0 auto; gap:10px; }.materials-import-entry-actions a { text-decoration:none; }
.materials-import-dialog { width:min(1480px,calc(100vw - 32px)); }.materials-import-scroll { overflow-y:auto; max-height:calc(100vh - 210px); padding:24px 30px 30px; }.materials-import-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; }.materials-import-guide span { display:flex; min-height:46px; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:#f2f7f6; color:#536a70; font-size:13px; font-weight:700; }.materials-import-guide b { display:grid; width:26px; height:26px; flex:0 0 auto; place-items:center; border-radius:999px; background:#168c80; color:#fff; font-size:12px; }
.materials-import-upload { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:20px; border:1px solid #d9e6e4; border-radius:16px; background:#fff; }.materials-import-upload strong { color:#263f46; }.materials-import-upload p { margin:6px 0 0; color:#7d8e93; font-size:12px; line-height:1.6; }.materials-import-upload-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; gap:10px; }.materials-import-upload-actions a { text-decoration:none; }.materials-import-file-button { position:relative; cursor:pointer; }.materials-import-file-button input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.materials-import-file-meta { display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; border-radius:12px; background:#eff8f6; color:#496168; font-size:13px; }.materials-import-file-meta svg { width:18px; height:18px; color:#168c80; }.materials-import-file-meta strong { color:#176f67; }
.materials-import-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0; }.materials-import-summary > div { display:flex; min-height:70px; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border:1px solid #dde8e6; border-radius:14px; background:#fff; }.materials-import-summary span { color:#74878d; font-size:13px; }.materials-import-summary strong { color:#284148; font-size:24px; }.materials-import-summary .ready { background:#f0faf7; }.materials-import-summary .ready strong { color:#168c80; }.materials-import-summary .error { background:#fff5f4; }.materials-import-summary .error strong { color:#d84743; }
.materials-import-empty { display:grid; min-height:260px; place-items:center; align-content:center; margin-top:16px; border:1px dashed #b8d1cd; border-radius:16px; background:#fbfdfc; color:#788b90; text-align:center; }.materials-import-empty > span { display:grid; width:58px; height:58px; place-items:center; border-radius:18px; background:#edf8f6; color:#168c80; }.materials-import-empty svg { width:26px; height:26px; }.materials-import-empty h3 { margin:14px 0 6px; color:#334b52; }.materials-import-empty p { margin:0; font-size:13px; }
.materials-import-table-wrap { max-height:440px; overflow:auto; border:1px solid #dce7e5; border-radius:15px; background:#fff; }.materials-import-table { width:100%; min-width:1780px; border-collapse:separate; border-spacing:0; table-layout:fixed; }.materials-import-table th { position:sticky; z-index:2; top:0; padding:12px 9px; border-bottom:1px solid #cfdedb; background:#f1f7f6; color:#4c6369; font-size:12px; text-align:left; white-space:nowrap; }.materials-import-table th:nth-child(1) { width:58px; }.materials-import-table th:nth-child(2) { width:170px; }.materials-import-table th:nth-child(3) { width:140px; }.materials-import-table th:nth-child(4) { width:180px; }.materials-import-table th:nth-child(5) { width:130px; }.materials-import-table th:nth-child(6) { width:100px; }.materials-import-table th:nth-child(7) { width:180px; }.materials-import-table th:nth-child(8) { width:140px; }.materials-import-table th:nth-child(n+9):nth-child(-n+12) { width:112px; }.materials-import-table th:nth-child(13) { width:170px; }.materials-import-table th:nth-child(14) { width:110px; }.materials-import-table th:nth-child(15) { width:220px; }.materials-import-table th:nth-child(16) { width:70px; }.materials-import-table td { padding:9px; border-bottom:1px solid #e7eeed; vertical-align:top; }.materials-import-table tr:last-child td { border-bottom:0; }.materials-import-table tr.has-error { background:#fffafa; }.materials-import-table input,.materials-import-table select,.materials-import-table textarea { width:100%; min-height:38px; border:1px solid #cbdad8; border-radius:9px; background:#fff; padding:7px 9px; color:#263c42; font:inherit; font-size:12px; }.materials-import-table textarea { min-height:58px; resize:vertical; }.materials-import-table input:focus,.materials-import-table select:focus,.materials-import-table textarea:focus { outline:2px solid rgba(22,140,128,.18); border-color:#66afa6; }.materials-import-table .field-error { border-color:#df7773; background:#fff8f7; }.materials-import-row-status { display:flex; align-items:flex-start; gap:6px; color:#168c80; font-size:11px; line-height:1.45; }.materials-import-row-status.error { color:#c94440; }.materials-import-row-status svg { width:14px; height:14px; flex:0 0 auto; margin-top:1px; }.materials-import-remove { display:grid; width:34px; height:34px; place-items:center; border:0; border-radius:9px; background:#fff0ef; color:#c94440; }.materials-import-remove svg { width:17px; height:17px; }
.materials-delete-button { margin-left:auto; border-color:#efc1be !important; color:#c94440 !important; }.materials-delete-button:hover { background:#fff3f2 !important; }
.materials-source-strip { display:flex; align-items:center; min-height:46px; margin-bottom:16px; padding:10px 16px; border:1px solid #cce3df; border-radius:14px; background:#eff9f7; color:#49666b; font-size:13px; line-height:1.55; }.materials-source-strip b { color:#147b71; }.materials-source-strip.warning { border-color:#f0d3ad; background:#fff8ec; color:#8a632e; }.materials-source-strip.warning b { color:#a46212; }
.materials-source-strip code { display:inline-block; margin:2px 3px; padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.72); color:#6c4b1f; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; overflow-wrap:anywhere; }.materials-period { min-width:190px; }.materials-period input { min-width:112px; }
.materials-tplus-workspace { display:grid; grid-template-columns:minmax(330px,.72fr) minmax(0,1.35fr); gap:18px; align-items:start; }.materials-warehouse-grid { display:grid; min-height:280px; }.materials-warehouse-card { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; min-height:82px; padding:14px 18px; border:0; border-bottom:1px solid #e7eeed; background:#fff; color:inherit; text-align:left; cursor:pointer; }.materials-warehouse-card:last-child { border-bottom:0; }.materials-warehouse-card:hover { background:#f8fbfa; }.materials-warehouse-card.active { box-shadow:inset 4px 0 #168c80; background:#eff8f6; }.materials-warehouse-card > span { display:grid; width:42px; height:42px; place-items:center; border-radius:14px; background:#e8f6f3; color:#168c80; }.materials-warehouse-card svg { width:20px; height:20px; }.materials-warehouse-card strong,.materials-warehouse-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.materials-warehouse-card strong { color:#233d43; }.materials-warehouse-card small { margin-top:5px; color:#819298; font-size:12px; }.materials-warehouse-card b { color:#168c80; font-size:13px; white-space:nowrap; }
.materials-stock-table-wrap { min-height:280px; overflow:auto; }.materials-stock-table { width:100%; min-width:680px; border-collapse:collapse; }.materials-stock-table th { position:sticky; top:0; z-index:1; padding:12px 14px; border-bottom:1px solid #dbe7e5; background:#f2f7f6; color:#60767c; font-size:12px; text-align:right; white-space:nowrap; }.materials-stock-table th:first-child,.materials-stock-table th:nth-child(2) { text-align:left; }.materials-stock-table td { padding:13px 14px; border-bottom:1px solid #e8efee; color:#465e64; font-size:13px; text-align:right; }.materials-stock-table td:first-child,.materials-stock-table td:nth-child(2) { text-align:left; }.materials-stock-table td strong,.materials-stock-table td small { display:block; }.materials-stock-table td strong { color:#243d43; }.materials-stock-table td small { margin-top:4px; color:#87979c; font-size:11px; }.materials-stock-table td b { color:#168c80; }.materials-tplus-empty { display:grid; min-height:280px; place-items:center; align-content:center; padding:28px; color:#74878d; text-align:center; }.materials-tplus-empty h3 { margin:0 0 8px; color:#324c52; }.materials-tplus-empty p { margin:0; line-height:1.65; }.materials-tplus-empty.compact { min-height:180px; }
.materials-analysis-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; }.materials-analysis-wide { grid-column:1/-1; }.materials-analysis-table-wrap { overflow:auto; }.materials-analysis-table { width:100%; min-width:780px; border-collapse:collapse; }.materials-analysis-table th { padding:12px 16px; border-bottom:1px solid #dbe7e5; background:#f2f7f6; color:#60767c; font-size:12px; text-align:left; white-space:nowrap; }.materials-analysis-table th:nth-child(n+3),.materials-analysis-table td:nth-child(n+3) { text-align:right; }.materials-analysis-table td { padding:14px 16px; border-bottom:1px solid #e8efee; color:#52686e; font-size:13px; }.materials-analysis-table tr:last-child td { border-bottom:0; }.materials-analysis-table td strong { display:block; color:#263f46; }.materials-analysis-table td b { color:#168c80; }.materials-analysis-table tr.unmapped { background:#fff9ef; }.materials-analysis-table tr.unmapped td:first-child strong { color:#b56a13; }.materials-analysis-bar { display:block; width:150px; height:5px; overflow:hidden; margin-top:7px; border-radius:999px; background:#e9f0ef; }.materials-analysis-bar i { display:block; height:100%; border-radius:inherit; background:#25a596; }
.materials-analysis-list { max-height:560px; overflow:auto; }.materials-analysis-item { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 17px; border-bottom:1px solid #e8efee; }.materials-analysis-item:last-child { border-bottom:0; }.materials-analysis-item > em { display:grid; width:28px; height:28px; place-items:center; border-radius:9px; background:#edf8f6; color:#168c80; font-size:12px; font-style:normal; font-weight:800; }.materials-analysis-item > span { min-width:0; }.materials-analysis-item strong,.materials-analysis-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.materials-analysis-item strong { color:#29434a; font-size:13px; }.materials-analysis-item small { margin-top:4px; color:#85969b; font-size:11px; }.materials-analysis-item span > i { display:block; height:4px; overflow:hidden; margin-top:8px; border-radius:999px; background:#edf2f1; }.materials-analysis-item span > i b { display:block; height:100%; border-radius:inherit; background:#55b7ac; }.materials-analysis-item > div { text-align:right; }.materials-analysis-item > div b { display:block; color:#168c80; font-size:13px; }.materials-analysis-item > div small { margin-top:4px; color:#8b999d; font-size:11px; }
.materials-analysis-alerts { display:grid; gap:10px; max-height:560px; overflow:auto; padding:16px; }.materials-analysis-alert { display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:start; padding:14px; border-radius:13px; background:#f4f8f7; }.materials-analysis-alert > span { display:grid; width:38px; height:38px; place-items:center; border-radius:12px; background:#e6f5f2; color:#168c80; }.materials-analysis-alert svg { width:19px; height:19px; }.materials-analysis-alert strong { color:#2d474e; font-size:13px; }.materials-analysis-alert p { margin:5px 0 0; color:#71858b; font-size:12px; line-height:1.55; }.materials-analysis-alert.warning { background:#fff8ec; }.materials-analysis-alert.warning > span { background:#ffefd4; color:#b56a13; }.materials-analysis-alert.danger { background:#fff3f2; }.materials-analysis-alert.danger > span { background:#ffe2df; color:#c94440; }.materials-analysis-alert.notice > span { background:#edf4ff; color:#3975b9; }
.materials-analysis-mapping { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:16px; }.materials-analysis-mapping > div { display:grid; grid-template-columns:minmax(0,1fr) 18px auto; gap:10px; align-items:center; padding:13px 14px; border:1px solid #e0e9e8; border-radius:12px; background:#fbfdfc; }.materials-analysis-mapping strong,.materials-analysis-mapping small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.materials-analysis-mapping strong { color:#2c454c; font-size:13px; }.materials-analysis-mapping small { margin-top:4px; color:#89989c; font-size:11px; }.materials-analysis-mapping svg { width:17px; height:17px; color:#9aabad; }.materials-analysis-mapping b { padding:6px 8px; border-radius:8px; background:#edf8f6; color:#168c80; font-size:12px; white-space:nowrap; }.materials-analysis-mapping b.unmapped { background:#fff1dd; color:#ae6513; }
@media (max-width:620px) { .materials-detail-actions .materials-delete-button { width:100%; margin-left:0; justify-content:center; } }
@media (max-width:1180px) { .materials-toolbar { grid-template-columns: minmax(260px,1fr) minmax(160px,.55fr) auto; }.materials-toolbar > .btn { grid-column:3; }.materials-metric { padding:18px; }.materials-workspace { grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr); }.materials-row { grid-template-columns:minmax(0,1fr) 126px 112px 22px; }.materials-row > span:nth-child(2) { display:none; } }
@media (max-width:940px) { .materials-module { padding:18px 16px 28px; }.materials-toolbar { grid-template-columns:1fr 1fr; }.materials-search { grid-column:1/-1; }.materials-tabs { order:3; }.materials-toolbar > .btn { grid-column:auto; order:4; }.materials-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.materials-metric { min-height:92px; border-bottom:1px solid #e1eae8; }.materials-workspace { grid-template-columns:1fr; }.materials-detail-panel { position:static; max-height:none; }.materials-row { grid-template-columns:minmax(0,1fr) 112px 22px; }.materials-row > span:nth-child(2),.materials-row > span:nth-child(4) { display:none; }.materials-dialog-scroll { max-height:calc(100dvh - 185px); padding:22px 20px; }.materials-import-entry,.materials-import-upload { align-items:flex-start; flex-direction:column; }.materials-import-entry-actions,.materials-import-upload-actions { width:100%; justify-content:flex-start; }.materials-import-scroll { max-height:calc(100dvh - 185px); padding:20px; } }
@media (max-width:620px) { .materials-module { padding:14px 12px 24px; }.materials-toolbar { grid-template-columns:1fr; }.materials-search,.materials-filter,.materials-tabs,.materials-toolbar > .btn { grid-column:1; }.materials-tabs button { flex:1; }.materials-metric-grid { gap:10px; overflow:visible; border:0; background:transparent; box-shadow:none; }.materials-metric { min-height:92px; padding:14px; border:1px solid #dce7e5 !important; border-radius:15px; background:#fff; }.materials-metric > span { width:40px; height:40px; border-radius:13px; }.materials-metric strong { font-size:22px; }.materials-panel-head { padding:16px; }.materials-row { min-height:88px; grid-template-columns:minmax(0,1fr) 22px; padding:14px; }.materials-row > span:nth-child(3) { display:none; }.materials-row-main { grid-template-columns:38px minmax(0,1fr); }.materials-row-icon { width:38px; height:38px; }.materials-detail-content { padding:19px; }.materials-detail-meta { grid-template-columns:1fr; }.materials-form-grid { grid-template-columns:1fr; }.materials-form-grid .materials-span-2 { grid-column:auto; }.materials-editor-dialog,.materials-import-dialog,.materials-stock-dialog,.materials-request-dialog,.materials-process-dialog { width:100%; max-width:none; margin:0; border-radius:18px 18px 0 0; }.materials-dialog-scroll { padding:18px 16px 28px; }.materials-upload-section > div:first-child { display:block; }.materials-upload-section > div:first-child span { display:block; margin-top:5px; }.materials-request-line { grid-template-columns:28px minmax(0,1fr) 38px; align-items:end; }.materials-request-line label:nth-of-type(2) { grid-column:2; }.materials-request-line > button { grid-column:3; grid-row:1/3; align-self:center; }.materials-stock-preview { gap:10px; font-size:12px; }.materials-process-summary > div { align-items:flex-start; flex-direction:column; }.materials-import-entry { padding:16px; }.materials-import-entry-actions,.materials-import-upload-actions { display:grid; grid-template-columns:1fr; }.materials-import-guide { grid-template-columns:1fr; }.materials-import-summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.materials-import-summary > div { min-height:64px; align-items:flex-start; flex-direction:column; gap:4px; padding:11px; }.materials-import-summary strong { font-size:20px; }.materials-import-scroll { padding:16px 12px 24px; }.materials-import-table-wrap { max-height:none; overflow:visible; border:0; background:transparent; }.materials-import-table { min-width:0; }.materials-import-table thead { display:none; }.materials-import-table,.materials-import-table tbody,.materials-import-table tr,.materials-import-table td { display:block; width:100%; }.materials-import-table tr { margin-bottom:14px; padding:12px; border:1px solid #dce7e5; border-radius:14px; background:#fff; box-shadow:0 5px 16px rgba(25,59,62,.04); }.materials-import-table tr.has-error { border-color:#efc3c0; background:#fffafa; }.materials-import-table td { display:grid; grid-template-columns:104px minmax(0,1fr); gap:10px; align-items:start; padding:7px 0; border:0; }.materials-import-table td::before { content:attr(data-label); color:#74878d; font-size:12px; font-weight:700; line-height:38px; }.materials-import-table td:first-child,.materials-import-table td:nth-child(2) { display:flex; align-items:center; justify-content:space-between; }.materials-import-table td:first-child::before,.materials-import-table td:nth-child(2)::before { line-height:1.4; }.materials-import-remove { margin-left:auto; } }
@media (max-width:1180px) { .materials-toolbar { grid-template-columns:minmax(260px,1fr) minmax(150px,.5fr) minmax(150px,.5fr) auto; }.materials-tabs { grid-column:1/-1; }.materials-toolbar > .btn { grid-column:auto; }.materials-tplus-workspace { grid-template-columns:minmax(300px,.65fr) minmax(0,1.35fr); } }
@media (max-width:940px) { .materials-tplus-workspace { grid-template-columns:1fr; } }
@media (max-width:940px) { .materials-analysis-workspace { grid-template-columns:1fr; }.materials-analysis-wide { grid-column:auto; }.materials-analysis-mapping { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .materials-tabs { overflow-x:auto; }.materials-tabs button { min-width:max-content; }.materials-warehouse-card { grid-template-columns:38px minmax(0,1fr); }.materials-warehouse-card > b { grid-column:2; }.materials-source-strip { align-items:flex-start; }.materials-analysis-mapping { grid-template-columns:1fr; }.materials-analysis-item { grid-template-columns:28px minmax(0,1fr); }.materials-analysis-item > div { grid-column:2; text-align:left; } }

/* V1.1: keep the complete view switch visible and separate it from T+ actions. */
.materials-toolbar { grid-template-columns:minmax(260px,1fr) minmax(180px,.35fr) minmax(160px,.35fr) auto auto; }
.materials-toolbar > .materials-search { grid-column:1; grid-row:1; }
.materials-toolbar > .materials-period { grid-column:2; grid-row:1; }
.materials-toolbar > .materials-filter:not(.materials-period) { grid-column:3; grid-row:1; }
.materials-toolbar > .materials-tabs { min-width:0; grid-column:1/4; grid-row:2; overflow-x:auto; }
.materials-toolbar > #materialsAuthorizeBtn { grid-column:4; grid-row:2; }
.materials-toolbar > #materialsSyncBtn { grid-column:5; grid-row:2; }
.materials-toolbar > #materialsRequestBtn { grid-column:5; grid-row:2; }

@media (max-width:940px) {
  .materials-toolbar { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .materials-toolbar > .materials-search { grid-column:1/-1; grid-row:auto; }
  .materials-toolbar > .materials-period { grid-column:1; grid-row:auto; }
  .materials-toolbar > .materials-filter:not(.materials-period) { grid-column:2; grid-row:auto; }
  .materials-toolbar > .materials-tabs { grid-column:1/-1; grid-row:auto; }
  .materials-toolbar > #materialsAuthorizeBtn { grid-column:1; grid-row:auto; }
  .materials-toolbar > #materialsSyncBtn,.materials-toolbar > #materialsRequestBtn { grid-column:2; grid-row:auto; }
}
@media (max-width:620px) {
  .materials-toolbar { grid-template-columns:1fr; }
  .materials-toolbar > .materials-search,.materials-toolbar > .materials-period,.materials-toolbar > .materials-filter:not(.materials-period),.materials-toolbar > .materials-tabs,.materials-toolbar > #materialsAuthorizeBtn,.materials-toolbar > #materialsSyncBtn,.materials-toolbar > #materialsRequestBtn { grid-column:1; }
}

.materials-analysis-rank-head { align-items:flex-start; }
.materials-analysis-family-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.materials-analysis-family-tabs button { min-height:30px; padding:0 10px; border:1px solid #d6e4e1; border-radius:999px; background:#fff; color:#647a80; font-size:12px; font-weight:800; cursor:pointer; }
.materials-analysis-family-tabs button.active { border-color:#168c80; background:#168c80; color:#fff; }
.materials-family-badge { display:inline-flex !important; margin-right:6px; padding:2px 6px; border-radius:6px; background:#eef3f2; color:#64787d !important; font-size:10px !important; line-height:1.4; vertical-align:1px; }
.materials-family-badge.food { background:#eaf8f2; color:#18805f !important; }
.materials-family-badge.daily { background:#edf4ff; color:#3975b9 !important; }
.materials-family-badge.pending { background:#fff2df; color:#ad6818 !important; }
.materials-analysis-compare { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:16px; }.materials-compare-card { position:relative; min-width:0; padding:16px; border:1px solid #dce8e6; border-radius:14px; background:#fbfdfc; }.materials-compare-card span,.materials-compare-card small { display:block; color:#7a8d93; font-size:12px; }.materials-compare-card strong { display:block; overflow:hidden; margin:7px 0; color:#243f45; font-size:22px; text-overflow:ellipsis; white-space:nowrap; }.materials-compare-card b { position:absolute; top:14px; right:14px; padding:3px 7px; border-radius:7px; font-size:11px; }.materials-compare-card b.up { background:#fff0ef; color:#c94440; }.materials-compare-card b.down { background:#eaf8f2; color:#18805f; }.materials-compare-card b.neutral { background:#eef3f2; color:#6f8186; }
.materials-compare-note { display:flex; grid-column:1/-1; align-items:flex-start; gap:10px; padding:11px 13px; border-radius:11px; background:#f2f7f6; color:#63787e; font-size:12px; line-height:1.55; }.materials-compare-note b { flex:0 0 auto; color:#365057; }.materials-compare-note.warning { background:#fff6e8; color:#8b642e; }.materials-compare-note.warning b { color:#a36112; }
.materials-analysis-table tbody tr[data-materials-analysis-department] { cursor:pointer; }.materials-analysis-table tbody tr[data-materials-analysis-department]:hover,.materials-analysis-table tbody tr[data-materials-analysis-department]:focus { outline:0; background:#eef8f6; box-shadow:inset 4px 0 #168c80; }
.materials-category-mapping { display:grid; gap:9px; padding:16px; }.materials-category-map-row { display:grid; grid-template-columns:minmax(180px,1fr) 150px 180px auto; gap:10px; align-items:center; padding:11px 13px; border:1px solid #e0e9e8; border-radius:12px; background:#fbfdfc; }.materials-category-map-row strong { overflow:hidden; color:#2c454c; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.materials-category-map-row select { min-width:0; min-height:38px; padding:0 10px; border:1px solid #cadbd8; border-radius:9px; background:#fff; color:#344d53; }.materials-category-map-row > span { color:#87979c; font-size:12px; }
.materials-analysis-drilldown { padding:16px; }.materials-drill-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px; }.materials-drill-summary > div { padding:13px; border-radius:12px; background:#eff8f6; }.materials-drill-summary span,.materials-drill-summary small { display:block; color:#71868b; font-size:11px; }.materials-drill-summary strong { display:block; margin:6px 0; color:#168c80; font-size:17px; }.materials-drill-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.materials-drill-columns section { min-width:0; overflow:hidden; border:1px solid #e0e9e8; border-radius:13px; }.materials-drill-columns h3 { margin:0; padding:13px 15px; border-bottom:1px solid #e0e9e8; background:#f4f8f7; font-size:14px; }.materials-drill-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 15px; border-bottom:1px solid #e8efee; }.materials-drill-row:last-child { border-bottom:0; }.materials-drill-row span { min-width:0; }.materials-drill-row strong,.materials-drill-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.materials-drill-row strong { color:#30484f; font-size:12px; }.materials-drill-row small { margin-top:4px; color:#85969b; font-size:11px; }.materials-drill-row b { flex:0 0 auto; color:#168c80; font-size:12px; }
@media (max-width:940px) { .materials-analysis-compare,.materials-drill-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.materials-drill-columns { grid-template-columns:1fr; }.materials-category-map-row { grid-template-columns:1fr 1fr; }.materials-category-map-row strong { grid-column:1/-1; } }
@media (max-width:620px) { .materials-analysis-compare,.materials-drill-summary { grid-template-columns:1fr; }.materials-category-map-row { grid-template-columns:1fr; }.materials-category-map-row strong { grid-column:1; }.materials-category-map-row .btn { width:100%; justify-content:center; } }

/* platform-experience-v1: preserve complete mobile inventory amounts */
@media (max-width:620px) {
  .materials-metric { flex-direction: column; align-items: flex-start; gap: 8px; }
  .materials-metric > div { min-width: 0; width: 100%; }
  .materials-metric strong { overflow: visible; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
}