/* The Garments page (blank ordering) and purchase orders. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer components {
  .garments-title { font-size: var(--text-xl); font-weight: var(--weight-light); margin-top: var(--space-6); }
  .blank-style { padding-block: var(--space-3); border-top: 1px solid var(--line); }
  .blank-style:first-of-type { border-top: none; }
  .blank-style .inline-form { margin-top: var(--space-2); font-size: var(--text-sm); }
  .table-scroll { overflow-x: auto; }
  .size-matrix--blanks th[scope="row"] {
    text-align: left; font-weight: var(--weight-regular); padding-right: var(--space-3); white-space: nowrap;
    font-size: var(--text-sm); color: var(--ink); text-transform: none; letter-spacing: normal;
  }
  .size-matrix--blanks th[scope="row"] a { font-weight: var(--weight-medium); }
  .size-matrix--blanks tr.total th, .size-matrix--blanks tr.total td { border-top: 1px solid var(--line); }
}

@layer components {
  /* The job ticket bar above To order: one thin line of job numbers. */
  .job-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); margin-block: var(--space-4) 0; }
  .job-filter > .muted { font-size: var(--text-sm); margin-right: var(--space-1); }
  .job-filter-option, button.job-filter-option {
    padding: .2rem .7rem; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-medium);
    background: var(--glass-strong); color: var(--ink); border: 1px solid var(--glass-edge); box-shadow: none;
  }
  .job-filter-option:hover { background: var(--solid); }
  .job-filter-option[aria-pressed="true"], button.job-filter-option[aria-pressed="true"] { background: var(--action); color: var(--action-ink); border-color: var(--action); }
  .job-filter-clear { font-size: var(--text-sm); }
  .blank-garment { white-space: nowrap; }
}