/* Izgled po TrioCRM-u: tamni bočni meni, svijetao sadržaj, Trio plava. */

:root {
    /* Boje iz logotipa Trija; znak aplikacije ih nosi sve tri. */
    --trio-crvena: #ED1C24;
    --trio-zuta: #FBDF06;

    --trio-plava: #1A73E8;
    --trio-plava-tamna: #1557b0;
    --trio-plava-svijetla: #e8f0fe;

    --meni: #16202e;
    --meni-stavka: #b9c4d2;
    --meni-aktivna: #ffffff;

    --tekst: #1f2733;
    --tekst-slab: #667085;
    --pozadina: #f4f6f9;
    --ploca: #ffffff;
    --ivica: #e3e8ef;

    --zelena: #1e8e3e;
    --narandzasta: #e37400;
    --crvena: #d93025;

    --sjena: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
    --radijus: 8px;
    --meni-sirina: 232px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: var(--tekst);
    background: var(--pozadina);
}

h1 { font-size: 22px; font-weight: 600; margin: 0; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }

a { color: var(--trio-plava); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== raspored ===== */

.page { display: flex; min-height: 100vh; }

.bocni {
    width: var(--meni-sirina);
    flex: 0 0 var(--meni-sirina);
    background: var(--meni);
    color: var(--meni-stavka);
    display: flex;
    flex-direction: column;
}

.sadrzaj { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.zaglavlje {
    height: 56px;
    background: var(--ploca);
    border-bottom: 1px solid var(--ivica);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 16px;
}

/* Traka u izvještaju po danima. Nije grafikon nego širina ćelije u procentu
   najjačeg dana - dovoljno da se vidi ritam mjeseca, bez ijedne biblioteke. */
.traka {
    height: 10px;
    min-width: 2px;
    background: var(--glavna);
    border-radius: 5px;
    opacity: .75;
}

/* ===== prekid veze sa serverom =====
   Zadano sakriveno; Blazor dodaje klase components-reconnect-* kad veza pukne.
   Ostatak ekrana se namjerno ne zatamnjuje do kraja - ono što se vidi je i
   dalje tačno, samo se privremeno ne može kliknuti. */
#components-reconnect-modal { display: none; }

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 23, 42, .35);
}

.veza-prozor {
    position: absolute;
    left: 50%;
    top: 24px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 24px);
    padding: 14px 18px;
    background: var(--ploca);
    border: 1px solid var(--ivica);
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
}

.veza-naslov { display: block; font-size: 14px; }
.veza-opis { font-size: 13px; color: var(--tekst-slab); margin-top: 2px; }

.veza-vrtjeska {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ivica);
    border-top-color: var(--glavna);
    border-radius: 50%;
    animation: veza-vrti .8s linear infinite;
}

@keyframes veza-vrti { to { transform: rotate(360deg); } }

/* Poštuje se postavka telefona da se animacije smanje. */
@media (prefers-reduced-motion: reduce) {
    .veza-vrtjeska { animation: none; }
}

/* ===== ponuda za instalaciju na telefon =====
   Traka stoji na DNU: na vrhu bi prekrila zaglavlje i izbor poslovnice, a
   dolje je i bliže palcu. Pojavljuje se tek kad pregledač javi da se može
   instalirati, pa je zadano sakrivena. */
.instalacija {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ploca);
    border: 1px solid var(--ivica);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}

.instalacija.vidljiva { display: flex; }

.instalacija img { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto; }

.instalacija .tekst { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }

.instalacija .dugme { flex: 0 0 auto; }

.instalacija .zatvori {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 4px 6px;
    font-size: 15px;
    line-height: 1;
    color: var(--tekst-slab);
    cursor: pointer;
}

.instalacija .zatvori:hover { color: var(--tekst); }

/* Na širokom ekranu ne zauzima cijelu širinu - tamo je ponuda sporedna. */
@media (min-width: 821px) {
    .instalacija { left: auto; width: 420px; }
}

/* Natpis polja sa prekidačem na desnoj strani istog reda. Prekidač iznad
   polja bi ga gurnuo niže od susjednog stupca i redovi bi se razišli. */
.natpis-sa-prekidacem {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.natpis-sa-prekidacem .prekidac {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 400;
    font-size: 12px;
    color: var(--tekst-slab);
    white-space: nowrap;
}

.natpis-sa-prekidacem .prekidac input { margin: 0; }

/* Spisak kućica u dva-tri stupca, da sedam opcija ne razvuče prozorčić
   u dugačku kolonu kroz koju se mora skrolati. */
.kucice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 4px 14px;
}

.kucice label { margin: 0; font-weight: 400; }

.zaglavlje .firma { font-weight: 600; }
.zaglavlje .korisnik { color: var(--tekst-slab); font-size: 13px; }

/* Izbor poslovnice stoji odmah uz naziv firme - zajedno odgovaraju na pitanje
   "gdje sam", pa ne trebaju biti na dva kraja trake. */
.zaglavlje .poslovnica-izbor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    font-size: 13px;
}

/* Oznaka stanja kase je link, pa mora izgledati kao oznaka a ne kao link. */
.zaglavlje .kasa-stanje {
    text-decoration: none;
    white-space: nowrap;
}

.zaglavlje .poslovnica-izbor select {
    width: auto;
    min-width: 150px;
    height: 32px;
    padding: 4px 8px;
    font-size: 13px;
}

main { padding: 20px; flex: 1; }

/* ===== bočni meni ===== */

.znak {
    padding: 18px 20px 14px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.znak-natpis { display: flex; align-items: center; gap: 9px; }

/* Znak se crta bez podloge: meni je već mornarski, pa bi kvadrat oko slova
   bio kvadrat iste boje - vidjela bi mu se samo ivica. */
.znak-slika { width: 26px; height: 26px; flex: 0 0 26px; }

.znak .tacka { color: var(--trio-crvena); }

/* Prekidač menija: sam checkbox se nikad ne vidi, samo natpis uz njega. */
.meni-prekidac { position: absolute; opacity: 0; pointer-events: none; }

/* Dugme za meni postoji samo na uskim ekranima. */
.meni-dugme {
    display: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.meni-dugme::before { content: "☰"; }
.meni-prekidac:checked ~ .znak .meni-dugme::before { content: "✕"; }

.meni { display: flex; flex-direction: column; padding: 6px 10px; gap: 2px; }

.meni a,
.meni button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--meni-stavka);
    font-size: 14px;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

/* Ikone u meniju. Stavke su već flex sa razmakom, pa ikoni treba samo
   veličina; boju uzima od natpisa (currentColor), a blijeda je dok stavka
   nije aktivna, da natpis ostane ono što se prvo čita. */
.meni a svg,
.meni button svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    opacity: .7;
}

.meni a:hover svg,
.meni button:hover svg,
.meni a.active svg { opacity: 1; }

.meni a:hover,
.meni button:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }

.meni a.active { background: var(--trio-plava); color: var(--meni-aktivna); font-weight: 500; }

.meni .razmak { flex: 1; }

.meni-dno { margin-top: auto; padding: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }

/* Donji meni nosi svoj razmak, pa mu unutrašnji .meni ne treba još jedan -
   inače su "Moj nalog" i "Odjava" uvučeniji od ostalih stavki. Vidjelo se tek
   kad su ikone poravnale sve u jednu kolonu. */
.meni-dno .meni { padding: 0; }

.potpis {
    padding: 12px 20px 16px;
    font-size: 11px;
    color: #64748b;
}

.potpis a { color: #94a3b8; }

/* ===== ploče i tabele ===== */

.ploca {
    background: var(--ploca);
    border: 1px solid var(--ivica);
    border-radius: var(--radijus);
    box-shadow: var(--sjena);
    padding: 16px;
}

.ploca + .ploca { margin-top: 16px; }

.alatna {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.alatna .razmak { flex: 1; }

table { width: 100%; border-collapse: collapse; }

th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--tekst-slab);
    font-weight: 600;
    padding: 10px 10px;
    border-bottom: 1px solid var(--ivica);
    white-space: nowrap;
}

td { padding: 10px; border-bottom: 1px solid var(--ivica); }

tbody tr:hover { background: #fafbfc; }

.desno { text-align: right; }
.sredina { text-align: center; }
.tiho { color: var(--tekst-slab); }
.brojka { font-variant-numeric: tabular-nums; white-space: nowrap; }

.prazno {
    padding: 40px 20px;
    text-align: center;
    color: var(--tekst-slab);
}

/* ===== dugmad ===== */

.dugme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid var(--ivica);
    background: var(--ploca);
    color: var(--tekst);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.dugme:hover { background: #f8f9fb; text-decoration: none; }

.dugme.glavno { background: var(--trio-plava); border-color: var(--trio-plava); color: #fff; font-weight: 500; }
.dugme.glavno:hover { background: var(--trio-plava-tamna); border-color: var(--trio-plava-tamna); }

.dugme.opasno { color: var(--crvena); border-color: #f3c9c6; }
.dugme.opasno:hover { background: #fdf2f1; }

.dugme:disabled { opacity: .5; cursor: not-allowed; }

.dugme.malo { padding: 5px 10px; font-size: 13px; }

/* ===== polja ===== */

label { display: block; font-size: 13px; color: var(--tekst-slab); margin-bottom: 4px; }

/* Ne gađa se input[type=text]: Blazorov InputText ne ispiše atribut type, pa
   takvo polje ispadne uže od ostalih. Zato "svaki input osim kvadratića".
   :where() je tu namjerno - drži specifičnost na nuli, pa ga kasnija pravila
   (npr. .sa-ikonom input) mogu nadjačati bez trke u specifičnosti. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden])),
select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--ivica);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--tekst);
    background: #fff;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--trio-plava);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .12);
}

input[type=checkbox] { width: auto; margin-right: 6px; }

.polje { margin-bottom: 12px; }

.red { display: flex; gap: 12px; flex-wrap: wrap; }
.red > * { flex: 1; min-width: 160px; }

.trazilica { max-width: 280px; }

.greska-polja { color: var(--crvena); font-size: 12px; margin-top: 3px; }

/* ===== oznake statusa ===== */

.oznaka {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.oznaka.nacrt { background: #eef1f5; color: #5b6673; }
.oznaka.izdata { background: var(--trio-plava-svijetla); color: var(--trio-plava-tamna); }
.oznaka.placena { background: #e6f4ea; color: var(--zelena); }
.oznaka.dospjela { background: #fef7e0; color: var(--narandzasta); }
.oznaka.stornirana { background: #fce8e6; color: var(--crvena); }

/* ===== poruke ===== */

.poruka {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.poruka.greska { background: #fce8e6; border-color: #f3c9c6; color: #a52714; }
.poruka.uspjeh { background: #e6f4ea; border-color: #c3e6cd; color: #12662c; }
.poruka.pazi { background: #fef7e0; border-color: #f6e0a8; color: #8a5300; }

/* ===== pločice na pregledu ===== */

.plocice { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }

.plocica {
    background: var(--ploca);
    border: 1px solid var(--ivica);
    border-radius: var(--radijus);
    box-shadow: var(--sjena);
    padding: 16px;
}

.plocica .naslov { font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--tekst-slab); margin-bottom: 6px; }
.plocica .broj { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plocica .ispod { font-size: 12px; color: var(--tekst-slab); margin-top: 4px; }

/* ===== prozorčić ===== */

.zastor {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    z-index: 100;
}

.prozor {
    background: var(--ploca);
    border-radius: 10px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .2);
}

.prozor.siroki { max-width: 900px; }

.prozor header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ivica);
    font-weight: 600;
    font-size: 16px;
}

.prozor .tijelo { padding: 20px; }

.prozor footer {
    padding: 14px 20px;
    border-top: 1px solid var(--ivica);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ===== prijava i registracija ===== */

/* Isti izgled kao prijava na TrioCRM-u: tamna pozadina sa gradijentom,
   bijela kartica na sredini, logotip iznad naslova. */

.ulaz {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.ulaz-ploca {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .30);
}

/* Znak je sada sam sebi okvir - tamni zaobljeni kvadrat - pa mu ne treba
   bijela podloga ispod kao logotipu koji je tu stajao ranije. */
.ulaz-znak {
    width: 96px;
    height: 96px;
    margin: 0 auto 18px;
}

.ulaz-znak svg { width: 100%; height: 100%; display: block; }

/* Potpis na dnu kartice: mali logotip Trija i ime firme, tiho. */
.ulaz-potpis {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--ivica);
    color: var(--tekst-slab);
    font-size: 12px;
}

/* Grb je viši nego širi, pa se mjeri po visini; slika je na 128 px da bude
   oštra i na ekranima sa dvostrukom gustinom. */
.ulaz-potpis img { height: 32px; width: auto; }

.ulaz-ploca h1 {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
}

.ulaz-ploca .podnaslov {
    text-align: center;
    color: var(--tekst-slab);
    margin: 0 0 28px;
    font-size: 13px;
}

.ulaz-ploca h2 {
    text-align: center;
    color: var(--trio-plava);
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.ulaz-ploca .polje { margin-bottom: 18px; }

.ulaz-ploca .polje label {
    display: block;
    margin-bottom: 6px;
    color: #1e293b;
    font-weight: 600;
    font-size: 14px;
}

/* Ikona sjedi u polju, pa unos ima mjesta s lijeve strane. */
.sa-ikonom { position: relative; }

.sa-ikonom svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tekst-slab);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.sa-ikonom input {
    width: 100%;
    height: 46px;
    padding-left: 42px;
    border-color: #dbe3ea;
    border-radius: 8px;
}

.ulaz-ploca .zapamti {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
    color: var(--tekst-slab);
    font-size: 14px;
    font-weight: 400;
}

.ulaz-dugme {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 8px;
    background: var(--trio-plava);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
}

.ulaz-dugme:hover { background: var(--trio-plava-tamna); }
.ulaz-dugme:disabled { opacity: .7; cursor: not-allowed; }

.ulaz-dno {
    margin-top: 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .ulaz-ploca { padding: 30px 25px; }
    .ulaz-znak { width: 110px; height: 110px; }
    .ulaz-ploca h1 { font-size: 24px; }
}

/* =====================================================================
   Identity stranice iz šablona nose Bootstrapov "form-floating", gdje
   natpis u HTML-u dolazi POSLIJE polja i lebdi preko njega. Kad se to
   lebdenje ugasi, natpis padne ispod polja i izgleda kao da pripada
   sljedećem. Zato se red okreće (column-reverse), pa natpis stoji iznad
   polja kao i svugdje drugdje u aplikaciji.

   Ovo sređuje SVE takve stranice odjednom, i one koje nisu prepisane.
   ===================================================================== */

.form-floating {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 14px;
}

.form-floating > label {
    position: static;
    padding: 0;
    height: auto;
    transform: none;
    font-size: 13px;
    color: var(--tekst-slab);
    margin-bottom: 4px;
}

.form-floating > .form-control,
.form-floating > input { height: auto; padding: 8px 10px; }

.form-control:disabled, input:disabled { background: #f4f6f9; color: var(--tekst-slab); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid var(--ivica);
    background: var(--ploca);
    color: var(--tekst);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}

.btn-primary {
    background: var(--trio-plava);
    border-color: var(--trio-plava);
    color: #fff;
    font-weight: 500;
}

.btn-primary:hover { background: var(--trio-plava-tamna); border-color: var(--trio-plava-tamna); }
.btn-danger { background: var(--crvena); border-color: var(--crvena); color: #fff; }
.btn-lg { padding: 11px 18px; font-size: 15px; }
.w-100 { width: 100%; }

.text-danger { color: var(--crvena); font-size: 13px; }
.text-success { color: var(--zelena); font-size: 13px; }
.mb-3 { margin-bottom: 14px; }

/* Šablon zamotava obrasce u Bootstrapovu mrežu; ovdje je dovoljan običan blok. */
.row { display: block; }
[class^="col-md-"], [class*=" col-md-"] { width: 100%; max-width: 520px; }

#blazor-error-ui {
    background: #fef7e0;
    border-top: 1px solid #f6e0a8;
    bottom: 0;
    display: none;
    left: 0;
    padding: 10px 16px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; }

.blazor-error-boundary {
    background: #fce8e6;
    padding: 12px 16px;
    color: #a52714;
    border-radius: 6px;
}

/* =====================================================================
   TELEFONI I USKI EKRANI

   Dvije stvari su ovdje bitne, jer su obje bile pokvarene: meni je bio
   red linkova preko cijele širine, a tabele su izlazile iz ekrana —
   spisak faktura je na ekranu od 386 px bio širok 771 px, dakle duplo.

   Tabele se zato na telefonu NE skrolaju postrance nego se svaki red
   pretvara u karticu, a naziv kolone dolazi iz atributa data-k na ćeliji.
   Skrolanje postrance na spisku faktura je neupotrebljivo jednom rukom.
   ===================================================================== */

@media (max-width: 820px) {
    .page { flex-direction: column; }

    /* Meni je traka na vrhu koja ostaje na mjestu dok se sadržaj pomjera. */
    .bocni {
        width: 100%;
        flex: none;
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .znak { padding: 12px 16px; }
    .meni-dugme { display: block; }

    /* Zatvoren meni se ne vidi; otvoren se spušta ispod trake. */
    .meni-omot {
        display: none;
        border-top: 1px solid rgba(255, 255, 255, .08);
        max-height: calc(100vh - 56px);
        overflow-y: auto;
    }

    .meni-prekidac:checked ~ .meni-omot { display: block; }

    .meni { flex-direction: column; padding: 8px 10px; }
    .meni a, .meni button { width: 100%; padding: 12px; }

    .meni-dno { margin-top: 0; }
    .potpis { display: none; }

    main { padding: 14px 12px; }

    .zaglavlje {
        height: auto;
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 4px;
    }

    .zaglavlje .korisnik { font-size: 12px; }

    /* Na telefonu izbor ide u vlastiti red pune širine - u traku uz naziv
       firme i korisnika ne stane, pa bi se zgnječio na par znakova. */
    .zaglavlje .poslovnica-izbor {
        order: 3;
        width: 100%;
        margin: 4px 0 0;
    }

    .zaglavlje .poslovnica-izbor select { flex: 1; min-width: 0; }

    h1 { font-size: 19px; }

    .ploca { padding: 12px; }

    /* Alatna traka: pretraga i dugmad jedno ispod drugog, puna širina. */
    .alatna { gap: 8px; }
    .alatna .razmak { flex-basis: 100%; height: 0; }
    .alatna .trazilica { max-width: none; flex: 1 1 100%; }
    .alatna select { flex: 1 1 140px; width: auto !important; }
    .alatna .dugme, .alatna a.dugme { flex: 1 1 auto; justify-content: center; }

    /* Polja u redu idu jedno ispod drugog umjesto da se stiskaju. */
    .red { gap: 8px; }
    .red > * { flex: 1 1 100%; min-width: 0; max-width: none !important; }

    .plocice { grid-template-columns: 1fr 1fr; gap: 10px; }
    .plocica { padding: 12px; }
    .plocica .broj { font-size: 20px; }

    /* ===== tabele kao kartice ===== */

    table, tbody, tr, td { display: block; width: 100%; }
    thead, tfoot { display: none; }

    tbody tr {
        border: 1px solid var(--ivica);
        border-radius: var(--radijus);
        padding: 10px 12px;
        margin-bottom: 10px;
        background: #fff;
    }

    tbody tr:hover { background: #fff; }

    tbody td {
        border: 0;
        padding: 4px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right;
    }

    /* Naziv kolone dolazi iz data-k; ćelija bez njega je puna širina. */
    tbody td[data-k]::before {
        content: attr(data-k);
        color: var(--tekst-slab);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .3px;
        text-align: left;
        flex: 0 0 auto;
    }

    /* Prazne ćelije (npr. kolona samo sa dugmadima) ne prave prazan red. */
    tbody td:empty { display: none; }

    /* Red sa dugmadima ide preko cijele širine, dugmad se dijele. */
    tbody td.desno:not([data-k]) {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: stretch;
        padding-top: 10px;
        margin-top: 6px;
        border-top: 1px solid var(--ivica);
    }

    tbody td.desno:not([data-k]) > * { flex: 1 1 auto; justify-content: center; }

    /* Polja unutar tabele (stavke fakture) moraju biti upotrebljiva prstom. */
    tbody td input { min-height: 38px; }

    /* Tabele "naziv → vrijednost" (zbir fakture, odgovor kase) ostaju u dvije
       kolone - njih kartice samo razvuku bez ikakve koristi. */
    table.parovi, table.parovi tbody, table.parovi tr, table.parovi td { display: revert; }
    table.parovi { display: table; width: 100% !important; }
    table.parovi tbody tr { border: 0; padding: 0; margin: 0; background: none; }
    table.parovi td { border-bottom: 1px solid var(--ivica); padding: 8px 0; text-align: left; }
    table.parovi td.desno { text-align: right; }
    table.parovi td::before { content: none; }

    /* ===== prozorčići ===== */

    .zastor { padding: 12px; align-items: flex-start; }
    .prozor { max-width: none; }
    .prozor .tijelo { padding: 14px; }
    .prozor footer { padding: 12px 14px; flex-wrap: wrap; }
    .prozor footer .dugme { flex: 1 1 auto; justify-content: center; }
}

/* znak iznad prijave i registracije */
.znak-ulaz {
    font-size: 22px;
    font-weight: 600;
    color: var(--tekst);
    margin-bottom: 18px;
}

.znak-ulaz span { color: var(--trio-plava); }

/* pod-meni na stranicama naloga */
.pod-meni { display: flex; flex-direction: column; gap: 2px; }

.pod-meni a {
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--tekst);
    font-size: 14px;
}

.pod-meni a:hover { background: #f3f5f8; text-decoration: none; }
.pod-meni a.active { background: var(--trio-plava-svijetla); color: var(--trio-plava-tamna); font-weight: 500; }

/* ===== Radno vrijeme ===== */

/* Oznake stanja radnika: ista paleta kao oznake dokumenata, drugo značenje. */
.oznaka.na-poslu { background: #e6f4ea; color: var(--zelena); }
.oznaka.na-pauzi { background: #fef7e0; color: var(--narandzasta); }
.oznaka.van { background: #eef1f5; color: #5b6673; }
.oznaka.odsutan { background: var(--trio-plava-svijetla); color: var(--trio-plava-tamna); }
.oznaka.kasni { background: #fce8e6; color: var(--crvena); }

.tacka-stanja {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.tacka-stanja.na-poslu { background: var(--zelena); }
.tacka-stanja.na-pauzi { background: var(--narandzasta); }
.tacka-stanja.van { background: #c3cad4; }

/* Raspored: tabela radnik × dan. Na telefonu se NE pretvara u kartice kao
   ostale tabele - sedmica se čita samo kao mreža, pa se mreža skrola bočno. */
.raspored-omot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.raspored { min-width: 760px; table-layout: fixed; }
.raspored th, .raspored td { text-align: center; padding: 4px; }
.raspored th:first-child, .raspored td:first-child { text-align: left; width: 180px; }
.raspored th.vikend { color: var(--tekst-slab); }
.raspored th.danas { color: var(--trio-plava); }
.raspored td.praznik { background: #f6f7f9; }
.raspored select {
    width: 100%;
    padding: 5px 2px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--ivica);
    text-align: center;
    text-align-last: center;
}
.raspored .odsustvo-celija {
    font-size: 12px;
    font-weight: 600;
    color: var(--trio-plava-tamna);
    background: var(--trio-plava-svijetla);
    border-radius: 6px;
    padding: 6px 2px;
}
.raspored .praznik-natpis { font-size: 10px; color: var(--tekst-slab); display: block; font-weight: 400; }

@media (max-width: 820px) {
    .raspored, .raspored tbody, .raspored tr { display: table; width: auto; }
    .raspored thead { display: table-header-group; }
    .raspored tr { display: table-row; }
    .raspored td, .raspored th { display: table-cell; }
    .raspored td::before { content: none !important; }
}

.boja-kvadrat {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.1);
    vertical-align: middle;
    margin-right: 6px;
}

/* PIN koji se pokazuje samo jednom - krupno, da se prepiše bez greške. */
.pin-prikaz {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 10px;
    text-align: center;
    padding: 16px;
    margin: 8px 0 12px;
    background: #f4f6f9;
    border: 1px dashed var(--ivica);
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}

.kod-uparivanja {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 6px;
    text-align: center;
    font-family: ui-monospace, Consolas, monospace;
    padding: 14px;
    background: #f4f6f9;
    border-radius: 10px;
    margin: 8px 0;
}

.pauze-unos .red { align-items: flex-end; }
.pauze-unos .red > .dugme { flex: 0 0 auto; min-width: 0; margin-bottom: 12px; }

.tabovi { display: flex; gap: 4px; border-bottom: 1px solid var(--ivica); margin-bottom: 16px; flex-wrap: wrap; }
.tabovi button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    font: inherit;
    color: var(--tekst-slab);
    cursor: pointer;
}
.tabovi button.aktivan { color: var(--trio-plava); border-bottom-color: var(--trio-plava); font-weight: 500; }