:root {
    --bg: #f0f1f5; /* svijetlo siva pozadina */
    --panel: #ffffff; /* kartice */
    --panel-2: #f7f8fb; /* sekundarne površine */
    --line: #d9dde6;
    --text: #15171a;
    --muted: #6b7280;
    --brand: #c71b1b; /* crveni gumbi */
    --brand-d: #930e0e;
    --nav: #d1d5db; /* svijetlo siva tipka (neaktivna) */
    --nav-active: #22c55e; /* zelena tipka (aktivna) */
    --nav-active-b: #149a46;
    --surface-light: #e1e3ea; /* svijetlo sivi background za input/gumbe */
    --shadow: rgba(17, 20, 24, .08);
    --surface-darker: rgba(0,0,0,.08);
}
/* ===== GLOBAL ===== */

html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Ubuntu, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}
/* iOS/PWA: dozvoli selekciju i touch-callout (pomaže s tipkovnicom) */

html, body, input, textarea, select, button, [contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}
/* Ukloni iOS default stilove koji znaju zeznuti fokus/zoom */

input, textarea {
    -webkit-appearance: none;
    appearance: none;
}
/* iPhone “zoom on focus” workaround: */

input, select, button {
    font-size: 16px;
}
/* Safe area padding helper */

.safe {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* ===== HEADER ===== */

header {
    position: sticky;
    top: 0;
    background: rgba(27,30,35,.9);
    backdrop-filter: saturate(1.2) blur(4px);
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10; /* default iznad sadržaja */
}

    header h1 {
        font-size: 18px;
        margin: 0;
        font-weight: 600;
    }
/* Na login ekranu spusti overlays kako ne bi presretali tap (dodaj klasu .login-mode na body iz JS-a) */

body.login-mode header, body.login-mode #mainNav {
    z-index: 0 !important;
}
/* ===== MAIN ===== */

main {
    padding: 16px;
}
/* ===== CHIPS ===== */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid var(--line);
    background: #b8bbcf;
    color: #2b2f37;
}

    .chip.ok {
        border-color: #234e2d;
        color: #d1f7dd;
    }

    .chip.warn {
        border-color: #5a420e;
        color: #ffe8b0;
    }

    .chip.err {
        border-color: #5a1b1b;
        color: #ffd7d7;
    }
/* ===== BUTTONS ===== */

.btn {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--surface-light);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

    .btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    .btn.primary {
        background: linear-gradient(180deg, var(--brand), var(--brand-d));
        border-color: #6e0b0b;
        color: #fff;
    }

    .btn.ghost {
        background: var(--panel-2);
        color: var(--text);
    }
/* ===== CARDS ===== */

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 24px var(--shadow);
    margin-bottom: 12px;
    position: relative;
    z-index: 5; /* iznad eventualnih dekorativnih slojeva */
}

    .card h2, .card h3 {
        margin: 0 0 8px;
    }
/* ===== INPUTS ===== */ /* Standardni HTML input (preporučeno) */

.lav-input, input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--surface-light);
    border: 1px solid var(--line);
    color: var(--text);
    outline: none;
    line-height: 1.3;
    transition: border-color .15s ease;
}

    .lav-input:focus, input:focus, select:focus, textarea:focus {
        border-color: #3a3b45;
    }
/* Jamči da su inputi klikabilni i “iznad” */

#app .card input, #app .card textarea, #app .card select {
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
}
/* Alternativa: contenteditable “kao input” (ako baš trebaš CE) */

.lav-input-ce {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #2a2d34;
    border-radius: 12px;
    background: #0f1114;
    color: #fff;
    outline: none;
    line-height: 1.3;
    position: relative;
    z-index: 10; /* iznad svih fixed elemenata */
}

    .lav-input-ce:focus {
        border-color: #3a92ff;
    }

    .lav-input-ce:empty::before {
        content: attr(data-placeholder);
        color: #7a7f88;
    }
/* ===== LAYOUT ===== */

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.col {
    min-width: 0;
}

@media (max-width:900px) {
    .row {
        grid-template-columns: 1fr;
    }
}
/* ===== NAVBAR (bottom tabs) ===== */

#mainNav {
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.08));
    padding: 10px;
    border-top: 1px solid var(--line);
    backdrop-filter: saturate(1.1) blur(6px);
    z-index: 10;
}

    #mainNav a, #mainNav button {
        flex: 1;
        text-align: center;
        border-radius: 14px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        background: var(--nav);
        color: var(--text);
        text-decoration: none;
        font-weight: 600;
    }

        #mainNav a.active, #mainNav button.active {
            background: var(--nav-active);
            border-color: var(--nav-active-b);
            color: #fff;
        }
/* ===== TABLES ===== */

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

    .lav-table th, .lav-table td {
        padding: 10px;
        border-bottom: 1px solid var(--line);
        text-align: left;
    }

    .lav-table th {
        color: #444;
        font-weight: 600;
    }
/* ===== HELPERS ===== */

.muted {
    color: var(--muted);
}
/* Errors / Hidden – JEDINA verzija (bez duplikata) */

.err {
    color: #b00020;
    font-size: 14px;
    margin-top: 8px;
}

.hidden {
    display: none !important;
}

/* ===== TRAŽILICA ===== */

#srch {
    background: #fffbe6; /* svijetlo žuta pozadina */
    border: 2px solid #facc15; /* žuti obrub (Tailwind yellow-400) */
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 15px;
    color: #111;
}

    #srch::placeholder {
        color: #9a8c1d; /* tamno žuta za placeholder */
        opacity: 0.9;
    }
/* ===== WATERMARK ===== */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("/pwa/icons/logo-bg.svg");
    background-repeat: no-repeat;
    background-position: 90% 70%;
    background-size: 420px auto;
    opacity: .05;
    pointer-events: none;
    z-index: 0;
}
/* Glavni sadržaj iznad watermarka */

header, main, #mainNav {
    position: relative;
    z-index: 1;
}
/* ===== BOTTOM NAV (povećano + safe area) ===== */

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px; /* više */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); /* iznad home indikatora */
    background: rgba(27,30,35,.95);
    backdrop-filter: saturate(1.2) blur(8px);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center; /* NEW */
    justify-content: space-around; /* NEW */
    flex-wrap: nowrap; /* NEW: spriječi vertikalno slaganje */
    z-index: 999;
}

    /* ===== BOTTOM NAV ikone + tekst ===== */

    .bottom-nav .bn-ico {
        font-size: 30px !important; /* fiksno ~+25% naspram 24px */
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
        .bottom-nav .bn-ico svg {
            width: 30px !important;
            height: 30px !important;
        }

    .bottom-nav .bn-txt {
        font-size: 0.85em; /* ako želiš, malo manji tekst da ikona dominira */
    }

.bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--muted);
    font-size: 13px;
}

    .bn-item.active {
        color: #fff;
    }


/* veće ikone */

.bn-txt {
    line-height: 1;
    margin-top: 4px;
}
/* Rezervacija prostora da sadržaj ne upada ispod bara */

#app, main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 12px);
}
/* Mala brojčana značka na tabu */

.bn-badge {
    position: absolute;
    top: 8px;
    right: 18px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background: #e11d48;
    border-radius: 999px;
    border: 2px solid rgba(27,30,35,.95);
}

.bn-item {
    position: relative;
}
/* Lokacije i uređaji = samo 2 stanja (zelena / crvena) */

.loc-item, .dev-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 22px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
}
/* Enlarged list sizes */

.loc-item {
    font-size: 20px;
    line-height: 1.35;
}

.dev-item {
    font-size: 17px;
    line-height: 1.35;
}
/* BOJE STANJA — primjenjuju se i na .loc-item i na .dev-item */


/* crvena */ /* mala točka (ostaje opcionalno, ali nema neutralne varijante) */ /* BOJE STANJA — primjenjuju se i na .loc-item i na .dev-item */

.status-up {
    background: var(--panel-2);
    border: 6px solid #1f9d55; /* ovdje deblji zeleni okvir */
    color: var(--text);
}

.status-down {
    background: var(--panel-2);
    border: 6px solid #d24a4a; /* ovdje deblji crveni okvir */
    color: var(--text);
}
/* mala točka */

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 8px;
}

.status-up .status-dot {
    background: #26c281;
}

.status-down .status-dot {
    background: #e74c3c;
}
/* Veći CTA gumbi / kartice kategorija */

.cat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--panel);
    text-decoration: none;
    color: var(--text);
    box-shadow: 0 8px 18px var(--shadow);
    font-weight: 700;
}
/* Veće tipke */

.btn.lg {
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 16px;
}
/* Grid kartica */

.grid-compact {
    display: grid;
    gap: 10px;
}
/* Qty stepper */

.qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .qty .qbtn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: var(--panel-2);
        font-weight: 900;
        font-size: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
    }

    .qty input {
        width: 80px;
        text-align: center;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: var(--surface-light);
    }
/* Povijest narudžbi: smanji zbijenost redaka */

.lav-table td, .lav-table th {
    padding: 8px 10px;
    vertical-align: top;
}
/* === SUBKATEGORIJE — konačni stil kao glavne kartice === */
.subcategory-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    margin: 8px 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    color: var(--text);
    text-align: left;
}

    .subcategory-item::after {
        content: "›";
        font-size: 22px;
        color: var(--muted);
    }

    .subcategory-item:hover {
        background: var(--surface-light);
    }
/* --- Orders History (Android-like) --- */
:root {
    --green-600: #059669;
    --green-50: #ecfdf5;
    --amber-600: #b45309;
    --amber-50: #fffbeb;
    --slate-600: #475569;
    --slate-100: #f1f5f9;
}

.card-pending {
    border-left: 6px solid var(--amber-600);
    background: linear-gradient(180deg, var(--amber-50), #fff 90%);
}

.card-delivered {
    border-left: 6px solid var(--green-600);
    background: linear-gradient(180deg, var(--green-50), #fff 90%);
}

.pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .02em;
    user-select: none;
    background: var(--slate-100);
    color: var(--slate-600);
    border: 1px solid rgba(0,0,0,.06);
}

.pill-delivered {
    background: rgba(5,150,105,.12);
    color: var(--green-600);
    border-color: rgba(5,150,105,.25);
}

.pill-pending {
    background: rgba(180,83,9,.12);
    color: var(--amber-600);
    border-color: rgba(180,83,9,.25);
}

.card .muted {
    color: #6b7280;
}

#ohPendingBody > div { /* blokovi po naručitelju */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 12px;
}

#ohPendingBody .muted {
    color: #6b7280;
}

.card-delivered .user-block {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 12px;
    margin-top: 8px;
}

    .card-delivered .user-block .name {
        font-weight: 600;
        margin-bottom: 4px;
    }

.card-delivered .notes {
    background: #fff;
    border: 1px dashed rgba(5,150,105,.35);
    border-radius: 12px;
    padding: 8px 12px;
    margin-top: 10px;
}

    .card-delivered .notes .muted {
        color: #065f46;
    }



/* Header iznad liste lokacija – da se razlikuje od gumbova */
.loc-section-title {
    padding: 10px 18px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    border-radius: 999px;
    background: #eef3ff; /* svijetlo plava */
    color: #27304a;
    box-shadow: 0 0 0 1px #d5ddff;
}

/* Prazni separator prije “Osobno preuzimanje” gumba */
.loc-section-divider {
    height: 12px;
    border-radius: 999px;
    background: #ffe9c4; /* svijetlo žuta / narančasta */
    box-shadow: inset 0 0 0 1px #ffd59a;
}