/* Moji tenderi (R1 track my). Tokens only: no hex here. */

/* ---- search and the status bar: visible at every width, they only wrap ---- */
.my-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: var(--space-3); }
.my-filters-q { flex: 1 1 260px; max-width: 420px; }
.my-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
/* .pill-empty (a status nobody has set yet, greyed) is in components.css. */

/* ---- the table: the mockup's column weights ---- */
.my-table th:nth-child(1) { width: 28%; }
.my-table th:nth-child(2) { width: 18%; }
.my-table th:nth-child(6) { width: 18%; }
.my-table td.c-title a, .my-untitled { display: block; }
.my-untitled { color: var(--ink-muted); font-weight: 500; }
.my-caption { display: block; margin-top: 2px; font: var(--text-caption); color: var(--ink-muted); }
/* The whole row is the title's link (a::after covers it); a link inside the
   caption has to sit above that cover to be clickable. */
.my-caption a { position: relative; z-index: 1; font-weight: 600; }

/* ---- add / edit form ---- */
.my-form { max-width: 720px; }
.my-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 var(--space-3); }
.my-remove { margin-top: var(--space-3); }
.my-remove .help { margin: 0 0 var(--space-3); }

/* `screen`: on paper the card mode is off and the table is a real table, where
   a missing cell would shift the whole row under the wrong headers. */
@media screen and (max-width: 719px) {
  .my-filters-q { max-width: none; flex-basis: 100%; }
  .my-table th:nth-child(n) { width: auto; }
  /* A card lists what the row has; "Rok -" and "Napomena -" only make it longer. */
  table.data.cards.my-table td.is-empty { display: none; }
  .my-form .form-actions .btn { flex: 1 1 auto; }
}