/*
 * Novi izgled vendor panela (07.10.2026.)
 * Ucitava se ZADNJI u layouts/vendor/app.blade.php, samo u vendor panelu.
 * Manja slova, vece povrsine za dodir (touch), svijetli izbornik, zaobljene kartice.
 * Sve boje i velicine su ovdje na :root, nigdje drugdje.
 */
:root {
    /* Glavna boja panela: rgb(3, 122, 42) (zahtjev 07.10.2026., prije tirkizna #107980).
       Postavlja se ovdje jer je ovaj CSS zadnji, pa vrijedi za gumbe i naglaske svugdje. */
    --primary-clr: #037a2a;
    --primary-clr-rgb: 3, 122, 42;
    --primary: #02621f;
    --vi-primary: var(--primary-clr, #037a2a);
    --vi-primary-rgb: var(--primary-clr-rgb, 3, 122, 42);
    --vi-primary-soft: rgba(var(--vi-primary-rgb), .10);
    --vi-bg: #f4f5f3;
    --vi-surface: #ffffff;
    --vi-field: #f8f9f8;
    --vi-line: #e6e8e5;
    --vi-ink: #1d2320;
    --vi-muted: #6b736f;
    --vi-radius: 14px;
    --vi-radius-sm: 10px;
    --vi-touch: 40px;
    --vi-fs: 13px;
    --vi-fs-sm: 12px;
    --vi-fs-xs: 11px;
}

/* ---------- Osnova ---------- */
html body {
    font-size: var(--vi-fs);
    color: var(--vi-ink);
    background: var(--vi-bg);
}
html body .main,
html body .content {
    background: var(--vi-bg);
}
html body h1, html body .h1 { font-size: 1.375rem; }
html body h2, html body .h2 { font-size: 1.25rem; }
html body h3, html body .h3 { font-size: 1.0625rem; }
html body h4, html body .h4 { font-size: .9375rem; }
html body h5, html body .h5 { font-size: .875rem; }
html body h6, html body .h6 { font-size: .8125rem; }

.page-header {
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    border-bottom: 0;
}
html body .page-header-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}
.page-header-title .page-header-icon img {
    width: 22px !important;
    height: 22px !important;
}
.page-header-title > span:not(:first-child) { margin-inline-start: 0; }

/* ---------- Kartice ---------- */
html body .card {
    border: 1px solid var(--vi-line);
    border-radius: var(--vi-radius);
    box-shadow: none;
    background: var(--vi-surface);
}
html body .card-header {
    background: transparent;
    border-bottom: 1px solid var(--vi-line);
    padding: .875rem 1.125rem;
    border-radius: var(--vi-radius) var(--vi-radius) 0 0;
}
html body .card-header.border-0 { border-bottom: 0; }
html body .card-header-title,
html body .card-title {
    font-size: 15px;
    font-weight: 700;
}
html body .card-body { padding: 1.125rem; }
html body .card-footer {
    background: transparent;
    border-top: 1px solid var(--vi-line);
    border-radius: 0 0 var(--vi-radius) var(--vi-radius);
}

/* ---------- Polja ---------- */
html body .form-label,
html body .input-label,
html body label.form-label {
    font-size: var(--vi-fs-sm);
    font-weight: 600;
    color: var(--vi-ink);
    margin-bottom: .375rem;
}
html body .form-control:not(aside *),
html body .custom-select:not(aside *),
html body .select2-container--default .select2-selection--single,
html body .select2-container--default .select2-selection--multiple {
    font-size: var(--vi-fs);
    min-height: var(--vi-touch);
    border-radius: var(--vi-radius-sm);
    border: 1px solid var(--vi-line);
    background-color: var(--vi-field);
    box-shadow: none;
}
html body .form-control:not(aside *):not(textarea) { height: var(--vi-touch); }
html body textarea.form-control { min-height: 96px; }
html body .form-control:not(aside *):focus,
html body .custom-select:not(aside *):focus,
html body .select2-container--focus .select2-selection {
    border-color: var(--vi-primary);
    background-color: var(--vi-surface);
    box-shadow: 0 0 0 3px var(--vi-primary-soft);
}
html body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--vi-touch) - 2px);
}
html body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--vi-touch) - 2px);
}
html body .input-group-text {
    border-color: var(--vi-line);
    background: var(--vi-field);
    font-size: var(--vi-fs);
}

/* ---------- Gumbi ---------- */
html body .btn:not(aside *) {
    font-size: var(--vi-fs);
    font-weight: 600;
    border-radius: var(--vi-radius-sm);
    min-height: var(--vi-touch);
    padding: .5rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
}
html body .btn-block { display: flex; width: 100%; }
html body .btn.d-none { display: none !important; }
html body .btn-sm:not(aside *) {
    font-size: var(--vi-fs-sm);
    min-height: 34px;
    padding: .375rem .75rem;
}
html body .btn-xs,
html body .btn-icon.btn-xs { min-height: 0; }
html body .action-btn {
    min-height: 34px;
    min-width: 34px;
    padding: 0;
    border-radius: 9px;
}
html body .input-group > .btn,
html body .input-group .btn--primary,
html body .input-group .btn--secondary { border-radius: 0 var(--vi-radius-sm) var(--vi-radius-sm) 0 !important; }
html body .input-group > .form-control:not(:last-child) { border-radius: var(--vi-radius-sm) 0 0 var(--vi-radius-sm); }

/* ---------- Tablice ---------- */
html body .table { font-size: var(--vi-fs); }
html body .table thead th,
html body .thead-light th {
    font-size: var(--vi-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--vi-muted);
    background: #fafbfa;
    border-bottom: 1px solid var(--vi-line) !important;
}
html body .table td,
html body .table th {
    padding: .75rem 1rem;
    vertical-align: middle;
}
html body .table td { border-top: 1px solid var(--vi-line); }
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Znacke ---------- */
html body .badge:not(aside *) {
    font-size: var(--vi-fs-xs);
    font-weight: 600;
    border-radius: 999px;
    padding: .3em .7em;
}

/* ---------- Zaglavlje ---------- */
html body #header.navbar {
    background: var(--vi-surface);
    border-bottom: 1px solid var(--vi-line);
    box-shadow: none;
}

/* Lijevi izbornik: opca pravila iznad ga preskacu (:not(aside *)); vlastiti izgled
   (pilule kao gumbi u zaglavlju, 11.10.2026.) je na kraju ove datoteke. */
html body aside.navbar-vertical-aside { font-size: .875rem; }

/* ---------- Pilule statusa narudzbi (vendor-views/order/partials/_status-pilule) ---------- */
.status-pilule {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    margin-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.status-pilule::-webkit-scrollbar { display: none; }
.status-pilula {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--vi-touch);
    padding: 0 14px;
    border: 1px solid var(--vi-line);
    border-radius: 999px;
    background: var(--vi-surface);
    color: var(--vi-ink);
    font-size: var(--vi-fs);
    font-weight: 500;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background .15s, border-color .15s, color .15s;
}
.status-pilula:hover {
    color: var(--vi-ink);
    border-color: #cfd4d0;
    text-decoration: none;
}
.status-pilula .broj {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef0ee;
    color: var(--vi-muted);
    font-size: var(--vi-fs-xs);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.status-pilula.ceka .broj {
    background: #ffe8d6;
    color: #b45309;
}
.status-pilula.aktivna,
.status-pilula.aktivna:hover {
    background: var(--vi-primary);
    border-color: var(--vi-primary);
    color: #fff;
    font-weight: 600;
}
.status-pilula.aktivna .broj {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
.status-pilula:focus-visible {
    outline: 2px solid var(--vi-primary);
    outline-offset: 2px;
}

/* Podizbornik (Artikli, Kategorije, Zaposlenici) kao pilule iznad stranice */
.podizbornik-omot { padding-bottom: 0 !important; }
.podizbornik-omot .status-pilule { margin-bottom: 0; }
.podizbornik-omot + .content { padding-top: .5rem !important; }

/* ---------- Forma jela: dva stupca + ljepljiva traka (vendor-views/product/index, edit) ----------
   Desktop:  [naslov  | strana]
             [ostalo  | strana]   strana (slike) je ljepljiva
   Mobitel:  naslov, strana, ostalo jedno ispod drugog */
.forma-jela {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    grid-template-areas:
        "naslov strana"
        "ostalo strana";
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
    padding-bottom: 88px;
}
.forma-jela > .row { margin-left: 0; margin-right: 0; min-width: 0; }
.forma-jela__naslov { grid-area: naslov; }
.forma-jela__ostalo { grid-area: ostalo; }
.forma-jela__strana {
    grid-area: strana;
    position: sticky;
    top: calc(3.75rem + 16px);
    align-self: start;
}
/* Desni stupac je uzak: sve kartice u njemu idu punom sirinom */
.forma-jela__strana > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}
.forma-jela__strana .card.h-100 { height: auto !important; }
.forma-jela__strana .__bg-F8F9FC-card .py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.forma-jela > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
.forma-jela__ostalo > [class*="col-lg-6"] { padding-inline: 0; }
@media (min-width: 992px) {
    .forma-jela__ostalo > [class*="col-lg-6"]:nth-child(odd of [class*="col-lg-6"]) { padding-inline-end: 8px; }
    .forma-jela__ostalo > [class*="col-lg-6"]:nth-child(even of [class*="col-lg-6"]) { padding-inline-start: 8px; }
}
/* Redoslijed kao na slici: osnovno, cijena, varijacije, pa ostalo (dodaci, vrijeme, oznake) */
.forma-jela__ostalo > * { order: 4; }
.forma-jela__ostalo > :has(.general_wrapper) { order: 2; }
.forma-jela__ostalo > :has(.price_wrapper) { order: 1; }  /* Cijene odmah ispod Osnovnih (zahtjev 07.10.2026.) */
.forma-jela__ostalo > :has(.variation_wrapper),
.forma-jela__ostalo > #attribute_section,
.forma-jela__ostalo > #food_variation_section { order: 3; }
.forma-jela__ostalo > :has(.seo_wrapper) { order: 5; }
/* Dodaci, vrijeme i oznake su takodjer u .general_wrapper, pa ih vracamo na kraj */
.forma-jela__ostalo > [class*="col-lg-6"],
.forma-jela__ostalo > :has(#tags) { order: 4; }

.forma-jela__traka {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--vi-line);
    backdrop-filter: blur(6px);
}
@media (min-width: 1200px) {
    .has-navbar-vertical-aside:not(.navbar-vertical-aside-mini-mode) .forma-jela__traka { left: 16.25rem; }
    .navbar-vertical-aside-mini-mode .forma-jela__traka { left: 5.25rem; }
}
.forma-jela__traka .btn { min-width: 120px; }

@media (max-width: 991.98px) {
    .forma-jela {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "naslov" "strana" "ostalo";
        grid-template-rows: auto;
    }
    .forma-jela__strana { position: static; }
    .forma-jela__traka { padding-left: 12px; padding-right: 12px; }
    .forma-jela__traka .btn { flex: 1 1 0; }
}

/* ---------- AI pomocnik (layouts/vendor/partials/_pomocnik) ---------- */
.pomocnik { position: fixed; right: 20px; bottom: 20px; z-index: 1040; font-size: var(--vi-fs); }
body:has(.forma-jela__traka) .pomocnik { bottom: 84px; }
.pomocnik__gumb {
    /* krug s ikonom (23.10.2026.); natpis iskače lijevo na prelazak mišem / fokus */
    position: relative; display: grid; place-items: center;
    width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
    background: var(--vi-primary); color: #fff;
    box-shadow: 0 8px 22px rgba(var(--vi-primary-rgb), .35), 0 2px 6px rgba(0, 0, 0, .12);
    cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
}
.pomocnik__gumb::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 2px solid rgba(var(--vi-primary-rgb), .25); pointer-events: none;
}
.pomocnik__gumb:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--vi-primary-rgb), .42), 0 3px 8px rgba(0, 0, 0, .14); }
.pomocnik__gumb i { font-size: 1.5rem; line-height: 1; }
.pomocnik__gumb span {
    position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%);
    white-space: nowrap; padding: 7px 12px; border-radius: 999px;
    background: var(--vi-ink); color: #fff; font-size: 13px; font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.pomocnik__gumb:hover span, .pomocnik__gumb:focus-visible span { opacity: 1; transform: translate(0, -50%); }
@media (prefers-reduced-motion: reduce) { .pomocnik__gumb, .pomocnik__gumb span { transition: none; } .pomocnik__gumb:hover { transform: none; } }
.pomocnik.otvoren .pomocnik__gumb { display: none; }
.pomocnik__gumb:focus-visible, .pomocnik__prozor button:focus-visible { outline: 2px solid var(--vi-ink); outline-offset: 2px; }
.pomocnik__prozor {
    width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px));
    display: flex; flex-direction: column;
    background: var(--vi-surface); border: 1px solid var(--vi-line); border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18); overflow: hidden;
}
.pomocnik__prozor[hidden] { display: none; }
.pomocnik__glava {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 14px; background: var(--vi-primary); color: #fff;
}
.pomocnik__glava strong { display: block; font-size: 15px; }
.pomocnik__glava small { opacity: .85; font-size: var(--vi-fs-xs); }
.pomocnik__zatvori { width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .15); color: #fff; }
.pomocnik__poruke { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--vi-bg); }
.pomocnik__poruka { max-width: 88%; padding: 9px 12px; border-radius: 14px; line-height: 1.5; word-wrap: break-word; }
.pomocnik__poruka--pomocnik { align-self: flex-start; background: var(--vi-surface); border: 1px solid var(--vi-line); border-bottom-left-radius: 4px; }
.pomocnik__poruka--korisnik { align-self: flex-end; background: var(--vi-primary); color: #fff; border-bottom-right-radius: 4px; }
.pomocnik__poruka--ceka { color: var(--vi-muted); font-style: italic; }
.pomocnik__poruka a { color: var(--vi-primary); font-weight: 600; text-decoration: underline; }
.pomocnik__prijedlozi { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 0; background: var(--vi-surface); }
.pomocnik__prijedlozi[hidden] { display: none; }
.pomocnik__prijedlozi button {
    flex: 0 0 auto; min-height: 34px; padding: 0 12px; border: 1px solid var(--vi-line);
    border-radius: 999px; background: var(--vi-surface); color: var(--vi-ink); font-size: var(--vi-fs-sm);
}
.pomocnik__unos { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; background: var(--vi-surface); border-top: 1px solid var(--vi-line); }
.pomocnik__unos textarea {
    flex: 1; resize: none; max-height: 120px; min-height: 42px; padding: 10px 12px;
    border: 1px solid var(--vi-line); border-radius: 12px; background: var(--vi-field); font: inherit;
}
.pomocnik__unos textarea:focus { outline: none; border-color: var(--vi-primary); box-shadow: 0 0 0 3px var(--vi-primary-soft); }
.pomocnik__posalji { width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--vi-primary); color: #fff; }
.pomocnik__posalji:disabled { opacity: .5; }
@media (max-width: 575.98px) {
    .pomocnik { right: 12px; bottom: 12px; }
    body:has(.forma-jela__traka) .pomocnik { bottom: 80px; }
    .pomocnik__gumb span { display: none; }
    .pomocnik__gumb { width: 52px; height: 52px; }
    .pomocnik.otvoren { inset: 0; }
    .pomocnik__prozor { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    .pomocnik__prozor { animation: pomocnik-ulaz .16s ease-out; }
    @keyframes pomocnik-ulaz { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- Radno vrijeme: gumb u zaglavlju + ploca s desne strane ---------- */
.rv-gumb {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
    border: 1px solid var(--vi-line); border-radius: 999px; background: var(--vi-surface);
    color: var(--vi-ink); font-size: var(--vi-fs-sm); font-weight: 600; cursor: pointer;
}
.rv-gumb:hover { border-color: #cfd4d0; }
.rv-gumb:focus-visible { outline: 2px solid var(--vi-primary); outline-offset: 2px; }
.rv-tocka { width: 8px; height: 8px; border-radius: 50%; background: #9aa19d; flex: 0 0 auto; }
.rv-gumb--otvoreno .rv-tocka, .rv-status--otvoreno .rv-tocka { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.rv-gumb--zatvoreno .rv-tocka, .rv-status--zatvoreno .rv-tocka { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.rv-pozadina { position: fixed; inset: 0; z-index: 1049; background: rgba(15, 20, 18, .35); }
.rv-pozadina[hidden], .rv-ploca[hidden] { display: none; }
.rv-ploca {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050; width: min(400px, 100vw);
    display: flex; flex-direction: column; background: var(--vi-surface);
    border-left: 1px solid var(--vi-line); box-shadow: -12px 0 40px rgba(0, 0, 0, .15); font-size: var(--vi-fs);
}
.rv-ploca__glava { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--vi-line); }
.rv-ploca__glava strong { font-size: 16px; }
.rv-ploca__zatvori { width: 38px; height: 38px; border: 1px solid var(--vi-line); border-radius: 10px; background: var(--vi-surface); }
.rv-ploca__tijelo { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.rv-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--vi-bg); }
.rv-status__opis { color: var(--vi-muted); font-size: var(--vi-fs-sm); }
.rv-zatvori { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--vi-line); border-radius: 12px; margin: 0; cursor: pointer; }
.rv-zatvori small { display: block; color: var(--vi-muted); font-size: var(--vi-fs-xs); font-weight: 400; }
.rv-prekidac { appearance: none; -webkit-appearance: none; width: 46px; height: 26px; border-radius: 999px; background: #d6dbd8; position: relative; flex: 0 0 auto; cursor: pointer; transition: background .15s; }
.rv-prekidac::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.rv-prekidac:checked { background: #dc2626; }
.rv-prekidac:checked::after { transform: translateX(20px); }
.rv-prekidac:focus-visible { outline: 2px solid var(--vi-primary); outline-offset: 2px; }
.rv-dani { display: flex; flex-direction: column; border: 1px solid var(--vi-line); border-radius: 12px; overflow: hidden; }
.rv-dan { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--vi-line); }
.rv-dan:first-child { border-top: 0; }
.rv-dan--danas { background: var(--vi-primary-soft); }
.rv-dan__naziv { font-weight: 600; }
.rv-dan__naziv small { display: block; color: var(--vi-primary); font-size: var(--vi-fs-xs); font-weight: 600; }
.rv-dan__vremena { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rv-interval { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 10px; min-height: 32px; border-radius: 999px; background: var(--vi-surface); border: 1px solid var(--vi-line); font-variant-numeric: tabular-nums; font-weight: 600; }
.rv-obrisi { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--vi-muted); font-size: 18px; line-height: 1; }
.rv-obrisi:hover { background: #fde8e8; color: #dc2626; }
.rv-neradni { color: #dc2626; font-size: var(--vi-fs-sm); font-weight: 600; }
.rv-dodaj { min-height: 32px; padding: 0 10px; border: 1px dashed #c3c9c5; border-radius: 999px; background: transparent; color: var(--vi-primary); font-size: var(--vi-fs-sm); font-weight: 600; }
.rv-forma { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--vi-bg); border-top: 1px solid var(--vi-line); }
.rv-forma[hidden] { display: none; }
.rv-forma__polja { display: flex; gap: 10px; }
.rv-forma__polja label { flex: 1; display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: var(--vi-fs-sm); font-weight: 600; }
.rv-forma__polja input { min-height: var(--vi-touch); padding: 0 10px; border: 1px solid var(--vi-line); border-radius: 10px; background: var(--vi-surface); font-variant-numeric: tabular-nums; }
.rv-forma__svi { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--vi-fs-sm); }
.rv-forma__greska { color: #dc2626; font-size: var(--vi-fs-sm); }
.rv-forma__greska:empty { display: none; }
.rv-forma__gumbi { display: flex; gap: 8px; justify-content: flex-end; }
.rv-sve { color: var(--vi-primary); font-weight: 600; font-size: var(--vi-fs-sm); }
body.rv-otvoreno { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
    .rv-ploca { animation: rv-ulaz .18s ease-out; }
    @keyframes rv-ulaz { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- Brzi odabir: plocice + prekidac "Primam narudzbe" ---------- */
.brzi { display: flex; flex-direction: column; gap: 12px; }
.brzi__prima {
    display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; cursor: pointer;
    border: 1.5px solid var(--vi-line); border-radius: 14px; background: var(--vi-surface);
}
.brzi__prima.da { border-color: #16a34a; background: #f0fbf3; }
.brzi__prima.ne { border-color: #dc2626; background: #fef2f2; }
.brzi__prima strong { display: block; font-size: 14px; }
.brzi__prima small { color: var(--vi-muted); font-size: var(--vi-fs-xs); }
.brzi__prekidac:checked { background: #16a34a; }
.brzi__prekidac:not(:checked) { background: #dc2626; }
.brzi__prekidac:not(:checked)::after { transform: none; }
.brzi__mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.brzi__plocica {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 84px; padding: 12px 8px; text-align: center; border-radius: 14px;
    background: var(--vi-surface); border: 1px solid var(--vi-line); color: var(--vi-ink);
    font-size: var(--vi-fs-sm); font-weight: 600; line-height: 1.25; transition: border-color .15s, transform .15s;
}
.brzi__plocica i { font-size: 1.5rem; color: var(--vi-primary); }
.brzi__plocica:hover { color: var(--vi-ink); border-color: var(--vi-primary); text-decoration: none; transform: translateY(-1px); }
.brzi__plocica:focus-visible { outline: 2px solid var(--vi-primary); outline-offset: 2px; }
.brzi__broj {
    position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: #dc2626; color: #fff; font-size: var(--vi-fs-xs); display: inline-flex; align-items: center; justify-content: center;
}
.brzi-prozor {
    position: fixed; top: calc(3.75rem + 8px); right: 16px; z-index: 1045; width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 5rem); overflow-y: auto; padding: 14px; background: var(--vi-bg);
    border: 1px solid var(--vi-line); border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, .18);
}
.brzi-prozor[hidden] { display: none; }
.brzi-prozor__glava { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 15px; }
.brzi-prozor .brzi__mreza { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 575.98px) {
    .brzi-prozor { right: 8px; left: 8px; width: auto; top: calc(3.75rem + 4px); }
    .brzi-prozor .brzi__mreza, .brzi-ploca .brzi__mreza { grid-template-columns: repeat(3, 1fr); }
    .brzi__plocica { min-height: 78px; font-size: 11.5px; }
    /* Zaglavlje na mobitelu: bez imena uz avatar i bez trazilice, da gumbi stanu u jedan red */
    #header .navbar-dropdown-account-wrapper .media-body { display: none; }
    #header #modalOpener { display: none !important; }
    #header .navbar-nav .nav-item.mr-2 { margin-right: 4px !important; }
    #header .rv-gumb { padding: 0 10px; }
}

/* ---------- Manje praznog prostora (zahtjev 07.10.2026.: "puno bijelog oko boxova") ----------
   Na sirokom ekranu sadrzaj se vise ne razvlaci preko cijele sirine, a razmaci su gusci. */
@media (min-width: 1200px) {
    #content > .content.container-fluid,
    #content > .podizbornik-omot { max-width: 1320px; margin-left: auto; margin-right: auto; }
}
html body .page-header { margin-bottom: .75rem; padding-bottom: 0; }
html body .card-body { padding: 1rem 1.125rem; }
html body .card-header { padding: .75rem 1.125rem; }
html body .form-group { margin-bottom: .875rem; }
html body .table td { padding-top: .55rem; padding-bottom: .55rem; }
html body .table thead th { padding-top: .6rem; padding-bottom: .6rem; }
html body .row.g-2 > [class*="col-"] .card + .card,
html body .content > .card + .card { margin-top: .75rem; }
html body .btn--container { gap: 8px; }
html body .mb-20 { margin-bottom: 14px !important; }
html body .mb-30, html body .mb-4 { margin-bottom: 1rem !important; }
/* Bez "kutije u kutiji": siva podloga s poljima unutar kartice je suvisna (polja idu ravno u karticu).
   Podloga za prijenos slike (bez p-xxl-20) ostaje. */
html body .card .__bg-F8F9FC-card.p-xxl-20 { background: transparent !important; padding: 0 !important; border: 0 !important; }

/* Obavijesti na nadzornoj ploci (sidrena cijena, zona dostave) bile su fiksno preko
   zaglavlja i prekrivale gumbe (Brzi odabir, Radno vrijeme). Sad su u sadrzaju stranice. */
html body #content .content .__alert-2 {
    position: static; width: auto; left: auto; top: auto; bottom: auto; z-index: auto;
    margin: 0 0 .75rem !important; border-radius: 12px; border: 1px solid #f5c2c2;
}

/* Nadzorna ploca: "Svi artikli" (vendor-views/partials/_svi-artikli) */
.svi-artikli { max-height: 460px; overflow-y: auto; }
.svi-artikli__redak {
    display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--vi-line);
    color: var(--vi-ink); text-decoration: none;
}
.svi-artikli__redak:first-child { border-top: 0; }
.svi-artikli__redak:hover { background: var(--vi-bg); color: var(--vi-ink); text-decoration: none; }
.svi-artikli__redak img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: var(--vi-bg); }
.svi-artikli__ime { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svi-artikli__cijena { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svi-artikli__stanje { min-width: 48px; text-align: center; padding: 2px 8px; border-radius: 999px; font-size: var(--vi-fs-xs); font-weight: 700; }
.svi-artikli__stanje.da { background: #f0fbf3; color: #15803d; }
.svi-artikli__stanje.ne { background: #fef2f2; color: #b91c1c; }
.svi-artikli__redak.ugaseno .svi-artikli__ime, .svi-artikli__redak.ugaseno img { opacity: .5; }

/* Stranica jela (vendor-views/product/view): umjesto ocjena jasan gumb "Uredi jelo" */
.jelo-akcije { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0; }
.jelo-akcije__stanje { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jelo-akcije__oznaka { padding: 3px 10px; border-radius: 999px; font-size: var(--vi-fs-sm); font-weight: 700; }
.jelo-akcije__oznaka.da { background: #f0fbf3; color: #15803d; }
.jelo-akcije__oznaka.ne { background: #fef2f2; color: #b91c1c; }
.jelo-akcije__cijena { font-size: 22px; font-variant-numeric: tabular-nums; }
html body .jelo-akcije__uredi { min-height: 48px; padding: 0 28px; font-size: 15px; }
.jelo-akcije__brzo { font-size: var(--vi-fs-sm); font-weight: 600; color: var(--vi-primary); }

/* "Dostupno cijeli dan" kod vremenskog rasporeda jela (product/partials/_cijeli-dan) */
.cijeli-dan { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--vi-line); border-radius: 10px; cursor: pointer; }
.cijeli-dan input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--vi-primary); flex: 0 0 auto; }
.cijeli-dan strong { display: block; font-size: var(--vi-fs); }
.cijeli-dan small { color: var(--vi-muted); font-size: var(--vi-fs-xs); }

/* ---------- Mobitel i dodir ---------- */
@media (max-width: 767.98px) {
    :root { --vi-touch: 44px; }
    html body .content.container-fluid { padding-left: 12px; padding-right: 12px; }
    /* redak ima -15 px sa strane, a sadrzaj samo 12 px: stranica je virila 3 px (obilazak 14.10.2026.) */
    html body .content.container-fluid > .row { margin-left: -12px; margin-right: -12px; }
    html body .page-header-title { font-size: 16px; }
    html body .card-header,
    html body .card-body { padding: .875rem; }
    html body .table td,
    html body .table th { padding: .625rem .75rem; }
    html body .search--button-wrapper { gap: 8px; }
    html body .search--button-wrapper .search-form { flex: 1 1 100%; min-width: 0; }
}

/* ---------- Gumb "Natrag" lijevo u zaglavlju (zahtjev 07.10.2026.) ---------- */
html body #header .navbar-nav-wrap { gap: 12px; }
.natrag-gumb {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px 0 10px;
    border: 1px solid var(--vi-line); border-radius: 999px; background: var(--vi-surface);
    color: var(--vi-ink); font-size: var(--vi-fs-sm); font-weight: 600; white-space: nowrap;
}
.natrag-gumb:hover { border-color: var(--vi-primary); color: var(--vi-primary); text-decoration: none; }
.natrag-gumb:focus-visible { outline: 2px solid var(--vi-primary); outline-offset: 2px; }
.natrag-gumb i { font-size: 1.1em; }
@media (max-width: 575.98px) { .natrag-gumb span { display: none; } .natrag-gumb { padding: 0 10px; } }

/* ---------- Ime trgovine umjesto slike loga u izborniku (zahtjev 07.10.2026.);
   izbornik je vracen na staru boju (zahtjev 08.10.2026.) ---------- */
.izbornik-ime { min-width: 0; flex: 1 1 auto; color: var(--vi-ink) !important; font-weight: 700; font-size: 1rem; }
.izbornik-ime:hover { color: var(--vi-primary) !important; text-decoration: none; }
.navbar-vertical-aside-mini-mode .izbornik-ime { display: none; }

/* ---------- Forma jela: plutajuci gumbi iznad trake Spremi (obilazak 08.10.2026.) ----------
   "Koristi AI" je stajao preko gumba Spremi na mobitelu; podizemo ga iznad pomocnika. */
html body:has(.forma-jela__traka) .floating-ai-button { bottom: 140px !important; }
@media (max-width: 575.98px) {
    html body:has(.forma-jela__traka) .floating-ai-button { bottom: 136px !important; right: 12px !important; }
}


/* ---------- Lijevi izbornik kao pilule (zahtjev 11.10.2026.) ----------
   Isti jezik kao gumbi u zaglavlju (Brzi odabir, Radno vrijeme): bijela
   zaobljena pilula s tankim obrubom i ikonom; aktivna stavka je zelena.
   Pozadina izbornika svijetla umjesto tamnozelene (bg--005555). */
html body aside.navbar-vertical-aside .navbar-vertical-content,
html body aside.navbar-vertical-aside .navbar-vertical-content.bg--005555 {
    background: #f7f8f6 !important;
    border-right: 1px solid var(--vi-line);
}
html body aside.navbar-vertical-aside .navbar-nav { padding: 4px 0 24px; }
html body aside.navbar-vertical-aside .nav-item,
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu { padding: 0; }

html body aside.navbar-vertical-aside .nav-subtitle {
    display: block; padding: 18px 22px 6px; color: var(--vi-muted) !important;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* stavka */
html body aside.navbar-vertical-aside .navbar-nav > li > .nav-link,
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link {
    display: flex !important; align-items: center; gap: 10px;
    min-height: 40px; margin: 4px 12px !important; padding: 0 14px !important;
    border: 1px solid var(--vi-line) !important; border-radius: 999px !important; background: var(--vi-surface);
    color: var(--vi-ink) !important; font-size: 13px; font-weight: 600; line-height: 1.2;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link .nav-icon,
html body aside.navbar-vertical-aside .navbar-nav > li > .nav-link .nav-icon {
    color: var(--vi-primary) !important; font-size: 17px; opacity: 1; margin: 0; flex: 0 0 auto; width: 20px; text-align: center;
}
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link .text-truncate { flex: 1 1 auto; min-width: 0; }
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link:hover,
html body aside.navbar-vertical-aside .navbar-nav > li > .nav-link:hover {
    border-color: #cfd4d0 !important; box-shadow: 0 1px 3px rgba(16, 24, 20, .06); background: var(--vi-surface);
}
html body aside.navbar-vertical-aside .nav-link:focus-visible { outline: 2px solid var(--vi-primary); outline-offset: 2px; }

/* aktivna stavka */
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link,
html body aside.navbar-vertical-aside .navbar-nav > li.active > .nav-link {
    background: var(--vi-primary) !important; border-color: var(--vi-primary) !important; color: #fff !important;
    box-shadow: 0 2px 6px rgba(var(--vi-primary-rgb), .25);
}
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link .nav-icon,
html body aside.navbar-vertical-aside .navbar-nav > li.active > .nav-link .nav-icon { color: #fff !important; }
/* style.css boji aktivnu stavku svijetlozeleno (.navbar-nav.nav-tabs .active … !important) —
   zato ovdje jača specifičnost (21.10.2026.) */
html body aside.navbar-vertical-aside.navbar-vertical .navbar-nav.nav-tabs .navbar-vertical-aside-has-menu.active > .nav-link .text-truncate,
html body aside.navbar-vertical-aside.navbar-vertical .navbar-nav.nav-tabs > li.active > .nav-link .text-truncate,
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link .text-truncate,
html body aside.navbar-vertical-aside .navbar-nav > li.active > .nav-link .text-truncate { color: #fff !important; }
html body aside.navbar-vertical-aside.navbar-vertical .navbar-nav.nav-tabs .nav-sub .nav-item.active > .nav-link .text-truncate { color: var(--vi-primary) !important; }
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link::before { display: none !important; }

/* strelica podizbornika */
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link-toggle::after { color: var(--vi-muted); margin-left: auto; }
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link-toggle::after { color: #fff; }

/* podizbornik: manje pilule, uvucene */
html body aside.navbar-vertical-aside .nav-sub { padding: 2px 0 6px; background: transparent !important; }
html body aside.navbar-vertical-aside .nav-sub .nav-link {
    display: flex; align-items: center; gap: 8px; min-height: 34px; margin: 3px 12px 3px 30px !important; padding: 0 12px !important;
    border: 0 !important; border-radius: 999px !important; color: var(--vi-ink) !important; font-size: 12.5px; font-weight: 500; background: transparent;
}
/* Stari hover iz style.css (tirkizni blok preko stavke + svijetlozeleni tekst #5affba)
   ne pripada ovom izgledu: stavka je pod mišem izgledala kao kockasti zeleni gumb (21.10.2026.). */
html body aside.navbar-vertical-aside .nav-link:hover::before { display: none !important; content: none !important; }
html body aside.navbar-vertical-aside .navbar-nav > li:not(.active) > .nav-link:hover,
html body aside.navbar-vertical-aside .navbar-nav > li:not(.active) > .nav-link:hover .text-truncate,
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu:not(.active) > .nav-link:hover,
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu:not(.active) > .nav-link:hover .text-truncate { color: var(--vi-ink) !important; }
html body aside.navbar-vertical-aside .navbar-nav > li:not(.active) > .nav-link:hover .nav-icon,
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu:not(.active) > .nav-link:hover .nav-icon { color: var(--vi-primary) !important; }
html body aside.navbar-vertical-aside .navbar-nav > li.active > .nav-link:hover,
html body aside.navbar-vertical-aside .navbar-nav > li.active > .nav-link:hover .text-truncate,
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link:hover,
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link:hover .text-truncate,
html body aside.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link:hover .nav-icon { color: #fff !important; }
/* podizbornik pod mišem = kao odabrana stavka (svijetla pilula, zeleni tekst) */
html body aside.navbar-vertical-aside .nav-sub .nav-link:hover,
html body aside.navbar-vertical-aside .nav-sub .nav-link:hover .text-truncate,
html body aside.navbar-vertical-aside .nav-sub .nav-link:hover .nav-indicator-icon { color: var(--vi-primary) !important; }
html body aside.navbar-vertical-aside .nav-sub .nav-link:hover { background: var(--vi-primary-soft) !important; }
html body aside.navbar-vertical-aside .nav-sub .nav-item.active > .nav-link,
html body aside.navbar-vertical-aside .nav-sub .nav-link.active {
    background: var(--vi-primary-soft) !important; color: var(--vi-primary) !important; font-weight: 700;
}
html body aside.navbar-vertical-aside .nav-sub .nav-indicator-icon { color: var(--vi-muted) !important; }
html body aside.navbar-vertical-aside .nav-sub .nav-item.active > .nav-link .text-truncate,
html body aside.navbar-vertical-aside .nav-sub .nav-item.active > .nav-link .nav-indicator-icon { color: var(--vi-primary) !important; }
html body aside.navbar-vertical-aside .nav-sub .nav-link .text-truncate { color: inherit; }

/* znacke (broj rezervacija i sl.) */
html body aside.navbar-vertical-aside .nav-link .badge { margin-left: auto; }

/* trazilica izbornika */
html body aside.navbar-vertical-aside .sidebar--search-form { background: #f7f8f6 !important; }
html body aside.navbar-vertical-aside .navbar-vertical-content input.form-control {
    background: var(--vi-surface) !important; border: 1px solid var(--vi-line) !important; border-radius: 999px !important;
    color: var(--vi-ink) !important; height: 40px;
}
html body aside.navbar-vertical-aside .navbar-vertical-content input.form-control::placeholder { color: var(--vi-muted); }
html body aside.navbar-vertical-aside .navbar-vertical-content .search--form-group i,
html body aside.navbar-vertical-aside .navbar-vertical-content .search--form-group .tio-search { color: var(--vi-muted) !important; }

/* klizac izbornika na svijetloj pozadini */
html body aside.navbar-vertical-aside .navbar-vertical-content { scrollbar-color: #cfd4d0 transparent; }

/* sazeti izbornik (samo ikone) */
html body.navbar-vertical-aside-mini-mode aside.navbar-vertical-aside .navbar-nav .navbar-vertical-aside-has-menu > .nav-link.nav-link,
html body.navbar-vertical-aside-mini-mode aside.navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link {
    justify-content: center; width: 44px; min-height: 44px; margin: 4px auto !important; padding: 0 !important; gap: 0;
}

/* Naslov stranice na mobitelu: .row s negativnim rubovima virio je 3 px izvan
   zaslona (stranica se mogla pomicati vodoravno), 11.10.2026. */
@media (max-width: 575.98px) {
    html body .page-header > .row { margin-left: 0; margin-right: 0; }
    html body .page-header > .row > [class*="col"] { padding-left: 0; padding-right: 0; }
}
html body.navbar-vertical-aside-mini-mode aside.navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link > span:not(.badge) { display: none !important; }
html body.navbar-vertical-aside-mini-mode aside.navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link { position: relative; }
html body.navbar-vertical-aside-mini-mode aside.navbar-vertical-aside .navbar-vertical-aside-has-menu > .nav-link > .badge {
    position: absolute; top: -4px; right: -6px; margin: 0; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; font-size: 10px;
}

/* ---------- Zaglavlje ispod 1200 px (zahtjev 12.10.2026.) ----------
   Gumbi (Brzi odabir, Radno vrijeme, Ekran za kuhinju, Pogledaj sajt) s natpisima nisu stali
   u jedan red: desni blok je pao u drugi red preko naslova stranice. Ispod 1200 px samo ikone
   (ime ostaje skriveno za čitač ekrana i u title), bez imena korisnika, sve u jednom redu.
   Mjeri se širina zaglavlja, ne ekrana: otvoreni lijevi izbornik oduzima ~260 px. */
#header .rv-gumb, #header [data-pogledaj-sajt] { white-space: nowrap; }
#header { container-type: inline-size; container-name: zaglavlje; }
@container zaglavlje (max-width: 1400px) {
    #header .zaglavlje-natpis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    #header .navbar-nav-wrap { flex-wrap: nowrap; }
    #header .navbar-nav-wrap-content-right { min-width: 0; margin-left: auto; }
    #header .navbar-nav-wrap-content-right .navbar-nav { flex-wrap: nowrap; }
    #header .navbar-dropdown-account-wrapper .media-body { display: none; }
    #header .rv-gumb, #header [data-pogledaj-sajt] { min-width: 36px; justify-content: center; }
}


/* Paginacija s mnogo stranica (npr. 15+ stranica narudžbi) na mobitelu je širila
   stranicu i davala vodoravno pomicanje — prelama se u novi red (21.10.2026.). */
html body .pagination { flex-wrap: wrap; row-gap: 4px; }

/* Plutajući krug "Koristi AI" (6amMart AI pomoćnik za artikl) u panelu restorana ne treba —
   stoji iznad "Pitaj pomoćnika" (23.10.2026.). Skriva se samo krug; ostalo uz polja radi. */
.floating-ai-button { display: none !important; }