/* agents-common.css — wspólne wzorce UI dla rodziny agentów.
 * Owner: ten plik kanonicznie żyje w /home/dev/agents-common/; każdy agent
 * trzyma swoją kopię w public/agents-common.css.
 *
 * Główna funkcja: na ≤640px tabele oznaczone klasą .mc-cards
 * (auto-nadawana przez agents-common.js) zamieniają się w karty z etykietami
 * pobieranymi z thead/th (atrybut data-label).
 */

@media (max-width: 640px) {
  table.mc-cards { display: block; width: 100%; }
  table.mc-cards thead { display: none; }
  table.mc-cards tbody,
  table.mc-cards tr { display: block; }
  table.mc-cards tbody tr {
    background: var(--white, #fff);
    border: 1px solid var(--line, #e5e5e0);
    padding: .55rem .7rem;
    margin-bottom: .55rem;
  }
  table.mc-cards tbody tr:hover td { background: transparent !important; }
  table.mc-cards tbody td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    padding: .25rem 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    min-height: 1.6em;
  }
  table.mc-cards tbody td::before {
    content: attr(data-label);
    font-family: var(--font-m, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mute, #7a7a7a);
    font-weight: 600;
    flex-shrink: 0;
    flex-basis: 40%;
    word-break: break-word;
  }
  /* puste komórki + etykiety - schowaj */
  table.mc-cards tbody td:not([data-label])::before,
  table.mc-cards tbody td[data-label=""]::before { display: none; }

  /* kolumna "Akcje" — osobna linia pod kartą, przyciski wyrównane do prawej */
  table.mc-cards tbody td[data-label*="kcje" i],
  table.mc-cards tbody td[data-label*="ctions" i] {
    border-top: 1px dashed var(--line, #e5e5e0) !important;
    padding-top: .5rem !important;
    margin-top: .35rem !important;
    justify-content: flex-end;
  }
  table.mc-cards tbody td[data-label*="kcje" i]::before,
  table.mc-cards tbody td[data-label*="ctions" i]::before { display: none; }

  /* tabele zawijane w .table-wrap — odetnij overflow który psuje karty */
  .table-wrap:has(table.mc-cards) { overflow: visible; }
}