/* 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: grid !important;
    grid-template-columns: 38% 1fr;
    gap: .5rem;
    padding: .3rem 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    min-height: 1.6em;
    align-items: start;
  }
  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;
    word-break: break-word;
    padding-top: 2px;
  }
  /* Wartość — kolumna 2 */
  table.mc-cards tbody td > *,
  table.mc-cards tbody td > span,
  table.mc-cards tbody td > div,
  table.mc-cards tbody td > a,
  table.mc-cards tbody td > button,
  table.mc-cards tbody td > select { min-width: 0; 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" — pełna szerokość, przyciski od lewej */
  table.mc-cards tbody td[data-label*="kcje" i],
  table.mc-cards tbody td[data-label*="ctions" i] {
    display: flex !important;
    grid-template-columns: none;
    border-top: 1px dashed var(--line, #e5e5e0) !important;
    padding-top: .5rem !important;
    margin-top: .35rem !important;
    flex-wrap: wrap;
    gap: .4rem;
  }
  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 lub .table-scroll-wrap */
  .table-wrap:has(table.mc-cards),
  .table-scroll-wrap:has(table.mc-cards) { overflow: visible; }
  /* nadpisz min-width tabeli gdy w trybie mc-cards */
  .table-scroll-wrap table.mc-cards { min-width: 0 !important; }

  /* iOS Safari zoom-in fix: jeśli font-size inputu < 16px, iPhone robi zoom
   * przy fokusie. Wymuszamy 16px na wszystkich kontrolkach formularzy. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px !important;
  }
}