/*
 * Panel /app: nadzorna ploča i skupine izbornika. Bez build koraka;
 * boje iz Filamentovih varijabli (--primary-*, --gray-*), tamni način preko .dark.
 */

.cj-dash {
    --cj-card: #fff;
    --cj-line: var(--gray-200);
    --cj-muted: var(--gray-500);
    --cj-ink: var(--gray-950);
    --cj-teal: var(--cj-brand-ink);
    display: grid;
    /* Nalog 69 (B-64): kartice se smiju suziti na mobitelu, inače dug sadržaj gura stupac preko ruba. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}
.dark .cj-dash {
    --cj-card: color-mix(in oklch, var(--gray-900) 70%, var(--gray-950));
    --cj-line: color-mix(in oklch, var(--gray-700) 55%, transparent);
    --cj-muted: var(--gray-400);
    --cj-ink: #fff;
    --cj-teal: var(--cj-brand-ink);
}

/* Kartice s brojkama */
.cj-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.cj-stat {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem; border: 1px solid var(--cj-line); border-radius: 0.875rem;
    background: var(--cj-card); color: inherit; text-decoration: none;
    transition: border-color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.cj-stat:hover { border-color: color-mix(in oklch, var(--cj-teal) 55%, var(--cj-line)); }
.cj-stat-text { display: grid; gap: 0.125rem; min-width: 0; }
.cj-stat-label { font-size: 0.875rem; color: var(--cj-muted); }
.cj-stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--cj-ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* Pločica s ikonom */
.cj-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 999px; }
.cj-tile.is-lg { width: 3.75rem; height: 3.75rem; border-radius: 0.75rem; }
.cj-tile .cj-ico { width: 1.5rem; height: 1.5rem; }
.cj-tile.is-lg .cj-ico { width: 1.9rem; height: 1.9rem; }
.cj-tile.is-teal { background: var(--cj-brand-soft); color: var(--cj-teal); }
.cj-tile.is-blue { background: color-mix(in oklch, var(--info-500, #3b82f6) 16%, transparent); color: var(--info-600, #2563eb); }
.cj-tile.is-violet { background: var(--cj-brand-soft-2); color: var(--cj-brand-ink-2); }
.cj-tile.is-warning { background: color-mix(in oklch, var(--warning-500) 18%, transparent); color: var(--warning-600); }
.cj-tile.is-danger { background: color-mix(in oklch, var(--danger-500) 16%, transparent); color: var(--danger-600); }
.cj-tile.is-muted { background: color-mix(in oklch, var(--gray-500) 14%, transparent); color: var(--cj-muted); }
.dark .cj-tile.is-blue { color: var(--info-400, #60a5fa); }
.dark .cj-tile.is-warning { color: var(--warning-400); }
.dark .cj-tile.is-danger { color: var(--danger-400); }

/* Kartica cjenika */
.cj-card { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid var(--cj-line); border-radius: 1rem; background: var(--cj-card); }
.cj-card-head { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.cj-card-title { flex: 1 1 16rem; min-width: 0; display: grid; gap: 0.25rem; }
.cj-card-title h2 { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: var(--cj-ink); text-wrap: balance; }
.cj-card-title h2 > span:last-child { font-weight: 650; }
.cj-sep { color: var(--cj-muted); font-weight: 400; margin: 0 0.25rem; }
.cj-url { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; max-width: 100%; color: var(--cj-teal); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.cj-ico-sm { width: 1.1rem; height: 1.1rem; flex: none; color: var(--cj-muted); }
.cj-card-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.cj-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding-top: 1rem; border-top: 1px solid var(--cj-line); }
/* Nalog 85 (FRONTEND-05): u dl smiju samo dt i dd, pa je ikona u dt; apsolutno lijevo od teksta, okomito u sredini kao prije. */
.cj-fact { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0.25rem 1.5rem; min-width: 0; }
.cj-fact > dt, .cj-fact > dd { padding-left: 2.6rem; }
.cj-fact > dt > .cj-fact-ico { position: absolute; top: 50%; margin-left: -2.6rem; transform: translateY(-50%); }
.cj-fact:first-child { padding-left: 0.25rem; }
.cj-fact + .cj-fact { border-left: 1px solid var(--cj-line); }
.cj-fact dt { font-size: 0.875rem; color: var(--cj-muted); }
.cj-fact dd { margin: 0; font-size: 1.125rem; font-weight: 650; color: var(--cj-ink); font-variant-numeric: tabular-nums; }
.cj-fact dd.cj-status-text { font-size: 1rem; font-weight: 500; }
.cj-fact dd.cj-fact-sub { margin-top: 0.125rem; font-size: 0.8125rem; font-weight: 400; color: var(--cj-muted); }
.cj-fact-ico { width: 1.6rem; height: 1.6rem; flex: none; color: var(--cj-muted); }
/* Nalog 69 (B-134): četiri kartice u dva reda po dvije, umjesto jedne same u drugom redu. */
.cj-facts:has(> .cj-fact:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
.cj-facts:has(> .cj-fact:nth-child(4)) > .cj-fact:nth-child(3) { border-left: 0; padding-left: 0.25rem; }
.cj-muted { color: var(--cj-muted); font-weight: 400; }
.cj-sub { display: block; margin-top: 0.125rem; font-size: 0.875rem; color: var(--cj-muted); font-weight: 400; }
.cj-status { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; }
.cj-status .cj-ico { width: 1.35rem; height: 1.35rem; }
.cj-status.is-success { background: var(--success-500); color: #fff; }
.cj-status.is-warning { background: var(--warning-400); color: var(--gray-950); }
.cj-status.is-danger { background: var(--danger-500); color: #fff; }

/* Upozorenja */
.cj-alert { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.875rem 1.125rem; border-radius: 0.75rem; border: 1px solid; font-size: 0.9375rem; }
.cj-alert p { margin: 0; }
.cj-alert a:not(.fi-btn) { text-decoration: underline; font-weight: 600; }
.cj-alert.has-action { align-items: center; flex-wrap: wrap; }
.cj-alert.has-action > div { flex: 1 1 18rem; }
.cj-alert-title { font-weight: 700; }
.cj-alert-ico { width: 1.6rem; height: 1.6rem; flex: none; }
.cj-alert.is-warning { background: color-mix(in oklch, var(--warning-500) 10%, transparent); border-color: color-mix(in oklch, var(--warning-500) 40%, transparent); }
.cj-alert.is-warning .cj-alert-ico { color: var(--warning-500); }
.cj-alert.is-danger { background: color-mix(in oklch, var(--danger-500) 10%, transparent); border-color: color-mix(in oklch, var(--danger-500) 40%, transparent); }
.cj-alert.is-danger .cj-alert-ico { color: var(--danger-500); }
.cj-alert.is-info { background: color-mix(in oklch, var(--primary-500) 8%, transparent); border-color: color-mix(in oklch, var(--primary-500) 30%, transparent); }
.cj-alert.is-info .cj-alert-ico { color: var(--cj-teal); }

.cj-welcome h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.cj-welcome a { color: var(--cj-teal); text-decoration: underline; }

@media (max-width: 900px) {
    .cj-facts { grid-template-columns: 1fr; gap: 0.75rem; }
    .cj-fact, .cj-fact:first-child { padding: 0; }
    .cj-fact + .cj-fact { border-left: 0; }
    .cj-card-actions { margin-left: 0; width: 100%; }
}
@media (max-width: 480px) {
    .cj-card { padding: 1rem; }
    .cj-card-head { gap: 0.875rem; }
    .cj-card-title { flex: 1 1 0; }
    .cj-tile.is-lg { width: 3rem; height: 3rem; }
    .cj-tile.is-lg .cj-ico { width: 1.5rem; height: 1.5rem; }
    .cj-card-title h2 { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cj-stat { transition: none; }
}

/*
 * Izbornik po skupinama (Pregled, Poslovanje, Cjenik, Objave i promocija,
 * Korisnički podaci): natpis skupine malim velikim slovima, sivo; između
 * skupina tanka crta. Skupine se ne sklapaju (AppPanelProvider).
 */
.fi-sidebar-nav-groups { row-gap: 0.875rem; }
.fi-sidebar-nav-groups > .fi-sidebar-group + .fi-sidebar-group {
    padding-top: 0.875rem;
    border-top: 1px solid var(--gray-200);
}
.dark .fi-sidebar-nav-groups > .fi-sidebar-group + .fi-sidebar-group { border-top-color: color-mix(in oklch, var(--gray-700) 60%, transparent); }
/* Po slici vlasnika: između PREGLED i sljedeće skupine nema crte. */
.fi-sidebar-nav-groups > .fi-sidebar-group:first-child + .fi-sidebar-group { border-top: 0; padding-top: 0; }
.fi-sidebar-nav-groups .fi-sidebar-group-btn { cursor: default; padding-block: 0.25rem; }
.fi-sidebar-nav-groups .fi-sidebar-group-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.25rem;
    text-transform: uppercase;
    color: var(--gray-500);
}
.dark .fi-sidebar-nav-groups .fi-sidebar-group-label { color: var(--gray-400); }

/*
 * Tablice (usluge, proizvodi, kategorije, akcije). Polja za upis u tablici
 * moraju izgledati kao polja i na tamnoj i na svijetloj podlozi; onemogućeno
 * polje (npr. naziv posebnog oblika bez posebnog oblika) ima isprekidan obrub
 * i vidljiv natpis, a ne praznu ćeliju.
 */
.fi-ta-text-input .fi-input-wrp { --tw-ring-color: var(--gray-400); background-color: #fff; min-width: 6.5rem; }
.fi-ta-text-input .fi-input-wrp:focus-within { --tw-ring-color: var(--primary-600); }
.dark .fi-ta-text-input .fi-input-wrp { --tw-ring-color: var(--gray-500); background-color: var(--gray-950); }
.dark .fi-ta-text-input .fi-input-wrp:focus-within { --tw-ring-color: var(--primary-400); }
.fi-ta-text-input .fi-input-wrp.fi-disabled {
    --tw-ring-color: transparent; --tw-shadow: 0 0 #0000;
    background-color: var(--gray-100);
    outline: 1px dashed var(--gray-300); outline-offset: -1px;
}
.dark .fi-ta-text-input .fi-input-wrp.fi-disabled { --tw-ring-color: transparent; background-color: color-mix(in oklch, var(--gray-800) 45%, transparent); outline-color: var(--gray-600); }
.fi-ta-text-input input::placeholder { color: var(--gray-500); opacity: 1; }
.fi-ta-text-input .fi-disabled input::placeholder { font-style: italic; }
.dark .fi-ta-text-input input::placeholder { color: var(--gray-400); }

/* Naziv stavke ne smije se lomiti na riječ po redak. */
.fi-ta-header-cell.cj-col-name, .fi-ta-cell.cj-col-name { min-width: 11rem; }

/* Gumbi u zaglavlju tablice (Stupci, Redoslijed): jasno vidljivi i na bijeloj podlozi. */
.fi-ta-header-toolbar .fi-btn.fi-color-gray { --tw-ring-color: var(--gray-300); }
.dark .fi-ta-header-toolbar .fi-btn.fi-color-gray { --tw-ring-color: var(--gray-600); }
.fi-ta-header-toolbar .fi-icon-btn { box-shadow: inset 0 0 0 1px var(--gray-300); background-color: #fff; color: var(--gray-700); }
.dark .fi-ta-header-toolbar .fi-icon-btn { box-shadow: inset 0 0 0 1px var(--gray-600); background-color: color-mix(in oklch, var(--gray-800) 50%, transparent); color: var(--gray-200); }

/* Sažetak skrivenih stupaca ispod naziva: samo na užim zaslonima. */
.cj-desc-note { display: block; }
.cj-facts-line { display: flex; flex-wrap: wrap; column-gap: 0.75rem; }
.cj-facts-line:empty { display: none; }
.cj-desc-note + .cj-facts-line { margin-top: 0.125rem; }
@media (min-width: 1280px) { .cj-below-xl { display: none; } }
/* Nalog 55: stavka bez cijene na dan (objava nije moguća). */
.cj-ref-missing { display: inline-flex; align-items: center; padding: 0 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1.25rem; color: var(--danger-700, #b91c1c); background: var(--danger-50, #fef2f2); box-shadow: inset 0 0 0 1px var(--danger-600, #dc2626); }
.dark .cj-ref-missing { color: var(--danger-300, #fca5a5); background: transparent; box-shadow: inset 0 0 0 1px var(--danger-400, #f87171); }
@media (min-width: 1280px) { .cj-ref-missing.cj-below-xl { display: none; } }
@media (min-width: 1536px) { .cj-below-2xl { display: none; } }

/* Polje za iznos ne treba 12rem (Filamentov zadani minimum); naziv posebnog oblika treba više. */
.fi-ta-text-input { min-width: 7.5rem; }
.fi-ta-cell-special-sale-name .fi-ta-text-input { min-width: 12rem; }
/* Radnje u retku (Uredi, Ukloni): na srednjim zaslonima samo ikona (s tooltipom), da tablica stane. */
@media (min-width: 640px) and (max-width: 1799px) {
    .fi-ta-cell .fi-ta-actions .fi-ac-link-action .fi-link-label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}

/* Mobitel (tablica složena u kartice): polja i naziv na punu širinu, bez vodoravnog pomicanja. */
@media (max-width: 639px) {
    .fi-ta-header-cell.cj-col-name, .fi-ta-cell.cj-col-name { min-width: 0; }
    .fi-ta-table-stacked-on-mobile .fi-ta-text-input { min-width: 0; }
    .fi-ta-table-stacked-on-mobile .fi-ta-text-input .fi-input-wrp { max-width: 12rem; }
}

/* Objave i arhiva: poveznice za ispis prelamaju se u redove. */
.cj-share { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; row-gap: 0.375rem; }

/* Arhiva objava: tablica na širem zaslonu, kartice na mobitelu. */
.cj-archive { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.cj-archive th { text-align: left; font-weight: 500; color: var(--gray-500); padding: 0.5rem 1rem 0.5rem 0; }
.cj-archive td { padding: 0.625rem 1rem 0.625rem 0; vertical-align: top; }
.cj-archive tbody tr { border-top: 1px solid var(--gray-200); }
.dark .cj-archive th { color: var(--gray-400); }
.dark .cj-archive tbody tr { border-top-color: color-mix(in oklch, var(--gray-700) 60%, transparent); }
.cj-archive-filename { font-family: ui-monospace, monospace; font-size: 0.75rem; overflow-wrap: anywhere; }
.cj-archive-void { display: block; color: var(--danger-600); }
.dark .cj-archive-void { color: var(--danger-400); }
.cj-archive-date { white-space: nowrap; }
.cj-archive-actions > div { display: flex; flex-wrap: wrap; column-gap: 0.875rem; row-gap: 0.25rem; }
.cj-archive td.cj-archive-actions { padding-right: 0; }
@media (max-width: 767px) {
    .cj-archive thead { display: none; }
    .cj-archive, .cj-archive tbody, .cj-archive tr, .cj-archive td { display: block; }
    .cj-archive tbody tr { padding: 0.75rem 0; }
    .cj-archive td { padding: 0.125rem 0; }
    .cj-archive td[data-label]::before { content: attr(data-label) ": "; color: var(--gray-500); }
    .dark .cj-archive td[data-label]::before { color: var(--gray-400); }
    .cj-archive td.cj-archive-actions { padding-top: 0.375rem; }
}

/* Male tablice (stavke akcije, uvoz): na mobitelu redak postaje kartica s natpisima. */
@media (max-width: 639px) {
    table.cj-stack { min-width: 0 !important; }
    .cj-stack thead { display: none; }
    .cj-stack, .cj-stack tbody, .cj-stack tr { display: block; }
    .cj-stack tr { padding: 0.5rem 0; border-bottom: 1px solid rgba(128, 128, 128, 0.2); }
    .cj-stack td { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 0.75rem; border-bottom: 0 !important; padding: 0.125rem 0 !important; text-align: left !important; white-space: normal !important; }
    .cj-stack td:not([data-label]) { display: block; font-weight: 600; }
    .cj-stack td:not([data-label]) div, .cj-stack td.cj-stack-actions { font-weight: 400; }
    .cj-stack td[data-label]::before { content: attr(data-label); color: var(--gray-500); font-weight: 400; }
    .dark .cj-stack td[data-label]::before { color: var(--gray-400); }
    .cj-stack td.cj-stack-text { display: block; }
    .cj-stack td.cj-stack-text::before { content: attr(data-label) ": "; }
}

/* Podnožje s pravnim poveznicama (PanelsRenderHook::FOOTER, i na prijavi i registraciji). */
.cj-legal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
    padding: 1rem 1rem 1.5rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
}
.cj-legal-footer a { display: inline-flex; align-items: center; min-height: 32px; color: inherit; text-decoration: none; }
.cj-legal-footer a:hover { color: var(--gray-950); text-decoration: underline; }
.dark .cj-legal-footer { color: var(--gray-400); }
.dark .cj-legal-footer a:hover { color: #fff; }
/* Poveznice u kvačici pristanka na registraciji. */
.cj-terms-link { color: var(--cj-brand-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.dark .cj-terms-link { color: var(--cj-brand-ink-2); }

/*
 * Fotografiraj cjenik: pregled prepisa. Fotografija lijevo od 1024 px,
 * na mobitelu iza gumba „Pogledaj fotografiju“; retci desno.
 */
.cj-photo { --cj-photo-line: var(--gray-200); --cj-photo-muted: var(--gray-500); --cj-photo-card: #fff; display: grid; gap: 1.5rem; min-width: 0; }
.dark .cj-photo { --cj-photo-line: color-mix(in oklch, var(--gray-700) 55%, transparent); --cj-photo-muted: var(--gray-400); --cj-photo-card: color-mix(in oklch, var(--gray-900) 70%, var(--gray-950)); }
.cj-photo-stack { display: grid; gap: 1rem; min-width: 0; }
.cj-photo-text { font-size: 0.875rem; line-height: 1.55; }
.cj-photo-muted { color: var(--cj-photo-muted); }
.cj-photo-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
/* „Snimi fotografiju“: gumb kamere samo na dodirnim uređajima; snimke na popisu ispod. */
.cj-photo-camera .filepond--root { margin-bottom: 0; }
.cj-photo-camera .filepond--drop-label { min-height: 3rem; }
.cj-photo-camera .filepond--label-action { font-weight: 600; text-decoration: none; color: var(--cj-brand-ink-2); }
.cj-photo-shots { display: grid; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--cj-photo-line); border-radius: 0.75rem; }
.cj-photo-shots-title { margin: 0; font-size: 0.875rem; font-weight: 600; }
.cj-photo-shots ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.cj-photo-shots li { display: flex; align-items: center; gap: 0.5rem; }
@media (hover: hover) and (pointer: fine) { .cj-photo-camera { display: none; } }
.cj-photo-quota { margin: 0; font-size: 0.875rem; font-weight: 600; }
.cj-photo-privacy { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--cj-photo-muted); max-width: 70ch; }
.cj-photo-privacy a, .cj-photo-link { color: var(--cj-brand-ink-2); text-decoration: underline; overflow-wrap: anywhere; }
.dark .cj-photo-privacy a, .dark .cj-photo-link { color: var(--cj-brand-ink-2); }
.cj-photo-wait { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 600; font-size: 1rem; }
.cj-photo-spinner { width: 1.25rem; height: 1.25rem; }
.cj-photo-error { margin: 0; color: var(--danger-600); font-weight: 600; }
.dark .cj-photo-error { color: var(--danger-400); }
.cj-photo-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.cj-photo-note { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.75rem 1rem; border: 1px solid; border-radius: 0.75rem; }
.cj-photo-note p, .cj-photo-note ul { margin: 0; }
.cj-photo-note ul { list-style: disc; padding-inline-start: 1.1rem; }
/* Nalog 19A: razvrstavanje prepisa (sažetak i „Sve su …“) i kamo ide upis. */
.cj-photo-kinds { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 1rem; border-radius: 0.75rem; background: var(--cj-brand-soft-2); }
.cj-photo-kinds p { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 600; }
.cj-photo-kinds .cj-photo-note-ico { color: var(--cj-brand-ink-2); }
.cj-photo-kinds-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cj-photo-targets { margin: 0; font-weight: 600; }
.cj-photo-note-ico { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; }
.cj-photo-note.is-warning { background: color-mix(in oklch, var(--warning-400) 14%, transparent); border-color: color-mix(in oklch, var(--warning-500) 45%, transparent); }
.cj-photo-note.is-warning .cj-photo-note-ico { color: var(--warning-600); }
.cj-photo-note.is-info { background: color-mix(in oklch, var(--primary-500) 8%, transparent); border-color: color-mix(in oklch, var(--primary-500) 30%, transparent); }
.cj-photo-note.is-info .cj-photo-note-ico { color: var(--cj-brand-ink-2); }

.cj-photo-review { display: grid; gap: 1rem; min-width: 0; }
.cj-photo-toggle { justify-self: start; }
.cj-photo-pane { display: none; gap: 0.75rem; min-width: 0; }
.cj-photo-pane.is-open { display: grid; }
.cj-photo-img { display: block; border: 1px solid var(--cj-photo-line); border-radius: 0.75rem; overflow: hidden; background: var(--gray-100); }
.cj-photo-img img { display: block; width: 100%; height: auto; }
.cj-photo-pdf { display: grid; gap: 0.5rem; }
.cj-photo-pdf object { width: 100%; height: 70vh; border: 1px solid var(--cj-photo-line); border-radius: 0.75rem; }
.cj-photo-pdf a { color: var(--cj-brand-ink-2); text-decoration: underline; }
@media (min-width: 1024px) {
    .cj-photo-review.has-photo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
    .cj-photo-toggle { display: none; }
    .cj-photo-pane { display: grid; position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
}

.cj-photo-rows { display: grid; gap: 1.25rem; min-width: 0; }
.cj-photo-group h3 { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cj-photo-muted); }
.cj-photo-group > ul { display: grid; gap: 0.75rem; }
.cj-photo-row { display: grid; gap: 0.625rem; padding: 0.875rem 1rem; border: 1px solid var(--cj-photo-line); border-left-width: 4px; border-radius: 0.75rem; background: var(--cj-photo-card); min-width: 0; }
.cj-photo-row.is-ok { border-left-color: var(--success-500); }
.cj-photo-row.is-warn { border-left-color: var(--warning-500); }
.cj-photo-row-head { display: flex; align-items: center; gap: 0.5rem; }
.cj-photo-mark { font-weight: 700; }
.cj-photo-row.is-ok .cj-photo-mark { color: var(--success-600); }
.cj-photo-row.is-warn .cj-photo-mark { color: var(--warning-600); }
.cj-photo-remove { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--danger-600); text-decoration: underline; padding: 0.25rem 0; }
.dark .cj-photo-remove { color: var(--danger-400); }
.cj-photo-remove:disabled { color: var(--cj-photo-muted); text-decoration: none; cursor: not-allowed; }
/* P6: jedna fotografija za oba cjenika (skupine Usluge i Proizvodi, prebacivanje retka). */
.cj-photo-row-actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 0.875rem; }
.cj-photo-row-actions .cj-photo-remove { margin-left: 0; }
/* „Stavka 12“ ostaje u jednom retku i na 375; radnje se lome ispod. */
.cj-photo-row-head [data-item-no] { flex: none; white-space: nowrap; }
.cj-photo-row-head .cj-photo-row-actions { min-width: 0; }
.cj-photo-switch { font-size: 0.8125rem; font-weight: 600; color: var(--cj-brand-ink-2); text-decoration: underline; padding: 0.25rem 0; }
.dark .cj-photo-switch { color: var(--cj-brand-ink-2); }
.cj-photo-kind { margin: 0.5rem 0 0; font-size: 1rem; font-weight: 700; }
.cj-photo-kind ~ .cj-photo-kind { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--cj-photo-line); }
.cj-photo-fields { display: grid; gap: 0.625rem; grid-template-columns: minmax(0, 1fr); }
.cj-photo-fields label { display: grid; gap: 0.25rem; min-width: 0; }
.cj-photo-fields label > span { font-size: 0.75rem; font-weight: 600; color: var(--cj-photo-muted); }
@media (min-width: 640px) {
    .cj-photo-fields { grid-template-columns: minmax(0, 1fr) 9rem; }
    .cj-photo-fields.has-unit { grid-template-columns: minmax(0, 1fr) 9rem 9rem; }
}
.cj-photo-reasons { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.cj-photo-reasons .is-warn { color: var(--warning-700); font-weight: 600; }
.dark .cj-photo-reasons .is-warn { color: var(--warning-400); }
.cj-photo-reasons .is-error { color: var(--danger-600); }
.dark .cj-photo-reasons .is-error { color: var(--danger-400); }
.cj-photo-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.cj-photo-done { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.cj-photo-qr { flex: none; width: 132px; height: 132px; border-radius: 0.5rem; background: #fff; }
.cj-photo-done > .cj-photo-stack { flex: 1 1 16rem; }

/*
 * Dodaj na web (PublicDisplay): izgled po dizajnu vlasnika, boje panela.
 * Kartice odabira, javni link s prečacima, kod za ugradnju, pregled.
 */
.cj-web {
    --cj-web-card: #fff;
    --cj-web-line: var(--gray-200);
    --cj-web-muted: var(--gray-500);
    --cj-web-ink: var(--gray-950);
    --cj-web-accent: var(--cj-brand-ink);
    --cj-web-soft: var(--cj-brand-soft);
    --cj-web-link-bg: color-mix(in oklch, var(--primary-500) 5%, #fff);
    --cj-web-code-bg: color-mix(in oklch, var(--gray-500) 5%, #fff);
    --cj-web-field: #fff;
    display: grid;
    gap: 1.25rem;
    color: var(--cj-web-ink);
    min-width: 0;
}
.dark .cj-web {
    --cj-web-card: color-mix(in oklch, var(--gray-900) 70%, var(--gray-950));
    --cj-web-line: color-mix(in oklch, var(--gray-700) 55%, transparent);
    --cj-web-muted: var(--gray-400);
    --cj-web-ink: #fff;
    --cj-web-accent: var(--cj-brand-ink);
    --cj-web-soft: var(--cj-brand-soft);
    --cj-web-link-bg: color-mix(in oklch, var(--primary-500) 7%, var(--cj-web-card));
    --cj-web-code-bg: var(--cj-web-card);
    --cj-web-field: var(--gray-950);
}
.cj-web [x-cloak] { display: none !important; }

.cj-web-head { display: flex; align-items: center; gap: 1rem; }
.cj-web-title { font-size: 1.875rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.cj-web-sub { margin-top: 0.25rem; color: var(--cj-web-muted); font-size: 0.9375rem; }

.cj-web-square { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; background: var(--cj-web-soft); color: var(--cj-web-accent); }
.cj-web-square.is-lg { width: 4rem; height: 4rem; border-radius: 0.875rem; }
.cj-web-ico { width: 1.75rem; height: 1.75rem; }
.cj-web-square.is-lg .cj-web-ico { width: 2rem; height: 2rem; }

.cj-web-location { display: grid; gap: 0.375rem; max-width: 28rem; font-size: 0.875rem; font-weight: 500; }

.cj-web-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cj-web-choice {
    position: relative; display: flex; align-items: center; gap: 1.125rem;
    padding: 1.25rem 1.5rem; border: 1px solid var(--cj-web-line); border-radius: 0.875rem;
    background: var(--cj-web-card); color: inherit; text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.cj-web-choice:hover { border-color: color-mix(in oklch, var(--cj-web-accent) 50%, var(--cj-web-line)); }
.cj-web-choice.is-selected { border: 2px solid var(--cj-web-accent); padding: calc(1.25rem - 1px) calc(1.5rem - 1px); background: color-mix(in oklch, var(--primary-500) 4%, var(--cj-web-card)); }
.cj-web-choice-text { display: grid; gap: 0.25rem; min-width: 0; }
.cj-web-choice-text strong { font-size: 1.0625rem; font-weight: 700; }
.cj-web-choice-text span { font-size: 0.875rem; color: var(--cj-web-muted); }
.cj-web-check { position: absolute; top: 0.75rem; right: 0.75rem; width: 1.5rem; height: 1.5rem; color: var(--cj-web-accent); }

.cj-web-card { padding: 1.5rem; border: 1px solid var(--cj-web-line); border-radius: 0.875rem; background: var(--cj-web-card); display: grid; gap: 0.875rem; min-width: 0; scroll-margin-top: 5rem; }
.cj-web-card.is-link { background: var(--cj-web-link-bg); }
.cj-web-card.is-code { background: var(--cj-web-code-bg); }
.cj-web-card h2 { font-size: 1.125rem; font-weight: 700; }
.cj-web-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }

.cj-web-pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; }
.cj-web-pill.is-ok { background: color-mix(in oklch, var(--success-500) 14%, transparent); color: var(--success-700); }
.cj-web-pill.is-warn { background: color-mix(in oklch, var(--warning-500) 18%, transparent); color: var(--warning-700); }
.dark .cj-web-pill.is-ok { color: var(--success-400); }
.dark .cj-web-pill.is-warn { color: var(--warning-400); }
.cj-web-pill-ico { width: 1.05rem; height: 1.05rem; }

.cj-web-row { display: flex; align-items: flex-start; gap: 1rem; }
.cj-web-row > :first-child { flex: 1; min-width: 0; }
.cj-web-btn { flex: none; min-height: 3rem; }
.cj-web-field { width: 100%; height: 3rem; padding: 0 1rem; border: 1px solid var(--cj-web-line); border-radius: 0.625rem; background: var(--cj-web-field); color: inherit; font-size: 1rem; }
.cj-web-field:focus { outline: 2px solid var(--cj-web-accent); outline-offset: 1px; }
.cj-web-note { font-size: 0.875rem; color: var(--cj-web-muted); line-height: 1.6; }
.cj-web-note a { text-decoration: underline; color: var(--cj-web-accent); }
.cj-web-rule { border: 0; border-top: 1px solid var(--cj-web-line); margin: 0.25rem 0; }

.cj-web-shortcuts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.875rem; }
.cj-web-shortcut {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 5.25rem; padding: 0.75rem 0.5rem; border: 1px solid var(--cj-web-line); border-radius: 0.75rem;
    background: var(--cj-web-card); color: inherit; font-size: 0.875rem; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer;
    transition: border-color 150ms ease;
}
.cj-web-shortcut:hover { border-color: color-mix(in oklch, var(--cj-web-accent) 50%, var(--cj-web-line)); }
.cj-web-shortcut svg { width: 2rem; height: 2rem; }
.cj-web-mail { color: var(--cj-web-accent); }
.cj-web-msg { font-size: 0.875rem; font-weight: 500; color: var(--cj-web-accent); }

.cj-web-code {
    margin: 0; padding: 0.875rem 1.125rem; border: 1px solid var(--cj-web-line); border-radius: 0.625rem;
    background: var(--cj-web-field); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; line-height: 1.7;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.cj-web-code .t { color: var(--cj-brand-ink-2); }
.cj-web-code .a { color: var(--gray-600); }
.cj-web-code .s { color: var(--danger-600); }
.dark .cj-web-code .t { color: var(--cj-brand-ink-2); }
.dark .cj-web-code .a { color: var(--gray-300); }
.dark .cj-web-code .s { color: var(--danger-300); }

.cj-web-h3 { font-size: 1rem; font-weight: 700; }
.cj-web-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.cj-web-steps li { display: flex; gap: 0.875rem; padding: 0.25rem 1.25rem; font-size: 0.875rem; color: var(--cj-web-muted); line-height: 1.5; }
.cj-web-steps li:first-child { padding-left: 0; }
.cj-web-steps li + li { border-left: 1px solid var(--cj-web-line); }
.cj-web-steps strong { display: block; margin-bottom: 0.25rem; font-size: 0.9375rem; color: var(--cj-web-ink); }
.cj-web-steps b { color: var(--cj-web-ink); }
.cj-web-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--cj-web-soft); color: var(--cj-web-accent); font-weight: 700; font-size: 1rem; }

.cj-web-frame { border: 1px solid var(--cj-web-line); border-radius: 0.75rem; overflow: hidden; background: #fff; }

@media (max-width: 767px) {
    .cj-web-choices { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
    .cj-web-title { font-size: 1.5rem; }
    .cj-web-square.is-lg { width: 3.25rem; height: 3.25rem; }
    .cj-web-card { padding: 1.125rem; }
    .cj-web-row { flex-direction: column; align-items: stretch; }
    .cj-web-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
    .cj-web-steps { grid-template-columns: 1fr; gap: 1rem; }
    .cj-web-steps li, .cj-web-steps li:first-child { padding: 0; }
    .cj-web-steps li + li { border-left: 0; }
}

/* Zaglavlje panela (Upute, zvono, avatar): dizajn vlasnika 30.09.2026. */
.fi-topbar-end { gap: 0.5rem; }
.cl-header-help { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--gray-700); }
.cl-header-help:hover { background: var(--gray-100); color: var(--cj-brand-ink-2); }
.cl-header-help:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
.cl-header-help svg { width: 1.25rem; height: 1.25rem; flex: none; }
.dark .cl-header-help { color: var(--gray-200); }
.dark .cl-header-help:hover { background: rgba(255, 255, 255, 0.05); color: var(--cj-brand-ink-2); }
@media (max-width: 639px) {
    .cl-header-help-text { display: none; }
    .cl-header-help { padding: 0.375rem; }
}
.fi-user-menu-trigger { display: inline-flex; align-items: center; gap: 0.25rem; }
.fi-topbar .fi-user-menu-trigger::after { content: ""; width: 0.4rem; height: 0.4rem; margin: 0 0.125rem 0.2rem 0.125rem; border-right: 2px solid var(--gray-500); border-bottom: 2px solid var(--gray-500); transform: rotate(45deg); }
.cl-user-menu-identity { display: grid; gap: 0.125rem; padding: 0.5rem 0.5rem 0.625rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--gray-200); min-width: 13rem; }
.cl-user-menu-name { font-size: 0.9375rem; font-weight: 600; color: var(--gray-950); overflow-wrap: anywhere; }
.cl-user-menu-email { font-size: 0.8125rem; color: var(--gray-500); overflow-wrap: anywhere; }
.dark .cl-user-menu-identity { border-color: rgba(255, 255, 255, 0.1); }
.dark .cl-user-menu-name { color: var(--gray-50); }
.dark .cl-user-menu-email { color: var(--gray-400); }
/* Filament ne prenosi klasu na gumb Odjava (forma), pa razmak i crtu nosi sama forma. */
.fi-user-menu .fi-dropdown-list > form:has(> .fi-color-danger) { margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid var(--gray-200); }
.dark .fi-user-menu .fi-dropdown-list > form:has(> .fi-color-danger) { border-color: rgba(255, 255, 255, 0.1); }
.fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn .fi-badge { font-size: 0; line-height: 0; min-width: 0; width: 0.5rem; height: 0.5rem; padding: 0; border-radius: 9999px; background: var(--danger-500); box-shadow: 0 0 0 2px #fff; --tw-ring-shadow: 0 0 #0000; }
.dark .fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn .fi-badge { box-shadow: 0 0 0 2px var(--gray-900); }
/* Zvono u istoj boji i jačini kao „Upute“. */
.fi-topbar .fi-icon-btn.fi-topbar-database-notifications-btn { color: var(--gray-700); }
.dark .fi-topbar .fi-icon-btn.fi-topbar-database-notifications-btn { color: var(--gray-200); }
.fi-topbar .fi-icon-btn.fi-topbar-database-notifications-btn:hover { color: var(--cj-brand-ink-2); }
.dark .fi-topbar .fi-icon-btn.fi-topbar-database-notifications-btn:hover { color: var(--cj-brand-ink-2); }

/*
 * Zajedničko za .cj-nd (nadzorna ploča, Poslovnice, Poslovni subjekt):
 * kartica .cj-nd-loc s avatarom i nazivom. Prefiks .cj-nd-.
 */
.cj-nd { --cj-nd-r: 1rem; gap: 1.5rem; }
.cj-nd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cj-nd-ico { width: 1rem; height: 1rem; flex: none; }
.cj-nd :is(a, button):focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.cj-nd-loc { display: grid; gap: 1rem; padding: 1.25rem; border-radius: var(--cj-nd-r); border: 1px solid var(--cj-line); background: var(--cj-card); min-width: 0; }
.cj-nd-loc-main { display: grid; gap: 1rem; min-width: 0; }
.cj-nd-loc-top { display: flex; gap: 0.875rem; align-items: center; min-width: 0; }
.cj-nd-avatar { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 0.875rem; display: grid; place-items: center; background: color-mix(in oklch, var(--primary-500) 14%, transparent); color: var(--cj-teal); font-size: 1.25rem; font-weight: 800; overflow: hidden; }
.cj-nd-avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 0.25rem; }
.cj-nd-loc-name { min-width: 0; }
.cj-nd-loc-name h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--cj-ink); overflow-wrap: anywhere; }

/*
 * Nadzorna ploča (nalog 11, dizajn vlasnika nadzorna-dizajn.png): trake
 * upozorenja, kartice radnji u jednom redu, kartica poslovnice s pregledom
 * javnog cjenika, red „Podijeli“. Sve pod .cj-nb (container query na širinu
 * sadržaja, ne prozora, jer bočni izbornik mijenja širinu).
 */
.cj-nb {
    --nb-soft: var(--cj-brand-soft);
    --nb-field: color-mix(in oklch, var(--gray-500) 7%, transparent);
    --nb-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 6px 20px rgb(15 23 42 / 0.04);
    container: nb / inline-size;
    gap: 1.25rem;
}
.dark .cj-nb { --nb-shadow: none; }

/* Trake upozorenja */
.cj-nd-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding: 0.75rem 1rem; border-radius: 0.875rem; border: 1px solid; font-size: 0.9375rem; color: var(--cj-ink); }
.cj-nd-alert > p { flex: 1 1 18rem; margin: 0; min-width: 0; }
.cj-nd-alert strong { font-weight: 700; }
.cj-nd-alert-ico { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; }
.cj-nd-alert-ico .cj-nd-ico { width: 1.375rem; height: 1.375rem; }
.cj-nd-alert-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.cj-nd-alert-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem; border-radius: 0.625rem; border: 1px solid; background: var(--cj-card); color: var(--cj-ink); font-size: 0.875rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.cj-nd-alert-btn:hover { background: color-mix(in oklch, var(--cj-card) 80%, var(--gray-500)); }
.cj-nd-alert-x { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; color: var(--cj-muted); cursor: pointer; }
.cj-nd-alert-x:hover { color: var(--cj-ink); background: color-mix(in oklch, var(--gray-500) 10%, transparent); }
.cj-nd-alert-x .cj-nd-ico { width: 1.25rem; height: 1.25rem; }
.cj-nd-alert.is-warning { background: color-mix(in oklch, var(--warning-500) 9%, var(--cj-card)); border-color: color-mix(in oklch, var(--warning-500) 38%, transparent); }
.cj-nd-alert.is-warning .cj-nd-alert-ico { color: var(--warning-600); background: color-mix(in oklch, var(--warning-500) 16%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--warning-500) 45%, transparent); }
.cj-nd-alert.is-warning .cj-nd-alert-btn { border-color: color-mix(in oklch, var(--warning-500) 45%, transparent); }
.cj-nd-alert.is-danger { background: color-mix(in oklch, var(--danger-500) 8%, var(--cj-card)); border-color: color-mix(in oklch, var(--danger-500) 38%, transparent); }
.cj-nd-alert.is-danger .cj-nd-alert-ico { color: var(--danger-600); background: color-mix(in oklch, var(--danger-500) 14%, transparent); }
.cj-nd-alert.is-danger .cj-nd-alert-btn { border-color: color-mix(in oklch, var(--danger-500) 45%, transparent); }
.cj-nd-alert.is-info { background: color-mix(in oklch, var(--primary-500) 7%, var(--cj-card)); border-color: color-mix(in oklch, var(--primary-500) 30%, transparent); }
.cj-nd-alert.is-info .cj-nd-alert-ico { color: var(--cj-teal); background: var(--nb-soft); }
.cj-nd-alert.is-info .cj-nd-alert-btn { border-color: color-mix(in oklch, var(--primary-500) 40%, transparent); }
.dark .cj-nd-alert.is-warning .cj-nd-alert-ico { color: var(--warning-400); }
.dark .cj-nd-alert.is-danger .cj-nd-alert-ico { color: var(--danger-400); }

/* Kartice radnji: jedan red na širokom sadržaju, dva stupca srednje, jedan na mobitelu. */
.cj-nd-actions { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 1rem; } /* Nalog 41.6: svi redovi kartica radnji iste visine. */
.cj-nd-act-wrap { position: relative; display: grid; }
/* Nalog 47 B7: izbornik „Dodaj ručno“ je <details>; summary izgleda kao kartica, bez strelice preglednika. */
.cj-nd-act-wrap > summary { list-style: none; }
.cj-nd-act-wrap > summary::-webkit-details-marker { display: none; }
.cj-nd-act-wrap > summary:focus-visible { outline: none; box-shadow: var(--cj-focus-ring); }
.cj-nd-act-wrap[open] > summary { border-color: var(--primary-500); }
.cj-nd-act { position: relative; display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 6.5rem; padding: 1.25rem; border-radius: var(--cj-nd-r); border: 1px solid var(--cj-line); background: var(--cj-card); box-shadow: var(--nb-shadow); color: var(--cj-ink); text-decoration: none; text-align: left; cursor: pointer; transition: border-color 150ms, transform 150ms; }
.cj-nd-act:hover { border-color: var(--primary-500); transform: translateY(-1px); }
.cj-nd-act-ico { flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 0.875rem; background: var(--nb-soft); color: var(--cj-teal); }
.cj-nd-act-ico .cj-nd-ico { width: 1.75rem; height: 1.75rem; }
.cj-nd-act-txt { flex: 1 1 auto; display: grid; gap: 0.25rem; min-width: 0; }
.cj-nd-act-txt strong { display: flex; align-items: center; gap: 0.5rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.cj-nd-act-txt small { font-size: 0.8125rem; line-height: 1.4; color: var(--cj-muted); }
.cj-nd-act-go { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: color-mix(in oklch, var(--gray-500) 9%, transparent); color: var(--cj-ink); }
/* Brand prijelaz za pune gumbe (brand.css), bijeli tekst. */
.cj-nd-act.is-primary { background: var(--cj-grad-btn); border-color: transparent; color: #fff; }
.cj-nd-act.is-primary:hover { background: var(--cj-grad-btn-hover); }
.cj-nd-act.is-primary:focus-visible { outline: none; box-shadow: var(--cj-focus-ring); }
.cj-nd-act.is-primary .cj-nd-act-ico, .cj-nd-act.is-primary .cj-nd-act-go { background: rgb(255 255 255 / 0.16); color: #fff; }
.cj-nd-act.is-primary .cj-nd-act-txt small { color: rgb(255 255 255 / 0.88); }
.cj-nd-badge { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.45rem; border-radius: 999px; background: #fff; color: var(--cj-brand-ink-2); font-size: 0.8125rem; font-weight: 750; }
.cj-nd-menu { position: absolute; z-index: 20; top: calc(100% + 0.375rem); left: 0; right: 0; display: grid; gap: 0.125rem; padding: 0.375rem; border-radius: 0.75rem; border: 1px solid var(--cj-line); background: var(--cj-card); box-shadow: 0 12px 32px rgb(0 0 0 / 0.14); }
.cj-nd-menu a { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem; color: var(--cj-ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.cj-nd-menu a:hover, .cj-nd-menu a:focus-visible { background: var(--nb-soft); }
.cj-nd-menu .cj-nd-ico { color: var(--cj-teal); }

/* Naslov „Poslovnice“ i svijetli gumb „Dodaj poslovnicu“ */
.cj-nd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 0.5rem; }
.cj-nd-head h2 { margin: 0; font-size: 1.625rem; font-weight: 750; letter-spacing: -0.01em; color: var(--cj-ink); }
.cj-nd-add { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.1rem; border-radius: 0.75rem; background: var(--nb-soft); color: var(--cj-teal); font-size: 0.9375rem; font-weight: 650; text-decoration: none; }
.cj-nd-add:hover { background: color-mix(in oklch, var(--primary-500) 18%, transparent); }
.cj-nd-add .cj-nd-ico { width: 1.25rem; height: 1.25rem; }

/* Kartica poslovnice: lijevo podaci, desno pregled javnog cjenika. */
.cj-nd-locs { display: grid; gap: 1.25rem; }
.cj-nb .cj-nd-loc { gap: 1.5rem; padding: 1.5rem; box-shadow: var(--nb-shadow); }
.cj-nb .cj-nd-loc-main { gap: 1.25rem; align-content: start; }
.cj-nb .cj-nd-loc-top { gap: 1.25rem; }
.cj-nb .cj-nd-avatar { width: 4.5rem; height: 4.5rem; border-radius: 0.625rem; font-size: 1.75rem; }
.cj-nb .cj-nd-avatar.has-logo { background: #fff; border: 1px solid var(--cj-line); }
.cj-nb .cj-nd-loc-name { display: grid; justify-items: start; gap: 0.5rem; }
.cj-nb .cj-nd-loc-name h3 { font-size: 1.375rem; font-weight: 750; }
.cj-nd-pill { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; font-weight: 600; color: color-mix(in oklch, var(--success-700) 85%, var(--cj-ink)); }
.cj-nd-pill::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 999px; background: var(--success-500); }
.cj-nd-pill > span { padding: 0.2rem 0.85rem; border-radius: 999px; background: color-mix(in oklch, var(--success-500) 13%, transparent); }
.cj-nd-pill.is-warn { color: color-mix(in oklch, var(--warning-700) 85%, var(--cj-ink)); }
.cj-nd-pill.is-warn::before { background: var(--warning-500); }
.cj-nd-pill.is-warn > span { background: color-mix(in oklch, var(--warning-500) 14%, transparent); }
.cj-nd-pill.is-danger { color: color-mix(in oklch, var(--danger-700) 85%, var(--cj-ink)); }
.cj-nd-pill.is-danger::before { background: var(--danger-500); }
.cj-nd-pill.is-danger > span { background: color-mix(in oklch, var(--danger-500) 12%, transparent); }
.dark .cj-nd-pill { color: var(--success-300); }
.dark .cj-nd-pill.is-warn { color: var(--warning-300); }
.dark .cj-nd-pill.is-danger { color: var(--danger-300); }
/* Kartica na ploči je poveznica na Poslovnice (nalog 10): ::after naslova prekriva karticu, gumbi ostaju iznad. */
.cj-nd-loc.is-linked { position: relative; cursor: pointer; }
.cj-nd-loc.is-linked:hover { border-color: color-mix(in oklch, var(--primary-500) 55%, var(--cj-line)); }
.cj-nd-loc-link { color: inherit; text-decoration: none; }
.cj-nd-loc-link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--cj-nd-r); }
.cj-nd :is(a, button).cj-nd-loc-link:focus-visible { outline: none; }
.cj-nd-loc.is-linked:has(.cj-nd-loc-link:focus-visible) { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.cj-nd-loc.is-linked :is(a, button):not(.cj-nd-loc-link), .cj-nd-loc.is-linked :is(.cj-nd-url, .cj-nd-preview) { position: relative; z-index: 1; }
/* LINK se nikad ne skraćuje: dugačka adresa prelazi u novi red. */
.cj-nd-url { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.5rem 0.5rem 1rem; min-height: 3.25rem; border-radius: 0.75rem; background: var(--nb-field); min-width: 0; cursor: auto; }
.cj-nd-url-ico { width: 1.25rem; height: 1.25rem; color: var(--cj-muted); }
.cj-nd-host { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 0.9375rem; font-weight: 650; color: var(--cj-ink); }
.cj-nd-url button { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; border: 1px solid var(--cj-line); background: var(--cj-card); color: var(--cj-ink); cursor: pointer; }
.cj-nd-url button:hover { border-color: var(--primary-500); color: var(--cj-teal); }
.cj-nd-url button .cj-nd-ico { width: 1.125rem; height: 1.125rem; }
.cj-nd-lists { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cj-nd-list { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0.5rem 1.1rem 0.5rem 1rem; border-radius: 0.75rem; border: 1px solid var(--cj-line); background: var(--cj-card); color: var(--cj-ink); text-decoration: none; font-size: 0.9375rem; font-weight: 550; }
.cj-nd-list .cj-nd-ico { width: 1.375rem; height: 1.375rem; color: var(--cj-ink); }
.cj-nd-list b { display: inline-grid; place-items: center; min-width: 2.25rem; height: 1.6rem; margin-left: 0.25rem; padding: 0 0.5rem; border-radius: 0.5rem; background: color-mix(in oklch, var(--gray-500) 10%, transparent); font-size: 0.875rem; font-weight: 700; }
.cj-nd-list.is-filled { border-color: var(--primary-500); background: color-mix(in oklch, var(--primary-500) 6%, var(--cj-card)); }
.cj-nd-list.is-filled .cj-nd-ico { color: var(--cj-teal); }
.cj-nd-list:hover { border-color: var(--primary-500); }
.cj-nd-plus { margin-left: 0.25rem; font-size: 1.25rem; font-weight: 400; line-height: 1; color: var(--cj-muted); }
.cj-nd-tools { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cj-nd-tool { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0.5rem 1.1rem; border-radius: 0.75rem; border: 1px solid var(--cj-line); background: var(--cj-card); color: var(--cj-ink); font-size: 0.9375rem; font-weight: 550; text-decoration: none; cursor: pointer; }
.cj-nd-tool:hover { border-color: var(--primary-500); color: var(--cj-teal); }
.cj-nd-tool .cj-nd-ico { width: 1.25rem; height: 1.25rem; }
.cj-nd-side { min-width: 0; }
.cj-nd-preview { position: relative; border-radius: 0.875rem; border: 1px solid var(--cj-line); overflow: hidden; height: 21rem; background: #fff; }
.cj-nd-preview iframe { display: block; width: 100%; height: 100%; border: 0; }
.cj-nd-pv-open { position: absolute; top: 0.875rem; right: 0.875rem; z-index: 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; border: 1px solid #e5e7eb; background: #fff; color: #111827; }
.cj-nd-pv-open:hover { border-color: var(--primary-500); color: var(--cj-brand-ink-2); }
.cj-nd-pv-open .cj-nd-ico { width: 1.125rem; height: 1.125rem; }
.cj-nd-preview.is-compact { height: auto; display: grid; gap: 1rem; padding: 1.25rem 1.5rem; background: var(--cj-card); cursor: auto; }
.cj-nd-pv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.cj-nd-pv-head h4 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--cj-ink); }
.cj-nd-pv-head p { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--cj-muted); }
.cj-nd-pv-head .cj-nd-tool { min-height: 2.5rem; padding: 0.4rem 0.8rem; font-size: 0.875rem; }
.cj-nd-pv-row { display: grid; gap: 0.35rem; padding-top: 1rem; border-top: 1px solid var(--cj-line); }
.cj-nd-pv-line { display: flex; justify-content: space-between; gap: 1rem; color: var(--cj-ink); font-size: 1rem; }
.cj-nd-pv-line > :last-child { text-align: right; white-space: nowrap; }
.cj-nd-pv-line.is-muted { color: var(--cj-muted); font-size: 0.875rem; }
.cj-nd-preview.is-empty { height: auto; min-height: 9rem; display: grid; place-content: center; justify-items: center; gap: 0.5rem; padding: 1.5rem; text-align: center; background: var(--nb-field); border-style: dashed; cursor: auto; }
.cj-nd-preview.is-empty .cj-nd-ico { width: 1.75rem; height: 1.75rem; color: var(--cj-muted); }
.cj-nd-preview.is-empty p { margin: 0; color: var(--cj-muted); font-size: 0.9375rem; font-weight: 550; }

/* Podijeli */
.cj-nd-share { display: grid; gap: 1rem; padding: 1.25rem 1.5rem; border-radius: var(--cj-nd-r); border: 1px solid var(--cj-line); background: var(--cj-card); box-shadow: var(--nb-shadow); }
.cj-nd-share-head { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; }
.cj-nd-share-ico { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: var(--nb-soft); color: var(--cj-teal); }
.cj-nd-share-ico .cj-nd-ico { width: 1.5rem; height: 1.5rem; }
.cj-nd-share-head > div { display: grid; gap: 0.2rem; justify-items: start; min-width: 0; }
.cj-nd-share h2 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--cj-ink); }
.cj-nd-share-head p { margin: 0; font-size: 0.9375rem; color: var(--cj-muted); }
.cj-nd-seg { justify-self: start; display: inline-flex; flex-wrap: wrap; padding: 0.2rem; border-radius: 0.75rem; background: color-mix(in oklch, var(--gray-500) 10%, transparent); max-width: 100%; }
.cj-nd-seg button { padding: 0.3rem 0.7rem; border-radius: 0.55rem; font-size: 0.8125rem; color: var(--cj-muted); cursor: pointer; }
.cj-nd-seg button.is-on { background: var(--cj-card); color: var(--cj-ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.cj-nd-share-icons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.cj-nd-share-item { display: flex; align-items: center; gap: 0.75rem; min-width: 0; padding: 0.625rem 0.875rem 0.625rem 0.625rem; border-radius: 0.875rem; border: 1px solid var(--cj-line); background: var(--cj-card); color: var(--cj-ink); text-decoration: none; text-align: left; cursor: pointer; }
.cj-nd-share-item:hover { border-color: var(--primary-500); }
.cj-nd-share-item-ico { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--nb-soft); color: var(--cj-teal); }
.cj-nd-share-item-ico .cj-nd-ico { width: 1.375rem; height: 1.375rem; }
.cj-nd-share-item-txt { display: grid; min-width: 0; }
.cj-nd-share-item-txt strong { font-size: 0.875rem; font-weight: 650; }
.cj-nd-share-item-txt small { font-size: 0.75rem; color: var(--cj-muted); }

@container nb (min-width: 38rem) {
    .cj-nd-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Neparan broj kartica u dva stupca: „Objavi“ preko cijelog reda. */
    .cj-nd-act.is-primary:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@container nb (min-width: 60rem) {
    .cj-nd-actions { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
    .cj-nd-act.is-primary:nth-child(odd):last-child { grid-column: auto; }
    /* Četiri kartice (uz Fotografiraj) stanu u jedan red tek na vrlo širokom sadržaju, inače 2 × 2. */
    .cj-nd-actions.has-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cj-nd-locs .cj-nd-loc { grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); gap: 2rem; padding: 1.75rem 1.75rem 1.75rem 2rem; }
    .cj-nd-locs .cj-nd-side { padding-left: 2rem; border-left: 1px solid var(--cj-line); }
    .cj-nd-share-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container nb (min-width: 78rem) {
    .cj-nd-actions.has-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Široko: naslov lijevo, četiri kartice desno u jednom redu (kao na dizajnu). */
@container nb (min-width: 64rem) {
    .cj-nd-share { grid-template-columns: minmax(12rem, 1fr) auto; align-items: center; gap: 0.75rem 1rem; }
    .cj-nd-share-head { grid-column: 1; grid-row: 1 / span 2; }
    .cj-nd-seg { grid-column: 2; justify-self: end; }
    .cj-nd-share-icons { grid-column: 2; }
    .cj-nd-share-icons { grid-template-columns: repeat(4, max-content); gap: 0.625rem; }
    .cj-nd-share-item-txt { white-space: nowrap; }
}
/* Veći naslov nadzorne ploče, kao na dizajnu. */
@media (min-width: 641px) {
    .fi-page:has(.cj-nb) .fi-header-heading { font-size: 2.25rem; letter-spacing: -0.02em; }
}
@media (max-width: 640px) {
    .cj-nb { gap: 1rem; }
    .cj-nd-act { min-height: 0; padding: 1rem; }
    .cj-nd-act-ico { width: 3rem; height: 3rem; }
    .cj-nd-side { display: none; }
    .cj-nb .cj-nd-loc { padding: 1.125rem; }
    .cj-nb .cj-nd-avatar { width: 3.5rem; height: 3.5rem; font-size: 1.375rem; }
    .cj-nb .cj-nd-loc-name h3 { font-size: 1.1875rem; }
    .cj-nd-head h2 { font-size: 1.375rem; }
    .cj-nd-lists, .cj-nd-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .cj-nd-list { gap: 0.4rem; padding: 0.5rem 0.6rem; font-size: 0.875rem; }
    .cj-nd-list .cj-nd-ico { width: 1.125rem; height: 1.125rem; }
    .cj-nd-list b { min-width: 1.75rem; margin-left: auto; }
    .cj-nd-plus { margin-left: auto; }
    .cj-nd-tool { justify-content: center; }
    .cj-nd-alert-actions { width: 100%; justify-content: flex-end; }
    .cj-nd-share { padding: 1.125rem; }
    .cj-nd-share-icons { gap: 0.5rem; }
    .cj-nd-share-item { padding: 0.5rem; gap: 0.5rem; }
    .cj-nd-share-item-ico { width: 2.25rem; height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cj-nd-act { transition: none; }
    .cj-nd-act:hover { transform: none; }
}

/*
 * Poslovnice i Poslovni subjekt (blok P3): ista kartica .cj-nd-loc (partial
 * location-card), plus red podešenog, primarni „Uredi“ i pregled „Što kupci vide“.
 */
.cj-nd-loc-top { flex-wrap: wrap; }
.cj-nd-loc-top .cj-nd-loc-name { flex: 1 1 10rem; }
.cj-nd-edit { flex: none; margin-left: auto; }
.cj-nd-set { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cj-nd-set li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid var(--cj-line); font-size: 0.8125rem; color: var(--cj-ink); overflow-wrap: anywhere; min-width: 0; }
.cj-nd-set li .cj-nd-ico { color: var(--cj-teal); }
.cj-nd-set li.cj-nd-set-lang { padding: 0.3rem 0.55rem; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em; background: color-mix(in oklch, var(--primary-500) 12%, transparent); border-color: transparent; color: var(--cj-teal); }
.cj-nd-set.is-facts li strong { font-weight: 650; }
.cj-nd-copy-items { display: flex; }
.cj-nd-badge-type { display: inline-flex; padding: 0.1rem 0.55rem; border-radius: 999px; background: color-mix(in oklch, var(--gray-500) 12%, transparent); font-size: 0.75rem; font-weight: 600; color: var(--cj-muted); }

.cj-nd-entity { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: start; }
.cj-nd-public { display: grid; gap: 0.5rem; min-width: 0; }
.cj-nd-public-title { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cj-muted); }
.cj-nd-public-card { display: flex; gap: 0.875rem; align-items: center; padding: 1rem; border-radius: 0.875rem; border: 1px solid var(--cj-line); background: color-mix(in oklch, var(--gray-500) 5%, transparent); min-width: 0; }
.cj-nd-public-mark { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; overflow: hidden; background: var(--cj-grad-btn); color: #fff; font-weight: 600; }
.cj-nd-public-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cj-nd-public-card > div { min-width: 0; }
.cj-nd-public-name { margin: 0; font-size: 1.0625rem; font-weight: 650; color: var(--cj-ink); overflow-wrap: anywhere; }
.cj-nd-public-details { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--cj-muted); overflow-wrap: anywhere; }

@media (max-width: 1023px) {
    .cj-nd-entity { grid-template-columns: 1fr; }
}

/* Ispravci rasporeda (vlasnik 06.10.2026.): više zraka na subjektu i poslovnicama, razmaknuto zaglavlje. */
.cj-nd-entity { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem; }
.cj-nd-entity .cj-nd-loc-main { gap: 1.25rem; }
.cj-nd-set.is-facts { gap: 0.75rem 0.875rem; }
.cj-nd-set.is-facts li { padding: 0.45rem 0.85rem; font-size: 0.875rem; }
.cj-nd-missing .fi-btn { box-shadow: 0 0 0 3px color-mix(in oklch, var(--warning-500) 18%, transparent); }
.cj-nd-entity .cj-nd-public { padding-top: 1.25rem; border-top: 1px solid var(--cj-line); gap: 0.75rem; }
.cj-nd-entity .cj-nd-public-card { padding: 1.25rem; }

.fi-topbar-end { gap: 1.125rem; }
.fi-topbar-database-notifications-btn { display: inline-grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; }
.fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn { inset-inline-start: auto; inset-inline-end: 0.15rem; top: 0.15rem; }
@media (max-width: 639px) {
    .fi-topbar-end { gap: 0.75rem; }
}
@media (max-width: 640px) {
    .cj-nd-entity { padding: 1.125rem; }
}

/*
 * Kartica poslovnice na stranici Poslovnice (dizajn vlasnika poslovnice-dizajn.png,
 * 06.10.2026.; partial location-card-details). Prefiks .cj-lc-; nadzorna ploča se ne mijenja.
 */
.cj-lc-list { display: grid; gap: 1.25rem; }
.cj-nd-loc.cj-lc { display: block; padding: 2rem; border-radius: 1rem; box-shadow: 0 1px 2px rgb(15 23 42 / 0.04); }
.cj-lc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-bottom: 1.5rem; }
.cj-lc-avatar { flex: none; display: grid; place-items: center; width: 4.75rem; height: 4.75rem; border-radius: 0.875rem; overflow: hidden; background: color-mix(in oklch, var(--primary-500) 13%, transparent); color: var(--cj-teal); font-size: 1.875rem; font-weight: 700; }
.cj-lc-avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 0.35rem; }
.cj-lc-title { flex: 1 1 14rem; min-width: 0; display: grid; gap: 0.625rem; }
.cj-lc-title h3 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--cj-ink); overflow-wrap: anywhere; }
.cj-lc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; }
.cj-lc-status { --cj-lc-s: var(--success-500); display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; font-weight: 500; }
.cj-lc-status::before { content: ""; flex: none; width: 0.625rem; height: 0.625rem; border-radius: 999px; background: var(--cj-lc-s); }
.cj-lc-status > span { padding: 0.3rem 0.875rem; border-radius: 999px; background: color-mix(in oklch, var(--cj-lc-s) 15%, transparent); color: color-mix(in oklch, var(--cj-lc-s) 70%, var(--gray-950)); }
.cj-lc-status.is-warn { --cj-lc-s: var(--warning-500); }
.cj-lc-status.is-danger { --cj-lc-s: var(--danger-500); }
.cj-lc-addr { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--cj-muted); overflow-wrap: anywhere; min-width: 0; }
.cj-lc-addr .cj-nd-ico { width: 1.25rem; height: 1.25rem; }
.cj-lc-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-left: auto; }
.cj-lc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 3.5rem; padding: 0 1.5rem; border-radius: 0.625rem; border: 1px solid var(--cj-line); background: var(--cj-card); color: var(--cj-ink); font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color 150ms, background-color 150ms; }
.cj-lc-btn .cj-nd-ico { width: 1.375rem; height: 1.375rem; }
.cj-lc-btn:hover { border-color: var(--primary-500); }
.cj-lc-btn.is-soft { border-color: transparent; background: color-mix(in oklch, var(--primary-500) 14%, transparent); color: var(--cj-teal); }
.cj-lc-btn.is-soft:hover { background: color-mix(in oklch, var(--primary-500) 22%, transparent); }
.cj-lc-btn.is-danger { border-color: var(--danger-500, #ef4444); color: var(--danger-600, #dc2626); background: transparent; }
.cj-lc-btn.is-danger:hover { background: color-mix(in oklch, var(--danger-500, #ef4444) 10%, transparent); border-color: var(--danger-600, #dc2626); }
.dark .cj-lc-btn.is-danger { border-color: var(--danger-400, #f87171); color: var(--danger-400, #f87171); }

.cj-lc-row { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: 0 1rem; padding: 1.5rem 0; border-top: 1px solid var(--cj-line); }
.cj-lc-row:last-child { padding-bottom: 0; }
/* Ispis i dijeljenje na dnu kartice (nalog 12): isti partial kao Objava i arhiva. */
.cj-lc-outputs .cj-out { padding-top: 1.5rem; }
.cj-lc-row-ico { width: 1.375rem; height: 1.375rem; color: var(--cj-muted); }
.cj-lc-row-body { display: grid; gap: 0.75rem; min-width: 0; }
.cj-lc-label { margin: 0; font-size: 0.9375rem; font-weight: 500; color: var(--cj-muted); line-height: 1.375rem; }

/* Nalog 10: kvadratni gumbi u istoj visini i osi kao polje adrese; natpisi ispod. */
.cj-lc-row-body.is-url { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label ." "field tools"; column-gap: 2rem; }
.cj-lc-row-body.is-url .cj-lc-label { grid-area: label; }
.cj-lc-url-line { display: contents; }
.cj-lc-field { grid-area: field; align-self: start; display: flex; align-items: center; gap: 0.5rem; min-height: 3.25rem; padding: 0.375rem 0.375rem 0.375rem 1rem; border-radius: 0.625rem; border: 1px solid var(--cj-line); background: color-mix(in oklch, var(--gray-500) 6%, transparent); min-width: 0; }
.cj-lc-field > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 1rem; font-weight: 500; color: var(--cj-ink); }
.cj-lc-field-btn { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; border: 1px solid var(--cj-line); background: var(--cj-card); color: var(--cj-ink); cursor: pointer; }
.cj-lc-field-btn:hover { border-color: var(--primary-500); color: var(--cj-teal); }
.cj-lc-field-btn .cj-nd-ico { width: 1.125rem; height: 1.125rem; }
.cj-lc-tools { grid-area: tools; display: flex; gap: 0.75rem; align-self: start; }
.cj-lc-tool { display: grid; justify-items: center; align-content: start; gap: 0.375rem; width: 5rem; padding: 0; border: 0; background: none; color: var(--cj-muted); font-size: 0.75rem; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.cj-lc-tool-ico { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 0.75rem; border: 1px solid var(--cj-line); background: var(--cj-card); color: var(--cj-ink); box-shadow: 0 1px 2px rgb(15 23 42 / 0.05); transition: border-color 150ms; }
.cj-lc-tool-ico .cj-nd-ico { width: 1.375rem; height: 1.375rem; }
.cj-lc-tool:hover .cj-lc-tool-ico { border-color: var(--primary-500); color: var(--cj-teal); }
.cj-lc-tool:focus-visible { outline: none; }
.cj-lc-tool:focus-visible .cj-lc-tool-ico { outline: 2px solid var(--primary-500); outline-offset: 2px; }

.cj-lc-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.cj-lc-pill { display: inline-flex; align-items: center; gap: 0.875rem; min-height: 3.5rem; padding: 0 1.5rem; border-radius: 999px; border: 1px solid var(--cj-line); background: var(--cj-card); color: var(--cj-ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
a.cj-lc-pill:hover { border-color: var(--primary-500); }
.cj-lc-pill .cj-nd-ico { width: 1.25rem; height: 1.25rem; }
.cj-lc-pill-ico { color: var(--cj-teal); }
.cj-lc-pill.is-pdf { padding-left: 0.5rem; }
.cj-lc-pdf-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: color-mix(in oklch, var(--primary-500) 14%, transparent); color: var(--cj-teal); }
.cj-lc-vsep { align-self: center; width: 1px; height: 2rem; background: var(--cj-line); }

.cj-lc-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
/* „Kopiraj stavke iz druge poslovnice“: cijeli natpis, na mobitelu se prelama. */
.cj-nd-copy-items { min-width: 0; max-width: 100%; }
.cj-nd-copy-items .fi-btn { white-space: normal; text-align: start; height: auto; min-height: 2.25rem; }
button.cj-lc-pill { cursor: pointer; }
button.cj-lc-pill:hover { border-color: var(--primary-500); }
.cj-lc-pill.is-disabled { opacity: 0.55; cursor: not-allowed; }

/* Red „Objava“ (nalog 10): zadnja objava, promjene, upozorenja, Objavi. */
.cj-lc-pub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 0.75rem; }
.cj-lc-pub-when { font-size: 0.9375rem; color: var(--cj-ink); }
.cj-lc-badge { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--cj-line); background: color-mix(in oklch, var(--gray-500) 10%, transparent); color: var(--cj-ink); font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
a.cj-lc-badge:hover { border-color: var(--primary-500); }
.cj-lc-badge.is-warn { border-color: transparent; background: color-mix(in oklch, var(--warning-500) 18%, transparent); color: color-mix(in oklch, var(--warning-600) 80%, var(--gray-950)); }
.dark .cj-lc-badge.is-warn { color: var(--warning-300, #fcd34d); }
.cj-lc-pub-btn { display: inline-flex; }
.cj-lc-pub-modal { display: grid; gap: 1rem; font-size: 0.875rem; }
.cj-lc-pub-list { display: grid; gap: 0.5rem; }
.cj-lc-pub-list + .cj-lc-pub-list { padding-top: 1rem; border-top: 1px solid var(--cj-line); }
.cj-lc-pub-note { margin: 0; }

/*
 * Zaglavlje cjenika (nalog 41): Objava i arhiva i prozor „Objavi“. Velika
 * ikona vrste u pločici branda, USLUGE ili PROIZVODI, poslovnica i stanje.
 * Tekst jednobojan (--cj-ink, --cj-muted); boja branda samo na ikoni.
 * Tokeni kao .cj-dash, jer stranica Objava i prozor nisu unutar njega.
 */
.cj-plh, .cj-pub-card { --cj-line: var(--gray-200); --cj-muted: var(--gray-500); --cj-ink: var(--gray-950); }
.dark .cj-plh, .dark .cj-pub-card { --cj-line: color-mix(in oklch, var(--gray-700) 55%, transparent); --cj-muted: var(--gray-400); --cj-ink: #fff; }
.cj-plh { display: flex; align-items: flex-start; gap: 0.875rem; min-width: 0; }
.cj-plh-ico { display: inline-grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 0.875rem; background: var(--cj-brand-soft); color: var(--cj-brand-ink); }
.cj-plh.is-products .cj-plh-ico { background: var(--cj-brand-soft-2); color: var(--cj-brand-ink-2); }
.cj-plh-svg { width: 1.625rem; height: 1.625rem; }
.cj-plh-text { display: grid; gap: 0.125rem; min-width: 0; }
.cj-plh-title { margin: 0; font-size: 1.375rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.06em; color: var(--cj-ink); }
.cj-plh-loc { margin: 0; font-size: 1rem; font-weight: 600; color: var(--cj-ink); overflow-wrap: anywhere; }
.cj-plh-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--cj-muted); }
.cj-plh-url { text-decoration: underline; overflow-wrap: anywhere; color: inherit; }
.cj-plh-ok { color: var(--cj-muted); }
.cj-lc-pub-modal .cj-plh-ico { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; }
.cj-lc-pub-modal .cj-plh-svg { width: 1.375rem; height: 1.375rem; }
.cj-lc-pub-modal .cj-plh-title { font-size: 1.125rem; }
.cj-lc-pub-list + .cj-lc-pub-list { padding-top: 1.25rem; }

/* Kartice cjenika na Objavi (nalog 41): jasno odvojene, zaglavlje odvojeno crtom od sadržaja. */
.cj-pub-card { border-top: 4px solid var(--cj-brand-ink); }
.cj-pub-card[data-publish-card="products"] { border-top-color: var(--cj-brand-ink-2); }
.cj-pub-card .cj-plh { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--cj-line); }
.fi-page-content:has(> .cj-pub-card) { row-gap: 2.5rem; }
@media (max-width: 640px) {
    .cj-plh { gap: 0.75rem; }
    .cj-plh-ico { width: 2.5rem; height: 2.5rem; }
    .cj-plh-svg { width: 1.375rem; height: 1.375rem; }
    .cj-plh-title { font-size: 1.1875rem; }
}
.cj-lc-settings .cj-nd-set li { padding: 0.45rem 0.85rem; font-size: 0.875rem; }

.cj-lc :is(a, button):focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.dark .cj-lc-status > span { color: color-mix(in oklch, var(--cj-lc-s) 70%, #fff); }
.dark .cj-nd-loc.cj-lc { box-shadow: none; }

@media (max-width: 767px) {
    .cj-lc-row-body.is-url { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "field" "tools"; }
    .cj-lc-tools { gap: 0.5rem; }
}
@media (max-width: 640px) {
    .cj-nd-loc.cj-lc { padding: 1.125rem; }
    .cj-lc-head { align-items: flex-start; padding-bottom: 1.125rem; }
    .cj-lc-meta { gap: 0.5rem 1rem; }
    .cj-lc-avatar { width: 3.5rem; height: 3.5rem; font-size: 1.375rem; }
    .cj-lc-buttons { width: 100%; margin-left: 0; gap: 0.75rem; }
    .cj-lc-buttons .cj-lc-btn { flex: 1 1 0; min-height: 3rem; padding: 0 1rem; }
    .cj-lc-row { grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0 0.75rem; padding: 1.125rem 0; }
    .cj-lc-row:last-child { padding-bottom: 0; }
    .cj-lc-pill { min-height: 3rem; padding: 0 1.125rem; }
    .cj-lc-vsep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cj-lc-btn, .cj-lc-tool-ico { transition: none; }
}

/*
 * Poslovnice u sekcijama (nalog 13, dizajn vlasnika poslovnice-dizajn-mobitel.png):
 * okrugli logo, gumbi Uredi / Kopiraj / Obriši, sekcije u svijetlim okvirima s malim
 * naslovom velikim slovima i ikonom u pločici; na računalu dva stupca, Ispis i
 * dijeljenje preko cijele širine. Nadjačava raniji blok .cj-lc-*.
 */
.cj-nd-loc.cj-lc { padding: 1.75rem; }
.cj-lc .cj-lc-avatar { width: 4.5rem; height: 4.5rem; border-radius: 999px; }
.cj-lc .cj-lc-avatar img { padding: 0.5rem; }
.cj-lc .cj-lc-btn { min-height: 3rem; padding: 0 1.25rem; border-color: transparent; background: color-mix(in oklch, var(--gray-500) 10%, transparent); }
.cj-lc .cj-lc-btn:hover { background: color-mix(in oklch, var(--gray-500) 16%, transparent); border-color: transparent; }
.cj-lc .cj-lc-btn.is-soft { background: color-mix(in oklch, var(--primary-500) 14%, transparent); }
.cj-lc .cj-lc-btn.is-danger { border-color: transparent; background: color-mix(in oklch, var(--danger-500, #ef4444) 11%, transparent); color: var(--danger-600, #dc2626); }
.cj-lc .cj-lc-btn.is-danger:hover { background: color-mix(in oklch, var(--danger-500, #ef4444) 18%, transparent); }
.dark .cj-lc .cj-lc-btn.is-danger { color: var(--danger-400, #f87171); }
.cj-lc .cj-lc-buttons { gap: 0.75rem; }

.cj-lc-secs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.cj-lc-sec { display: grid; align-content: start; gap: 0.875rem; min-width: 0; padding: 1rem 1.125rem 1.125rem; border-radius: 0.875rem; background: color-mix(in oklch, var(--gray-500) 5%, transparent); border: 1px solid color-mix(in oklch, var(--gray-500) 8%, transparent); }
.cj-lc-sec-head { display: flex; align-items: center; gap: 0.625rem; margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cj-muted); }
.cj-lc-sec-ico { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--cj-card); border: 1px solid var(--cj-line); color: var(--cj-teal); }
.cj-lc-sec-ico .cj-nd-ico { width: 1.125rem; height: 1.125rem; }
.cj-lc-sec .cj-lc-field { grid-area: auto; background: var(--cj-card); }

/* Tri kvadratne kartice ispod adrese. */
.cj-lc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.cj-lc-tile { display: grid; justify-items: center; align-content: start; gap: 0.5rem; min-width: 0; padding: 0.875rem 0.5rem 0.75rem; border-radius: 0.75rem; border: 1px solid var(--cj-line); background: var(--cj-card); color: var(--cj-ink); font-size: 0.8125rem; font-weight: 550; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; }
.cj-lc-tile:hover { border-color: var(--primary-500); }
.cj-lc-tile-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: color-mix(in oklch, var(--primary-500) 12%, transparent); color: var(--cj-teal); }
.cj-lc-tile-ico .cj-nd-ico { width: 1.25rem; height: 1.25rem; }
.cj-lc-tile-go { width: 1rem; height: 1rem; color: var(--cj-muted); }

/* Upravljanje sadržajem kao popis redaka. */
.cj-lc-items { display: grid; gap: 0.5rem; }
.cj-lc-item { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.5rem 0.875rem; border-radius: 0.75rem; border: 1px solid var(--cj-line); background: var(--cj-card); color: var(--cj-ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.cj-lc-item:hover { border-color: var(--primary-500); }
.cj-lc-item > span { flex: 1 1 auto; min-width: 0; }
.cj-lc-item-ico { width: 1.25rem; height: 1.25rem; color: var(--cj-teal); }
.cj-lc-item-go { width: 1.125rem; height: 1.125rem; color: var(--cj-muted); }

/* Ispis i dijeljenje u sekciji: naslov nosi sekcija, partial ostaje isti kao na Objavi. */
.cj-lc-outputs .cj-out { padding-top: 0; border-top: 0; }
.cj-lc-outputs .cj-out-head h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cj-lc-outputs .cj-out-card { background: var(--cj-card); }

@media (min-width: 1024px) {
    .cj-lc-secs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .cj-lc-sec.is-wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .cj-nd-loc.cj-lc { padding: 1rem; }
    .cj-lc .cj-lc-head { flex-wrap: wrap; gap: 0.875rem 1rem; }
    .cj-lc .cj-lc-avatar { width: 4rem; height: 4rem; }
    .cj-lc .cj-lc-title { flex-basis: calc(100% - 5rem); }
    .cj-lc .cj-lc-meta { gap: 0.5rem 1rem; }
    .cj-lc .cj-lc-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 0.5rem; }
    .cj-lc .cj-lc-buttons .cj-lc-btn { min-height: 2.75rem; padding: 0 0.5rem; gap: 0.4rem; font-size: 0.9375rem; }
    .cj-lc-sec { padding: 0.875rem; }
    .cj-lc-tile { font-size: 0.75rem; }
    /* „Dodaj poslovnicu“ preko pune širine. */
    .fi-page:has(.cj-lc-list) .fi-header-actions-ctn, .fi-page:has(.cj-lc-list) .fi-header-actions-ctn .fi-ac { width: 100%; }
    .fi-page:has(.cj-lc-list) .fi-header-actions-ctn .fi-btn { width: 100%; min-height: 3rem; justify-content: flex-start; font-size: 1rem; }
}

/* ---------- Stranica jedne poslovnice (nalog 21, dizajn poslovnice-dizajn-12-10.png, minimalistički) ---------- */
.cj-ld { --cj-ld-r: 1.25rem; display: grid; gap: 1.25rem; max-width: 92rem; }
.cj-ld-ico { width: 1.25rem; height: 1.25rem; flex: none; color: var(--cj-brand-ink); }
.cj-ld-back { display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start; font-weight: 600; color: var(--cj-brand-ink-2); }
.cj-ld-back:hover { text-decoration: underline; }
.cj-ld-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--cj-line); border-radius: var(--cj-ld-r); background: var(--cj-card); }
.cj-ld-avatar { display: grid; place-items: center; flex: none; width: 4.5rem; height: 4.5rem; overflow: hidden; border-radius: 999px; background: var(--cj-brand-soft); color: var(--cj-brand-ink); font-size: 1.75rem; font-weight: 700; }
.cj-ld-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cj-ld-avatar.is-sm { width: 3rem; height: 3rem; font-size: 1.125rem; }
.cj-ld-title { display: grid; gap: 0.375rem; min-width: 0; flex: 1 1 18rem; }
.cj-ld-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; }
.cj-ld-name h1 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cj-ld-status, .cj-ld-pill { --s: var(--success-500); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.7rem; border-radius: 999px; background: color-mix(in oklch, var(--s) 13%, transparent); color: color-mix(in oklch, var(--s) 70%, var(--gray-950)); font-size: 0.8125rem; font-weight: 600; }
.cj-ld-status i, .cj-ld-pill i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--s); }
.cj-ld-status.is-warn, .cj-ld-pill.is-warn { --s: var(--warning-500); }
.cj-ld-status.is-danger { --s: var(--danger-500); }
.dark .cj-ld-status, .dark .cj-ld-pill { color: color-mix(in oklch, var(--s) 65%, #fff); }
.cj-ld-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; margin: 0; color: var(--cj-muted); }
.cj-ld-meta > span, .cj-ld-meta > a { display: inline-flex; align-items: center; gap: 0.375rem; }
.cj-ld-meta a { color: var(--cj-brand-ink-2); font-weight: 600; }
.cj-ld-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-left: auto; }
.cj-ld-btn, .cj-ld-actions .cj-lc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--cj-line); border-radius: 0.75rem; background: var(--cj-card); color: inherit; font-weight: 600; cursor: pointer; list-style: none; }
.cj-ld-btn::-webkit-details-marker { display: none; }
.cj-ld-btn:hover { border-color: var(--cj-brand-ink-2); }
.cj-ld-btn.is-soft { border-color: transparent; background: var(--cj-brand-soft-2); color: var(--cj-brand-ink-2); }
.cj-ld-actions .cj-lc-btn.is-danger { border-color: transparent; background: color-mix(in oklch, var(--danger-500) 10%, transparent); color: var(--danger-600); }
.dark .cj-ld-actions .cj-lc-btn.is-danger { color: var(--danger-400); }
.cj-ld-actions .cj-lc-btn .cj-nd-ico { width: 1.125rem; height: 1.125rem; }

.cj-ld-grid { display: grid; gap: 1.25rem; }
.cj-ld-col { display: grid; align-content: start; gap: 1.25rem; min-width: 0; }
.cj-ld-card { display: grid; align-content: start; gap: 1rem; min-width: 0; padding: 1.25rem; border: 1px solid var(--cj-line); border-radius: var(--cj-ld-r); background: var(--cj-card); }
.cj-ld-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.cj-ld-card-head h2 { display: flex; align-items: center; gap: 0.625rem; margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cj-ld-label { margin: 0; font-size: 0.8125rem; color: var(--cj-muted); }
.cj-ld-value { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.375rem 0 0; font-weight: 600; }
.cj-ld-facts { display: grid; gap: 1rem; }
.cj-ld-chip { display: inline-flex; align-items: center; padding: 0.15rem 0.625rem; border-radius: 999px; background: color-mix(in oklch, var(--gray-500) 10%, transparent); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.cj-ld-chip.is-warn { background: color-mix(in oklch, var(--warning-500) 16%, transparent); color: color-mix(in oklch, var(--warning-600) 80%, var(--gray-950)); }
.cj-ld-chip.is-ok { background: color-mix(in oklch, var(--success-500) 13%, transparent); color: color-mix(in oklch, var(--success-600) 80%, var(--gray-950)); }
.cj-ld-chip.is-brand { background: var(--cj-brand-soft); color: var(--cj-brand-ink); }
.cj-ld-chip.is-violet { background: var(--cj-brand-soft-2); color: var(--cj-brand-ink-2); }
.cj-ld-chip.is-sale { background: color-mix(in oklch, var(--danger-500) 12%, transparent); color: var(--danger-600); }
.dark .cj-ld-chip.is-warn { color: var(--warning-300); }
.dark .cj-ld-chip.is-ok { color: var(--success-300); }
.dark .cj-ld-chip.is-sale { color: var(--danger-400); }
.cj-ld-pub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.cj-ld-primary, .cj-ld-primary-btn { flex: 1 1 14rem; }
.cj-ld-primary .fi-btn { width: 100%; min-height: 3rem; justify-content: center; }
.cj-ld-primary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.25rem; border-radius: 0.75rem; background: var(--cj-grad-btn); color: #fff; font-weight: 600; }
.cj-ld-primary-btn:hover { background: var(--cj-grad-btn-hover); }
.cj-ld-primary-btn:focus-visible { outline: none; box-shadow: var(--cj-focus-ring); }
.cj-ld-more { position: relative; }
.cj-ld-menu { position: absolute; right: 0; top: calc(100% + 0.375rem); z-index: 20; display: grid; min-width: 12rem; padding: 0.375rem; border: 1px solid var(--cj-line); border-radius: 0.75rem; background: var(--cj-card); box-shadow: 0 12px 28px -12px rgba(11, 27, 31, 0.28); }
.cj-ld-menu a { padding: 0.5rem 0.75rem; border-radius: 0.5rem; }
.cj-ld-menu a:hover { background: var(--cj-brand-soft); }

.cj-ld-rows { display: grid; gap: 0.5rem; }
.cj-ld-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto 1rem; align-items: center; gap: 0.875rem; padding: 0.75rem 0.875rem; border: 1px solid var(--cj-line); border-radius: 0.875rem; }
.cj-ld-row:hover, .cj-ld-tool:hover, .cj-ld-tile:hover { border-color: var(--cj-brand-ink-2); }
.cj-ld-row-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--cj-brand-soft); }
.cj-ld-row-ico.is-sale { background: color-mix(in oklch, var(--danger-500) 10%, transparent); }
.cj-ld-row-ico.is-sale .cj-ld-ico { color: var(--danger-500); }
.cj-ld-row-text { display: grid; min-width: 0; }
.cj-ld-row-text b { font-weight: 700; }
.cj-ld-row-text > span, .cj-ld-tool span span, .cj-ld-muted { color: var(--cj-muted); font-size: 0.875rem; }
.cj-ld-go { color: var(--cj-muted); }

.cj-ld-field { display: flex; align-items: center; gap: 0.625rem; min-height: 3rem; padding: 0 0.375rem 0 0.875rem; border: 1px solid var(--cj-line); border-radius: 0.875rem; font-weight: 600; }
.cj-ld-field > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cj-ld-field-btn { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--cj-line); border-radius: 0.625rem; background: var(--cj-card); cursor: pointer; }
.cj-ld-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.cj-ld-tile { display: grid; justify-items: center; align-content: center; gap: 0.5rem; min-height: 5.5rem; padding: 0.75rem; border: 1px solid var(--cj-line); border-radius: 0.875rem; background: var(--cj-card); color: inherit; font-size: 0.875rem; font-weight: 600; text-align: center; cursor: pointer; }
.cj-ld-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.cj-ld-tool { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) 1rem; align-items: center; gap: 0.75rem; padding: 0.875rem; border: 1px solid var(--cj-line); border-radius: 0.875rem; background: var(--cj-card); color: inherit; text-align: left; cursor: pointer; }
.cj-ld-tool > span { display: grid; min-width: 0; }
.cj-ld-tool b { font-weight: 700; }
/* Nalog 41.1: gumb za narudžbu nije podešen (Alati na stranici poslovnice, napomena na nadzornoj ploči). */
.cj-ld-tool span.cj-ld-tool-warn { color: var(--warning-700); }
.dark .cj-ld-tool span.cj-ld-tool-warn { color: var(--warning-400); }
.cj-nd-order-note { display: flex; align-items: center; gap: 0.375rem; margin: 0; font-size: 0.8125rem; color: var(--warning-700); }
.cj-nd-order-note a { color: inherit; font-weight: 600; text-decoration: underline; }
.dark .cj-nd-order-note { color: var(--warning-400); }
.cj-ld-muted { margin: 0; }
.cj-ld-muted a { color: var(--cj-brand-ink-2); font-weight: 600; text-decoration: underline; }
/* Nalog 38: prekidač prikaza stavki po cjeniku. */
.cj-ld-public-items { display: grid; gap: 0.75rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.cj-ld-switch { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; cursor: pointer; }
.cj-ld-switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--cj-brand-ink-2); }
.cj-ld-switch input:disabled { cursor: not-allowed; }
.cj-ld-public-items .cj-ld-muted { margin-top: 0.25rem; }
.cj-ld-langs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cj-ld-langs li { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 1px solid var(--cj-line); border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--cj-muted); }
.cj-ld-langs li.is-on { border-color: var(--cj-brand-ink-2); background: var(--cj-brand-soft-2); color: var(--cj-brand-ink-2); }
.cj-ld-langs li:last-child { padding: 0; border-style: dashed; }
.cj-ld-langs li a { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.75rem; color: var(--cj-brand-ink-2); }
@media (min-width: 640px) {
    .cj-ld-facts { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) {
    .cj-ld-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 639px) {
    .cj-ld-head { padding: 1rem; }
    .cj-ld-actions { margin-left: 0; width: 100%; }
    .cj-ld-actions > * { flex: 1 1 auto; }
    .cj-ld-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cj-ld-tools { grid-template-columns: minmax(0, 1fr); }
    .cj-ld-row { grid-template-columns: 2.5rem minmax(0, 1fr) 1rem; }
    .cj-ld-row .cj-ld-chip { grid-column: 2; justify-self: start; }
    .cj-ld-row .cj-ld-go { grid-row: 1; grid-column: 3; }
}

/* Popis poslovnica (nalog 21): kompaktne kartice, klik vodi na stranicu poslovnice. */
.cj-ll { display: grid; gap: 0.75rem; }
.cj-ll-card { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--cj-line); border-radius: 1.125rem; background: var(--cj-card); }
.cj-ll-card:hover { border-color: var(--cj-brand-ink-2); }
.cj-ll-text { display: grid; gap: 0.25rem; min-width: 0; flex: 1; }
.cj-ll-text h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.cj-ll-text p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin: 0; color: var(--cj-muted); font-size: 0.875rem; }
.cj-ll-addr { display: inline-flex; align-items: center; gap: 0.25rem; }
.cj-ll-host { font-weight: 600; color: var(--cj-brand-ink-2) !important; overflow-wrap: anywhere; }
.cj-ll-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cj-ll-link:focus-visible { outline: none; }
.cj-ll-card:has(.cj-ll-link:focus-visible) { box-shadow: var(--cj-focus-ring); }
@media (max-width: 639px) {
    .cj-ll-open { display: none; }
}

/* ---------- Korak „Cijena na dan“ (nalog 19B, livewire/reference-price-step) ---------- */
.cj-rp { --cj-rp-line: var(--gray-200); display: grid; gap: 0.875rem; padding: 1.125rem 1.25rem; border: 1px solid var(--cj-rp-line); border-radius: 1rem; background: #fff; }
.dark .cj-rp { --cj-rp-line: color-mix(in oklch, var(--gray-700) 55%, transparent); background: color-mix(in oklch, var(--gray-900) 70%, var(--gray-950)); }
.cj-rp-ico { width: 1.25rem; height: 1.25rem; flex: none; color: var(--cj-brand-ink); }
.cj-rp-ico.is-ok { color: var(--success-500); }
.cj-rp-list { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500); }
.cj-rp-block { display: grid; gap: 0.75rem; }
.cj-rp-block h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.cj-rp-block > p { margin: 0; }
.cj-rp-block.is-done p:first-child { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.cj-rp-muted { margin: 0; color: var(--gray-500); font-size: 0.9375rem; }
.cj-rp-link { color: var(--cj-brand-ink-2); font-weight: 600; text-decoration: underline; }
.cj-rp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.cj-rp-later { padding: 0.5rem 0.25rem; border: 0; background: none; color: var(--gray-500); font-weight: 600; text-decoration: underline; cursor: pointer; }
.cj-rp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cj-rp-chip { position: relative; cursor: pointer; }
.cj-rp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cj-rp-chip span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--cj-rp-line); border-radius: 999px; font-weight: 600; }
.cj-rp-chip input:checked + span { border-color: var(--cj-brand-ink-2); background: var(--cj-brand-soft-2); color: var(--cj-brand-ink-2); }
.cj-rp-chip input:focus-visible + span { box-shadow: var(--cj-focus-ring); }
.cj-rp-table { display: grid; border-top: 1px solid var(--cj-rp-line); }
.cj-rp-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr) minmax(0, 1.6fr); align-items: start; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--cj-rp-line); }
.cj-rp-row.is-head { padding: 0.5rem 0; font-size: 0.8125rem; font-weight: 600; color: var(--gray-500); }
.cj-rp-name { font-weight: 600; overflow-wrap: anywhere; }
.cj-rp-draft { color: var(--gray-500); white-space: nowrap; }
.cj-rp-draft-label { display: none; font-size: 0.8125rem; }
.cj-rp-input { display: grid; gap: 0.5rem; }
.cj-rp-input label { display: grid; gap: 0.25rem; }
.cj-rp-label { font-size: 0.8125rem; color: var(--gray-500); }
.cj-rp-input input[type=text], .cj-rp select { min-height: 2.5rem; padding: 0 0.75rem; border: 1px solid var(--cj-rp-line); border-radius: 0.625rem; background: transparent; color: inherit; font: inherit; }
.cj-rp-input input[type=text]:focus, .cj-rp select:focus { outline: none; box-shadow: var(--cj-focus-ring); }
.cj-rp-check { display: flex !important; grid-auto-flow: column; align-items: center; gap: 0.5rem !important; font-size: 0.875rem; }
.cj-rp-error { margin: 0; color: var(--danger-600); font-size: 0.875rem; font-weight: 600; }
.dark .cj-rp-error { color: var(--danger-400); }
.cj-rp-table .cj-rp-row:has(select) { grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); align-items: center; }
@media (max-width: 639px) {
    .cj-rp-row, .cj-rp-table .cj-rp-row:has(select) { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
    .cj-rp-row.is-head { display: none; }
    /* Bez zaglavlja tablice iznos dobiva vlastitu oznaku, da se ne miješa s poljem „Cijena na dan“. */
    .cj-rp-draft-label { display: inline; }
}

/* Nalog 19D: polje Jezici nakon poveznice „postavite jezike“ (?fokus=jezici), istaknuto 2 s. */
[data-focus-flash] { border-radius: 0.75rem; transition: box-shadow 0.4s ease, background-color 0.4s ease; }
.cj-focus-flash { box-shadow: var(--cj-focus-ring); background-color: color-mix(in srgb, var(--cj-brand-ink-2) 6%, transparent); }
@media (prefers-reduced-motion: reduce) {
    [data-focus-flash] { transition: none; }
}

/* Prijevod naziva: jezici po poslovnici (nalog 19D). */
.cj-tr-langs { display: grid; gap: 0.375rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; }
.cj-tr-langs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.cj-tr-langs-name { font-weight: 600; }
/* Nalog 85 (FRONTEND-06): gray-500 na tamnoj podlozi je 3,91:1; u tamnom prikazu gray-400 (kao --cj-muted). */
.cj-tr-langs-list { color: var(--gray-500); }
.dark .cj-tr-langs-list { color: var(--gray-400); }
.cj-tr-langs a { color: var(--cj-brand-ink-2); font-weight: 600; text-decoration: underline; }

/* Pokazivač „Niste sigurni kako? Pogledajte upute“ na drugim stranicama panela (HelpHints). */
.cj-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; width: fit-content; max-width: 100%; padding: 0.5rem 0.9rem; border-radius: 999px; background: var(--cj-brand-soft); color: var(--cj-brand-ink); font-size: 0.8125rem; line-height: 1.4; }
.cj-hint svg { width: 1rem; height: 1rem; flex: none; }
.cj-hint a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Registracija zatvorena: stranica „Uskoro“ (nalog 28). */
.cj-soon { display: grid; gap: 1.25rem; text-align: center; font-size: 0.9375rem; line-height: 1.6; }
.cj-soon-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.cj-soon-login a { font-weight: 700; color: var(--cj-brand-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Traka „Odaberite svoj LINK“ (nalog 32). */
.cj-link-strip .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .cj-link-strip-scheme { display: none; } }
.cj-link-strip { align-items: flex-start; }
.cj-link-strip-body { flex: 1 1 18rem; min-width: 0; display: grid; gap: 0.5rem; }
.cj-link-strip-body > p { margin: 0; }
.cj-link-strip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.cj-link-strip-field { display: inline-flex; align-items: center; gap: 0.25rem; flex: 1 1 16rem; min-width: 0; padding: 0.375rem 0.625rem; border: 1px solid var(--cj-line, rgba(127, 127, 127, 0.35)); border-radius: 0.625rem; background: var(--cj-card); color: var(--cj-muted); font-size: 0.875rem; }
.cj-link-strip-field input { flex: 1 1 6rem; min-width: 0; border: 0; padding: 0.125rem 0; background: transparent; color: var(--cj-ink); font: inherit; font-weight: 650; outline: none; }
.cj-link-strip-field:focus-within { box-shadow: var(--cj-focus-ring, 0 0 0 2px var(--primary-500)); }
.cj-link-strip-problem { color: var(--danger-600); font-size: 0.875rem; }
.cj-ld-note { margin: 0.5rem 0 0; color: var(--cj-muted); font-size: 0.8125rem; }
/* Nalog 54 (N-3): probna adresa uz QR, plakat, kod za web i Kopiraj. */
.cj-trial-address-note { display: flex; gap: 0.4rem; align-items: flex-start; margin: 0.6rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--warning-700, #b45309); }
.dark .cj-trial-address-note { color: var(--warning-400, #fbbf24); }
.cj-trial-address-note-ico { width: 1rem; height: 1rem; flex: none; margin-top: 0.1rem; }
/* Nalog 42 C: traka stanja nacrta na stranicama koje mijenjaju nacrt (partial draft-state-strip). */
.cj-draft-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0; padding: 0.6rem 0.9rem; border-radius: 0.75rem; font-size: 0.875rem; line-height: 1.45; }
.cj-draft-strip > svg { width: 1.15rem; height: 1.15rem; flex: none; }
.cj-draft-strip ul { flex: 1 1 13rem; display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.cj-draft-strip.is-ok { width: fit-content; max-width: 100%; background: color-mix(in oklch, var(--success-500) 12%, transparent); color: var(--success-800); }
.cj-draft-strip.is-pending { background: color-mix(in oklch, var(--warning-500) 13%, transparent); color: var(--warning-900); border: 1px solid color-mix(in oklch, var(--warning-500) 30%, transparent); }
.dark .cj-draft-strip.is-ok { color: var(--success-300); }
.dark .cj-draft-strip.is-pending { color: var(--warning-200); }
.cj-draft-strip-btn { display: inline-flex; align-items: center; padding: 0.4rem 1rem; border-radius: 0.5rem; background: var(--cj-grad-btn); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cj-draft-strip-btn:hover { background: var(--cj-grad-btn-hover, var(--cj-grad-btn)); }
.cj-draft-strip-btn:focus-visible { outline: none; box-shadow: var(--cj-focus-ring); }
/* Nalog 42 C: obrazac stavke, rečenica ispod gumba Spremi. */
.cj-save-note { margin: 0; font-size: 0.8125rem; color: var(--gray-500); }
.dark .cj-save-note { color: var(--gray-400); }
.cj-publish-errors-title { font-weight: 600; color: var(--danger-600); }
.dark .cj-publish-errors-title { color: var(--danger-400); }
/* Nalog 42 C: kartica poslovnice, stanje objave uz LINK. */
.cj-nd-state { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0; font-size: 0.8125rem; color: var(--gray-600); }
.cj-nd-state .is-pending { color: var(--warning-700); font-weight: 600; }
.dark .cj-nd-state { color: var(--gray-400); }
.dark .cj-nd-state .is-pending { color: var(--warning-400); }