.app-shell:has(.material-catalog-view) .page-heading p { font-size: 13px; line-height: 1.4; }
.material-catalog-view { min-width: 0; display: grid; gap: 14px; }
.material-card, .material-kpi, .material-toolbar { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }

.material-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.material-kpi { min-height: 90px; display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 16px; padding: 15px 20px; }
.material-kpi > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: #e7f1fe; color: #1479e8; }
.material-kpi svg { width: 25px; height: 25px; }
.material-kpi small, .material-kpi strong { display: block; }
.material-kpi small { color: #52647c; font-size: 12px; font-weight: 700; }
.material-kpi strong { margin-top: 4px; color: #172a45; font-size: 28px; font-weight: 800; line-height: 1; }
.material-tone-green > span { background: #e5f8ed; color: #17ad57; }.material-tone-amber > span { background: #fff3df; color: #f59e0b; }.material-tone-red > span { background: #fdebed; color: #ed4451; }

.material-toolbar { min-height: 60px; display: grid; grid-template-columns: minmax(250px, 1.65fr) minmax(145px, .8fr) minmax(145px, .8fr) minmax(145px, .8fr) auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; }
.material-toolbar input, .material-toolbar select { width: 100%; height: 40px; border: 1px solid var(--line); background: #fff; color: #40536b; font-size: 12px; }
.material-search { position: relative; min-width: 0; }
.material-search > span { position: absolute; top: 50%; left: 12px; width: 18px; height: 18px; color: #607994; transform: translateY(-50%); }
.material-search svg { width: 18px; height: 18px; }
.material-search input { padding: 0 12px 0 40px; }
.material-toolbar select { padding: 0 30px 0 12px; }
.material-toolbar .button { height: 40px; min-height: 40px; padding: 0 14px; color: #0878e8; white-space: nowrap; }
.material-toolbar [data-action="create-material"] { border-color: #0878e8; background: #0878e8; color: #fff; font-size: 13px; font-weight: 750; }
.material-toolbar [data-action="create-material"]:hover { border-color: #0669ca; background: #0669ca; color: #fff; }
.material-toolbar [data-action="create-material"]:focus-visible { outline: 3px solid rgba(8, 120, 232, .24); outline-offset: 2px; color: #fff; }
.material-toolbar [data-action="create-material"]:disabled { border-color: #c4ccd5; background: #e3e7eb; color: #687585; opacity: 1; }
.material-filter-button { grid-column: 5; }
.material-export-button { grid-column: 7; }
.material-export-button svg { transform: rotate(180deg); }

.material-main-grid { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 438px; gap: 12px; align-items: start; }
.material-list-card { overflow: hidden; }
.material-list-card > header, .material-card > header { min-height: 48px; display: flex; align-items: center; padding: 10px 16px; }
.material-card h2 { margin: 0; color: #172a43; font-size: 15px; font-weight: 800; line-height: 1.3; }
.material-table-scroll { min-width: 0; overflow-x: auto; }
.material-table { width: 100%; min-width: 940px; table-layout: fixed; border-collapse: collapse; }
.material-table th, .material-table td { height: 45px; padding: 7px 8px; border-bottom: 1px solid var(--line-soft); overflow: hidden; color: #354960; font-size: 10.5px; line-height: 1.3; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.material-table th { height: 36px; background: #fafbfd; color: #65758a; font-size: 9.5px; font-weight: 700; }
.material-table th:nth-child(1) { width: 9%; }.material-table th:nth-child(2) { width: 19%; }.material-table th:nth-child(3) { width: 12%; }.material-table th:nth-child(4) { width: 6%; }.material-table th:nth-child(5) { width: 10%; }.material-table th:nth-child(6) { width: 10%; }.material-table th:nth-child(7) { width: 9%; }.material-table th:nth-child(8) { width: 11%; }.material-table th:nth-child(9) { width: 10%; }.material-table th:nth-child(10) { width: 6%; }
.material-table td:first-child b, .material-table td:nth-child(2) strong { color: #28445f; font-size: 10.5px; }
.material-table th:nth-child(4), .material-table th:nth-child(5), .material-table th:nth-child(6), .material-table th:nth-child(7), .material-table th:nth-child(10), .material-table td:nth-child(4), .material-table td:nth-child(5), .material-table td:nth-child(6), .material-table td:nth-child(7), .material-table td:nth-child(10) { text-align: center; }
.material-table tr.is-selected { background: #edf6ff; }
.material-table tbody tr:not(.is-selected):hover { background: #f8fbfe; }
.stock-safe { color: #16a757 !important; }.stock-low { color: #e88706 !important; }.stock-empty { color: #ef3345 !important; }
.material-status { min-height: 23px; display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; border-radius: 5px; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.material-status.is-success { background: #e5f8ed; color: #16a757; }.material-status.is-warning { background: #fff2df; color: #e88706; }.material-status.is-danger { background: #fdebed; color: #ed4451; }
.material-table time, .material-table time small { display: block; }
.material-table time small { margin-top: 2px; font-size: 9.5px; }
.material-view-button { width: 34px; height: 30px; display: inline-grid; place-items: center; padding: 0; border: 1px solid #d8e2ec; border-radius: 7px; background: #fff; color: #0878e8; }
.material-view-button svg { width: 17px; height: 17px; }
.material-view-button:hover { border-color: #adcbe7; background: #f1f7fe; }
.material-row-actions { display: flex; align-items: center; justify-content: center; gap: 5px; }
.material-retire-button { width: 34px; height: 30px; display: inline-grid; place-items: center; padding: 0; border: 1px solid #f2d3d6; border-radius: 7px; background: #fff; color: #e43e4d; }
.material-retire-button svg { width: 17px; height: 17px; }
.material-retire-button:hover { border-color: #efafb5; background: #fff3f4; }

.material-pagination { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 14px; color: #52647c; font-size: 10.5px; }
.material-pagination > div:first-child { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.material-pagination select { width: 66px; height: 34px; padding: 0 24px 0 11px; border: 1px solid var(--line); background: #fff; }
.material-page-controls { display: flex; align-items: center; gap: 8px; }
.material-page-controls > span { margin-right: 10px; white-space: nowrap; }
.material-page-controls button { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid #dce5ee; border-radius: 6px; background: #fff; color: #40536b; font-size: 11px; }
.material-page-controls button.active { border-color: #0878e8; background: #0878e8; color: #fff; }
.material-page-controls button:disabled { color: #a4afbc; }
.material-page-controls i { padding: 0 3px; font-style: normal; }

.material-detail-column { min-width: 0; display: grid; gap: 12px; }
.material-info-card, .material-movements, .material-purchase { overflow: hidden; }
.material-info-card > header, .material-movements > header, .material-purchase > header { border-bottom: 1px solid var(--line-soft); }
.material-info-body { position: relative; min-height: 304px; padding: 12px 16px 14px; }
.material-info-body > img { position: absolute; top: 8px; left: 12px; width: 112px; height: 112px; object-fit: contain; }
.material-info-body > .material-no-image { position: absolute; top: 8px; left: 12px; width: 112px; height: 112px; display: grid; place-items: center; border: 1px dashed var(--line); background: var(--surface-muted); color: #7a8797; font-size: 12px; text-align: center; }
.material-info-body dl { margin: 0 0 0 124px; }
.material-info-body dl > div { min-height: 23px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: start; }
.material-info-body dl > div:nth-child(5) { margin-top: 7px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.material-info-body dt { color: #66778d; font-size: 10.5px; }
.material-info-body dd { margin: 0; overflow-wrap: anywhere; color: #30445d; font-size: 10.5px; font-weight: 650; }
.material-info-body .material-status { min-height: 21px; padding: 2px 7px; }
.material-tags { display: flex; gap: 8px; margin-top: 10px; }
.material-tags span { padding: 4px 12px; border-radius: 999px; background: #e8f3ff; color: #0878e8; font-size: 9.5px; font-weight: 700; }

.material-movements article { min-height: 47px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--line-soft); }
.material-movements article:last-child { border-bottom: 0; }
.movement-icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 5px; background: #fdebed; color: #ed4451; }
.movement-icon.is-in { background: #e5f8ed; color: #16a757; }.movement-icon.is-in svg { transform: rotate(180deg); }
.movement-icon svg { width: 14px; height: 14px; }
.material-movements b { overflow: hidden; color: #33485f; font-size: 10.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.material-movements time { color: #6c7d91; font-size: 9.5px; white-space: nowrap; }

.material-purchase > div { min-height: 67px; display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 14px; }
.material-purchase > div > span { width: 24px; height: 24px; display: grid; place-items: center; color: #f59e0b; }
.material-purchase svg { width: 19px; height: 19px; }
.material-purchase p { margin: 0; color: #52647c; font-size: 10.5px; }
.material-purchase .button { min-height: 36px; height: 36px; padding: 0 13px; border-color: #bdd8f3; color: #0878e8; font-size: 10.5px; white-space: nowrap; }
.material-page-footer { min-height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #8391a3; font-size: 10px; }

@media (max-width: 1450px) {
  .material-toolbar { grid-template-columns: minmax(230px, 1.4fr) repeat(3, minmax(125px, .75fr)) auto 1fr auto; gap: 9px; }
  .material-main-grid { grid-template-columns: minmax(0, 1fr) 400px; }
  .material-table th, .material-table td { padding-right: 6px; padding-left: 6px; }
  .material-info-body dl > div { grid-template-columns: 108px minmax(0, 1fr); }
}

/* Warehouse final readability pass. */
.app-shell:has(.material-catalog-view) .page-heading p{font-size:14px}.material-kpi small{font-size:13px}.material-kpi strong{font-size:30px}.material-toolbar input,.material-toolbar select,.material-toolbar .button{font-size:12.5px}.material-card h2{font-size:16px}.material-table th,.material-table td{font-size:12px}.material-table th{font-size:11.5px}.material-table td:first-child b,.material-table td:nth-child(2) strong{font-size:12px}.material-status,.material-table time small,.material-tags span{font-size:11px}.material-pagination,.material-page-controls button{font-size:12px}.material-info-body dt,.material-info-body dd,.material-movements b,.material-purchase p{font-size:12px}.material-movements time{font-size:11px}.material-purchase .button,.material-page-footer{font-size:11.5px}

@media (max-width: 1180px) {
  .material-kpis { grid-template-columns: 1fr 1fr; }
  .material-toolbar { grid-template-columns: 1fr 1fr 1fr; }
  .material-search { grid-column: 1 / -1; }
  .material-filter-button, .material-export-button { grid-column: auto; }
  .material-main-grid { grid-template-columns: 1fr; }
  .material-detail-column { grid-template-columns: 1fr 1fr; }
  .material-info-card { grid-row: span 2; }
}

@media (max-width: 700px) {
  .material-kpis { gap: 10px; }
  .material-kpi { min-height: 86px; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .material-kpi > span { width: 42px; height: 42px; }
  .material-kpi strong { font-size: 23px; }
  .material-toolbar { grid-template-columns: 1fr; }
  .material-search, .material-filter-button, .material-export-button { grid-column: auto; }
  .material-detail-column { grid-template-columns: 1fr; }
  .material-info-card { grid-row: auto; }
  .material-pagination { align-items: flex-start; flex-direction: column; }
  .material-page-controls { max-width: 100%; overflow-x: auto; }
  .material-page-footer { align-items: flex-start; flex-direction: column; gap: 3px; }
}