/* Materials overview (/sales/materials/) — layout A, 2026-09-25. Loaded
   after static/sales/dashboard.css, whose .sales-overview header / KPI /
   count-badge rules (so-*) this page reuses; only its own pieces live here. */

.mat-scope { font-size: var(--text-xs); color: var(--text-muted); background: var(--surface-sunken); padding: 4px var(--space-3); border-radius: var(--radius-pill); }
.mat-more { display: inline-block; margin-top: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--brand); text-decoration: none; }
.mat-more:hover { text-decoration: underline; }
.mat-muted { color: var(--text-subtle); }

/* Main row: stock position (2/3) + side column (1/3) ----------------- */
.mat-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-3); }
.mat-side { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; min-width: 0; }
.mat-position { min-height: 0; min-width: 0; }
.mat-position__scroll { flex: 1; min-height: 0; overflow: auto; }

.mat-table { font-size: var(--text-sm); }
.mat-table th { position: sticky; top: 0; background: var(--surface); z-index: 1; white-space: nowrap; }
.mat-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mat-table td b { font-weight: 600; }
.mat-code { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-xs); font-weight: 600; color: var(--brand); text-decoration: none; display: block; }
.mat-code:hover { text-decoration: underline; }
.mat-name { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-2xs); color: var(--text-subtle); }
.mat-row--low td { background: var(--crit-bg); }

.mat-tag { font-size: var(--text-2xs); font-weight: 700; padding: 1px 7px; border-radius: var(--radius-xs); white-space: nowrap; }
.mat-tag--muted { background: var(--surface-sunken); color: var(--text-muted); font-weight: 600; }
.mat-tag--warn { background: var(--warn-bg); color: var(--warn-fg); }
.mat-tag--crit { background: var(--crit-bg); color: var(--crit-fg); }

.mat-cover { display: flex; align-items: center; gap: var(--space-2); }
.mat-cover__track { position: relative; width: 80px; height: 6px; flex: none; background: var(--surface-sunken); border-radius: var(--radius-pill); }
.mat-cover__track i { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; min-width: 2px; border-radius: var(--radius-pill); }
.mat-cover__track i.is-ok { background: var(--ok); }
.mat-cover__track i.is-over { background: var(--warn); }
.mat-cover__track i.is-short { background: var(--crit); }
.mat-cover__track u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-muted); opacity: .55; border-radius: 1px; }
.mat-cover__days { min-width: 52px; font-size: var(--text-xs); }

/* Exceptions --------------------------------------------------------- */
.mat-exceptions { flex: none; }
.mat-exc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mat-exc li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.mat-exc li:last-child { border-bottom: none; }
.mat-exc a { color: var(--text); text-decoration: none; min-width: 0; }
.mat-exc a:hover { color: var(--brand); }
.mat-ok { font-size: var(--text-xs); font-weight: 700; color: var(--ok-fg); white-space: nowrap; }

/* In / out chart ---------------------------------------------------- */
.mat-chart { flex: 1; min-height: 0; }
.mat-legend { display: inline-flex; align-items: center; gap: 4px; }
.mat-legend i { display: inline-block; width: 10px; height: 8px; border-radius: 2px; margin-inline-start: 6px; }
.mat-legend i:first-child { margin-inline-start: 0; }
.is-in { background: var(--ok); }
.is-out { background: var(--crit); opacity: .8; }
.mat-bars { flex: 1; min-height: 70px; display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--line); padding-top: var(--space-1); }
.mat-bars__day { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 1px; border-radius: 2px; }
.mat-bars__day.is-today { background: var(--surface-sunken); }
.mat-bars__day i { display: block; width: 45%; min-height: 0; border-radius: 2px 2px 0 0; }
.mat-axis { display: flex; justify-content: space-between; font-size: var(--text-2xs); color: var(--text-subtle); margin-top: 3px; }
.mat-chart__totals { display: flex; align-items: baseline; gap: var(--space-4); font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); flex-wrap: wrap; }
.mat-chart__totals b { color: var(--text); font-variant-numeric: tabular-nums; }
.mat-chart__totals .mat-more { margin-block: 0 0; margin-inline: auto 0; }

/* Link row (replaces the eight emoji tiles) ------------------------- */
.mat-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.mat-link {
  display: flex; align-items: center; gap: 6px; min-width: 0; padding: 7px var(--space-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600; color: var(--text); text-decoration: none;
}
.mat-link:hover { border-color: var(--brand); color: var(--brand); }
.mat-link svg { flex: none; color: var(--brand); }
.mat-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-link em { font-style: normal; margin-inline-start: auto; color: var(--text-subtle); font-weight: 500; font-variant-numeric: tabular-nums; }

@media (min-width: 1101px) {
  .mat-main { height: var(--mat-main-h, auto); }
  .mat-main > .chart-panel, .mat-side > .chart-panel { min-height: 0; }
  .mat-exceptions { overflow: auto; }
}
@media (max-width: 1100px) {
  .mat-main { grid-template-columns: minmax(0, 1fr); }
  .mat-position__scroll { overflow-x: auto; }
  .mat-bars { height: 120px; flex: none; }
}
@media (max-width: 720px) {
  .mat .chart-panel__head { flex-wrap: wrap; }
  .mat .chart-panel__head span { white-space: normal; }
  .mat-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}