/* CM001 kit — uiux.css
 * Layout primitives (sections/blocks), the opt-in enhanced-table chrome, and icon-button polish.
 * All token-driven and RTL-safe (logical properties). In @layer cm.components so pages can still
 * override, but it beats the base/floor. Part of the "everything the global stylesheet must cover" set.
 * -------------------------------------------------------------------------- */
@layer cm.components {

  /* ============================ Layout primitives ========================= */
  /* A page section: rhythm between major blocks, capped to the content measure. */
  .cm-section { margin-block: clamp(16px, 3vw, 28px); }
  .cm-section > :first-child { margin-block-start: 0; }
  .cm-section-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block-end: 12px; }
  .cm-section-h h2, .cm-section-h h3 { margin: 0; }

  /* A block = a surface card. The one card idiom pages can lean on. */
  .cm-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md, 10px); padding: clamp(14px, 2vw, 20px); box-shadow: var(--shadow-sm); }
  .cm-block + .cm-block { margin-block-start: 14px; }
  .cm-block-h { font-size: var(--fs-lg, 16px); font-weight: 700; margin: 0 0 10px; }

  /* Composition utilities — the everyday flex/grid patterns, so pages stop hand-rolling them. */
  .cm-stack   { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
  .cm-stack-sm { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
  .cm-cluster { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); align-items: center; }
  .cm-cluster-end { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); align-items: center; justify-content: flex-end; }
  .cm-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .cm-grid-auto { display: grid; gap: var(--space-4, 16px); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
  .cm-cols-2 { display: grid; gap: var(--space-4, 16px); grid-template-columns: repeat(2, 1fr); }
  .cm-cols-3 { display: grid; gap: var(--space-4, 16px); grid-template-columns: repeat(3, 1fr); }
  .cm-cols-4 { display: grid; gap: var(--space-4, 16px); grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 860px) { .cm-cols-3, .cm-cols-4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .cm-cols-2, .cm-cols-3, .cm-cols-4 { grid-template-columns: 1fr; } }

  /* ============================ Icon buttons ============================= */
  /* A square, centred icon button. cm_btn already emits .btn--icon; this hardens it and guarantees a
     touch-friendly target and a clear focus ring, since these are now the platform's default action. */
  .btn.btn--icon {
    inline-size: var(--control-h, 38px);
    min-inline-size: var(--control-h, 38px);
    padding: 0;
    display: inline-grid;
    place-items: center;
  }
  .btn.btn--icon.btn--sm { inline-size: var(--control-h-sm, 30px); min-inline-size: var(--control-h-sm, 30px); }
  .btn.btn--icon.btn--lg { inline-size: var(--control-h-lg, 46px); min-inline-size: var(--control-h-lg, 46px); }
  .btn.btn--icon .btn-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* a tight row of icon actions in a table/toolbar */
  .cm-actions { display: inline-flex; gap: 4px; align-items: center; }
  .cm-actions .btn { flex: none; }

  /* ============================ Enhanced table =========================== */
  .cm-tbl-wrap { display: flex; flex-direction: column; gap: 10px; }
  .cm-tbl-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .cm-tbl-search { position: relative; display: inline-flex; align-items: center; flex: 1 1 220px; min-inline-size: 180px; max-inline-size: 360px; }
  .cm-tbl-search input {
    inline-size: 100%; block-size: var(--control-h-sm, 32px);
    padding-block: 0; padding-inline: 30px 10px;
    border: 1px solid var(--line-2, var(--line)); border-radius: var(--radius-sm, 8px);
    background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm, 13px);
  }
  .cm-tbl-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
  .cm-tbl-ic {
    position: absolute; inset-inline-start: 9px; inline-size: 14px; block-size: 14px; pointer-events: none;
    background: var(--text-3);
    -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M7 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm3.5.5 3 3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M7 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm3.5.5 3 3'/%3E%3C/svg%3E");
  }
  .cm-tbl-filter { block-size: var(--control-h-sm, 32px); border: 1px solid var(--line-2, var(--line)); border-radius: var(--radius-sm, 8px); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm, 13px); padding-inline: 8px; max-inline-size: 200px; }
  .cm-tbl-count { color: var(--text-3); font-size: var(--fs-xs, 12px); margin-inline-start: auto; }

  th.cm-tbl-sortable { cursor: pointer; user-select: none; position: relative; padding-inline-end: 20px; }
  th.cm-tbl-sortable::after {
    content: ""; position: absolute; inset-inline-end: 6px; inset-block-start: 50%; translate: 0 -50%;
    inline-size: 8px; block-size: 8px; opacity: .35;
    background: currentColor;
    -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath fill='%23000' d='M4 0 7 4H1zM4 12 1 8h6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath fill='%23000' d='M4 0 7 4H1zM4 12 1 8h6z'/%3E%3C/svg%3E");
  }
  th.cm-tbl-sortable:hover::after { opacity: .6; }
  th.cm-tbl-sortable.is-asc::after, th.cm-tbl-sortable.is-desc::after { opacity: 1; color: var(--brand); }
  th.cm-tbl-sortable.is-asc::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath fill='%23000' d='M4 0 8 6H0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath fill='%23000' d='M4 0 8 6H0z'/%3E%3C/svg%3E"); }
  th.cm-tbl-sortable.is-desc::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath fill='%23000' d='M4 6 0 0h8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath fill='%23000' d='M4 6 0 0h8z'/%3E%3C/svg%3E"); }
  th.cm-tbl-sortable:focus-visible { outline: 2px solid var(--focus-ring, var(--brand)); outline-offset: -2px; }

  tr.cm-tbl-empty td { text-align: center; color: var(--text-3); padding: 22px; font-size: var(--fs-sm, 13px); }

  .cm-tbl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .cm-tbl-size { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-xs, 12px); }
  .cm-tbl-size select { block-size: var(--control-h-sm, 30px); border: 1px solid var(--line-2, var(--line)); border-radius: var(--radius-sm, 8px); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm, 13px); padding-inline: 6px; }
  .cm-tbl-pager { display: inline-flex; gap: 4px; margin-inline-start: auto; }
  .cm-tbl-pg {
    min-inline-size: var(--control-h-sm, 30px); block-size: var(--control-h-sm, 30px);
    border: 1px solid var(--line-2, var(--line)); border-radius: var(--radius-sm, 8px);
    background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm, 13px);
    cursor: pointer; padding-inline: 8px;
  }
  .cm-tbl-pg:hover:not(:disabled):not(.is-current) { background: var(--surface-2); }
  .cm-tbl-pg.is-current { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); cursor: default; }
  .cm-tbl-pg:disabled { opacity: .45; cursor: not-allowed; }
  .cm-tbl-pg:focus-visible { outline: 2px solid var(--focus-ring, var(--brand)); outline-offset: 2px; }
}