/* Material overview only: shared glass, compact real-data rows, no stock photos. */
.sba-redesign .sba-ref-material-page {
  --material-ink: #132851;
  --material-muted: #536985;
  --material-line: rgb(81 112 151 / 14%);
  display: grid;
  gap: 20px;
  min-width: 0;
  color: var(--material-ink);
}
.sba-redesign .sba-ref-material-page [hidden] { display: none !important; }
.sba-redesign .sba-ref-material-page :is(h2, h3, p) { margin: 0; }
.sba-redesign .sba-ref-material-page :is(h2, h3) { color: var(--material-ink); }
.sba-redesign .sba-ref-material-page h2 { font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -.035em; line-height: 1.25; }
.sba-redesign .sba-ref-material-page p { font-size: 13px; line-height: 1.65; color: var(--material-muted); }
.sba-redesign .sba-ref-material-panel {
  min-width: 0;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--sba-glass-edge, rgb(255 255 255 / 80%));
  border-radius: 23px;
  background: var(--sba-glass, rgb(249 252 255 / 65%));
  box-shadow: var(--sba-glass-shadow, 0 8px 26px rgb(26 54 83 / 7%), inset 0 1px 0 rgb(255 255 255 / 90%));
  -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
}
.sba-redesign .sba-ref-material-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sba-redesign .sba-ref-material-summary > article { display: flex; align-items: center; gap: 16px; }
.sba-redesign .sba-ref-material-summary > article > div { display: grid; min-width: 0; gap: 5px; }
.sba-redesign .sba-ref-material-summary strong { font-size: clamp(25px, 2.5vw, 36px); font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.045em; color: var(--material-ink); }
.sba-redesign .sba-ref-material-summary strong small { font-size: 14px; color: var(--material-muted); letter-spacing: normal; }
.sba-redesign .sba-ref-material-summary :is(span, small) { font-size: 12px; line-height: 1.4; color: var(--material-muted); }
.sba-redesign .sba-ref-material-symbol { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 15px; color: #3a79bc; background: rgb(96 159 221 / 13%); }
.sba-redesign .sba-ref-material-symbol svg { width: 24px; height: 24px; }
.sba-redesign .sba-ref-material-page .green { --material-tone: #19845e; --material-soft: rgb(80 180 142 / 12%); }
.sba-redesign .sba-ref-material-page .blue { --material-tone: #3476b6; --material-soft: rgb(80 152 220 / 12%); }
.sba-redesign .sba-ref-material-page .amber { --material-tone: #8e641e; --material-soft: rgb(230 173 75 / 14%); }
.sba-redesign .sba-ref-material-page .slate { --material-tone: #5b708c; --material-soft: rgb(126 155 189 / 12%); }
.sba-redesign .sba-ref-material-page :is(.sba-ref-material-symbol, .sba-ref-material-thumb) { background: var(--material-soft); color: var(--material-tone); }
.sba-redesign .sba-ref-material-list-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; }
.sba-redesign .sba-ref-material-list-heading > div { min-width: 0; }
.sba-redesign .sba-ref-material-list-heading h2 { margin-bottom: 5px; }
.sba-redesign .sba-ref-material-list-heading > span { color: var(--material-muted); font-size: 12px; text-align: right; }
.sba-redesign .sba-ref-material-toolbar { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(180px, 1fr); gap: 12px; }
.sba-redesign .sba-ref-material-toolbar label { min-width: 0; display: flex; align-items: center; gap: 10px; border-radius: 12px; border: 1px solid rgb(159 185 215 / 35%); background: rgb(255 255 255 / 40%); padding: 0 12px; min-height: 46px; }
.sba-redesign .sba-ref-material-toolbar label > svg { width: 18px; height: 18px; color: #4c78a4; flex: 0 0 18px; }
.sba-redesign .sba-ref-material-project > span { font-size: 12px; color: var(--material-muted); }
.sba-redesign .sba-ref-material-toolbar :is(input, select) { flex: 1 1 0; min-width: 0; width: 100%; min-height: 44px; border: 0; border-radius: 0; padding: 10px 0; color: var(--material-ink); background: transparent; font: inherit; font-size: 14px; box-shadow: none; }
.sba-redesign .sba-ref-material-toolbar input::placeholder { color: #5d7692; opacity: 1; }
.sba-redesign .sba-ref-material-toolbar :is(input, select):focus { outline-offset: 3px; }
.sba-redesign .sba-ref-material-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 20px; }
.sba-redesign .sba-ref-material-filters button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 9px 12px; border: 1px solid transparent; border-radius: 12px; color: #435f83; background: rgb(244 248 253 / 46%); font-size: 12px; white-space: normal; }
.sba-redesign .sba-ref-material-filters button[aria-pressed="true"] { background: rgb(113 164 236 / 16%); border-color: rgb(108 151 211 / 23%); color: #183f78; }
.sba-redesign .sba-ref-material-filters button > span { display: grid; place-items: center; min-width: 20px; min-height: 20px; border-radius: 6px; background: rgb(255 255 255 / 55%); font-size: 11px; font-variant-numeric: tabular-nums; }
.sba-redesign .sba-ref-material-columns,
body.sba-redesign .portal-shell .sba-ref-material-row { display: grid; grid-template-columns: 52px minmax(150px, 1.4fr) minmax(110px, 1fr) minmax(76px, .65fr) minmax(110px, 1fr) minmax(105px, 1fr) 22px; gap: 12px; align-items: center; }
.sba-redesign .sba-ref-material-columns { border-radius: 9px; padding: 12px; background: rgb(123 161 210 / 8%); color: #435f83; font-size: 11px; }
.sba-redesign .sba-ref-material-rows { display: grid; gap: 6px; margin-top: 6px; }
body.sba-redesign .portal-shell .sba-ref-material-row { width: 100%; min-width: 0; min-height: 88px; padding: 14px 12px; border: 1px solid transparent; border-bottom: 1px solid var(--material-line); border-radius: 13px; background: transparent; color: var(--material-ink); text-align: left; font: inherit; cursor: pointer; box-shadow: none; }
body.sba-redesign .portal-shell .sba-ref-material-row:hover { background: rgb(255 255 255 / 43%); border-color: rgb(255 255 255 / 70%); }
.sba-redesign .sba-ref-material-row > span { min-width: 0; max-width: 100%; }
.sba-redesign .sba-ref-material-thumb { display: grid; place-items: center; width: 52px; height: 60px; border: 1px solid rgb(255 255 255 / 55%); border-radius: 12px; }
.sba-redesign .sba-ref-material-thumb svg { width: 26px; height: 26px; }
.sba-redesign .sba-ref-material-row :is(.sba-ref-material-name, .sba-ref-material-supplier, .sba-ref-material-price, .sba-ref-material-date) { display: grid; gap: 4px; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.sba-redesign .sba-ref-material-name > strong { font-size: 14px; line-height: 1.35; letter-spacing: -.015em; }
.sba-redesign .sba-ref-material-row small { color: var(--material-muted); font-size: 11px; font-weight: 400; }
.sba-redesign .sba-ref-material-row :is(.sba-ref-material-supplier, .sba-ref-material-price) > small { display: none; }
.sba-redesign .sba-ref-material-price > span { color: var(--material-muted); }
.sba-redesign .sba-ref-material-date :is(time, strong) { font-weight: 550; font-size: 12px; font-variant-numeric: tabular-nums; }
.sba-redesign .sba-ref-material-state { display: inline-flex; align-items: center; justify-self: start; gap: 6px; width: fit-content; padding: 6px 8px; border-radius: 12px; color: var(--material-tone); background: var(--material-soft); font-size: 11px; line-height: 1.4; }
.sba-redesign .sba-ref-material-state > i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
.sba-redesign .sba-ref-material-arrow { display: grid; place-items: center; color: #7893b2; }
.sba-redesign .sba-ref-material-arrow svg { width: 17px; height: 17px; }
.sba-redesign .sba-ref-material-empty { display: grid; justify-items: center; gap: 14px; padding: 38px 20px; text-align: center; }
.sba-redesign .sba-ref-material-empty h3 { font-size: 18px; letter-spacing: -.02em; }
.sba-redesign .sba-ref-material-empty p { max-width: 50ch; }
.sba-redesign .sba-ref-material-info { display: flex; align-items: flex-start; gap: 15px; padding: 18px 20px; background: rgb(213 230 250 / 45%); border: 1px solid rgb(255 255 255 / 55%); border-radius: 18px; }
.sba-redesign .sba-ref-material-info h2 { font-size: 15px; margin-bottom: 8px; }
.sba-redesign .sba-ref-material-info p + p { margin-top: 5px; }
.sba-redesign .sba-ref-material-page .sba-ref-material-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.sba-redesign .portal-shell .sba-ref-material-page :is(button, input, select):focus-visible { outline: 3px solid #2a75bf; outline-offset: 3px; }

@media (max-width: 1150px) {
  .sba-redesign .sba-ref-material-columns { display: none; }
  body.sba-redesign .portal-shell .sba-ref-material-row { grid-template-columns: 52px minmax(0, 1.6fr) minmax(0, 1fr) 22px; gap: 8px 12px; border: 1px solid rgb(255 255 255 / 60%); background: rgb(255 255 255 / 20%); padding: 16px; }
  .sba-redesign .sba-ref-material-thumb { grid-column: 1; grid-row: 1 / 3; }
  .sba-redesign .sba-ref-material-name { grid-column: 2; grid-row: 1; }
  .sba-redesign .sba-ref-material-supplier { grid-column: 2; grid-row: 2; }
  .sba-redesign .sba-ref-material-price { grid-column: 3; grid-row: 1; }
  .sba-redesign .sba-ref-material-date { grid-column: 3; grid-row: 2 / 4; }
  .sba-redesign .sba-ref-material-state { grid-column: 2; grid-row: 3; }
  .sba-redesign .sba-ref-material-arrow { grid-column: 4; grid-row: 1 / 4; }
  .sba-redesign .sba-ref-material-row :is(.sba-ref-material-supplier, .sba-ref-material-price) > small { display: block; }
  .sba-redesign .sba-ref-material-rows { gap: 10px; }
}
@media (max-width: 834px) {
  .sba-redesign .sba-ref-material-summary { gap: 10px; }
  .sba-redesign .sba-ref-material-summary > article { align-items: flex-start; flex-direction: column; padding: 16px; gap: 12px; }
  .sba-redesign .sba-ref-material-toolbar { grid-template-columns: minmax(0, 1fr); }
  .sba-redesign .sba-ref-material-list-heading { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .sba-redesign .sba-ref-material-page { gap: 16px; }
  .sba-redesign .sba-ref-material-panel { padding: 16px; border-radius: 20px; }
  .sba-redesign .sba-ref-material-summary { gap: 8px; }
  .sba-redesign .sba-ref-material-summary > article { padding: 12px; border-radius: 17px; }
  .sba-redesign .sba-ref-material-summary .sba-ref-material-symbol { width: 34px; height: 34px; flex-basis: 34px; border-radius: 11px; }
  .sba-redesign .sba-ref-material-summary .sba-ref-material-symbol svg { width: 19px; height: 19px; }
  .sba-redesign .sba-ref-material-summary :is(span, small) { font-size: 11px; }
  .sba-redesign .sba-ref-material-summary strong { font-size: 25px; }
  .sba-redesign .sba-ref-material-summary strong small { display: block; margin-top: 3px; }
  .sba-redesign .sba-ref-material-filters { gap: 5px; margin-bottom: 16px; }
  .sba-redesign .sba-ref-material-filters button { font-size: 11px; padding: 8px 9px; }
  body.sba-redesign .portal-shell .sba-ref-material-row { grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 8px 10px; padding: 13px 10px; }
  .sba-redesign .sba-ref-material-thumb { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 52px; }
  .sba-redesign .sba-ref-material-name { grid-column: 2; grid-row: 1; }
  .sba-redesign .sba-ref-material-supplier { grid-column: 2 / 4; grid-row: 2; }
  .sba-redesign .sba-ref-material-date { grid-column: 2 / 4; grid-row: 3; }
  .sba-redesign .sba-ref-material-price { grid-column: 2 / 4; grid-row: 4; }
  .sba-redesign .sba-ref-material-state { grid-column: 2 / 4; grid-row: 5; }
  .sba-redesign .sba-ref-material-arrow { grid-column: 3; grid-row: 1; }
  .sba-redesign .sba-ref-material-row :is(.sba-ref-material-supplier, .sba-ref-material-price, .sba-ref-material-date) { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: baseline; }
  .sba-redesign .sba-ref-material-row .sba-ref-material-date > small:last-child:not(:first-child) { flex-basis: 100%; }
  .sba-redesign .sba-ref-material-info { padding: 16px; gap: 10px; }
  .sba-redesign .sba-ref-material-info > .sba-ref-material-symbol { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; }
}
@media (max-width: 360px) {
  .sba-redesign .sba-ref-material-summary { grid-template-columns: minmax(0, 1fr); }
  .sba-redesign .sba-ref-material-summary > article { flex-direction: row; align-items: center; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sba-redesign .sba-ref-material-panel { background: rgb(247 251 255 / 95%); }
}
@media print {
  .sba-redesign .sba-ref-material-panel { background: #fff; box-shadow: none; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .sba-redesign :is(.sba-ref-material-toolbar, .sba-ref-material-filters) { display: none; }
}