/* Raw materials screen — faithful to the SDOS Workspace handoff
   (Inventory · วัตถุดิบ). Layout/spacing copied from the design export;
   all colors mapped onto theme tokens so dark mode keeps working.
   All classes prefixed .mat- to avoid collisions. */
@layer screens {

  .mat-page { display: flex; flex-direction: column; gap: 14px; }

  /* date / filter pill row (also holds the "as of" note on the right) */
  .mat-filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .mat-filterbar .mat-spacer { flex: 1; }
  .mat-asof { font-size: 12.5px; color: var(--muted); }

  /* category pill (count badge inside) */
  .mat-cat {
    display: inline-flex; align-items: center; gap: 7px;
    border-radius: var(--r-pill); padding: 7px 13px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2);
    text-decoration: none;
  }
  .mat-cat:hover { background: var(--surface-2); text-decoration: none; }
  .mat-cat.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
  .mat-cat-count {
    font-size: 11.5px; font-weight: 600; border-radius: var(--r-pill);
    padding: 1px 7px; background: var(--surface-3); color: var(--muted);
  }
  .mat-cat.is-active .mat-cat-count { background: rgba(255, 255, 255, 0.22); color: #fff; }

  /* one card per category */
  .mat-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 13px; overflow: hidden; max-width: 1120px;
  }
  .mat-card-head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 16px; background: var(--surface-2);
    border-bottom: 1px solid var(--line);
  }
  .mat-card-title { font-size: 14px; font-weight: 700; color: var(--text); }
  .mat-card-head .mat-spacer { flex: 1; }
  .mat-card-meta { font-size: 11.5px; color: var(--muted); }

  /* grid: item | meta1 | meta2 | open | in | out | remain */
  .mat-grid {
    display: grid;
    grid-template-columns: minmax(230px, 1.7fr) 100px 100px 90px 90px 90px 100px;
    gap: 6px;
  }
  .mat-head-row {
    padding: 9px 16px; font-size: 11px; font-weight: 700;
    color: var(--muted); border-bottom: 1px solid var(--line);
    background: var(--surface-2);
  }
  .mat-head-row .mat-r { text-align: right; }

  .mat-row { border-bottom: 1px solid var(--line); }
  .mat-row:last-child { border-bottom: none; }
  .mat-row.is-flagged { background: var(--surface-2); }
  .mat-row.is-out { background: var(--surface); }

  .mat-data-row { padding: 8px 16px; font-size: 13px; align-items: center; }
  .mat-name {
    font-weight: 600; min-width: 0; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mat-link-to { font-weight: 400; font-size: 11.5px; color: var(--muted); }
  .mat-meta1 { color: var(--text-2); font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mat-meta2 { color: var(--text-2); font-family: var(--font-mono); font-size: 12px; }
  .mat-num {
    text-align: right; font-family: var(--font-mono); font-size: 12px;
    color: var(--text-2);
  }
  .mat-in { color: var(--ok-fg); }
  .mat-out { color: var(--primary); }
  .mat-remain { text-align: right; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--text); }
  .mat-remain.is-zero { color: var(--danger-fg); }

  .mat-chip-row { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 16px 8px; }
  .mat-chip {
    border-radius: 6px; padding: 2px 8px;
    font-size: 11px; font-weight: 600;
    background: var(--surface-3); color: var(--text-2);
  }
  .mat-chip.is-danger { background: var(--danger-bg); color: var(--danger-fg); }
  .mat-chip.is-warn { background: var(--warn-bg); color: var(--warn-fg); }

  .mat-empty {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 13px; padding: 18px 16px; color: var(--text-2); font-size: 13px;
  }
}