/*
 * Drugi korak 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 preuzete iz palete sajta drugikorak.com i proverene na kontrast:
 *   --brand  #1F62E9 daje 3,60:1 na beloj => SAMO ukrasi i ikone, nikad tekst.
 *   --accent #0042C7 daje 8,10: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 — preuzete iz palete sajta drugikorak.com
       (Elementor kit: Color 1 #0042C7, Color 1 light #1F62E9, Gradient bg #00347D). */
    --ink-bar: #00347D;   /* tamna leva navigacija */
    --brand: #1F62E9;     /* svetlija plava — samo ukrasi, nikad tekst na beloj (3,6:1) */
    --accent: #0042C7;     /* radna plava — dugmad, linkovi, aktivna stavka (8,1:1 na beloj) */
    --accent-dark: #00347D;
    --accent-wash: #EAF0FC;

    /* Tekst i podloge */
    --ink: #1B1D1F;
    --muted: #5B5B5B;
    --bg: #F2F4F6;
    --surface: #FFFFFF;
    --surface-alt: #F8FAFC;  /* zebra red i zaglavlje tabele */
    --border: #DDE2E8;
    --border-soft: #EBEEF2;

    /* Tekst na tamnoj traci */
    --on-bar: #FFFFFF;
    --on-bar-muted: #A9C0E4;  /* 6,05: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(0, 66, 199, .20);
    --shadow: 0 1px 2px rgba(27, 29, 31, .05), 0 8px 24px rgba(27, 29, 31, .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%; }

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(--accent); }
a:hover { color: var(--accent-dark); }

/* Vidljiv fokus na tastaturi — nikad se ne gasi bez zamene. */
:focus-visible {
    outline: 2px solid var(--accent);
    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(--accent);
    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;
}

/* Logo na beloj podlozi. Crtez je tankim crnim linijama na providnoj podlozi:
   na tamnoplavoj traci bi ostao gotovo nevidljiv, a natpis „office" (plav) jos
   i vise. Beli blok je jedini nacin da logo izgleda isto kao na papiru. */
.sidebar__brand .sidebar__logo {
    display: block;
    width: 100%;
    max-width: 176px;   /* preko toga logo pojede petinu visine trake */
    height: auto;
    margin: 0 auto;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: #FFFFFF;
}

/* Tipografska marka — stoji tamo gde za logo nema mesta: u suzenom meniju
   (36px) i u gornjoj traci na uskom ekranu (26px), gde bi crtez sa tri figure
   i natpisom bio samo mrlja. */
.brand-word {
    display: block;
    color: var(--on-bar);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.1;
}

.brand-word small {
    display: block;
    margin-top: 3px;
    color: var(--on-bar-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.brand-mark {
    color: var(--on-bar);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    text-transform: uppercase;
}

/* Na svetloj podlozi (ekran prijave) ista marka ide u boji teksta. */
.brand-word--dark { color: var(--ink); }
.brand-word--dark small { color: var(--muted); }

.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;
}

.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;
}

.nav-item--active,
.nav-item--active:hover {
    background: var(--accent);   /* bela na njoj = 8,10:1 */
    color: var(--on-bar);
    font-weight: 600;
}

.sidebar__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    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(--accent);   /* nosi tekst, pa ne sme svetla brend plava */
    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;
}

.stat {
    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: 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); }

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

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

.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(--accent-wash); }
.table tbody tr:last-child td { border-bottom: 0; }

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

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

/* 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; }

/* ==========================================================================
   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); }
.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); }

/* 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;
}

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

.btn--primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-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(--accent);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn--link:hover { background: none; color: var(--accent-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(--accent);
    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.
 * Isti red nosi i dve kolone kartice klijenta: leva kolona je obican element,
 * desna dobija .sticky-col i fiksnu sirinu.
 */
.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;
}

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

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

.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(--accent);
    cursor: pointer;
}

.choice:focus-within {
    border-color: var(--accent);
    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(--accent);
    background: var(--accent-wash);
    box-shadow: inset 0 0 0 1px var(--accent);
    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; }

/* 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;
    flex: 0 0 340px;
    max-width: 100%;
}

/* --- 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(--accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.pagination__link:hover { background: var(--bg); color: var(--accent-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);
}

/* 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; }

/* --- 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(--accent);
    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);
}

/* Tamna verzija logotipa na svetloj kartici. */
.guest__logo {
    display: block;
    margin: 0 auto 26px;
    max-width: 240px;   /* kartica je bela, logo ide bez podloge */
    height: auto;
    text-align: center;
}

.guest__logo img {
    display: block;
    width: 100%;
    max-width: 240px;
    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;
}

.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;
}

/* --- 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(--accent);
}

/* --- 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);
}

/* „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; }
}

/* ==========================================================================
   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;
}

/* U uskoj gornjoj traci nema mesta za dopunu ispod imena. */
.topbar__brand .brand-word { font-size: 16px; }
.topbar__brand .brand-word small { display: none; }

.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(--accent); outline-offset: 2px; }

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

.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(27, 29, 31, .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; }

.nav-collapsed .nav-item span,
.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; }

/* 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; }

    .table { min-width: 0; border-collapse: separate; border-spacing: 0 10px; }

    .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 td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        border: 0;
        padding: 3px 0;
        text-align: right;
    }

    .table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 11px;
        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. */
    .table tbody td[data-label="Note"],
    .table tbody td[data-label="Email"] {
        display: block;
        text-align: left;
    }

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

    /* Mejl i dugacak naziv firme nemaju gde da se prelome bez ovoga. */
    .table tbody td { overflow-wrap: anywhere; }

    /* 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;
    }

    .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; }

    /* Dugmad u obliku linka su bila 20px visoka — ispod donje granice za dodir
       (WCAG 2.2, minimum 24px). Izgled ostaje, povecava se samo dodirna zona. */
    .btn--link,
    .danger-link { display: inline-flex; align-items: center; min-height: 32px; }

    /* 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%; }

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

@media (max-width: 420px) {
    .filters { grid-template-columns: 1fr; }
    .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;
}

.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%; }
    .inline-form { width: 100%; }
}

/* ==========================================================================
   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(--accent);
    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) ---------- */

.checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--muted);
    cursor: pointer;
}

.checkbox input {
    flex: none;
    width: 17px;
    height: 17px;
    accent-color: var(--accent);
    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.
   ========================================================================== */

/* --- 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;
}

/* --- 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(--accent-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);
}