/* CM001 kit — grid.css (@layer cm.grid). The one table standard: toolbar + sortable table + pager. */
@layer cm.grid {
  .cm-grid { display: flex; flex-direction: column; gap: 12px; }

  .cm-grid-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .cm-grid-search-wrap { position: relative; flex: 1 1 200px; min-width: 160px; display: flex; align-items: center; }
  .cm-grid-search-wrap .ic { position: absolute; inset-inline-start: 10px; color: var(--text-3); pointer-events: none; }
  .cm-grid-search { padding-inline-start: 32px; }
  .cm-grid-filter, .cm-grid-size, .cm-grid-views { width: auto; min-width: 130px; flex: 0 0 auto; }
  .cm-grid-tb-spacer { flex: 1 1 auto; }

  .cm-grid-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md, 10px); }
  .cm-grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .cm-grid-table th { text-align: start; padding: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
  .cm-grid-table th, .cm-grid-table td { vertical-align: middle; }
  .cm-grid-sort { display: inline-flex; align-items: center; gap: 5px; width: 100%; padding: 10px 12px; border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; text-align: start; }
  /* Non-sortable header: style the CELL itself. It must stay `table-cell` — `display:block` drops the
     <th> out of the table row, so consecutive plain headers merge into one anonymous cell and every
     column beneath them unaligns (and the empty actions <th> renders as a stray grey block). */
  .cm-grid-table th:not(:has(.cm-grid-sort)) { padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
  /* an element wrapped inside a plain header fills the cell; the cell already owns the padding */
  .cm-grid-table th:not(:has(.cm-grid-sort)) > * { display: block; }
  .cm-grid-sort:hover { color: var(--text); }
  .cm-grid-sort.is-sorted { color: var(--brand); }
  .cm-grid-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .cm-grid-table tbody tr:last-child td { border-bottom: 0; }
  .cm-grid-table tbody tr:hover td { background: var(--surface-2); }
  .cm-grid-table td .cm-state { padding: 30px 16px; }
  .cm-grid-actions, .cm-grid-actions-h { text-align: end; white-space: nowrap; width: 1%; }

  .cm-grid-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .cm-grid-pager { display: flex; gap: 4px; align-items: center; }
  .cm-grid-page { min-width: 32px; height: 32px; padding: 0 8px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: var(--radius-md, 10px); font: inherit; font-size: 13px; cursor: pointer; }
  .cm-grid-page:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
  .cm-grid-page.is-current { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }
  .cm-grid-page:disabled { opacity: .4; cursor: default; }
  .cm-grid-ellipsis { color: var(--text-3); padding: 0 2px; }

  /* dense variant */
  .cm-grid--dense .cm-grid-table td { padding: 6px 12px; }
  .cm-grid--dense .cm-grid-sort { padding: 7px 12px; }

  /* mobile: collapse to cards */
  @media (max-width: 640px) {
    .cm-grid-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .cm-grid-table, .cm-grid-table tbody, .cm-grid-table tr, .cm-grid-table td { display: block; width: 100%; }
    .cm-grid-scroll { border: 0; }
    .cm-grid-table tr { border: 1px solid var(--line); border-radius: var(--radius-md, 10px); margin-bottom: 10px; padding: 4px 2px; }
    .cm-grid-table td { border: 0 !important; padding: 6px 12px; }
    .cm-grid-actions { text-align: start; }
  }
}