/* ============================================================
   Flagowanie zgłoszeń — globalne prymitywy wizualne.
   Ręcznie pisane (jak tokens.css / zg-grid.css), NIE kompilowane z .scss.

   Kolor typu flagi to dowolny hex z bazy, więc nie może trafić na tło — byłby
   nieczytelny w jednym z motywów. Element z klasą .ft ustawia --ft (hex) i
   wystawia trzy pochodne: kolor treści, delikatny tint i obwódkę.
   ============================================================ */

.ft {
    --ft-fg: var(--ft);
    --ft-tint: color-mix(in oklab, var(--ft) 10%, var(--paper));
    --ft-edge: color-mix(in oklab, var(--ft) 30%, var(--line));
}

/* W ciemnym motywie hex z bazy bywa za ciemny na ciemnym tle — rozjaśniamy go
   w stronę bieli i podbijamy tint, żeby pigułka nie zlewała się z kartą. */
[data-theme="dark"] .ft {
    --ft-fg: color-mix(in oklab, var(--ft) 58%, white);
    --ft-tint: color-mix(in oklab, var(--ft) 20%, var(--paper));
    --ft-edge: color-mix(in oklab, var(--ft) 38%, var(--line-2));
}

/* ── reprezentacje flagi ───────────────────────────────────── */

.ft-ico {
    width: 19px;
    height: 19px;
    display: inline-grid;
    place-items: center;
    border-radius: 4px;
    background: var(--ft-tint);
    color: var(--ft-fg);
    flex-shrink: 0;
}

.ft-ico.lg {
    width: 24px;
    height: 24px;
    border-radius: 5px;
}

.ft-ico ::deep svg,
.ft-ico svg {
    width: 11.5px;
    height: 11.5px;
}

.ft-ico.lg ::deep svg,
.ft-ico.lg svg {
    width: 14px;
    height: 14px;
}

.ft-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 19px;
    padding: 0 8px 0 6px;
    border-radius: 999px;
    background: var(--ft-tint);
    color: var(--ft-fg);
    border: 1px solid var(--ft-edge);
    font: 600 10.5px/1 'Inter', 'Open Sans', sans-serif;
    white-space: nowrap;
    max-width: 170px;
    overflow: hidden;
}

.ft-pill.sm {
    height: 17px;
    font-size: 10px;
    padding: 0 7px 0 5px;
}

.ft-pill__name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ft-pill svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.ft-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ft-fg);
    flex-shrink: 0;
    display: inline-block;
}

/* „+N" po przyciętej liście flag — neutralne, celowo bez koloru typu. */
.ft-more {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--paper-3, #e9edf1);
    color: var(--ink-mute, #6b6d78);
    border: 1px solid var(--line-2, #d3d9df);
    font: 700 9.5px/1 'JetBrains Mono', monospace;
}

/* ── komórka siatki ────────────────────────────────────────── */

.ft-cell {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}

/* W komórce siatki ikony są ciaśniejsze niż w popupach — wiersz ma ~32px i kolumna musi
   pomieścić trzy z nich RAZEM z licznikiem reszty. */
.ft-cell .ft-ico {
    width: 17px;
    height: 17px;
}

.ft-cell .ft-ico svg {
    width: 10.5px;
    height: 10.5px;
}

/* Licznik nigdy nie znika pierwszy: to on mówi, że część flag jest niewidoczna.
   Bez tego przycinała go krawędź komórki i wiersz kłamał, ile ma flag. */
.ft-cell .ft-more {
    flex-shrink: 0;
}

/* Pasek meta na /ticket2 ma `overflow-x: auto`, a CSS nie pozwala przewijać w poziomie bez
   przycinania w pionie — przeglądarka podnosi wtedy `overflow-y` do `auto`. Popover flag,
   pozycjonowany pod paskiem, był przez to ucinany na jego wysokości (52px) i po prostu go nie
   było widać. Gdy popover jest otwarty, pasek przestaje przycinać; poziome przewijanie wraca
   po jego zamknięciu.

   Selektor przez `body`, bo scoped CSS strony ładuje się PO tym pliku i przy równej
   specyficzności wygrywałby z regułą bez tego dodatkowego kroku. */
body .ops-tele:has(.tfi__pop) {
    overflow: visible;
}

/* ── pigułki flag w pasku meta zgłoszenia ──────────────────── */

.ft-inline {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ft-inline__btn {
    height: 26px;
    width: 26px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--ft-tint);
    color: var(--ft-fg);
    border: 1px solid var(--ft-edge);
    cursor: pointer;
}

.ft-inline__btn svg {
    width: 13px;
    height: 13px;
}

.ft-inline__add {
    height: 26px;
    width: 26px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: transparent;
    border: 1px dashed var(--line-2, #d3d9df);
    color: var(--ink-mute, #6b6d78);
    cursor: pointer;
}

.ft-inline__add:hover {
    background: var(--paper-2, #f4f6f8);
    color: var(--ink, #1b1d23);
}

.ft-inline__add svg {
    width: 13px;
    height: 13px;
}