/* ──────────────────────────────────────────────────────────────────────────
   TiM → Qdrant · Gmail Q&A: traka brojača, napredak slanja, filteri,
   masovne akcije, tabela sanduka i pravila filtriranja.

   Sve vrednosti idu kroz tokene iz tokens.css — ovde nema hardkodovanih boja
   ni razmaka. Tabela nasleđuje .data-table iz help.css; ovde su samo kolone
   specifične za sanduče. Nijedan @media blok — svi su u responsive.css.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Traka brojača ───────────────────────────────────────────────────────── */

.gmail-counts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}

.gmail-count {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.gmail-count:hover {
    border-color: var(--line-strong);
    background: var(--surface-3);
}

.gmail-count.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--ink);
}

.gmail-count-n {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--ink);
}

/* Tačkica boje statusa — ista skala kao .gmail-status u tabeli. */
.gmail-count::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--faint);
}

.gmail-count[data-status="novo"]::before { background: var(--warn); }
.gmail-count[data-status="odobreno"]::before { background: var(--cyan); }
.gmail-count[data-status="poslato"]::before { background: var(--emerald); }
.gmail-count[data-status="odbaceno"]::before { background: var(--rose); }

/* ── Napredak slanja (zamena za „Tok" kolonu) ────────────────────────────── */

.gmail-progress {
    margin-bottom: var(--s-4);
}

.gmail-progress-track {
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    overflow: hidden;
}

.gmail-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: var(--r-pill);
    background: var(--accent);
    transition: width 0.3s var(--ease);
}

.gmail-progress-fill.is-error { background: var(--err); }
.gmail-progress-fill.is-done { background: var(--ok); }

.gmail-progress .hint {
    margin-top: var(--s-2);
}

/* ── Filteri ─────────────────────────────────────────────────────────────── */

/* `auto-fit` umesto šest fiksnih kolona: sa fiksnim rasporedom red je tražio
   930px i na 1100px širine gurao celu stranu u horizontalni skrol. Ovako se
   filteri prelamaju u onoliko redova koliko treba, bez ijednog @media bloka. */
.gmail-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}

/* ── Masovne akcije ──────────────────────────────────────────────────────── */

.gmail-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3);
    margin-bottom: var(--s-3);
    border: 1px solid var(--accent-ring);
    border-radius: var(--r-md);
    background: var(--accent-soft);
}

.gmail-bulk-label {
    margin-right: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

/* ── Tabela sanduka ──────────────────────────────────────────────────────── */

/* Fiksan raspored kolona: sadržaj ćelija je proizvoljno dugačak tekst mejla,
   pa bi automatski raspored razvukao tabelu preko kartice i gurnuo Status i
   akcije van vidnog polja (tabela 1164px u kartici od 1102px). Sa `fixed`
   širine drže zaglavlja, a tekst se skraćuje unutar svoje ćelije. */
.gmail-table {
    table-layout: fixed;
}

.gmail-table th.gmail-check,
.gmail-table td.gmail-check {
    width: 36px;
    padding-left: var(--s-2);
    padding-right: 0;
    text-align: center;
}

.gmail-table td.gmail-date {
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

/* Datum gore, vreme ispod — u koloni od 104px jedan red bi se prelio. */
.gmail-table td.gmail-date span {
    display: block;
}

.gmail-time {
    opacity: 0.7;
}

.gmail-table th:nth-child(2) { width: 104px; }
.gmail-table th:nth-child(3) { width: 16%; }
.gmail-table th:nth-child(4),
.gmail-table th:nth-child(5) { width: auto; }
/* Status prima pilulu od ~67px i razlog ispod nje, pa mu 96px stiže; ono što
   se tu uštedi ide akcijama. Red sa statusom „novo" nosi ČETIRI dugmeta
   (otvori, odobri, odbaci, obriši) = 4×28 + 3×4 = 124px, a ćelija je imala
   124px SA padding-om od 2×16 — pa je kantica ispadala iz ćelije. */
.gmail-table th:nth-child(6) { width: 96px; }
.gmail-table th.dt-actions { width: 160px; }

/* Red pod kursorom. `surface-2` je isti ton koji nose zaglavlje tabele i
   kartice — dovoljno da se red izdvoji, premalo da se pročita kao izbor
   (izbor je kućica levo). Boja ide na `td`, ne na `tr`: ćelije nose donju
   liniju i sopstveni `background`, pa bi se boja sa reda videla samo tamo gde
   ćelija nije obojena. */
.gmail-table tbody tr:hover td {
    background: var(--surface-2);
}

.gmail-table td.gmail-sender {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-2);
}

/* Isečak teksta — dva reda, pa tri tačke. Pun tekst je u detalju. */
.gmail-table td.gmail-snippet {
    color: var(--ink-2);
    line-height: 1.45;
}

.gmail-snippet-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gmail-status {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 2px var(--s-2);
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--slate-soft);
    color: var(--ink-2);
}

.gmail-status[data-status="novo"] { background: var(--warn-soft); color: var(--warn); }
.gmail-status[data-status="odobreno"] { background: var(--cyan-soft); color: var(--cyan); }
.gmail-status[data-status="poslato"] { background: var(--emerald-soft); color: var(--emerald); }
.gmail-status[data-status="odbaceno"] { background: var(--rose-soft); color: var(--rose); }

/* Razlog stoji ispod statusa, sitnije — objašnjenje, ne oznaka. */
.gmail-reason {
    display: block;
    margin-top: var(--s-1);
    font-size: 10px;
    color: var(--muted);
}

.gmail-empty {
    padding: var(--s-8) var(--s-4);
    text-align: center;
    color: var(--muted);
}

/* ── Detalj: prekidač prikaza ────────────────────────────────────────────── */

.gmail-view-switch {
    display: flex;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}

.ghost-btn.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--ink);
}

/* ── Pravila ─────────────────────────────────────────────────────────────── */

/* Traka iznad spiska: „Označi sve" levo, izmena akcije desno. Traka postoji
   samo kad ima pravila, a desna polovina tek kad je nešto označeno — prazna
   kontrola koja ništa ne radi je gori nagoveštaj od nikakve. */
.gmail-rules-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
    font-size: 12px;
}

.gmail-rules-all {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding-left: var(--s-1);
    color: var(--muted);
    cursor: pointer;
}

/* Bez prelamanja: četiri kontrole u nizu traže ~484px, a traka ih ima ~660 u
   kartici od 820px. Sa `wrap` je „Primeni" padao u drugi red i traka je
   izgledala kao dve odvojene kontrole. Ispod 620px kartica je uža od trake,
   pa `responsive.css` tamo vraća prelamanje. */
.gmail-rules-bulk {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--s-2);
    margin-left: auto;
    white-space: nowrap;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--accent-ring);
    border-radius: var(--r-md);
    background: var(--accent-soft);
}

.gmail-rules-bulk-label {
    font-weight: 600;
    color: var(--ink);
}

.gmail-rules-bulk-text {
    color: var(--muted);
}

/* Fiksna širina, ista kao polja u formi ispod: sa `flex-shrink` različitim od
   nule traka sama sebe skupi na 92px, jer joj je „max-content" izračunat sa
   već skupljenim poljem. */
.gmail-rules-bulk select {
    flex: 0 0 150px;
}

.gmail-rules-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: var(--s-4);
}

.gmail-rule {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: 12px;
}

/* Kućica ne sme da se skuplja kad je obrazac dugačak. */
.gmail-rule-check {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

/* Broj pravila — isti koji odbačeni par nosi u koloni Status kao
   „PRAVILO:7". Monospace i desno poravnanje da se brojevi slažu u kolonu i
   kad pređu deseticu; `flex: 0 0 auto` da ga dugačak obrazac ne stisne. */
.gmail-rule-id {
    flex: 0 0 auto;
    min-width: 26px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    text-align: right;
}

.gmail-rule-kind {
    color: var(--muted);
    white-space: nowrap;
}

.gmail-rule-pattern {
    flex: 1;
    font-family: var(--mono);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
}

.gmail-rule-action {
    padding: 2px var(--s-2);
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 600;
    background: var(--rose-soft);
    color: var(--rose);
}

.gmail-rule-action[data-action="oznaci"] {
    background: var(--warn-soft);
    color: var(--warn);
}

.gmail-rule-action[data-action="odobri"] {
    background: var(--emerald-soft);
    color: var(--emerald);
}

.gmail-rule-action[data-action="obrisi"] {
    background: var(--slate-soft);
    color: var(--ink-2);
}

/* Flex umesto grida sa jednakim kolonama: obrazac je jedino polje kome treba
   prostor, a četiri jednake kolone su ga gušile. `flex-basis` daje svakom
   polju minimum ispod kog se prelama u nov red — bez ijednog @media bloka. */
.gmail-rule-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}

/* Sva polja rastu, obrazac tri puta brže — on je jedino kome dužina stvarno
   treba. Pet kontrola ne staje u jedan red kartice od 820px, pa se forma
   prelama sama: tri polja gore, obrazac i dugmad dole. Dva mirna reda su
   čitljivija od jednog zgusnutog, i nema nijednog @media bloka. */
.gmail-rule-form select {
    flex: 1 1 150px;
    min-width: 0;
}

.gmail-rule-form input {
    flex: 3 1 220px;
    min-width: 0;
}

.gmail-rule-form button {
    flex: 0 0 auto;
}

/* Objašnjenje četiri akcije — nabrajanje, pa `ul`, ali tonom je i dalje hint. */
.gmail-rule-legend {
    margin: var(--s-2) 0 0;
    padding-left: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Uslov stoji između vrste i obrasca, pa mora da se razlikuje od oba. */
.gmail-rule-op {
    padding: 1px var(--s-2);
    border-radius: var(--r-sm);
    background: var(--surface-3);
    color: var(--ink-2);
    font-size: 11px;
    white-space: nowrap;
}

.gmail-rules-empty {
    padding: var(--s-4);
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}