/* Finished-goods stock screen (/stock) — layout faithful to the SDOS
   Workspace design handoff (Inventory · finished-goods region). Colors use
   theme tokens so dark mode keeps working; all classes are .stk-* scoped. */
@layer screens {
  /* date / round chip row */
  .stk-filterbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
  }
  .stk-filterbar .stk-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
  }
  .stk-filterbar .stk-spacer { flex: 1; }
  .stk-updated {
    font-size: 12.5px;
    color: var(--muted);
  }

  .stk-roundchip {
    display: inline-flex;
    align-items: center;
    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);
    text-decoration: none;
  }
  .stk-roundchip:hover { background: var(--surface-2); text-decoration: none; }
  .stk-roundchip.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
  }

  /* card grid */
  .stk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
    gap: 14px;
    align-items: start;
  }

  .stk-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
    overflow: hidden;
  }
  .stk-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
  }
  .stk-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
  }
  .stk-card-head .stk-spacer { flex: 1; }
  .stk-card-date {
    font-size: 11.5px;
    color: var(--muted);
  }

  /* column header + rows share one grid template */
  .stk-row {
    display: grid;
    grid-template-columns: 1fr 48px 48px 48px 58px;
    gap: 6px;
    padding: 7px 14px;
    align-items: center;
  }
  .stk-colhead {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
  }
  .stk-colhead span { text-align: right; }
  .stk-colhead span:first-child { text-align: left; }

  .stk-rowwrap {
    border-bottom: 1px solid var(--line);
  }
  .stk-rowwrap:last-child { border-bottom: none; }
  .stk-row { font-size: 13px; }
  .stk-name {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stk-num {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-2);
  }
  .stk-num.is-sold {
    font-weight: 700;
    color: var(--text);
  }
  .stk-num.is-remain {
    font-weight: 700;
    color: var(--text);
  }
  .stk-num.is-warn { color: var(--warn-fg); font-weight: 700; }
  .stk-num.is-danger { color: var(--danger-fg); font-weight: 700; }

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

  /* round delete action sits inline with the filter chips */
  .stk-filterbar .stk-actions { display: inline-flex; }
  .stk-filterbar .stk-actions form { display: inline; margin: 0; }
}