/*
 * Tobo Capital Office — kompletan stil aplikacije.
 *
 * Jedan rucno pisan fajl, servira se takav kakav jeste: nema Vite, Tailwind ni
 * bilo kakvog build koraka (vidi PROJECT-MAP.md, „Zasto bez npm"). Nema ni
 * spoljnih zahteva — font je sistemski, strelica na <select> je ugradjen SVG.
 *
 * Boje su izmerene iz logo fajla i proverene na kontrast (MASTER-PLAN, tacka 7):
 *   --brand  #769855 daje 3,28:1 na beloj => SAMO logo, ikone i ukrasi.
 *   --olive  #5A7644 daje 5,11:1 => sve sto nosi tekst (dugmad, linkovi, aktivna stavka).
 *
 * Redosled sekcija:
 *   1. Promenljive        6. Znacke i cipovi
 *   2. Osnova i reset     7. Dugmad
 *   3. Ljuska i navigacija 8. Forme i izbor ishoda
 *   4. Statisticke kartice 9. Paneli, aktivnost, poruke
 *   5. Tabela            10. Prijava, responzivnost, stampa
 */

/* ==========================================================================
   1. PROMENLJIVE
   ========================================================================== */

:root {
    /* Brend i radne boje */
    --ink-bar: #2B2E29;   /* tamna leva navigacija */
    --brand: #769855;     /* brend zelena — samo ukrasi, nikad tekst na beloj */
    --olive: #5A7644;     /* radna zelena — dugmad, linkovi, aktivna stavka */
    --olive-dark: #4C6539;
    --olive-wash: #EFF4E9;

    /* Tekst i podloge */
    --ink: #1A1D19;
    --muted: #5B615A;
    --bg: #F4F6F3;
    --surface: #FFFFFF;
    --surface-alt: #FAFBF9;  /* zebra red i zaglavlje tabele */
    --border: #DFE2E0;
    --border-soft: #ECEEEA;

    /* Tekst na tamnoj traci */
    --on-bar: #FFFFFF;
    --on-bar-muted: #A8AFA5;  /* 6,12:1 na --ink-bar */
    --on-bar-hover: rgba(255, 255, 255, .08);
    --on-bar-line: rgba(255, 255, 255, .12);

    /* Opasnost */
    --danger: #B3261E;
    --danger-bg: #FAE7E5;
    --danger-ink: #8C221B;
    --danger-border: #EFCFCB;

    /* Blage pozadine sa tamnim tekstom — kartice, znacke, cipovi */
    --c-blue-bg: #E8EFF7;   --c-blue-bd: #CBDBEC;  --c-blue-ink: #1B3A5C;
    --c-teal-bg: #E3F1EF;   --c-teal-bd: #C2E1DC;  --c-teal-ink: #12403A;
    --c-green-bg: #E9F1E0;  --c-green-bd: #D2E1C0; --c-green-ink: #33501F;
    --c-red-bg: #FAE7E5;    --c-red-bd: #EFCFCB;   --c-red-ink: #8C221B;
    --c-amber-bg: #FBF0DA;  --c-amber-bd: #EEDCB2; --c-amber-ink: #6B4A08;
    --c-slate-bg: #E9EEF4;  --c-slate-bd: #D3DDE8; --c-slate-ink: #33475C;
    --c-gray-bg: #EDEFEC;   --c-gray-bd: #DDE1DA;  --c-gray-ink: #4E544D;
    --c-hot-bg: #FBEADC;    --c-hot-bd: #EFD3B7;   --c-hot-ink: #7A3B10;

    /* Mere */
    --radius: 10px;
    --radius-sm: 8px;
    --sidebar-w: 232px;
    --ring: 0 0 0 3px rgba(90, 118, 68, .20);
    --shadow: 0 1px 2px rgba(26, 29, 25, .05), 0 8px 24px rgba(26, 29, 25, .06);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;
}

/* ==========================================================================
   2. OSNOVA I RESET
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* `hidden` mora da pobedi svaku klasu.
   Podrazumevani stil pregledaca za `hidden` je `display: none`, ali ga obara
   BILO KOJE pravilo po klasi — a `.btn` je `inline-flex`, pa je dugme sa
   `hidden` ostajalo na ekranu. To se vec desilo i zakrpljeno je cetiri puta
   pojedinacno (`.dial-text[hidden]`, `.user-menu[hidden]`, dva na `.picker__`).
   Ovde stoji jednom, za sve. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.01em;
}

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: var(--olive); }
a:hover { color: var(--olive-dark); }

/* Vidljiv fokus na tastaturi — nikad se ne gasi bez zamene. */
:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
}

/* ==========================================================================
   3. LJUSKA I NAVIGACIJA
   ========================================================================== */

.shell {
    display: flex;
    align-items: flex-start;   /* bez ovoga sidebar ne moze da bude sticky */
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 22px 14px 18px;
    background: var(--ink-bar);
    color: var(--on-bar);
    z-index: 10;
}

.sidebar__brand {
    display: block;
    width: 100%;
    padding: 0 8px 22px;
    text-decoration: none;
}

.sidebar__brand:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Kvadratna marka se vidi samo kad je meni suzen. Selektor mora da bude bar
   isto toliko specifican kao `.sidebar__brand img` ispod, inace ga taj gazi. */
.sidebar__brand .sidebar__mark { display: none; }

.sidebar__brand img {
    display: block;
    width: 100%;
    max-width: 168px;
    height: auto;
}

.sidebar__nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--on-bar-muted);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

/* Crveni krug sa brojem novih prijava.
   `margin-left: auto` ga gura na desnu ivicu stavke; `min-width` uz okrugli
   radijus daje krug za jednu cifru, a pilulu za dve — broj se ne secka. */
.nav-item__count {
    margin-left: auto;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #C5352C;
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* U skupljenom meniju nema mesta za broj uz ime, pa se lepi na ugao ikone —
   i dalje se vidi da nesto ceka. */
.nav-collapsed .nav-item { position: relative; }

.nav-collapsed .nav-item__count {
    position: absolute;
    top: 2px;
    right: 2px;
    margin-left: 0;
    min-width: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
}

.nav-item:hover {
    background: var(--on-bar-hover);
    color: var(--on-bar);
}

/* Ikone su ugradjeni SVG sa stroke="currentColor" — prate boju stavke. */
.nav-item svg {
    flex: none;
    width: 18px;
    height: 18px;
}

/* Aktivna stavka je TIHA: svetlija traka i zelena crta levo. Do 25.09.2026 je
   bila puna olive — ista kao „Apply now" ispod, pa su na ekranu stajale dve
   iste zelene trake i nije se znalo koja je ekran na kome si, a koja dugme.
   Zelena podloga sada pripada samo radnji. Bela na ovoj podlozi je ~12:1. */
.nav-item--active,
.nav-item--active:hover {
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 3px 0 0 var(--brand);
    color: var(--on-bar);
    font-weight: 600;
}

/* „Apply now" — radnja, ne ekran sa spiskom. Zelena i kad NIJE izabrana, pa se
   od stavki odvaja i razmakom. Olive, ne --brand: bela na --brand je 3,28:1. */
.nav-item--apply {
    margin-top: 12px;
    background: var(--olive);
    color: var(--on-bar);
    font-weight: 600;
}

.nav-item--apply:hover,
.nav-item--apply-active {
    background: var(--olive-dark);
    color: var(--on-bar);
}

/* --- Sat prodajnog tima (America/Chicago) ---------------------------------
   Ekipa radi iz Srbije a zove SAD, pa je „koliko je tamo sati" pitanje koje se
   postavlja pre svakog poziva. Stoji uz podnozje, iznad linije. */

.clock {
    margin-top: auto;      /* gura podnozje na dno i kad je meni kratak */
    padding: 0 8px 12px;
    text-align: center;
    line-height: 1.25;
    /* Cifre iste sirine — inace se ceo sat pomera pri svakoj promeni minuta. */
    font-variant-numeric: tabular-nums;
}

.clock__time {
    color: var(--on-bar);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
}

.clock__date {
    color: var(--on-bar-muted);
    font-size: 11.5px;
}

.sidebar__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--on-bar-line);
}

.sidebar__foot strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--on-bar);
    line-height: 1.3;
}

.sidebar__foot .btn--link {
    color: var(--on-bar-muted);
    font-size: 12.5px;
}

.sidebar__foot .btn--link:hover { color: var(--on-bar); }

.avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--olive);   /* nosi tekst, pa ne sme brend zelena */
    color: var(--on-bar);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.content {
    flex: 1 1 auto;
    min-width: 0;              /* bez ovoga siroka tabela razvuce ljusku */
    padding: 28px 32px 64px;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.page-head__title {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    color: var(--ink);
}

.page-head__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ==========================================================================
   4. STATISTICKE KARTICE
   ========================================================================== */

.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

/* Kolona, da veza „View …" uvek sedne na dno kartice: kartica „Calls today"
   ima red vise („Talk time"), pa je njena veza stajala 20px nize od ostalih. */
.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}

.stat__value {
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.stat__label {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    opacity: .82;
}

.stat__link {
    display: inline-block;
    margin-top: auto;
    padding-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.stat__link:hover { color: inherit; opacity: .78; }

/* Blage pozadine, tamno slovo — nikad jarke boje. */
.stat--blue  { background: var(--c-blue-bg);  border-color: var(--c-blue-bd);  color: var(--c-blue-ink); }
.stat--teal  { background: var(--c-teal-bg);  border-color: var(--c-teal-bd);  color: var(--c-teal-ink); }
.stat--green { background: var(--c-green-bg); border-color: var(--c-green-bd); color: var(--c-green-ink); }
.stat--red   { background: var(--c-red-bg);   border-color: var(--c-red-bd);   color: var(--c-red-ink); }
.stat--slate { background: var(--c-slate-bg); border-color: var(--c-slate-bd); color: var(--c-slate-ink); }
.stat--amber { background: var(--c-amber-bg); border-color: var(--c-amber-bd); color: var(--c-amber-ink); }

/* Red od dve kartice iznad glavnih cetiri: „Total clients" i „New · 2y+".
   Stoji PRE media upita sekcije 14, pa se na uzem ekranu slaze isto kao `.stats`. */
.stats--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Plejer snimka — jedan za ceo spisak, prikacen za dno prozora. Pedeset
   plejera u pedeset redova nije alat za pregled nego pedeset klikova. */
.player {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	padding: 12px 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
}
.player__title { flex: 0 1 auto; font-size: 13px; font-weight: 650; }

/* Dugme „Boost" u plejeru. Stanje se NE vidi po tekstu — on ostaje isti —
   nego po tome sto je dugme pritisnuto. Bez ove boje covek ne bi znao da li
   slusa pojacan ili sirov zvuk, a razlika je bas ono zbog cega dugme postoji. */
.player [data-player-jace][aria-pressed="true"] {
    background: var(--olive-wash);
    border-color: var(--olive);
    color: var(--olive-dark);
}
.player__audio { flex: 1 1 auto; min-width: 0; height: 34px; }

@media (max-width: 700px) {
	.player { flex-wrap: wrap; }
	.player__audio { width: 100%; }
}

/* Naslov odeljka unutar stranice. Klasa se vec koristila (calls/unmatched,
   dashboard) a nije bila definisana, pa je h2 sa `margin: 0` naletao pravo na
   prethodni blok. */
.section-title {
    margin: 24px 0 10px;
    font-size: 16px;
}

/* ==========================================================================
   5. TABELA
   ========================================================================== */

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;          /* uska sirina => vodoravno skrolovanje */
}

/* Napomena ispod tabele je lezala 4px ispod ivice i citala se kao deo tabele,
   a panel „Add user" je naleteo pravo na nju pa su dva okvira izgledala kao
   jedan. Samo susedni element — razmak iznad straniciranja ostaje kakav je. */
.table-wrap + p,
.table-wrap + .muted { margin-top: 12px; }

.table-wrap + .panel { margin-top: 20px; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table th {
    padding: 12px 16px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}

.table tbody tr:nth-child(even) { background: var(--surface-alt); }
.table tbody tr:hover { background: var(--olive-wash); }
.table tbody tr:last-child td { border-bottom: 0; }

.table a {
    color: var(--olive);
    font-weight: 600;
    text-decoration: none;
}

.table a:hover { text-decoration: underline; }

/* Neuparen broj na ekranu Calls je dugme (POST — klik otvara firmu), ali mora
   da izgleda isto kao naziv firme u redu iznad i ispod. */
.table .btn--link.cell-link {
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    text-decoration: none;
}

.table .btn--link.cell-link:hover { text-decoration: underline; }

/* DUGME U TABELI JE I DALJE DUGME.
   `.table a` (0,1,1) ima vecu specificnost od `.btn--primary` (0,1,0), pa je
   maslinasta boja linka gazila belu boju dugmeta — zeleno slovo na zelenoj
   podlozi. Na Follow-ups stranici je „Call now" bio prazan zeleni pravougaonik:
   tekst je bio u dokumentu, citac ekrana ga je video, oko nije.
   Vazi za sva stanja, jer `.table a` boji i njih. */
.table a.btn--primary { color: #fff; }

/* Sitniji prigusen red ispod glavnog (npr. „DOT 1234567" ispod naziva firme). */
.cell-sub {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

/* Stoji kao <td colspan> kad rezultata nema. */
.table__empty {
    padding: 44px 16px;
    color: var(--muted);
    text-align: center;
}

.table tbody tr:hover .table__empty { background: transparent; }

/* ---------- Stupci koji se ne lome (racunar i tablet) ----------
   Tabela sa `width: 100%` kad nema mesta stisne SVAKI stubac na najmanju
   sirinu: telefon je padao u tri reda („(588) / 416- / 6087"), datum u dva, a
   beleska i poruka na jednu rec po redu, dok su uski stupci cuvali prazninu.
   Broj, datum i iznos se zato ne lome, a naziv firme, beleska i poruka imaju
   donju granicu. Kad ni tada nema mesta, `.table-wrap` skroluje vodoravno sa
   citljivim stupcima — to je bolje od gnjecenja. Ispod 700px tabela je
   kartica (sekcija 14) i ovo tamo ne vazi. */
@media (min-width: 701px) {
    .table td[data-label="Phone"],
    .table td[data-label="Number"],
    .table td[data-label="When"],
    .table td[data-label="Received"],
    .table td[data-label="Call back on"],
    .table td[data-label="Last call"],
    .table td[data-label="Expires"],
    .table td[data-label="Last login"],
    .table td[data-label="Started"],
    .table td[data-label="Finished"],
    .table td[data-label="Completed"],
    .table td[data-label="Credit authorized"],
    .table td[data-label="Last update"] { white-space: nowrap; }

    /* Spisak mejlova ima svoju raspodelu sirine (naslov 55%), pa ga ovo ne dira. */
    .table:not(.mail-list) td[data-label="Company"] { min-width: 10em; }
    .table td[data-label="Note"] { min-width: 16em; }
    .table td[data-label="Message"] { min-width: 18em; }
}

/* Deo celije koji se ne sme prelomiti (iznos, broj telefona uz znacku). */
.nowrap { white-space: nowrap; }

/* ==========================================================================
   6. ZNACKE I CIPOVI
   ========================================================================== */

.badge {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
    white-space: nowrap;
}

.badge--good    { background: var(--c-green-bg); border-color: var(--c-green-bd); color: var(--c-green-ink); }
.badge--bad     { background: var(--c-red-bg);   border-color: var(--c-red-bd);   color: var(--c-red-ink); }
/* „2y+" — firma 2+ godine u biznisu, uvezena iz FMCSA (docs/fmcsa-2y-plan.md). */
.badge--2y      { background: var(--c-amber-bg); border-color: var(--c-amber-bd); color: var(--c-amber-ink); font-weight: 700; }
.badge--warn    { background: var(--c-amber-bg); border-color: var(--c-amber-bd); color: var(--c-amber-ink); }
.badge--neutral { background: var(--c-slate-bg); border-color: var(--c-slate-bd); color: var(--c-slate-ink); }
.badge--muted   { background: var(--c-gray-bg);  border-color: var(--c-gray-bd);  color: var(--c-gray-ink); }

/* Oznaka prodavca — svaki covek svoju boju, kao oznake u posti.
   U spisku od pedeset redova oko se vodi bojom, ne citanjem imena; „ciji je ovo
   lid" postaje pitanje na koje se odgovara pogledom.
   Boja ide po `id` (vidi User::badgeTone), pa je ista na svakom ekranu i ne
   menja se kad se ime ispravi. */
.badge--rep-1 { background: var(--c-blue-bg);  border-color: var(--c-blue-bd);  color: var(--c-blue-ink); }
.badge--rep-2 { background: var(--c-teal-bg);  border-color: var(--c-teal-bd);  color: var(--c-teal-ink); }
.badge--rep-3 { background: var(--c-green-bg); border-color: var(--c-green-bd); color: var(--c-green-ink); }
.badge--rep-4 { background: var(--c-amber-bg); border-color: var(--c-amber-bd); color: var(--c-amber-ink); }
.badge--rep-5 { background: var(--c-hot-bg);   border-color: var(--c-hot-bd);   color: var(--c-hot-ink); }
.badge--rep-6 { background: var(--c-slate-bg); border-color: var(--c-slate-bd); color: var(--c-slate-ink); }
.badge--rep-7 { background: var(--c-red-bg);   border-color: var(--c-red-bd);   color: var(--c-red-ink); }
.badge--rep-8 { background: var(--c-gray-bg);  border-color: var(--c-gray-bd);  color: var(--c-gray-ink); }

/* Cip = ocena lida. Uglastiji od znacke, da se dva podatka razlikuju na prvi pogled. */
.chip {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.6;
    text-transform: uppercase;
    white-space: nowrap;
}

.chip--cold   { background: var(--c-slate-bg); border-color: var(--c-slate-bd); color: var(--c-slate-ink); }
.chip--normal { background: var(--c-gray-bg);  border-color: var(--c-gray-bd);  color: var(--c-gray-ink); }
.chip--hot    { background: var(--c-hot-bg);   border-color: var(--c-hot-bd);   color: var(--c-hot-ink); }

/* ==========================================================================
   7. DUGMAD
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.btn:hover { background: var(--bg); color: var(--ink); }

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    /* Bez ovoga `aria-disabled` samo IZGLEDA kao ugaseno: <a> i dalje vodi na
       svoju adresu. Klik se hvata i u skripti, ali stil ne sme da laze. */
    pointer-events: none;
}

.btn--primary {
    background: var(--olive);
    border-color: var(--olive);
    color: #fff;
}

.btn--primary:hover {
    background: var(--olive-dark);
    border-color: var(--olive-dark);
    color: #fff;
}

.btn--ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--ink);
}

.btn--ghost:hover { background: var(--bg); }

.btn--danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.btn--danger:hover { background: #96201A; border-color: #96201A; color: #fff; }

.btn--link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--olive);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn--link:hover { background: none; color: var(--olive-dark); }

.btn--block {
    display: flex;
    width: 100%;
}

.btn--lg {
    padding: 14px 22px;
    border-radius: var(--radius);
    font-size: 16px;
}

/* ==========================================================================
   8. FORME I IZBOR ISHODA
   ========================================================================== */

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }

.field__label {
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.input,
.textarea,
.select {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
}

.input::placeholder,
.textarea::placeholder { color: #8D938B; }

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: var(--olive);
    box-shadow: var(--ring);
}

.textarea {
    min-height: 120px;
    resize: vertical;
}

/* Strelica je ugradjen SVG (data URI) — nema spoljnog zahteva. */
.select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235B615A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.field__error {
    display: block;
    margin-top: 6px;
    color: var(--danger);
    font-size: 13px;
    font-weight: 500;
}

/*
 * .form-row je red polja koja stoje jedno pored drugog. (Kolone kartice
 * klijenta od 25.09.2026 nisu ovde nego u `.client-cols` — vidi kraj fajla.)
 */
.form-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.form-row > * {
    flex: 1 1 220px;
    min-width: 0;
    margin-bottom: 0;
}

/*
 * Red dugmadi na dnu obrasca: glavna radnja PRVA, „Cancel" posle nje, svako
 * dugme svoje prirodne sirine. U `.form-row` su dugmad dobijala `flex: 1 1
 * 220px`, pa su „Save company" i „Cancel" na 1920px bili dve trake od po 770px,
 * a tri dugmeta za saglasnost su stajala na 0%, 33% i 66% sirine sa prazninom
 * izmedju. Dugme u sopstvenoj <form> (saglasnost) se isto ne razvlaci.
 */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.form-actions:last-child { margin-bottom: 0; }

.form-actions > .btn,
.form-actions > form { flex: 0 0 auto; margin: 0; }

/* Na telefonu je svako dugme preko cele sirine (`.btn { width: 100% }`
   ispod 620px) — i ono u sopstvenoj <form>, koja bi inace ostala uska. */
@media (max-width: 620px) {
    .form-actions > form { flex: 1 1 100%; }
}

/* Napomena ispod polja je lezala 0–6px iznad reda dugmadi i citala se kao
   natpis na dugmetu. */
.field__hint + .form-row,
.field__hint + .form-actions { margin-top: 12px; }

/* --- Izbor ishoda poziva i ocene (radio dugmad kao pravougaonici) --- */

.choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/*
 * Tri kratka izbora u JEDNOM redu (ocena: Cold / Normal / Hot). U dve kolone je
 * treci visio sam u svom redu i uzimao visinu u uzoj, desnoj koloni.
 */
.choices--tri {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.choices--tri .choice {
    padding: 9px 8px;
    gap: 6px;
    font-size: 13px;
}

/*
 * Dva odgovora na isto pitanje stoje jedan pored drugog i u uskoj koloni.
 * Podrazumevano `.form-row > *` ima `flex: 1 1 220px`, pa bi se prelomili.
 */
.form-row--tesno > * {
    flex: 1 1 0;
    font-size: 13px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

.choice {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.choice:hover { background: var(--bg); border-color: #C8CFC4; }

.choice input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--olive);
    cursor: pointer;
}

.choice:focus-within {
    border-color: var(--olive);
    box-shadow: var(--ring);
}

/*
 * Izabrano stanje radi bez JavaScript-a. :has(input:checked) je glavni put;
 * .choice--selected je rezerva koju server ispisuje iz old()/sacuvane vrednosti
 * (i jedini put u pregledacima bez :has).
 */
.choice:has(input:checked),
.choice--selected {
    border-color: var(--olive);
    background: var(--olive-wash);
    box-shadow: inset 0 0 0 1px var(--olive);
    color: var(--ink);
}

/* ==========================================================================
   9. PANELI, AKTIVNOST, PORUKE
   ========================================================================== */

.panel {
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.panel:last-child { margin-bottom: 0; }

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--ink);
    font-size: 14px;
    font-weight: 650;
}

.panel__body { padding: 18px; }

/* Obrazac koji stoji sam na ekranu (nova firma, neuparen poziv, pisanje
   mejla i SMS-a, Apply now). Preko cele sirine od 1920px polje za naziv je
   bilo 1555px, a dugme traka od 770px — obrazac je izgledao naduvan, a red
   teksta predugacak za citanje. */
.panel--narrow { max-width: 880px; }

/* Poruka iznad takvog obrasca („Texting is switched off…", greske pri
   slanju, greske na Apply now) ide do iste desne ivice. Preko cele sirine je
   na 1920px bila 1590px, a obrazac ispod nje 880px — desne ivice nisu bile u
   liniji. Pravilo gleda sta sledi na stranici, pa vazi za svaku poruku iznad
   uskog obrasca (SMS, oba mejla, Apply now, nova firma) bez posebne klase u
   svakom pogledu. */
.content > .alert:has(~ .panel--narrow, ~ form > .panel--narrow, ~ .client-cols--solo) { max-width: 880px; }

/* Lista „polje — vrednost" (<dl>). */
.kv {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 9px 16px;
    margin: 0;
    font-size: 14px;
}

.kv__k {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.kv__v {
    margin: 0;
    color: var(--ink);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Desna kolona na kartici klijenta — prati skrolovanje. */
.sticky-col {
    position: sticky;
    top: 16px;
    align-self: flex-start;
    /* 372px (bilo 340) — vlasnik 25.09.2026: „Wrong number" je lomio u dva
       reda i dizao ceo red ishoda. Sa 372px oba izbora u redu staju u jedan. */
    flex: 0 0 372px;
    max-width: 100%;
}

/* Izbori u koloni za poziv se ne lome (vidi sirinu iznad). Ispod 1100px je
   kolona preko cele sirine, pa mesta ima i bez ovoga. */
.sticky-col .choice { white-space: nowrap; }

/* --- Aktivnost (beleske uz klijenta, najnovije gore) --- */

.activity {
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity__item {
    padding: 14px 0;
    border-top: 1px solid var(--border-soft);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.activity__item:first-child { border-top: 0; padding-top: 0; }
.activity__item:last-child { padding-bottom: 0; }

.activity__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12.5px;
}

/* --- Straniciranje (simplePaginate: samo napred/nazad, bez ukupnog broja) --- */

.pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
    color: var(--muted);
    font-size: 14px;
}

.pagination__link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--olive);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.pagination__link:hover { background: var(--bg); color: var(--olive-dark); }

.pagination__link[aria-disabled="true"] {
    color: var(--muted);
    opacity: .55;
    pointer-events: none;
}

/* --- Poruke --- */

.alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 14px;
}

.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert p:last-child { margin-bottom: 0; }

.alert--error {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-ink);
}

.alert--ok {
    background: var(--c-green-bg);
    border-color: var(--c-green-bd);
    color: var(--c-green-ink);
}

/* Nije greska, ali se ne sme prevideti — npr. „ovaj broj vec nosi neka firma".
   Bez modifikatora `.alert` nema ni podlogu ni ivicu, pa se upozorenje cita kao
   obican pasus i covek ga preskoci. */
.alert--warn {
    background: var(--c-amber-bg);
    border-color: var(--c-amber-bd);
    color: var(--c-amber-ink);
}

.alert--warn a { color: inherit; }

/* Prazan ekran (npr. „Your queue is empty."). */
.empty {
    padding: 48px 24px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    text-align: center;
}

/* --- Sitni pomocni elementi --- */

.muted {
    color: var(--muted);
    font-size: .92em;
}

.danger-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--danger);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.danger-link:hover { color: #96201A; }

/* Upozorenje koje se NE klikce.
   „Outside calling hours" je stajalo kao `.danger-link` — crveno, podvuceno i sa
   `cursor: pointer`, dakle vizuelno dugme. Ljudi su ga klikali i nista se nije
   desavalo. Ista boja, bez podvlacenja i bez ruke; ispred stoji tacka da se vidi
   da je odvojena napomena, a ne nastavak recenice. */
.notice-warn {
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
    cursor: default;
}

.notice-warn::before {
    content: '·';
    margin: 0 6px 0 2px;
    color: var(--muted);
    font-weight: 400;
}

/* --- Pretraga (okida se na Enter ili dugme, nikad na kucanje) --- */

.search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.search__input {
    flex: 1 1 280px;
    max-width: 420px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
}

.search__input::placeholder { color: #8D938B; }

.search__input:focus {
    outline: none;
    border-color: var(--olive);
    box-shadow: var(--ring);
}

/* ==========================================================================
   10. PRIJAVA, RESPONZIVNOST, STAMPA
   ========================================================================== */

.guest {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background: var(--bg);
}

.guest__card {
    width: 100%;
    max-width: 400px;
    padding: 32px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--brand);   /* ukras, ne nosi tekst */
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

/* Link-dugme na kartici prijave („Sign out", „Sign in as someone else").
   Bilo je 20px visoko — ispod dodirne zone — a na telefonu se razvlacilo
   preko cele sirine, pa je menjalo izgled izmedju sirina. Centrira ga
   `.challenge-cancel` (sekcija 18). */
.guest__card .btn--link { min-height: 32px; width: auto; }

/* Tamna verzija logotipa na svetloj kartici. */
.guest__logo {
    display: block;
    margin: 0 auto 26px;
    max-width: 200px;
    height: auto;
    text-align: center;
}

.guest__logo img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto;
}

/* --- Uzi ekran: leva navigacija postaje vodoravna traka na vrhu --- */



@media (max-width: 760px) {
    .content { padding: 18px 14px 40px; }

    .page-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    /* Tabela se skroluje vodoravno umesto da se gnjeci. */
    .table-wrap { overflow-x: auto; }
    .table { min-width: 680px; }

    .choices { grid-template-columns: 1fr; }

    .kv { grid-template-columns: 1fr; gap: 2px; }
    .kv__k { margin-top: 10px; }
    .kv__k:first-child { margin-top: 0; }

    .panel__body { padding: 16px; }
    .guest__card { padding: 24px; }
}

@media (max-width: 620px) {
    .stats { grid-template-columns: 1fr; }
    .search__input { max-width: none; }
    .btn { width: 100%; }
    .page-head__actions { width: 100%; }
}

/* --- Stampa: bez navigacije i bez kontrola --- */

@media print {
    .sidebar,
    .btn,
    .page-head__actions,
    .pagination,
    .search,
    .choices,
    .danger-link { display: none !important; }

    .shell { display: block; }
    .content { padding: 0; }

    body { background: #fff; color: #000; font-size: 12px; }

    .panel,
    .table-wrap,
    .stat {
        border-color: #BBB;
        box-shadow: none;
        break-inside: avoid;
    }

    .table-wrap { overflow: visible; }
    .table { min-width: 0; }
    a { color: #000; text-decoration: none; }
}

/* ==========================================================================
   11. FAZA 2 — RED FILTERA, DNEVNI CILJ, SKRACENA BELESKA

   Sekcija je dodata na KRAJ namerno: nijedno postojece pravilo iz sekcija
   1–10 nije dirano, pa se izmena moze ukloniti brisanjem ovog bloka.

   Ekrani Faze 2 (Calls, Follow-ups, filteri na Clients) i Faze 3 (dugme
   „Call now" koje otvara RingCentral) ne uvode nijednu klasu preko ove tri
   grupe — sve ostalo su vec postojece .badge/.chip/.btn/.table/.muted klase.
   Provereno 13.08.2026: svaka klasa iz Blade-a ima pravilo, svaki var() ima
   definiciju u :root.
   ========================================================================== */

/* --- Red filtera iznad tabele (Clients i Calls) ---------------------------
 *
 * Filteri se primenjuju na dugme „Apply filters", nikad na promenu <select>-a:
 * nad 605.598 redova svaka promena bila bi nov upit, a korisnik obicno menja
 * dva-tri polja pre nego sto zaista trazi rezultat.
 */

.filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.filters__field {
    flex: 1 1 160px;
    min-width: 0;
}

/* Na racunaru je red filtera MREZA jednakih kolona. Kao flex, polje u
   prelomljenom redu je raslo do duple sirine onih iznad (768px: „Trucks" i
   „Expires"), a jedino polje na Leads je bilo traka od 1590px. Kolona od
   najmanje 128px drzi sest filtera i „Apply filters" u JEDNOM redu na 1366px
   i uz skrolbar od 17px i uvecanje stranice (sve do prozora od ~1318px); sa
   136px je rezerva bila 2px i vec klasican Windows skrolbar je obarao
   „Apply filters" u drugi red. „Apply filters" (~117px) i dalje staje u
   celiju. „Clear", kad ga ima, pada ispod „Apply filters" u istoj celiji.
   Ispod 700px vazi raspored sa flex-om (sekcija 14). */
@media (min-width: 701px) {
    .filters {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
        align-items: end;
    }

    .filters__actions { flex-wrap: wrap; }
}

.filters__label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.filters__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* --- Filteri sklopljeni pod „Filters" (telefon) ---------------------------
 * Na 390px je sest filtera, jedan ispod drugog, zauzimalo ~530px, pa prva
 * firma nije bila na ekranu bez skrolovanja. Na telefonu su zato sklopljeni
 * dok nijedan nije izabran; na racunaru se naslov ne vidi i sve je otvoreno.
 * Server uvek ispisuje `open` (bez JavaScripta sve radi kao ranije), a
 * sklapa ih mala skripta uz sam obrazac.
 */
.filters-fold > summary { display: none; }

@media (max-width: 700px) {
    .filters-fold { margin-bottom: 18px; }

    .filters-fold > summary {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--ink);
        font-size: 14px;
        font-weight: 600;
        list-style: none;
        cursor: pointer;
    }

    .filters-fold > summary::-webkit-details-marker { display: none; }

    /* Ista tanka strelica kao na <select>, okrenuta nagore kad je otvoreno. */
    .filters-fold > summary::after {
        content: "";
        width: 12px;
        height: 8px;
        margin-left: auto;
        background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235B615A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    }

    .filters-fold[open] > summary::after { transform: rotate(180deg); }

    .filters-fold[open] > summary {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .filters-fold > .filters {
        margin-bottom: 0;
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .filters-fold__count {
        color: var(--olive);
        font-weight: 600;
    }
}

/* --- Traka dnevnog cilja („Today: 27 of 40 calls") ------------------------
 *
 * Meri se danasnji dan, nikad procenat baze — vidi config/office.php.
 */

.goal {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.goal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.goal__label {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

.goal__track {
    height: 10px;
    border-radius: 999px;
    background: var(--border-soft);
    overflow: hidden;
}

/* Radna zelena (5,11:1) — traka nosi znacenje, pa ne sme na brend zelenu. */
.goal__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--olive);
}

/* --- Beleska skracena na 80 znakova u spisku poziva --- */

.note-cell {
    display: block;
    max-width: 380px;
    color: var(--muted);
}

@media (max-width: 620px) {
    /* Na uskom ekranu svako polje filtera ide u svoj red; .btn je vec 100%. */
    .filters__field { flex-basis: 100%; }
    .filters__actions { width: 100%; flex-wrap: wrap; }
    .note-cell { max-width: none; }
}

@media print {
    .filters,
    .goal { display: none !important; }

    .note-cell { max-width: none; }
}

/* ---------- 12. Pozivi iz centrale (rc_calls) ----------
   Stavka koju je upisala masina, ne covek. Namerno prigusenija od beleske
   prodavca i sa levom crtom, da se na prvi pogled razlikuje ko je autor. */

.activity__item--system {
    border-left: 3px solid var(--border);
    padding-left: 12px;
    background: var(--surface-alt, #FAFBF9);
}

.activity__item--system .activity__meta {
    color: var(--muted);
}

.activity__item--system svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 4px;
}

.activity__item--system p {
    margin: 2px 0 0;
    font-size: .92em;
}

/* Red u listi poziva koji dolazi iz centrale, ne od prodavca. */
.row--system td { background: var(--surface-alt, #FAFBF9); }

/* ---------- 13. „Called, no note" u spisku firmi ----------
   Sitan red ispod znacke statusa: centrala je zabelezila poziv, a beleska
   prodavca nije stigla. Klasa je namerno `.cell-sub` (isti oblik kao „DOT
   1234567" ispod naziva), pa se boja daje samo tamo gde stoji ODMAH IZA
   znacke — tako se ne dira nijedan postojeci `.cell-sub` na drugim ekranima.

   Amber, ne crveno: ovo nije greska prodavca nego posao koji ceka. Ista
   nijansa koju nosi `.badge--warn`, da jedna boja svuda znaci isto. */

.table .badge + .cell-sub {
    color: var(--c-amber-ink);
    font-weight: 600;
}

/* ---------- 13. Uredjivanje podataka klijenta (panel „Company details") ----------
   Panel je od sada forma: polja koja prodavac sme da menja nose <input>, ostala
   ostaju obican tekst. Lista je i dalje .kv — ista dva stupca, isti raspored —
   samo sa vecim uspravnim razmakom, jer bi se okviri polja inace dodirivali. */

.kv--form {
    row-gap: 12px;
    align-items: start;
}

/* Naziv polja se poravnava sa tekstom U polju, ne sa gornjom ivicom okvira:
   10px unutrasnjeg odmaka + 1px okvira = 11px. */
.kv--form .kv__k { padding-top: 11px; }

/* Vrednost koja se NE menja je gola, pa joj se isti odmak vraca rucno —
   bez ovoga bi statican red „skakao" gore u odnosu na svoj naziv. */
.kv--form .kv__v--static { padding-top: 11px; }

/* Greska ispod polja ne sme da razmakne stubac — .field__error je vec block. */
.kv--form .field__error { margin-top: 5px; }

/* Dugme „Save changes" i, ispod njega, trag o poslednjoj izmeni. */
.edit-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* Podnozje bez ijednog reda — firma jos nije menjana, a autosave jos nije
   nista javio — bilo je linija i 50px praznine, kao da fali dugme. Vraca se
   samo cim skripta upise „Saved" ili server ispise „Last edited by".
   Sklanjaju se crta i razmak, NE sam element: `.save-state` je `aria-live`
   oblast i mora biti u stablu pristupacnosti PRE nego sto se u nju upise
   „Saved" — citac ekrana ne najavljuje oblast koja se pojavi zajedno sa
   tekstom, a to je jedina potvrda cuvanja na obrascu (dugmeta nema). */
.edit-actions:has(.save-state:empty):not(:has(.edit-meta)) {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Prazan `<span>` sa levom marginom pravi red visok ~20px (red sa marginom
   nije „prazan" za raspored). Bez teksta margina nema sta da odmakne. */
.save-state:empty { margin-left: 0; }

/* Stanje automatskog cuvanja, uz dugme „Save changes".
   Do sada je jedini znak da je nesto sacuvano bio ponovo ucitan ekran — pa je
   covek koji promasi dugme mislio da je sacuvao, a nije. */
.save-state {
    margin-left: 12px;
    font-size: 13px;
    color: var(--muted);
}

.save-state--ok { color: var(--olive); font-weight: 600; }
.save-state--bad { color: var(--danger); font-weight: 600; }

/* Polje koje je server odbio. */
.input--bad {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px rgba(178, 40, 32, .12);
}

/* „Last edited by ... on ..." — sitno i prigusen: to je trag, ne poruka. */
.edit-meta {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 760px) {
    /* Na uskom ekranu .kv pada u jedan stubac (naziv stoji IZNAD polja),
       pa poravnanje sa tekstom u polju vise nema sta da poravna. */
    .kv--form .kv__k,
    .kv--form .kv__v--static { padding-top: 0; }
}

/* Broj i datum ne zasluzuju celu sirinu stupca — polje sirine celog panela za
   cetvorocifren broj izgleda kao greska u rasporedu. */
.input--num { max-width: 8em; }
.input--date { max-width: 12em; }

/* Polje i veza uz njega (DOT/MC + „Look up on SAFER"). Veza pada ISPOD polja
   kad stubac postane uzak, umesto da stisne polje na dva znaka. */
.with-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.with-link .input {
    flex: 1 1 9em;
    min-width: 0;
}

/* Veza ka tudjem sajtu (SAFER). Sitna i prigusena — to je pomoc pri proveri,
   a ne radnja zbog koje se dolazi na karticu. */
.ext-link {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ext-link:hover {
    color: var(--olive);
    text-decoration: underline;
}

/* Oznake sa SAFER-a („Active", „Authorized") desno od veze. Sitnije od
   obicne znacke — pomoc pri proveri, ne glavni podatak kartice. `title` nosi
   detalje (pravni naziv, vrsta dozvole, kad je provereno), pa kursor pita. */
.safer-status {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    /* Ista sirina u redu DOT i MC: „Active" i „Authorized" stoje jedna ispod
       druge, a polja i veze u oba reda ostaju poravnati (vlasnik, 18.09.2026).
       Sirina prima i najduzu oznaku, „Authority out of service". */
    flex: 0 0 11.5rem;
    cursor: help;
}

.safer-status[hidden] {
    display: none;
}

.safer-status .badge {
    padding: 2px 8px;
    font-size: 11px;
    white-space: nowrap;
}

/* ---------- „Send link" — obrazac za prijavu, poslat sa poziva ----------
   <details> se otvara bez ijedne linije JavaScripta. Trougao koji pregledac
   sam crta se sklanja, jer element vec izgleda kao dugme. */
.send-link { margin-bottom: 10px; }

.send-link__button {
    list-style: none;
    cursor: pointer;
}

.send-link__button::-webkit-details-marker { display: none; }

.send-link__list {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}

.send-link__list .muted {
    margin: 0 0 8px;
    font-size: 12px;
}

.send-link__item {
    display: block;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 13px;
    text-decoration: none;
}

.send-link__item:hover { background: var(--surface); }

.send-link__item + .send-link__item { margin-top: 2px; }

/* Cela adresa stoji ispod naziva usluge: prodavac vidi STA tacno salje pre
   nego sto klikne, a ne tek na ekranu za pisanje poruke. */
.send-link__url {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   14. TRAKA, FIOKA I SKUPLJANJE MENIJA
   ==========================================================================
   Meni ima tri stanja:
     - desktop, otvoren        (podrazumevano)
     - desktop, skupljen       html.nav-collapsed  -> samo ikonice, 64px
     - uzak ekran, fioka       body.nav-open       -> klizi preko sadrzaja
   Stanje skupljenog menija se pamti u localStorage i primenjuje PRE iscrtavanja
   (vidi inline skriptu u layouts/app.blade.php), da ne bi skakao pri svakom
   ucitavanju.
   ========================================================================== */

:root { --topbar-h: 56px; }

/* ---------- Gornja traka (samo uzak ekran) ---------- */

.topbar {
    display: none;                 /* na desktopu je nema */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-h);
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    background: var(--ink-bar);
    z-index: 50;
}

.topbar__brand img {
    display: block;
    height: 26px;
    width: auto;
}

.topbar__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.topbar__burger span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

.topbar__burger:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }

/* ---------- Zatamnjenje iza fioke ---------- */

.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26, 29, 25, .5);
    z-index: 55;
}

/* ---------- Zaglavlje menija ---------- */

.sidebar__top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 22px;
}

.sidebar__top .sidebar__brand { padding: 0; flex: 1 1 auto; min-width: 0; }

.sidebar__close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: transparent;
    color: var(--on-bar-muted);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.sidebar__close:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }

.sidebar__close { display: none; }     /* vidi se samo u fioci */

/* ---------- Skupljen meni (desktop) ---------- */

.nav-collapsed .sidebar { --sidebar-w: 64px; padding-left: 8px; padding-right: 8px; }

/* Ime stavke nestaje, ali brojac novih prijava OSTAJE — on je i u skupljenom
   meniju jedini znak da nesto ceka. Bez izuzetka bi ga ovo pravilo pojelo. */
.nav-collapsed .nav-item span:not(.nav-item__count),
.nav-collapsed .user-btn__text,
.nav-collapsed .user-btn__caret { display: none; }

/* Logo ustupa mesto marki — sam logo je dugme kojim se meni vraca u punu
   sirinu, pa ne sme da nestane. */
.nav-collapsed .sidebar__brand .sidebar__logo { display: none; }
.nav-collapsed .sidebar__brand .sidebar__mark { display: block; width: 36px; margin: 0 auto; }
.nav-collapsed .sidebar__brand { padding-left: 0; padding-right: 0; }

.nav-collapsed .user-btn { justify-content: center; padding: 6px; }

.nav-collapsed .sidebar__top { justify-content: center; padding-bottom: 16px; }

.nav-collapsed .nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.nav-collapsed .sidebar__foot { justify-content: center; }

/* U suzenom meniju (64px) datum nema gde da stane; sat ostaje, jer je on i poenta. */
.nav-collapsed .clock { padding-left: 0; padding-right: 0; }
.nav-collapsed .clock__date { display: none; }
.nav-collapsed .clock__time { font-size: 11.5px; }

/* Naziv stavke iskace kao oblacic, da skupljen meni ostane upotrebljiv. */
.nav-collapsed .nav-item { position: relative; }

.nav-collapsed .nav-item:hover::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: var(--ink);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    z-index: 20;
}

/* Raspored u dve kolone pukne ranije nego navigacija, pa ima svoj prag. */
@media (max-width: 1100px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Kolone idu jedna ispod druge — lepljenje tada nema smisla.
       `order: -1` dize panel sa pozivom IZNAD detalja firme: slozene, leva
       kolona je oko 1700px visoka, pa je „Call now" zavrsavao na ~1900px od
       vrha. U aplikaciji za hladne pozive glavno dugme ne sme da trazi
       skrolovanje kroz ceo dosije firme. */
    .sticky-col {
        position: static;
        flex: 1 1 100%;
        order: -1;
    }
}

/* Ispod 900px meni postaje FIOKA. Iznad toga ostaje sa strane — ko zeli vise
   prostora, skupi ga dugmetom na 64px. Ranije se na 1100px pretvarao u
   vodoravnu traku sa skrolom, pa su poslednje stavke bile nevidljive dok se ne
   prevuce prstom — a niko ne prevlaci traku za koju ne zna da postoji. */
@media (max-width: 900px) {
    .shell { display: block; }

    .topbar { display: flex; }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 264px;
        max-width: 84vw;
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform .18s ease-out;
        z-index: 60;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.nav-open .sidebar { transform: translateX(0); }

    /* Zatamnjenje i zakljucan skrol vaze SAMO dok je meni fioka. Da stoje van
       media upita, ostali bi na snazi kad se prozor prosiri sa otvorenom
       fiokom — desktop bi ostao sa zatamnjenim, neskrolabilnim sadrzajem. */
    body.nav-open .nav-overlay { display: block; }
    body.nav-open { overflow: hidden; }

    .sidebar__close { display: block; }

    /* U fioci je sirina fiksna — skupljanje nema sta da skupi. */
    .sidebar__spacer { display: none; }

    /* Traka je fiksirana, pa sadrzaj mora da krene ispod nje. */
    .content { padding: calc(var(--topbar-h) + 18px) 20px 48px; }

}

/* ---------- Tabele postaju kartice (telefon) ----------
   Vodoravni skrol nad tabelom od sest kolona na telefonu znaci da se pola
   podataka ne vidi. Zato se svaki red pretvara u karticu, a naziv kolone
   dolazi iz atributa data-label na celiji. */

@media (max-width: 700px) {
    .table-wrap { overflow: visible; border: 0; background: transparent; }

    /* Razmak izmedju kartica. Ranije je stajao kao `border-spacing: 0 10px`,
       ali red koji je `display: block` vise nije red tabele i taj razmak ne
       prima — kartice su se dodirivale i senke su se slivale u jedan blok. */
    .table,
    .table tbody { display: block; }

    .table { min-width: 0; }

    .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

    .table tbody tr {
        display: block;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px 14px;
        box-shadow: var(--shadow);
    }

    .table tbody tr + tr { margin-top: 10px; }

    /*
     * Oznaka LEVO kao plutajuci element, vrednost desno kao obican tekst.
     *
     * Do 25.09.2026 je celija bila `display: flex; justify-content:
     * space-between`, pa je SVAKO dete celije postajalo svoj stubac: „GREENFELDER,
     * BROWN AND SCHUMM" | „DOT 8106862" jedno pored drugog, iznos „$41,000" |
     * „$5,000 down" | oprema u tri kolone, a „Sent by Chris" stisnuto u traku od
     * 20px, slovo po slovo. Sa oznakom koja pluta tekst vrednosti tece pored
     * nje, a svaki red ispod (`.cell-sub`, <div>) ide u SVOJ red, poravnat
     * desno. `flow-root` drzi oznaku unutar celije.
     */
    .table tbody td {
        display: flow-root;
        border: 0;
        padding: 3px 0;
        text-align: right;
    }

    .table tbody td::before {
        content: attr(data-label);
        float: left;
        margin-right: 12px;
        font-size: 11px;
        /* Visina reda kao kod vrednosti (14px × 1,55), da oznaka i prvi red
           vrednosti stoje na istoj liniji. */
        line-height: 21px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--muted);
        text-align: left;
    }

    /* Prva celija (naziv firme) je naslov kartice — bez oznake i preko cele sirine. */
    .table tbody td:first-child {
        display: block;
        text-align: left;
        font-weight: 600;
        font-size: 1.05em;
        padding-bottom: 8px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--border-soft);
    }

    .table tbody td:first-child::before { content: none; }

    .table tbody td:empty { display: none; }

    /* Dugacak sadrzaj ne trpi poravnanje udesno pored oznake — beleska od dva
       reda bi se stiskala uz desnu ivicu. Takve kolone idu jedna ispod druge:
       oznaka gore, tekst ispod, s leva. Tekst SMS-a je ceo sadrzaj reda, pa i
       on (bio je poravnat udesno, a „Sent by" slovo po slovo). */
    .table tbody td[data-label="Note"],
    .table tbody td[data-label="Email"],
    .table tbody td[data-label="Message"] {
        display: block;
        text-align: left;
    }

    .table tbody td[data-label="Note"]::before,
    .table tbody td[data-label="Email"]::before,
    .table tbody td[data-label="Message"]::before {
        display: block;
        float: none;
        margin-bottom: 2px;
    }

    /* Mejl i dugacak naziv firme nemaju gde da se prelome bez ovoga.
       `break-word`, ne `anywhere`: lomi samo rec koja NE STAJE u red. Sa
       `anywhere` je stisnut iznos pucao izmedju cifara („$41,00" / „0"), sto
       se cita kao $41.00. */
    .table tbody td { overflow-wrap: break-word; }

    /* Cela kartica je dodirna povrsina. Na desktopu je red tabele — palac ne
       gadja link od 20px, pa se link iz prve celije razvlaci preko cele kartice.
       Sve ostalo sto se klika mora da ostane IZNAD tog prekrivaca. */
    .table tbody tr { position: relative; }

    .table tbody td:first-child > a::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    /* Na Calls, Follow-ups i SMS prva celija je datum, bez veze — pa dodir
       na karticu nije radio nista, a jedini put do firme bio je link od 22px.
       Tamo se preko kartice razvlaci link iz celije „Company". `static` je
       nosec deo: pravilo ispod ga inace pozicionira, i prekrivac bi pokrio
       samo sam link umesto kartice.
       Izuzeci: spisak mejlova (kartica vodi u razgovor, firma je sporedna
       veza) i Leads. Kartica na Leads nosi belesku u koju se KUCA, a za
       prijavu bez firme taj link otvara „New company" — dodir pored polja je
       odvodio sa stranice i neposlata beleska je nestajala. */
    .table:not(.mail-list):not(.table--leads) tbody td[data-label="Company"]:not(:first-child) > a:first-child { position: static; }

    .table:not(.mail-list):not(.table--leads) tbody td[data-label="Company"]:not(:first-child) > a:first-child::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    .table tbody td:not(:first-child) a,
    .table tbody td:not(:first-child) button,
    .table tbody td form { position: relative; z-index: 1; }

    /* Celija bez zaglavlja (kolona sa dugmadima) ide preko cele sirine. */
    .table tbody td[data-label=""] {
        display: block;
        text-align: left;
        padding-top: 10px;
    }

    .table__empty { display: block !important; text-align: center !important; }
    .table__empty::before { content: none; }

    /* Prazna celija bez oznake ne treba da zauzima red. */
    .table tbody td[data-label=""]::before { content: none; }
}

/* ---------- Sitnije na telefonu ---------- */

@media (max-width: 700px) {
    .page-head__title { font-size: 22px; }

    /* Zvanje se sa telefona radi palcem — dugme mora da bude veliko. */
    .btn--lg { padding: 16px 18px; font-size: 17px; }

    .panel__body { padding: 14px; }

    /* Deca .form-row imaju `flex: 1 1 220px`. U koloni se ta osnova tumaci kao
       VISINA, pa je dugme naraslo na 220px a polje spalo na nulu. Zato se uz
       promenu smera osnova mora ponistiti. */
    .form-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .form-row > * { flex: 0 0 auto; width: 100%; }

    /* Dve kolone filtera na telefonu. `grid-template-columns` je ovde stajalo
       bez ikakvog dejstva — `.filters` je `display: flex`, ne grid, pa se to
       svojstvo prosto ignorise. Isti raspored se sa flex-om dobija preko osnove
       polja; `.filters__actions` nema tu osnovu, pa dugmad sama padnu u svoj red
       preko cele sirine. */
    .filters { gap: 10px; }
    .filters__field { flex: 1 1 calc(50% - 5px); }
    .filters__actions { flex: 1 1 100%; }
}

@media (max-width: 420px) {
    /* Ispod 420px dve kolone su uze od padajuceg menija sa nazivima drzava. */
    .filters__field { flex: 1 1 100%; }
    .topbar__brand img { height: 22px; }
}

/* ==========================================================================
   15. SITNI OBRASCI U TABELI
   ==========================================================================
   Polje + dugme u jednoj celiji (npr. lokal iz RingCentrala u tabu Users).
   Namerno bez `.form-row`: ta klasa deci daje `flex: 1 1 220px`, pa bi polje
   od cetiri cifre razvuklo celu kolonu.
   ========================================================================== */

.inline-form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.input--tiny {
    width: 5.5em;
    padding: 5px 8px;
    font-size: 13px;
}

/* Polje za kratku napomenu u celiji tabele. Namerno usko: ovde se pise „robot"
   ili „trazi posao", a ozbiljna beleska ide na karticu firme, gde ima mesta. */
.input--note {
    display: inline-block;
    width: 11em;
    padding: 5px 8px;
    font-size: 13px;
}

@media (max-width: 700px) {
    .input--note { width: 100%; }
}

/* ---------- Kontrole u redu spiska Leads ----------
   Sve u JEDNOJ liniji (vlasnik, 22.09.2026). Svaka kontrola je svoja forma, a
   forma je blok, pa su „Unassigned + Save" i „note + Keep + Save" stajali jedan
   ispod drugog i red je bio dvostruko visi nego sto treba. */
.lead-actions {
    display: flex;
    /* `nowrap` je ono sto drzi obecanje „sve u jednoj liniji": tek tada
       najmanja sirina stupca postaje zbir obe forme, pa mu tabela DODELI
       prostor umesto da ga stisne. Sa `wrap` su se na 1300px i dalje lomile. */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 10px;
}

.lead-actions .inline-form { flex: 0 1 auto; }

/* Pitanje i odgovori na njega („Who gets this?", razlog arhiviranja) su jedna
   celina: stoje jedno ispod drugog, a ostale kontrole reda idu pored njih. */
.lead-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.lead-group .cell-sub { margin-top: 0; }

/* Beleska uzima ono sto pretekne umesto fiksnih 11em — u istom redu sa dva
   padajuca spiska i dva dugmeta to je razlika izmedju jedne i dve linije. */
.lead-actions .input--note {
    width: auto;
    flex: 1 1 8em;
    min-width: 6em;
}

/* Uzi laptop (ispod 1440px): razmaci i prelom radnji — vidi „Leads: sirina
   stubaca" na kraju fajla. */

@media (max-width: 700px) {
    /* U kartici (telefon) kontrole idu s leva, svaka uzima ceo red i tada
       prelamanje jeste ispravno — kartica nema susedne stupce. */
    .lead-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .lead-actions .inline-form { flex: 1 1 100%; }

    /* Beleska je jedino polje u koje se kuca, a bila je najuza kontrola u
       kartici (78px) — obrazac se nije prelamao, pa su polje, „Keep" i „Save"
       delili jedan red. Sada beleska ima svoj red, a izbor i dugme dele
       sledeci. */
    .lead-actions .inline-form { flex-wrap: wrap; }

    .lead-actions .input--note { flex: 1 1 100%; }

    .lead-actions .select--sm { flex: 1 1 auto; width: auto; }

    .lead-actions .btn { flex: 0 0 auto; width: auto; }

    .lead-group {
        flex: 1 1 100%;
        align-items: flex-start;
    }
}

/* Padajuci spisak u celiji tabele. `.select` je blok preko cele sirine, sto je
   tacno za obrazac ali ne i za stubac u kome stoji uz dugme. */
.select--sm {
    display: inline-block;
    width: auto;
    max-width: 11em;
    padding: 5px 26px 5px 8px;
    font-size: 13px;
    background-position: right 8px center;
}

.field__hint {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

/* Na telefonu je celija kartica preko cele sirine — polje sme da se rastegne. */
@media (max-width: 700px) {
    .input--tiny { width: 100%; }
    .select--sm { width: 100%; max-width: none; }
    .inline-form { width: 100%; }

    /* Polje + „Save" u kartici (tab Users): polje uzima ostatak reda, a
       „Save" svoju sirinu. Pravilo `.btn { width: 100% }` ispod 620px je
       pogadjalo i link-dugme, pa su polje i „Save" delili red nasumicno i
       polja u cetiri reda nisu pocinjala ni zavrsavala se na istom mestu. */
    .inline-form .input--tiny { flex: 1 1 auto; width: auto; min-width: 0; }
    .inline-form .btn--link { flex: none; width: auto; }
}

/* ==========================================================================
   16. KORISNIK U PODNOZJU MENIJA
   ==========================================================================
   Odjava je ranije stajala stalno na ekranu, kao link uz ime. To je radnja koja
   se koristi jednom dnevno a bila je na mestu gde se lako promasi. Sada je iza
   klika na korisnika, u malom iskacucem meniju.
   ========================================================================== */

.sidebar__foot { position: relative; }

.user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.user-btn:hover { background: var(--on-bar-hover); }

.user-btn:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
}

.user-btn__text {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

.user-btn__name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--on-bar);
    line-height: 1.3;
    /* Duga imena ne smeju da razvuku meni. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-btn__role {
    display: block;
    font-size: 12px;
    color: var(--on-bar-muted);
    line-height: 1.3;
}

/* Strelica nadole; okrece se kad je meni otvoren. */
.user-btn__caret {
    flex: none;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--on-bar-muted);
    transition: transform .15s ease-out;
}

.user-btn[aria-expanded="true"] .user-btn__caret { transform: rotate(180deg); }

/* ---------- Iskacuci meni ---------- */

.user-menu {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: calc(100% + 6px);   /* podnozje je na dnu — meni ide NAGORE */
    z-index: 30;
    padding: 4px;
    border: 1px solid var(--on-bar-line);
    border-radius: 10px;
    background: var(--ink);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.user-menu[hidden] { display: none; }

.user-menu form { margin: 0; }

.user-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--on-bar);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.user-menu__item:hover { background: var(--on-bar-hover); }

.user-menu__item svg { width: 18px; height: 18px; flex: none; }

/* U suzenom meniju nema mesta za sirinu podnozja — meni iskace udesno. */
.nav-collapsed .user-menu {
    left: calc(100% + 8px);
    right: auto;
    bottom: 0;
    width: 172px;
}

/* ==========================================================================
   17. SITNE ISPRAVKE RAZMAKA
   ========================================================================== */

/* Napomena je bila zalepljena za dugme „Call now" i citala se kao deo njega. */
.dial-hint { margin-top: 12px; }

/* ==========================================================================
   18. DVOFAKTORSKA PRIJAVA
   ==========================================================================
   Ekrani za podesavanje (QR, tajna, kodovi za oporavak) i drugi korak prijave.
   ========================================================================== */

.qr {
    display: inline-block;
    padding: 12px;
    margin: 12px 0 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;   /* citaci QR koda ocekuju svetlu podlogu */
    line-height: 0;
}

.qr svg { display: block; width: 220px; height: 220px; }

/* Tajna se prekucava rukom, pa mora da bude jednosirinska i razmaknuta —
   „l" i „1" se u proporcionalnom pismu ne razlikuju. */
.secret-key {
    display: inline-block;
    margin: 4px 0 20px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 15px;
    letter-spacing: .12em;
    word-break: break-all;
}

.input--code {
    max-width: 180px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 20px;
    letter-spacing: .28em;
    text-align: center;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    margin: 16px 0 20px;
    padding: 16px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 15px;
    letter-spacing: .06em;
}

@media (max-width: 620px) {
    .recovery-codes { grid-template-columns: 1fr; }
}

/* Kod za oporavak je sklonjen pod „details": koristi se jednom u zivotu, a da
   stoji otvoren, ljudi bi ga kucali umesto koda iz aplikacije. */
.recovery-toggle {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.recovery-toggle summary {
    cursor: pointer;
    font-size: 13.5px;
    color: var(--muted);
}

.recovery-toggle summary:hover { color: var(--ink); }

.recovery-toggle > form { margin-top: 14px; }

.challenge-cancel { margin-top: 16px; text-align: center; }

/* ---------- Praznina u meniju = prekidac za skupljanje ---------- */

.sidebar__spacer {
    /* Zauzima svu slobodnu visinu ispod stavki — to je ona „prazna" povrsina
       na koju covek prirodno klikne kad hoce da skloni meni. */
    flex: 1 1 auto;
    min-height: 44px;
    margin-top: 6px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

/* Nevidljiva u SVAKOM stanju — ni na prelazak misem ni posle klika.
   Podrazumevani okvir fokusa se ovde izricito gasi: posle klika je ostajao
   zelen pravougaonik preko pola menija, sto je izgledalo kao greska u prikazu,
   a ne kao prekidac. */
.sidebar__spacer:hover,
.sidebar__spacer:focus,
.sidebar__spacer:focus-visible,
.sidebar__spacer:active {
    background: transparent;
    outline: none;
    box-shadow: none;
}

/* ---------- Zapamcen uredjaj (2FA) ---------- */

/* Koristi se i za „Keep me signed in" na prijavi — `min-height` daje dodirnu
   zonu od 32px i na telefonu. */
.checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 32px;
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--muted);
    cursor: pointer;
}

.checkbox input {
    flex: none;
    width: 17px;
    height: 17px;
    accent-color: var(--olive);
    cursor: pointer;
}

.devices {
    margin: 18px 0 22px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
}

.devices p { margin: 0 0 10px; }
.devices form { margin: 0; }
.devices form:only-child,
.devices p:last-child { margin-bottom: 0; }

/* ==========================================================================
   19. MEJL FIRMI (Faza 4b)
   ==========================================================================
   Dva mesta: dugme i zapis na kartici firme, i ekran za pisanje poruke.

   Boja: plava (`--c-blue-*`). Beleska prodavca je bela, red centrale siv
   (`--activity__item--system`), a mejl je treca vrsta dogadjaja — mora da se
   razlikuje na prvi pogled, isto kao sto se sivi red centrale razlikuje od
   bele beleske. Plava se nigde drugde u vremenskoj liniji ne koristi.
   ========================================================================== */

/* --- Odgovor firme u „Activity" ---
   Zelena naspram plave kod poslatog: u vremenskoj liniji mora da se na prvi
   pogled zna ko je pisao. Do 15.09.2026 odgovora tu nije ni bilo, pa je
   kartica pokazivala samo nasu stranu razgovora. */
.activity__item--primljen {
    padding-left: 12px;
    border-left: 3px solid var(--c-green-bd);
    background: var(--c-green-bg);
}

.activity__item--primljen .activity__meta { color: var(--c-green-ink); }

.activity__item--primljen svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 4px;
}

/* --- Zapis o poslatom mejlu u „Activity" --- */

.activity__item--email {
    padding-left: 12px;
    border-left: 3px solid var(--c-blue-bd);
    background: var(--c-blue-bg);
}

.activity__item--email .activity__meta {
    color: var(--c-blue-ink);
}

.activity__item--email svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 4px;
}

/* Naslov poruke — jedino sto se cita pre nego sto se udje u telo. */
.activity__subject {
    margin: 0 0 4px;
    font-weight: 650;
    color: var(--ink);
}

.activity__item--email p:last-child {
    margin-bottom: 0;
}

/* --- SMS u „Activity" ---
   MORA da stoji POSLE `.activity__item`: njegov `padding: 14px 0` inace
   pregazi uvlacenje, pa tekst lezi na samoj liniji (18.09.2026). */
.activity__item--sms {
    border-left: 3px solid var(--olive);
    padding-left: 12px;
}

.activity__item--sms p:last-child {
    margin-bottom: 0;
}

/* --- Vrh desne kolone: vreme u firmi levo, ciji je klijent desno --- */
.call-panel__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.call-panel__top > p {
    margin: 0;
}

.call-panel__top > :last-child {
    margin-left: auto;
}

.call-panel__top strong {
    color: var(--ink);
}

/* --- Dugme na kartici firme --- */

/* `.btn--block` je flex, pa se ikonica i tekst sami poravnaju; ostaje razmak
   od dugmeta „Call now" iznad. */
.send-email {
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

/* --- Ekran za pisanje poruke --- */

/* Primalac i posiljalac: vide se, ne unose se. */
.compose__head {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
}

.compose__note {
    display: block;
    margin-top: 2px;
}

/* Sabloni: naziv i objasnjenje jedan ispod drugog, pa `.choice` mora da
   poravna po vrhu — podrazumevano `center` bi radio dugme spustio na sredinu
   dvorednog teksta. */
.choices--templates .choice {
    align-items: flex-start;
}

.choice__text {
    display: block;
    min-width: 0;
}

.choice__hint {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 400;
}

/* Telo poruke je jedina stvar na ekranu koja treba da bude velika. */
.compose__body {
    min-height: 320px;
}

/* Razmak izmedju polja i dugmadi; `margin-bottom: 0` jer je `.form-row`
   poslednji element u panelu. */
.compose__actions {
    margin-top: 4px;
    margin-bottom: 0;
}

/* Iskljuceno dugme mora i da IZGLEDA iskljuceno — dok slanje nije podeseno,
   ono nosi tekst „Sending is off" i ne sme da izgleda kao poziv na klik. */
.btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 700px) {
    /* Ispod 700px dve kolone sablona daju dva reda teksta po polju i sve se
       slije. Isto pravilo koje sekcija 14 primenjuje na `.stats`. */
    .choices--templates {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   19. BIRAC FIRME (ekran „New email")
   ==========================================================================
   Spisak firmi ima 605.000 redova, pa padajuca lista ne dolazi u obzir. Kuca se
   pojam, server vrati najvise deset pogodaka, klik bira jedan.
   ========================================================================== */

.picker { position: relative; }

.picker__chosen {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    font-weight: 600;
}

.picker__chosen[hidden] { display: none; }

.picker__results {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 320px;
    margin: 4px 0 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.picker__results[hidden] { display: none; }

.picker__item {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.picker__item:hover { background: var(--olive-wash); }

.picker__item strong {
    display: block;
    font-size: 13.5px;
    line-height: 1.35;
}

/* Druga linija nosi DOT/MC i adresu — sitnije, da naziv ostane nosilac. */
.picker__item span {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

.picker__empty {
    padding: 10px;
    font-size: 13px;
    color: var(--muted);
}

/* ---------- Cela poslata poruka (tab Email → naslov) ---------- */

/* Zaglavlje poruke: kome, kad, sa cega. Odvojeno od tela istom linijom
   kojom je i na ekranu za pisanje. */
.sent-email__head {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
}

/* Telo se prikazuje kako je otkucano — prelomi redova su deo poruke.
   `overflow-wrap` lomi duge linkove koje niko nije prelomio rukom. */
.sent-email__body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* ---------- Sortiranje po zaglavlju tabele ---------- */

/* Naziv kolone je link, ali ne sme da izgleda kao link u tekstu — zaglavlje
   ostaje mirno dok se ne predje misem. */
.sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.sort:hover { color: var(--olive); }

/* Strelica stoji uvek, i kad kolona nije aktivna — inace se ne vidi da se
   zaglavlje uopste klikce. Neaktivna je bleda, aktivna puna. */
.sort__arrow {
    font-size: 11px;
    line-height: 1;
    opacity: .35;
}

.sort--on { color: var(--olive); }
.sort--on .sort__arrow { opacity: 1; }

@media (max-width: 700px) {
    /* Ispod 700px je zaglavlje sakriveno (red postaje kartica), pa se po njemu
       ne moze ni kliknuti. Sortiranje tada ostaje ono koje je izabrano na
       racunaru i putuje kroz adresu. */
    .sort__arrow { display: none; }
}

/* ---------- Akcija uz samo polje (telefon -> „Call", mejl -> slanje) --------
   Do 19.08.2026 su ta dugmad stajala u desnoj koloni, pa je covek koji je
   upravo prepisao broj morao da ga trazi na drugom kraju ekrana. Sada stoje uz
   polje, a na uskom ekranu padaju ispod njega umesto da ga stisnu. */
.with-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.with-action .input {
    flex: 1 1 12em;
    min-width: 0;
}

/* Iste sirine iza polja u svakom redu (telefoni i mejl), da se sva polja
   zavrsavaju na istoj liniji. Ranije je red sa brojem bio uzi od praznih
   (sivi broj se ispisuje samo kad broja ima), a red mejla opet drugaciji.
 *
 * MREZA sa stalnim stupcima, ne flex sa rezervisanim mestom: polje | dugme
 * („Call" ili „Send email") | treci stubac (sivi broj ili „Send link"). Prazan
 * treci stubac cuva sirinu i kad je njegov sadrzaj sklonjen (`display: none`),
 * pa se polja i dalje zavrsavaju na istoj liniji, a sklonjeni element ne
 * zauzima ni visinu. Prva verzija (25.09.2026) je cuvala mesto preko
 * `visibility: hidden` u flex redu bez rezerve po sirini: uz vertikalni
 * skrolbar red se prelamao, sivi broj je padao ispod polja, a nevidljivo
 * „Send link" je ostavljalo praznu traku od 48px ispod mejla.
 *
 * Sirinu odredjuje KOLONA vrednosti, ne prozor (container query): ista kolona
 * je ~215px na 1130px, ~370px na 1760px (tri kolone kartice) i ~450–490px na
 * 1366 i 1920px, zavisno od skrolbara.
 * Stupci su po najsiroj stvarnoj sadrzini: „Send email" (~122px uz uzi
 * odmak) i „Send link" (~110px). */
.kv__v:has(> .with-action) { container-type: inline-size; }

@media (min-width: 761px) {
    .with-action > .btn,
    .with-action > .send-link > summary {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Siroka kolona: sve u jednom redu. */
    @container (min-width: 420px) {
        .with-action {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 7.75rem 7rem;
            align-items: center;
            gap: 8px;
        }

        .with-action > .send-link > summary { width: 100%; }
    }

    /* Srednja kolona (laptop sa tri kolone kartice): polje i dugme u redu,
       treci element — samo kad postoji — ispod dugmeta, u istom stupcu.
       Red bez broja ostaje jednog reda visok. */
    @container (min-width: 270px) and (max-width: 419.98px) {
        .with-action {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 7.75rem;
            align-items: center;
            gap: 4px 8px;
        }

        .with-action > .dial-text,
        .with-action > .send-link { grid-column: 2; }

        .with-action > .dial-text { justify-self: center; }

        .with-action > .send-link > summary { width: 100%; }
    }

    /* Uza od 270px (otprilike 1101–1180px, dve kolone kartice) ostaje flex
       iznad: polje preko celog reda, dugmad ispod njega. */
}

/* Zeleno dugme uz telefon — isto kao glavno, samo ne preko cele sirine.
   Zove kroz Vylo ekstenziju (partials/vylo-call); do 01.10.2026 „Call - Ring",
   kroz RingCentral. */
.btn--call { white-space: nowrap; }

/* Bez broja telefona dugme ostaje na mestu, ali je ocigledno neaktivno.
   `pointer-events: none` je nosec deo — `.btn` postavlja `display: inline-flex`
   i time gazi `hidden`, pa se dugme ranije videlo i moglo da se klikne na
   prazan broj. */
.btn--call[aria-disabled="true"] {
    background: var(--surface-2, #e5e7eb);
    border-color: var(--border, #d1d5db);
    color: var(--muted, #9ca3af);
    pointer-events: none;
    cursor: default;
}

/* Broj kao tekst uz dugme za poziv.
   Postoji zbog Vylo Chrome ekstenzije: ona trazi brojeve po tekstu stranice i
   u polja za unos ne moze da gleda. Namerno je nenametljiv — prodavcu je broj
   vec vidljiv u polju, ovo je hvatiste za ekstenziju. */
.dial-text[hidden] { display: none; }

.dial-text {
    white-space: nowrap;
    font-size: .82rem;
    color: var(--muted, #6b7280);
    align-self: center;
    cursor: default;
}

.btn--sm {
    padding: 7px 12px;
    font-size: 13px;
}

/* „Send link" uz polje: spisak usluga ne sme da razmakne stubac, pa lebdi. */
.send-link--inline { position: relative; }

.send-link--inline .send-link__list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    width: max(260px, 100%);
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(31, 35, 30, .14);
}

@media (max-width: 760px) {
    /* Na telefonu je stubac uzak — dugme ide preko cele sirine, ispod polja. */
    .with-action .btn { flex: 1 1 100%; }
    .send-link--inline { position: static; }
    .send-link--inline .send-link__list { position: static; width: auto; box-shadow: none; }
}

/* Oba dugmeta uz mejl polaze od iste linije. `.send-email` je nosilo gornju
   marginu iz vremena kad je stajalo u desnoj koloni, a `.send-link` donju —
   uz polje su to bila dva dugmeta razmaknuta deset piksela po visini. */
.with-action .send-email,
.with-action .send-link { margin: 0; }

/* Skok na stranicu u spisku firmi. Stoji izmedju „Previous" i „Next", tamo gde
   je ranije pisao samo redni broj — covek tu vec gleda kad trazi gde je stao. */
.pagination__jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.pagination__jump label {
    color: var(--muted, #6b7280);
    font-size: .9rem;
}

.pagination__jump input[type="number"] {
    width: 5.5rem;
    text-align: center;
}

/* Trajanje poziva i dugme za slusanje — u ISTOM redu, dugme desno od broja.
   Ranije je „Play" stajao kao poseban red ispod trajanja: red tabele je time
   bio visi, a oko je moralo da se spusta da ga nadje. */
.duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Isto to, ali za stupce u kojima uz dugme stoji RECENICA, a ne samo broj.
   Na ekranu Leads to je „Outgoing call · 41s · Chris". Zato se ne koristi
   `.duration`: ona je `nowrap`, sto je tacno dok je sadrzaj „56s", a ovde bi
   na uskom ekranu izguralo tekst iz stupca. */
.cell-play {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--olive);
    cursor: pointer;
    /* Dugme ne sme da razvuce red tabele preko visine teksta. */
    line-height: 0;
}

.btn-play:hover {
    border-color: var(--olive);
    background: var(--olive);
    color: #fff;
}

.btn-play:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
}

.btn-play svg { fill: currentColor; }

/* Jedan SVG nosi obe ikone; menja se koja se vidi, da se dugme ne prekucava. */
.btn-play .btn-play__pauza { display: none; }
.btn-play.is-playing .btn-play__play { display: none; }
.btn-play.is-playing .btn-play__pauza { display: inline; }

.btn-play.is-playing {
    border-color: var(--olive);
    background: var(--olive);
    color: #fff;
}

/* Preuzimanje snimka — isti oblik kao dugme za slusanje, ali prigusenije.
   Radnja je redja i teza (pravi kopiju van sistema), pa ne sme da se takmici
   za paznju sa dugmetom koje se koristi stalno. */
.btn-play--skidanje {
    color: var(--muted);
    text-decoration: none;
}

.btn-play--skidanje:hover {
    border-color: var(--olive);
    background: var(--olive);
    color: #fff;
}

/* Tabovi iznad spiska (Calls: All/Incoming/Outgoing, Email: All/Sent).
   Menjaju SADRZAJ, pa su linkovi sa svojom adresom — ne dugmad. */
.tabs {
    display: flex;
    gap: 2px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.tabs__item {
    padding: 8px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.tabs__item:hover {
    color: var(--ink);
    background: var(--surface-alt);
}

.tabs__item--active {
    color: var(--olive-dark);
    border-bottom-color: var(--olive);
    font-weight: 650;
}

.tabs__item:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: -2px;
}

/* ==========================================================================
   EMAIL KAO GMAIL (16.09.2026)
   Spisak razgovora, razgovor, odgovor. Vidi MailboxController.
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Zaglavlje spiska: pretraga + New email --- */
.mail-tab-count { font-weight: 700; }

/* --- Oznake kao filter (leva lista oznaka u Gmail-u) --- */
.mail-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.mail-labels__item {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}

.mail-labels__item:hover { color: var(--ink); border-color: var(--olive); }

.mail-labels__item--active {
    background: var(--olive-wash);
    border-color: var(--olive);
    color: var(--olive-dark);
    font-weight: 650;
}

.mail-searchinfo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

/* --- Red razgovora --- */
.mail-list td { vertical-align: top; }

.mail-from {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
}

.mail-from:hover { color: var(--olive-dark); text-decoration: underline; }

.mail-count { color: var(--muted); font-weight: 400; }

.mail-subject { color: var(--ink); font-weight: 500; }

.mail-snippet { color: var(--muted); }

.mail-row--unread .mail-from,
.mail-row--unread .mail-subject,
.mail-row--unread .mail-when { font-weight: 750; color: var(--ink); }

.mail-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--olive);
}

.mail-chips {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.mail-chip {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--c-slate-bd);
    border-radius: 4px;
    background: var(--c-slate-bg);
    color: var(--c-slate-ink);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

a.mail-chip:hover { border-color: var(--olive); }

.mail-clip { width: 15px; height: 15px; color: var(--muted); }

.mail-when { white-space: nowrap; }

.mail-foot { margin-top: 14px; font-size: 13px; }

@media (min-width: 701px) {
    .mail-list td[data-label="Subject"] {
        max-width: 0;
        width: 55%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* --- Razgovor --- */
.mail-thread__head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    align-items: start;
    margin-bottom: 16px;
}

.mail-back { grid-column: 1 / -1; justify-self: start; }

.mail-thread__subject { margin: 0; overflow-wrap: anywhere; }

.mail-thread__meta {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.mail-company {
    padding: 1px 8px;
    border: 1px solid var(--c-green-bd);
    border-radius: 4px;
    background: var(--c-green-bg);
    color: var(--c-green-ink);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.mail-thread__actions {
    grid-column: 2;
    grid-row: 2 / span 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.mail-thread__actions .btn svg { width: 15px; height: 15px; vertical-align: -3px; }

.mail-thread { display: flex; flex-direction: column; gap: 10px; }

.mail-msg {
    border: 1px solid var(--border);
    border-left: 4px solid var(--c-green-bd);
    border-radius: var(--radius);
    background: var(--surface);
}

.mail-msg--out { border-left-color: var(--c-blue-bd); }

.mail-msg__fold > summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
}

.mail-msg__fold > summary::-webkit-details-marker { display: none; }

.mail-msg__fold[open] > summary { display: none; }

.mail-msg__summary .mail-msg__from { flex: 0 0 auto; font-weight: 650; }

.mail-msg__peek {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-msg__when { flex: 0 0 auto; color: var(--muted); font-size: 13px; white-space: nowrap; }

.mail-msg__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px 8px;
}

.mail-msg__head .mail-msg__from { font-weight: 650; }

.mail-msg__addr,
.mail-msg__to,
.mail-msg__via { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }

.mail-msg__via { font-style: italic; }

.mail-msg__body {
    padding: 4px 16px 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.mail-quote { margin: 0 16px 12px; }

.mail-quote > summary {
    display: inline-block;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--surface-alt);
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    list-style: none;
}

.mail-quote > summary::-webkit-details-marker { display: none; }

.mail-quote .mail-msg__body { padding: 8px 0 0 10px; border-left: 2px solid var(--border); color: var(--muted); }

.mail-frame {
    display: block;
    width: calc(100% - 32px);
    max-height: 70vh;
    margin: 4px 16px 12px;
    border: 0;
    background: #fff;
}

.mail-images,
.mail-note { margin: 0 16px 12px; font-size: 13px; }

.mail-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 16px 14px;
    padding: 0;
    list-style: none;
}

.mail-att {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    font-size: 13px;
}

.mail-att svg { width: 15px; height: 15px; color: var(--muted); }

.mail-delete { margin: 0 16px 12px; }

/* --- Odgovor --- */
.mail-reply { margin-top: 16px; scroll-margin-top: 80px; }

.mail-reply__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.mail-reply__to { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }

.mail-reply__to svg { width: 15px; height: 15px; vertical-align: -3px; }

.mail-reply__modes { display: flex; gap: 6px; }

.mail-reply__modes [aria-pressed="true"] {
    border-color: var(--olive);
    background: var(--olive-wash);
    color: var(--olive-dark);
}

.mail-reply__body { width: 100%; min-height: 180px; resize: vertical; }

.mail-reply__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

@media (max-width: 700px) {
    .mail-thread__head { grid-template-columns: 1fr; }
    .mail-thread__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
    .mail-frame { max-height: 60vh; }
    .mail-msg__fold > summary { flex-wrap: wrap; }
    .mail-msg__peek { flex-basis: 100%; order: 3; }
    .mail-chips { margin-left: 0; }
}

/* --- Ispravke posle revizije (16.09.2026) --- */

/* Klik na red vodi u razgovor i na desktopu (na telefonu to vec radi kartica).
   NE `tr { position: relative }` sa `a::after` preko reda: Safari red tabele ne
   uzima za okvir pozicioniranja, pa bi svaki klik otvarao POSLEDNJI red. Celija
   From je okvir za link, a ostatak reda otvara razgovor mala skripta u spisku. */
@media (min-width: 701px) {
    .mail-list tbody td:first-child { position: relative; }
    .mail-list tbody td:first-child > a::after { content: ""; position: absolute; inset: 0; }
    .mail-list tbody tr.mail-row { cursor: pointer; }
}

/* Oznake uz naslov imaju razmak i sa desne strane. */
.mail-chips { margin: 0 6px 0 0; }

/* Dugacka adresa posiljaoca ili ime priloga bez razmaka ne sme da gura stranu u stranu. */
.mail-msg__from { overflow-wrap: anywhere; }
.mail-msg__summary .mail-msg__from { max-width: 100%; }
.mail-att { max-width: 100%; }
.mail-att a { min-width: 0; overflow-wrap: anywhere; }

/* Skok na poruku (#m123) ne sme da zavrsi ispod gornje trake na telefonu. */
.mail-msg { scroll-margin-top: 80px; }

@media (max-width: 700px) {
    /* Kartica reda: naslov, oznake i isecak idu jedno ispod drugog, a ne u
       tri uske kolone (zajednicko pravilo kartice pravi `display:flex`). */
    .mail-list td[data-label="Subject"] { display: block; text-align: left; }
    .mail-list td[data-label="Subject"]::before { display: block; float: none; margin-bottom: 2px; }
    .mail-list tbody td:not(:first-child) a { z-index: 1; }
}


/* ==========================================================================
   Kartica firme u tri kolone (vlasnik, 25.09.2026)
   ==========================================================================
   Company details | Activity | poziv. Tri kolone traze sirok ekran; ispod
   1700px podaci firme ne bi imali mesta za polje, „Call - Ring" i broj u
   istom redu. Tada se vraca stari raspored: podaci i Activity jedno ispod
   drugog, poziv desno. Ispod 1100px sve u jednu kolonu, poziv PRVI — isto
   pravilo kao do sada (glavno dugme ne sme da trazi skrolovanje). */

.client-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    grid-template-areas:
        "details  call"
        "activity call";
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.client-cols__details { grid-area: details; min-width: 0; }
.client-cols__activity { grid-area: activity; min-width: 0; }
.client-cols__call { grid-area: call; }

@media (min-width: 1700px) {
    .client-cols {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 372px;
        grid-template-areas: "details activity call";
    }
}

@media (max-width: 1100px) {
    .client-cols {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "call"
            "details"
            "activity";
    }
}

/* „Apply now" levo, „Next client" desno, u istom redu; stanje upisa ispod. */
.call-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Oba dugmeta dele celu sirinu reda, na jednake delove — bez praznine desno. */
.call-actions .btn { flex: 1 1 0; }

.call-actions .save-state {
    flex: 1 1 100%;
    margin-left: 0;
}

.call-actions .save-state:empty { display: none; }

/* „Next client" — svetlija zelena od glavnog dugmeta, BELI tekst (vlasnik,
   25.09.2026). Podloga je brend zelena (#769855), a ne jos svetlija: bela na
   njoj je 3,3:1, na jos svetlijoj (#A7C48A, prva verzija) bila bi oko 2:1 i
   natpis bi se jedva citao. Pri prelazu misem prelazi u radnu zelenu. */
.btn--next {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn--next:hover {
    background: var(--olive);
    border-color: var(--olive);
    color: #fff;
}

/* Beleska na kartici — nize od podrazumevanog polja (vlasnik, 25.09.2026). */
.textarea--short { min-height: 76px; }

/* Objasnjenje ispod „Call back on" — sitnije od obicne napomene. */
.field__hint--xs {
    font-size: 11px;
    line-height: 1.4;
}

/* ==========================================================================
   „Apply now" — stranica /apply i popup (vlasnik, 25.09.2026)
   ========================================================================== */

.apply-form { padding: 18px; }

.apply-sms__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.apply-sms__row input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--olive);
}

/* Izvorni <dialog>: Esc, fokus u prozoru i zatamnjena pozadina bez biblioteke. */
.modal {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 18px 48px rgba(26, 29, 25, .22);
    overflow: auto;
}

.modal::backdrop { background: rgba(26, 29, 25, .45); }

.modal__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.modal__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.modal__close {
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.modal__close:hover { color: var(--ink); }

.modal__body { padding: 18px; }

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* Telo mejla u Activity (vlasnik, 25.09.2026: „email se nesto mnogo lose
   vidi"). Nov tekst normalno, potpis i citat pod „Show more". */
.activity__mail {
    margin: 4px 0 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.activity__more { margin-top: 6px; }
.activity__more[open] { margin-bottom: 8px; }

.activity__more > summary {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    background: var(--surface-alt);
    color: var(--muted);
    font-size: 12.5px;
    cursor: pointer;
    list-style: none;
}

.activity__more > summary::-webkit-details-marker { display: none; }

.activity__mail--rest {
    margin-top: 8px;
    padding-left: 10px;
    border-left: 2px solid var(--border);
    color: var(--muted);
    font-size: 13px;
}

/* „New company": obrazac | Activity za broj (vlasnik, 25.09.2026). Isti
   raspored kao kartica firme, bez kolone za poziv. */
.client-cols--new {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "details activity";
}

.client-cols--new.client-cols--solo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "details";
}

@media (min-width: 1700px) {
    .client-cols--new {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "details activity";
    }
}

@media (max-width: 1100px) {
    .client-cols--new {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "details"
            "activity";
    }
}

/* Obrazac nove firme BEZ kolone Activity stoji sam — ista gornja granica
   sirine kao ostali samostalni obrasci (`.panel--narrow`). Unutrasnji razmak
   mu od 25.09.2026 daje `.panel__body`, kao svakom panelu, a ne pravilo samo
   za ovaj ekran. */
.client-cols--new.client-cols--solo { max-width: 880px; }

/* „Applications" (25.09.2026): prigusen red ispod naslova — odakle su podaci i
   kad je `funding@` poslednji put procitan. Bez sopstvenog razmaka bi <p>
   poneo podrazumevanu marginu i odgurnuo pretragu od naslova. */
.page-head__note {
    margin: 4px 0 0;
}

/* ==========================================================================
   Pregled rasporeda na cetiri sirine (25.09.2026)
   ==========================================================================
   Pravila koja moraju da stoje POSLE osnovnih (posta, sortiranje, kartica
   firme), jer im menjaju razmak ili sirinu. */

/* ---------- Dodirna zona (tablet, telefon i svaki ekran na dodir) ----------
   Dugmad u obliku linka, zaglavlja za sortiranje, „View clients" na pocetnoj,
   „Look up on SAFER" i oznake u posti bila su 18–27px visoka — ispod donje
   granice za dodir (WCAG 2.2, minimum 24px; ovde 32px). Do 25.09.2026 je
   pravilo vazilo samo ispod 700px, a na tabletu (701–1100px) tabela i dalje
   stoji kao tabela, pa su „Delete" i zaglavlja ostajali sitni. Izgled ostaje,
   povecava se samo dodirna zona. */
@media (max-width: 1100px), (pointer: coarse) {
    .btn--link,
    .danger-link,
    .sort,
    .stat__link,
    .ext-link { display: inline-flex; align-items: center; min-height: 32px; }

    .mail-labels { gap: 8px; }

    .mail-labels__item,
    .mail-company {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 4px 12px;
    }
}

/* ---------- Duzina reda za citanje ----------
   Objasnjenje ispod naslova i napomena ispod polja isle su preko cele
   sirine: na 1920px je tekst saglasnosti za SMS, koji se klijentu CITA
   naglas, imao oko 250 znakova u redu. */
.content > p.muted { max-width: 90ch; }

.field__hint { max-width: 80ch; }

/* ---------- „Call" za glavni broj u panelu za poziv ----------
   Vidi se samo kad panel ide PRVI (ispod 1100px) — iznad toga je red sa
   brojem u „Company details" vec na vidiku. */
.call-panel__dial { display: none; }

.call-panel__dial-number {
    font-weight: 500;
    opacity: .85;
}

@media (max-width: 1100px) {
    .call-panel__dial {
        display: flex;
        width: 100%;
        margin-bottom: 16px;
    }
}

/* ---------- Izbor fajla (Import) ----------
   Sivo sistemsko „Choose Files" u nasem okviru polja izgledalo je
   nedovrseno pored maslinastih dugmadi. */
input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover { background: var(--bg); }

/* ---------- Razgovor na telefonu ----------
   „← Email" je bio traka preko cele sirine, a Reply / Mark unread / Open in
   Gmail tri trake jedna ispod druge — oko 230px dugmadi pre prve poruke. Sada
   je povratak obicne sirine, a tri radnje dele jedan red. */
@media (max-width: 700px) {
    .mail-back { width: auto; }

    .mail-thread__actions { flex-wrap: nowrap; }

    .mail-thread__actions > * { flex: 1 1 0; }

    .mail-thread__actions .btn { width: 100%; padding-left: 8px; padding-right: 8px; }

    .mail-thread__actions .inline-form { width: auto; }
}

/* ---------- Prikovan stubac u sirokoj tabeli ----------
   Kad tabela ne staje, ona skroluje vodoravno (vidi „Stupci koji se ne
   lome"). Stubac koji MORA da ostane na vidiku prikiva se uz ivicu omotaca:
   radnje reda na Leads i Users (inace su bile bas one koje ostanu iza
   skrola), ime podnosioca na Applications (da se pri skrolovanju zna ciji je
   red), „Call" na Follow-ups. Klasa stoji na omotacu, ne na tabeli —
   tabela zadrzava svoje klase. Podloga mora biti puna, jer ispod nje prolaze
   ostali stupci. Prazan red („No leads…", jedna celija preko cele sirine)
   se ne prikiva. */
@media (min-width: 701px) {
    .table-wrap--pin-last .table tr > :last-child,
    .table-wrap--pin-first .table tr > :first-child {
        position: sticky;
        z-index: 1;
        background: var(--surface);
    }

    .table-wrap--pin-last .table tr > :last-child { right: 0; }

    .table-wrap--pin-first .table tr > :first-child { left: 0; }

    /* Posebno pravilo, ne `:not()` gore: `:not(.klasa)` podize specificnost,
       pa bi puna bela podloga pregazila sivu u zaglavlju i u parnim redovima. */
    .table-wrap--pin-last .table tr > .table__empty,
    .table-wrap--pin-first .table tr > .table__empty {
        position: static;
        background: transparent;
    }

    /* Tanka crta uz prikovan stubac samo dok ispod njega STVARNO nesto prolazi.
       Do sada je stajala uvek, pa je na 1920px, gde tabela staje, Leads imao
       usamljenu uspravnu liniju preko cele visine (i Users, i prazna arhiva).
       `scroll-state` pita sam omotac: desno prikivanje dobija crtu dok ima jos
       sadrzaja desno (dakle ispod stupca), levo cim je tabela pomerena ulevo.
       Pregledac koji to ne zna jednostavno ne crta liniju — puna podloga i
       dalje odvaja stubac. */
    .table-wrap--pin-last,
    .table-wrap--pin-first { container-type: scroll-state; }

    @container scroll-state(scrollable: right) {
        .table-wrap--pin-last .table tr > :last-child { box-shadow: inset 1px 0 0 var(--border); }
    }

    @container scroll-state(scrollable: left) {
        .table-wrap--pin-first .table tr > :first-child { box-shadow: inset -1px 0 0 var(--border); }
    }

    .table-wrap--pin-last .table thead th:last-child,
    .table-wrap--pin-first .table thead th:first-child,
    .table-wrap--pin-last .table tbody tr:nth-child(even) > td:last-child,
    .table-wrap--pin-first .table tbody tr:nth-child(even) > td:first-child { background: var(--surface-alt); }

    .table-wrap--pin-last .table tbody tr:hover > td:last-child,
    .table-wrap--pin-first .table tbody tr:hover > td:first-child { background: var(--olive-wash); }
}

/* Follow-ups na tabletu: sest stubaca sa brojem i dva datuma koji se ne lome
   bili su 739px u omotacu od 687–704px. Uzi razmaci (10px umesto 16px) daju
   tih ~70px, pa tabela staje i uz skrolbar; prikovan „Call" je rezerva
   za duzi sadrzaj. */
@media (min-width: 701px) and (max-width: 1100px) {
    .table--followups th,
    .table--followups td { padding-left: 10px; padding-right: 10px; }
}

/* ---------- Users: „Manage" umesto otvorenih radnji ---------- */
.row-manage > summary { list-style: none; }

.row-manage > summary::-webkit-details-marker { display: none; }

.row-manage[open] > summary {
    background: var(--olive-wash);
    border-color: var(--olive);
}

.row-manage__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 17rem;
    margin-top: 8px;
}

.row-manage__panel > form { margin: 0; }

.row-manage__panel > .inline-form { flex: 1 1 100%; }

.row-manage__panel .input--note {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

@media (max-width: 700px) {
    .row-manage__panel { width: auto; }
}

/* Deset stubaca: na laptopu se prvo stisnu razmaci, zaglavlje sme u dva reda,
   a polja za lokal, Vylo, kod i telefon su malo uza — tek onda skroluje. */
@media (min-width: 701px) and (max-width: 1500px) {
    .table--users th,
    .table--users td { padding: 10px 8px; }

    .table--users th { white-space: normal; }

    .table--users .input--tiny { width: 5em; }
}

/* ---------- Leads: sirina stubaca ----------
   Osam stubaca plus radnje u jednom redu ne staje u 1366px: tabela je
   stiskala sve na najmanju sirinu — firma po jednu rec u redu, datum u dva,
   red visok 227px — a „Save" je ostajao iza vodoravnog skrola. */
@media (min-width: 701px) {
    .table--leads td[data-label="Company"] { min-width: 11em; }

    /* Zaglavlje sme u dva reda („FIRST / CONTACT") — ono je odredjivalo
       sirinu stupca vise od samog sadrzaja. */
    .table--leads th,
    .table--leads .sort { white-space: normal; }
}

/* Radnje reda se prelamaju tek kad ekran STVARNO nema sirine (vlasnik,
   22.09.2026) — a ispod 1440px je nema: beleska ide u svoj red, „Keep" i
   „Save" ispod nje, u stupcu stalne sirine. Red se time ne produzava — i
   datum i firma vec imaju po dva reda. */
@media (min-width: 701px) and (max-width: 1440px) {
    .table--leads th,
    .table--leads td { padding: 9px 10px; }

    .table--leads .lead-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 14.5rem;
    }

    .table--leads .lead-actions .inline-form {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .table--leads .lead-actions .input--note { flex: 1 1 100%; }

    .table--leads .lead-actions .select--sm {
        flex: 1 1 auto;
        max-width: none;
    }

    .table--leads .lead-group { align-items: flex-start; }
}

/* ---------- Applications: dvanaest stubaca ---------- */
@media (min-width: 701px) {
    .table--apps td[data-label="Applicant"] { min-width: 10em; }

    /* Oprema („2022 FREIGHTLINER Cascadia") stane u jedan red ispod iznosa —
       stisnuta u najuzi stubac lomila se u tri i red je bio visok 121px. */
    .table--apps td[data-label="Amount"] { min-width: 14em; }

    .table--apps th { white-space: normal; }
}

@media (min-width: 701px) and (max-width: 1500px) {
    .table--apps th,
    .table--apps td { padding: 10px 10px; }
}