#materialsPanel,
.materials-dialog { --materials-line: #dce5df; --materials-muted: #63736b; --materials-green: #0d7f66; color: #192a22; font-size: 14px; line-height: 1.5; letter-spacing: 0; }
#materialsPanel { width: 100%; min-width: 0; background: #fff; box-shadow: none; }
#materialsPanel [hidden] { display: none !important; }
#materialsPanel *, .materials-dialog * { box-sizing: border-box; min-width: 0; }
#materialsPanel h2 { font-size: 22px; line-height: 1.3; }
#materialsPanel h3, .materials-dialog h3 { margin: 0 0 12px; font-size: 16px; line-height: 1.4; }
#materialsPanel h4 { margin: 0 0 10px; font-size: 14px; }
.materials-head, .materials-section-head, .materials-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.materials-section-head h3, .materials-dialog-head h3 { margin: 0; }
.materials-month-actions, .materials-actions { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.materials-muted, .materials-caption, #materialsScope { color: var(--materials-muted); }
#materialsScope { margin: 4px 0 0; font-size: 12px; }
.materials-caption { margin: 10px 0 14px; font-size: 12px; overflow-wrap: anywhere; }
#materialsPanel label, .materials-dialog label { display: grid; align-content: start; gap: 5px; }
#materialsPanel label > span, .materials-dialog label > span { margin: 0; color: var(--materials-muted); font-size: 12px; font-weight: 600; }
#materialsPanel input, #materialsPanel select, #materialsPanel textarea { width: 100%; max-width: 100%; height: 38px; min-height: 38px; border: 1px solid var(--materials-line); border-radius: 5px; padding: 7px 9px; background: #fff; color: #192a22; font: inherit; }
#materialsPanel textarea { height: auto; min-height: 88px; }
#materialsPanel input[readonly] { background: #f5f7f6; color: #63736b; }
#materialsPanel .materials-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; min-height: 38px; max-width: 100%; border: 1px solid #cbd8d0; border-radius: 5px; padding: 7px 12px; background: #fff; color: #255443; font-size: 13px; font-weight: 600; line-height: 20px; white-space: nowrap; }
#materialsPanel .materials-button:hover:not(:disabled) { border-color: var(--materials-green); background: #f0f8f4; }
#materialsPanel .materials-primary { border-color: var(--materials-green); background: var(--materials-green); color: #fff; }
#materialsPanel .materials-primary:hover:not(:disabled) { background: #08644f; color: #fff; }
#materialsPanel .materials-danger { color: #a63232; }
#materialsPanel .materials-icon-button { width: 38px; height: 38px; padding: 0; }
#materialsPanel button:disabled { opacity: .5; cursor: not-allowed; }
#materialsPanel :is(button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid #0d7f66; outline-offset: 3px; }
#materialsPanel [data-materials-icon] { display: inline-flex; }
#materialsPanel .module-icon { width: 17px; height: 17px; flex-shrink: 0; }
.materials-message { margin: 8px 0 12px; color: var(--materials-muted); font-size: 13px; overflow-wrap: anywhere; }
.materials-message:empty { display: none; }
#materialsPanel .materials-error { color: #a12e2e; }
.materials-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--materials-line); }
.materials-totals > div { padding: 14px 12px 12px 0; border-bottom: 1px solid var(--materials-line); }
.materials-totals dt, .materials-cost-results dt { color: var(--materials-muted); font-size: 12px; }
.materials-totals dd { margin: 5px 0 0; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.materials-totals > div:nth-child(2) dd { color: #087457; }
.materials-overview { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; margin-top: 22px; }
.materials-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--materials-line); }
.materials-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--materials-line); border-radius: 5px; }
#materialsPanel table { width: 100%; border-collapse: collapse; margin: 0; font-size: 13px; background: #fff; }
#materialsPanel th, #materialsPanel td { padding: 10px; border-bottom: 1px solid #e7ede9; color: inherit; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
#materialsPanel th { color: var(--materials-muted); font-size: 12px; font-weight: 600; background: #f5f8f6; white-space: nowrap; }
#materialsPanel tr:last-child td { border-bottom: 0; }
#materialsPanel .materials-number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#materialsPanel .materials-trend { min-width: 415px; }
#materialsPanel .materials-ledger { min-width: 910px; table-layout: fixed; }
.materials-ledger-scroll { max-height: 560px; overflow-y: auto; }
#materialsPanel .materials-ledger th { position: sticky; top: 0; z-index: 1; }
.materials-ledger th:nth-child(1) { width: 22%; }
.materials-ledger th:nth-child(2) { width: 13%; }
.materials-ledger th:nth-child(3) { width: 17%; }
.materials-ledger th:nth-child(4) { width: 17%; }
.materials-ledger th:nth-child(5) { width: 13%; }
.materials-ledger th:nth-child(6) { width: 18%; }
.materials-ledger td small { display: block; margin-top: 3px; color: var(--materials-muted); font-size: 12px; }
.materials-row-actions { display: flex; flex-wrap: wrap; gap: 5px; }
#materialsPanel .materials-row-actions button { min-height: 32px; padding: 4px 7px; font-size: 12px; }
#materialsPanel .materials-row-actions .materials-icon-button { width: 32px; height: 32px; padding: 0; }
.materials-category-list { list-style: none; margin: 0; padding: 0; max-height: 270px; overflow-y: auto; }
.materials-category-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 8px 0; border-bottom: 1px solid #edf1ee; }
.materials-category-list strong { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.materials-category-list small { color: var(--materials-muted); font-size: 11px; }
.materials-category-bar { grid-column: 1 / -1; display: block; width: 100%; height: 3px; margin-top: 5px; border: 0; background: #edf3ef; }
.materials-category-bar::-webkit-progress-bar { background: #edf3ef; }
.materials-category-bar::-webkit-progress-value { background: #67a992; }
.materials-category-bar::-moz-progress-bar { background: #67a992; }
.materials-warning { padding: 10px 12px; border-left: 3px solid #c18b22; background: #fff8e8; color: #77551d; font-size: 12px; overflow-wrap: anywhere; }
.materials-warning p { margin: 0; }
.materials-warning p + p { margin-top: 5px; }
.materials-reconcile { padding: 10px 0; border-bottom: 1px solid var(--materials-line); }
.materials-reconcile summary { cursor: pointer; overflow-wrap: anywhere; }
.materials-reconcile summary strong { font-weight: 600; }
.materials-reconcile .materials-caption { margin-bottom: 6px; }
.materials-reconcile .materials-scroll { margin-top: 10px; }
#materialsPanel .materials-reconcile table { min-width: 500px; }
.materials-filters { display: grid; grid-template-columns: minmax(125px, 1fr) minmax(125px, 1fr) minmax(150px, 1.6fr) auto; align-items: end; gap: 10px; margin: 14px 0; }
.materials-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 12px; color: var(--materials-muted); font-size: 12px; }
.materials-inventory, .materials-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; margin: 0; padding: 0; border: 0; }
.materials-inventory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#materialsInventorySave { grid-column: 1 / -1; justify-self: end; }
.materials-cost-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 14px 0; }
.materials-cost-results dd { margin: 5px 0 0; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.materials-dialog { width: 620px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); margin: auto; padding: 20px; overflow-y: auto; border: 1px solid #cbd8d0; border-radius: 8px; background: #fff; }
.materials-dialog::backdrop { background: #13271f70; }
.materials-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.materials-full { grid-column: 1 / -1; }
.materials-dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }
.materials-detail { display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 14px; margin: 0; }
.materials-detail dt, .materials-detail dd { margin: 0; padding: 8px 0; border-bottom: 1px solid #edf1ee; overflow-wrap: anywhere; white-space: pre-wrap; }
.materials-detail dt { color: var(--materials-muted); font-size: 12px; }
.materials-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 820px) {
  .materials-overview { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .materials-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials-inventory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials-search { grid-column: 1; }
}
@media (max-width: 480px) {
  #materialsPanel { padding: 14px; }
  .materials-head { align-items: start; flex-direction: column; gap: 12px; }
  .materials-month-actions { width: 100%; }
  .materials-month-actions label { flex: 1; }
  .materials-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials-totals dd { font-size: 18px; }
  .materials-section-head { align-items: start; flex-direction: column; gap: 10px; }
  .materials-section-head > .materials-actions { width: 100%; }
  #materialsPanel .materials-section-head button { flex: 1; padding-inline: 8px; }
  .materials-filters { gap: 10px 8px; }
  .materials-filters .materials-search { grid-column: 1 / -1; }
  .materials-filters > button { grid-column: 2; }
  .materials-inventory, .materials-edit-grid { grid-template-columns: minmax(0, 1fr); }
  .materials-full { grid-column: auto; }
  .materials-dialog { padding: 14px; }
  .materials-detail { grid-template-columns: 76px minmax(0, 1fr); gap: 0 10px; }
  .materials-pagination > .materials-actions { width: 100%; justify-content: end; }
}