je
kartica, a dobija mikro-naslov iznad vrednosti.
Ćelije bez data-label (npr. naslovna) se prikazuju bez naslova.
Upotreba: + data-label po ćeliji. */
@media (max-width: 720px) {
.pb-table-wrap:has(> .pb-table--cards) {
overflow: visible;
background: none;
}
.pb-table--cards { display: block; border: 0; }
.pb-table--cards thead { display: none; }
.pb-table--cards tbody { display: block; }
.pb-table--cards tbody tr {
display: block;
padding: 12px 14px;
border: 1px solid var(--c-border-hairline, rgba(15, 23, 42, .08));
border-radius: 12px;
background: var(--c-surface, var(--p-white));
}
.pb-table--cards tbody tr + tr { margin-top: 10px; }
.pb-table--cards tbody tr:hover { background: var(--c-surface, var(--p-white)); }
.pb-table--cards tbody td {
display: block;
padding: 0;
border: 0;
white-space: normal;
text-align: left;
}
.pb-table--cards tbody td + td { margin-top: 8px; }
.pb-table--cards tbody td[data-label]::before {
content: attr(data-label);
display: block;
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--c-text-secondary);
margin-bottom: 2px;
}
/* Manje ćelije jedna pored druge (status + datum i sl.) štede vertikalu */
.pb-table--cards tbody td.pb-card-inline {
display: inline-block;
vertical-align: top;
margin-right: 18px;
}
.pb-table--cards tbody td.pb-card-inline + td.pb-card-inline { margin-top: 8px; }
.pb-table--cards td.num { text-align: left; }
.pb-table--cards td.actions-cell {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
padding-top: 2px;
}
.pb-table--cards td.pb-table__empty { text-align: center; padding: 18px 0; }
}
/* ---------- pb-pill ------------------------------------------------------ */
.pb-pill {
display: inline-block;
border: 0;
border-radius: var(--p-radius-pill);
font-weight: 600;
font-size: .72rem;
padding: 3px 10px;
background: var(--c-pill-brand-bg);
color: var(--c-brand);
}
.pb-pill--neutral { background: var(--c-pill-neutral-bg); color: var(--c-text-on-tint); }
.pb-pill--brand { background: var(--c-pill-brand-bg); color: var(--c-brand); }
/* Kanonska imena (copilot-instructions): --success / --warn / --danger.
--good i --alert su deprecated aliasi — ne koristiti u novom markupu. */
.pb-pill--success,
.pb-pill--good { background: var(--c-pill-good-bg); color: var(--c-accent-mint-strong); }
.pb-pill--warn { background: var(--c-pill-warn-bg); color: var(--c-state-warn-icon); }
.pb-pill--danger,
.pb-pill--alert { background: var(--c-pill-alert-bg); color: var(--c-state-alert-icon, var(--c-danger-strong)); }
/* Info (sky) i Violet — npr. status „čeka korisnika" / verify-koraci */
.pb-pill--info { background: var(--c-accent-sky-soft); color: var(--c-accent-sky-strong); }
.pb-pill--violet { background: var(--c-accent-violet-tint-1); color: var(--c-accent-violet); }
.pb-pill--hero {
background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-strong, var(--c-brand)) 100%);
color: var(--p-white);
box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--c-brand) 55%, transparent);
letter-spacing: 0.01em;
}
/* Modifier za pill sa ikonicom ispred labela (poravnanje ikona+tekst).
Koristi npr. _LeadStatusBadge. */
.pb-pill--icon {
display: inline-flex;
align-items: center;
gap: 5px;
}
/* ---------- pb-empty: definisan ispod, u prosirenoj formi (ikona + cta) -- */
/* ---------- pb-search-pill ----------------------------------------------- */
/* Izvor: .home-ask iz /pocetna (override blok). Glossy pill sa blur-om i blue CTA. */
.pb-search-pill {
display: flex;
align-items: center;
gap: .5rem;
background: rgba(255,255,255,.88);
border: 1.5px solid var(--p-line-navy-10);
border-radius: var(--p-radius-pill);
padding: .35rem .4rem .35rem 1.15rem;
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 10px 28px -18px rgba(7,31,77,.20);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pb-search-pill:focus-within {
border-color: var(--c-focus-ring-border);
background: var(--p-white);
box-shadow: 0 0 0 4px var(--c-focus-ring);
}
.pb-search-pill__ico {
width: 18px; height: 18px;
color: var(--c-brand);
flex: 0 0 auto;
}
.pb-search-pill__input {
flex: 1; min-width: 0;
border: 0; outline: 0; background: transparent;
padding: .65rem 0;
font-size: .95rem;
color: var(--c-text-primary);
/* Dugi placeholderi (npr. sudska praksa/mišljenja) na uskom mobilnom ekranu:
skrati sa „…" umesto tvrdog odsecanja. Aktivira se samo kad tekst prelazi širinu. */
text-overflow: ellipsis;
}
.pb-search-pill__go {
border: 0;
background: var(--p-gradient-cta);
color: var(--c-text-on-brand);
border-radius: var(--p-radius-pill);
padding: .6rem 1.25rem;
font-weight: var(--p-fw-semibold);
font-size: .85rem;
cursor: pointer;
box-shadow: var(--p-shadow-cta);
transition: transform .12s ease, box-shadow .15s ease;
}
.pb-search-pill__go:hover {
transform: translateY(-1px);
box-shadow: var(--p-shadow-cta-hover);
}
/* Kompaktna varijanta — ni�i profil za toolbar-e (npr. /propisi/{slug}).
Visina je uskla�ena sa .pb-cta-pill--sm tako da search i dugmad imaju isti rhythm. */
.pb-search-pill--sm {
padding: 0 .4rem 0 .9rem;
border-width: 1px;
min-height: 34px;
}
.pb-search-pill--sm .pb-search-pill__ico { width: 14px; height: 14px; }
.pb-search-pill--sm .pb-search-pill__input {
padding: 0;
height: 32px;
line-height: 32px;
font-size: .85rem;
}
.pb-search-pill--sm .pb-search-pill__go {
padding: .35rem .9rem;
font-size: .8rem;
}
/* Auto-rastući kompozer (Pitaj Pravnu) — textarea umesto input-a.
Prazno stanje izgleda identično običnoj pilili; sa sadržajem raste
do max-height (~5 redova), zatim interno skroluje. JS: pb-ask-grow u site.js.
Kad unos pređe u više redova (.is-multiline), pill radius pada na 22px,
ikona ostaje uz prvi red, a CTA dugme klizi u donji desni ugao. */
/* Dupli selektor: pobedjuje page-level pravila iste specifičnosti
koja se učitavaju kasnije (npr. .home-ask { align-items:center } u index.css). */
.pb-search-pill.pb-search-pill--grow { align-items: flex-end; }
.pb-search-pill--grow .pb-search-pill__ico {
align-self: flex-start;
margin-top: calc(.65rem + 3px);
}
.pb-search-pill--grow .pb-search-pill__input {
display: block;
resize: none;
overflow-y: hidden;
font-family: inherit;
line-height: 1.5;
max-height: 8.5rem;
}
.pb-search-pill--grow.is-multiline { border-radius: 22px; }
/* CTA prati spoljni panel: kad panel pređe u zaobljeni pravougaonik (22px),
i dugme dobija manji radijus umesto punog pill-a (999px). */
.pb-search-pill--grow.is-multiline .pb-search-pill__go { border-radius: 13px; }
/* Uski ekran + višeredan unos: CTA dugme je preširoko da stoji pored teksta
(textarea bi ostala na ~140px), pa pada u novi red, poravnato desno —
tekst dobija pun red kao u modernim chat kompozerima. */
@media (max-width: 720px) {
.pb-search-pill--grow.is-multiline { flex-wrap: wrap; }
.pb-search-pill--grow.is-multiline .pb-search-pill__input {
flex-basis: calc(100% - 26px - .5rem);
}
.pb-search-pill--grow.is-multiline .pb-search-pill__go { margin-left: auto; }
}
/* Hint ispod kompozera — vidljiv samo kad je unos višeredan, i samo na
uređajima sa tastaturom (na touch tastaturi Enter pravi novi red). */
.pb-ask-keys-hint {
margin: .45rem .25rem 0;
font-size: .75rem;
color: var(--c-text-secondary);
}
@media (pointer: coarse) {
.pb-ask-keys-hint { display: none; }
}
/* ---------- pb-toolbar (panel head + search alignment) ------------------ */
.pb-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.pb-toolbar__search {
flex: 0 1 320px;
min-width: 220px;
max-width: 360px;
margin: 0;
}
.pb-toolbar__search .pb-search-pill { width: 100%; }
.pb-toolbar__clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
margin-right: .25rem;
border-radius: 50%;
color: var(--c-text-secondary);
font-size: 16px;
line-height: 1;
text-decoration: none;
transition: background .12s ease, color .12s ease;
}
.pb-toolbar__clear:hover { background: rgba(7,31,77,.08); color: var(--c-text-primary); }
/* ---------- pb-pager ----------------------------------------------------- */
.pb-pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: 12px 4px 4px;
margin-top: 8px;
border-top: 1px solid var(--p-line-navy-10);
}
.pb-pager__info {
color: var(--c-text-secondary);
font-size: .85rem;
}
.pb-pager__list {
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
gap: 4px;
}
.pb-pager__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 10px;
border-radius: 8px;
border: 1px solid var(--p-line-navy-10);
background: var(--p-white);
color: var(--c-text-primary);
font-size: .85rem;
font-weight: 500;
text-decoration: none;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pb-pager__btn:hover { background: rgba(37, 99, 235,.06); border-color: rgba(37, 99, 235,.35); color: var(--c-brand); }
.pb-pager__btn.is-active {
background: var(--p-gradient-cta);
color: var(--c-text-on-brand);
border-color: transparent;
}
.pb-pager__btn.is-disabled {
opacity: .45;
pointer-events: none;
}
/* „…" razmak u prozorskom pageru (neinteraktivan) */
.pb-pager__gap {
display: inline-flex;
align-items: flex-end;
justify-content: center;
min-width: 18px;
height: 32px;
color: var(--c-text-secondary);
font-size: .85rem;
user-select: none;
}
/* Mobilni: ako i pored prozora ima previše stavki, dozvoli prelom u red
(nikad horizontalni scroll van ekrana). */
@media (max-width: 560px) {
.pb-pager__list { flex-wrap: wrap; justify-content: center; }
}
.pb-empty--inline {
padding: 1.5rem 1rem;
text-align: center;
}
/* ---------- pb-console --------------------------------------------------- */
/* Izvor: .console iz /pocetna. Unified glassy panel sa gradient border-om. */
.pb-console {
position: relative;
margin: 0 0 28px;
padding: 22px 26px 10px;
border-radius: 22px;
background:
linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,251,255,.92) 100%) padding-box,
linear-gradient(160deg, rgba(255,255,255,1), rgba(180,205,255,.5), rgba(255,255,255,.85)) border-box;
border: 1.5px solid transparent;
box-shadow: var(--p-shadow-console);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
}
.pb-console__divider {
height: 1px;
background: linear-gradient(90deg, rgba(7,31,77,0) 0%, rgba(7,31,77,.10) 20%, rgba(7,31,77,.10) 80%, rgba(7,31,77,0) 100%);
margin: 0 -10px;
}
/* ---------- pb-metric-row ----------------------------------------------- */
/* Izvor: .console-top + .metric iz /pocetna. Horizontalne metrike sa hairline separatorima. */
.pb-metric-row {
display: grid;
grid-template-columns: 1fr 1px 1fr 1px 1fr;
align-items: stretch;
gap: 0;
padding: 6px 4px 18px;
}
/* Varijanta sa 4 metrike (1 1 1 1 + 3 separatora) */
.pb-metric-row--4 {
grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
}
.pb-metric {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 18px;
text-decoration: none;
color: inherit;
background: transparent;
border: 0;
border-radius: 12px;
box-shadow: none;
transition: background .15s ease;
}
.pb-metric:hover { background: var(--c-row-hover-soft); }
.pb-metric__label {
font-family: var(--p-font-text);
font-size: .7rem;
font-weight: var(--p-fw-semibold);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--c-text-subtle);
}
.pb-metric__value {
font-family: var(--p-font-display);
font-size: 1.7rem;
font-weight: 650;
letter-spacing: -0.03em;
color: var(--c-text-strong);
line-height: 1.1;
}
.pb-metric__unit {
font-size: .9rem;
font-weight: 500;
color: var(--c-text-subtle);
margin-left: 4px;
}
.pb-metric__meta { font-size: .82rem; color: var(--c-text-secondary); }
.pb-metric__sep {
display: block;
align-self: stretch;
width: 1px;
background: linear-gradient(180deg, rgba(7,31,77,0) 0%, rgba(7,31,77,.10) 50%, rgba(7,31,77,0) 100%);
}
.pb-metric--warn .pb-metric__value { color: var(--c-state-warn-text); }
.pb-metric--warn .pb-metric__value .pb-metric__unit { color: var(--c-state-warn-icon); }
/* ---------- pb-action-row ----------------------------------------------- */
/* Izvor: .console-actions + .action iz /pocetna. Akcije kao redovi sa outline ikonom. */
.pb-action-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
padding: 12px 0 6px;
}
.pb-action {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: background .15s ease, transform .15s ease;
}
.pb-action:hover { background: var(--c-row-hover-medium); }
.pb-action__ico {
flex: 0 0 auto;
width: 38px; height: 38px;
border-radius: 11px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1.5px solid var(--c-border-brand);
color: var(--c-brand);
transition: border-color .15s ease, background .15s ease;
}
.pb-action__ico svg { width: 18px; height: 18px; }
.pb-action:hover .pb-action__ico {
border-color: rgba(37, 99, 235,.5);
background: rgba(255,255,255,.7);
}
.pb-action__body {
display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.pb-action__title {
font-family: var(--p-font-display);
font-size: .98rem;
font-weight: 650;
letter-spacing: -0.015em;
color: var(--c-text-strong);
}
.pb-action__sub {
font-size: .82rem;
color: var(--c-text-secondary);
line-height: 1.4;
}
.pb-action__arrow {
flex: 0 0 auto;
color: var(--c-text-faint);
transition: transform .15s ease, color .15s ease;
}
.pb-action__arrow svg { width: 16px; height: 16px; display: block; }
.pb-action:hover .pb-action__arrow { transform: translateX(2px); color: var(--c-brand); }
/* Responsive za console/metric/action */
@media (max-width: 980px) {
.pb-console { padding: 18px 16px 8px; border-radius: 18px; }
.pb-metric-row { grid-template-columns: 1fr; gap: 0; padding: 4px 0 10px; }
.pb-metric__sep { display: none; }
.pb-metric { padding: 12px 6px; border-bottom: 1px solid rgba(7,31,77,.06); }
.pb-metric:last-of-type { border-bottom: 0; }
.pb-action-row { grid-template-columns: 1fr; }
.pb-action { padding: 12px 8px; }
}
/* ============================================================================
Reduced motion — globalni "kill switch" za primitive sa transformacijama
============================================================================ */
@media (prefers-reduced-motion: reduce) {
.pb-cta-pill,
.pb-tab--cta,
.pb-icon-outline,
.pb-action,
.pb-action__arrow,
.pb-search-pill,
.pb-search-pill__go,
.pb-table tbody tr,
.pb-metric {
transition: none;
}
.pb-cta-pill:hover,
.pb-tab--cta:hover,
.pb-search-pill__go:hover,
.pb-action:hover .pb-action__arrow {
transform: none;
}
}
/* ============================================================================
pb-panel � generic glass surface sa head-om i opcionim toolbar-om
Izvor: .mon-panel (monitoring), .console (pocetna), legal results header.
============================================================================ */
.pb-panel {
position: relative;
background: var(--c-surface-glass-2);
border: 1px solid var(--c-border-hairline);
border-radius: var(--p-radius-2xl);
box-shadow: var(--p-shadow-glass);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.pb-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
border-bottom: 1px solid var(--c-border-divider-soft);
}
.pb-panel__head-titles { min-width: 0; }
.pb-panel__title {
font-family: var(--p-font-display);
font-size: 1rem;
font-weight: 650;
letter-spacing: -0.015em;
color: var(--c-text-strong);
margin: 0;
}
.pb-panel__sub {
font-size: .82rem;
color: var(--c-text-secondary);
margin-top: 2px;
}
.pb-panel__tools { display: flex; align-items: center; gap: 10px; }
.pb-panel__body { padding: 6px 6px 8px; }
/* ============================================================================
pb-empty � empty state u panelu (ikona + naslov + opis + CTA)
Izvor: .mon-empty, .leg-empty
============================================================================ */
.pb-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 56px 24px;
color: var(--c-text-secondary);
}
.pb-empty__ico {
width: 56px; height: 56px;
border-radius: 16px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1.5px solid var(--c-border-brand);
color: var(--c-brand);
margin-bottom: 16px;
}
.pb-empty__ico svg { width: 26px; height: 26px; }
.pb-empty__title {
font-family: var(--p-font-display);
color: var(--c-text-strong);
font-weight: 650;
letter-spacing: -0.02em;
font-size: 1.05rem;
margin: 0 0 6px;
}
.pb-empty__text {
color: var(--c-text-secondary);
margin: 0 auto 18px;
max-width: 420px;
font-size: .9rem;
line-height: 1.55;
}
.pb-empty__cta { /* nasledjuje izgled od .btn-primary; klasa je marker */ }
/* ============================================================================
pb-chat � AI chat module (reused za Pitaj zakon, AI Asistent, itd.)
Markup:
============================================================================ */
.pb-chat {
position: relative;
display: flex;
flex-direction: column;
min-height: 640px;
background:
linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
border: 1px solid var(--c-border-hairline, var(--c-border-subtle));
border-radius: 20px;
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 30px 60px -30px rgba(7,31,77,.18),
0 2px 8px rgba(15,23,42,.04);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
overflow: hidden;
}
.pb-chat__thread {
display: flex;
flex-direction: column;
gap: 14px;
flex: 1 1 auto;
padding: 28px 28px 12px;
overflow-y: auto;
scroll-behavior: smooth;
}
.pb-chat__thread::-webkit-scrollbar { width: 8px; }
.pb-chat__thread::-webkit-scrollbar-thumb {
background: rgba(15,23,42,.12);
border-radius: 8px;
}
.pb-chat__thread::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.2); }
/* --- Message bubble --- */
.pb-chat-msg {
position: relative;
border-radius: 16px;
padding: 14px 18px;
font-size: 14px;
line-height: 1.6;
color: var(--c-text-primary);
}
.pb-chat-msg__head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.pb-chat-msg__author {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--c-text-secondary);
}
.pb-chat-msg__body { font-size: 14px; line-height: 1.6; }
.pb-chat-msg__body p { margin: 0 0 8px; }
.pb-chat-msg__body p:last-child { margin-bottom: 0; }
/* User bubble � align desno, brand tint */
.pb-chat-msg--user {
align-self: flex-end;
max-width: min(640px, 78%);
background: linear-gradient(180deg, #eaf0ff, #dde6ff);
border: 1px solid rgba(37, 99, 235,.18);
color: var(--c-text-primary);
box-shadow: 0 4px 14px -6px rgba(37, 99, 235,.25);
}
.pb-chat-msg--user .pb-chat-msg__author { color: var(--c-brand); }
.pb-chat-msg--user .pb-chat-msg__body { font-weight: 500; color: var(--c-text-primary); }
/* AI bubble � align levo, �ist beli card */
.pb-chat-msg--ai {
align-self: flex-start;
max-width: min(820px, 92%);
background: var(--p-white);
border: 1px solid var(--c-border-hairline, var(--c-border-subtle));
box-shadow: 0 2px 6px rgba(15,23,42,.04);
}
/* Sekcije unutar AI poruke */
.pb-chat-section {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--c-border-divider-soft, #eef0f4);
}
.pb-chat-section__title {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--c-text-secondary);
margin-bottom: 8px;
}
.pb-chat-section__desc {
margin: 0 0 10px;
font-size: 13px; color: var(--c-text-on-tint, var(--p-slate-500));
line-height: 1.55;
}
/* Article/reference card unutar chat odgovora */
.pb-chat-ref {
background: var(--p-white);
border: 1px solid var(--c-border-hairline, var(--c-border-subtle));
border-radius: 12px;
padding: 10px 12px;
margin-bottom: 8px;
}
.pb-chat-ref:last-child { margin-bottom: 0; }
.pb-chat-ref__head {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
font-size: 13px; color: var(--c-text-primary); margin-bottom: 4px;
}
.pb-chat-ref__head strong { font-weight: 700; }
.pb-chat-ref__sub { color: var(--c-text-secondary); font-weight: 500; }
.pb-chat-ref__body {
margin: 0 0 8px;
font-size: 13px; line-height: 1.55;
color: var(--c-text-on-tint, var(--p-slate-600));
}
/* Note ispod glavnog odgovora */
.pb-chat-note {
margin: 10px 0 0;
font-size: 11.5px;
color: var(--c-text-secondary);
}
/* --- Composer (ukotvljen u dnu pb-chat kontejnera) --- */
.pb-chat__composer {
position: sticky;
bottom: 0;
z-index: 5;
padding: 14px 20px 16px;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 28%, var(--p-white) 100%);
border-top: 1px solid var(--c-border-hairline, #eef0f4);
}
.pb-chat__pill {
box-shadow:
0 10px 24px -10px rgba(7,31,77,.18),
0 1px 3px rgba(15,23,42,.06);
}
.pb-chat__hint {
margin: 8px 4px 0;
font-size: 11.5px;
color: var(--c-text-secondary);
}
/* Empty state � centrirana airy varijanta, BEZ kartice */
.pb-chat__empty {
align-self: center;
margin: auto;
max-width: 520px;
padding: 32px 24px;
text-align: center;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.pb-chat__empty .pb-empty__ico {
width: 56px; height: 56px;
margin: 0 auto 14px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 16px;
background: linear-gradient(180deg, #eaf0ff, #dde6ff);
color: var(--c-brand);
box-shadow: 0 6px 18px -8px rgba(37, 99, 235,.35);
}
.pb-chat__empty .pb-empty__title {
margin: 0 0 6px;
font-size: 17px; font-weight: 700;
color: var(--c-text-primary);
}
.pb-chat__empty .pb-empty__text {
margin: 0;
font-size: 13.5px; line-height: 1.6;
color: var(--c-text-secondary);
}
.pb-chat-suggest-row {
display: flex; flex-wrap: wrap; justify-content: center;
align-items: center; gap: 8px;
margin-top: 20px;
}
.pb-chat-suggest-row__label {
font-size: 12px; font-weight: 600;
color: var(--c-text-secondary);
}
/* Loading overlay (reused od /dokumenti) */
.pb-chat-loading {
position: fixed; inset: 0;
background: rgba(15, 23, 42, .35);
backdrop-filter: blur(2px);
display: flex; align-items: center; justify-content: center;
z-index: 9999;
}
.pb-chat-loading[hidden] { display: none; }
.pb-chat-loading__card {
padding: 18px 22px;
display: flex; align-items: center; gap: 14px;
max-width: 360px;
background: var(--p-white);
border-radius: var(--p-radius-2xl, 18px);
box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
border: 1px solid var(--c-border-hairline, var(--c-border-subtle));
}
.pb-chat-loading__text { display: flex; flex-direction: column; gap: 2px; }
.pb-chat-loading__text strong { font-size: 14px; color: var(--c-text-primary); }
.pb-chat-loading__hint { font-size: 12px; color: var(--c-text-secondary); }
.pb-chat-spinner {
width: 26px; height: 26px;
border: 3px solid var(--c-border-subtle);
border-top-color: var(--c-brand);
border-radius: 50%;
animation: pb-chat-spin .8s linear infinite;
flex: 0 0 auto;
}
@keyframes pb-chat-spin { to { transform: rotate(360deg); } }
/* =====================================================================
pb-kpi-bar � kompaktni glassy KPI bar sa 4 metrike u redu.
Izvor: /propisi. Markup koristi nasledjene mon-* klase
(mon-metric-grid > mon-metric.{blue|mint|peach|lilac} > .m-ico/.m-num/.m-lab).
Klase su zadrzane radi kompatibilnosti dok ne pretvorimo markup u pb-* nazive.
===================================================================== */
.mon-metric-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 0 !important;
margin: 0 0 20px !important;
padding: 12px 8px !important;
border-radius: 18px !important;
background: rgba(255,255,255,.92) !important;
border: 1px solid var(--c-border-hairline) !important;
box-shadow:
0 1px 0 rgba(255,255,255,1) inset,
0 18px 40px -28px rgba(7,31,77,.16),
0 6px 16px -14px rgba(37, 99, 235,.08) !important;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.mon-metric {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 4px 16px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
border-radius: 0 !important;
position: relative;
}
.mon-metric + .mon-metric::before {
content: "";
position: absolute;
left: 0; top: 18%;
width: 1px; height: 64%;
background: linear-gradient(180deg, rgba(7,31,77,0) 0%, rgba(7,31,77,.10) 50%, rgba(7,31,77,0) 100%);
}
.mon-metric .m-ico,
.mon-metric.blue .m-ico,
.mon-metric.mint .m-ico,
.mon-metric.peach .m-ico,
.mon-metric.lilac .m-ico {
flex: 0 0 auto;
width: 32px !important; height: 32px !important;
border-radius: 9px !important;
display: inline-flex; align-items: center; justify-content: center;
background: transparent !important;
border: 1.5px solid rgba(37, 99, 235,.22) !important;
color: var(--c-brand) !important;
box-shadow: none !important;
}
.mon-metric .m-ico svg { width: 14px; height: 14px; stroke-width: 1.6; }
.mon-metric .m-num {
font-family: var(--p-font-display) !important;
font-weight: 700 !important;
letter-spacing: -0.03em !important;
font-size: 1.35rem !important;
color: var(--c-text-strong) !important;
line-height: 1.05 !important;
}
.mon-metric .m-lab {
font-size: .62rem !important;
text-transform: uppercase;
letter-spacing: .09em;
color: var(--c-text-subtle) !important;
font-weight: 600 !important;
margin-top: 3px;
}
@media (max-width: 720px) {
.mon-metric-grid { grid-template-columns: 1fr !important; padding: 12px 14px; }
.mon-metric:not(:last-child) {
background: transparent !important;
border-bottom: 1px solid var(--c-border-hairline) !important;
border-right: 0 !important;
padding-bottom: 12px !important;
}
.mon-metric + .mon-metric::before { display: none; }
}
/* 5-kolonska varijanta KPI bara (izvor: /admin/ai-potrosnja). */
.mon-metric-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) {
.mon-metric-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
.mon-metric-grid--5 { grid-template-columns: 1fr !important; }
}
/* Opcioni meta red ispod m-num (mali sub-text). Koristi se kad KPI vrednost
ima dodatno obja�njenje (npr. �N aktivnih korisnika"). */
.mon-metric .m-meta {
font-size: 11px;
color: var(--c-text-secondary);
margin-top: 4px;
line-height: 1.3;
}
/* =====================================================================
pb-suggest-grid � klikabilne suggestion kartice (AI prompts, primeri)
===================================================================== */
.pb-suggest-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--c-text-faint);
margin: 18px 0 10px;
}
.pb-suggest-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.pb-suggest {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
background: rgba(255,255,255,.7);
border: 1px solid var(--c-border-divider-soft);
border-radius: 12px;
color: var(--c-text-primary);
text-decoration: none;
transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pb-suggest:hover {
background: var(--p-white);
border-color: var(--c-border-brand);
transform: translateY(-1px);
box-shadow: 0 6px 16px -10px rgba(7,31,77,.18);
}
.pb-suggest__cat {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--c-brand);
}
.pb-suggest__q {
font-size: 13.5px;
font-weight: 500;
color: var(--c-text-strong);
line-height: 1.4;
}
@media (max-width: 1100px) { .pb-suggest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .pb-suggest-grid { grid-template-columns: 1fr; } }
/* =====================================================================
pb-steps � numerisani 3-koraka info row (how it works)
===================================================================== */
.pb-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.pb-step {
background: var(--p-white);
border: 1px solid var(--c-border-divider-soft);
border-radius: 14px;
padding: 20px;
min-width: 0;
}
.pb-step__num {
display: inline-grid;
place-items: center;
width: 36px; height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(37, 99, 235,.12), rgba(124,58,237,.10));
color: var(--c-brand);
font-weight: 700;
font-size: 13px;
margin-bottom: 12px;
}
.pb-step__title {
margin: 0 0 6px;
font-family: var(--p-font-display);
font-size: 15px;
font-weight: 650;
letter-spacing: -0.015em;
color: var(--c-text-strong);
}
.pb-step__text {
margin: 0;
font-size: 13px;
color: var(--c-text-secondary);
line-height: 1.55;
}
@media (max-width: 900px) { .pb-steps { grid-template-columns: 1fr; } }
/* ============================================================================
pb-panel � promoted helpers (kicker, note, foot) + padded modifier
Izvor: /nalog, /Account/Team. Pre ovog koraka su zivele page-local.
============================================================================ */
.pb-panel--padded { padding: 20px 22px; }
/* Kada panel ima sopstveni padding, head ne treba duplo inset / divider. */
.pb-panel--padded > .pb-panel__head {
padding: 0;
border-bottom: 0;
margin-bottom: 14px;
align-items: flex-start;
flex-wrap: wrap;
gap: 10px 14px;
}
.pb-panel--padded > .pb-panel__head > div:first-child { min-width: 0; flex: 1 1 auto; }
.pb-panel__kicker {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--c-text-secondary);
margin-bottom: 4px;
}
.pb-panel__note { margin: 4px 0 0; font-size: 12.5px; color: var(--c-text-secondary); }
.pb-panel__foot { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* ============================================================================
pb-pill__dot � bullet ispred teksta u .pb-pill (status indikatori)
============================================================================ */
.pb-pill__dot {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor; display: inline-block; margin-right: 4px;
}
/* ============================================================================
pb-usage � usage bar (label + value + progress)
Izvor: /nalog (protok perioda, AI krediti), /Account/Team (mesta u paketu)
============================================================================ */
.pb-usage { margin-top: 4px; }
.pb-usage__row {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 6px;
}
.pb-usage__lab { font-size: 12px; font-weight: 600; color: var(--c-text-secondary); }
.pb-usage__val { font-size: 13px; font-weight: 600; color: var(--c-text-strong); }
.pb-usage__muted { color: var(--c-text-secondary); font-weight: 500; }
.pb-usage__bar {
height: 8px; border-radius: 999px;
background: #eef2f6; overflow: hidden;
}
.pb-usage__bar > span {
display: block; height: 100%; border-radius: 999px;
transition: width .3s ease;
}
.pb-usage__bar .is-ok { background: linear-gradient(90deg, var(--c-success), var(--c-success)); }
.pb-usage__bar .is-warn { background: linear-gradient(90deg, var(--c-state-warn), var(--c-state-warn)); }
.pb-usage__bar .is-danger { background: linear-gradient(90deg, var(--c-danger), var(--c-danger-strong)); }
/* ============================================================================
pb-account-profile � header strip sa avatarom, identitetom i akcijom
Izvor: /nalog
============================================================================ */
.pb-account-profile { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pb-account-avatar {
flex: 0 0 auto;
width: 56px; height: 56px;
border-radius: 16px;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 18px; letter-spacing: .02em;
color: var(--p-white);
background: linear-gradient(135deg, var(--c-brand), var(--c-accent-indigo));
box-shadow: 0 6px 18px -8px rgba(37, 99, 235,.45);
}
.pb-account-profile__body { flex: 1 1 auto; min-width: 200px; }
.pb-account-profile__name { font-size: 18px; font-weight: 700; color: var(--c-text-strong); }
.pb-account-profile__email { font-size: 13px; color: var(--c-text-secondary); margin-top: 2px; }
.pb-account-profile__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pb-account-profile__action { margin-left: auto; }
/* ============================================================================
pb-kv-grid � kompaktna 2-kolona key/value lista u panelu
Izvor: /nalog (pretplata)
============================================================================ */
.pb-kv-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 24px;
margin: 4px 0 14px;
}
.pb-kv-grid > div { display: flex; flex-direction: column; gap: 2px; }
.pb-kv-grid dt {
font-size: 11.5px; font-weight: 600; margin: 0;
text-transform: uppercase; letter-spacing: .06em;
color: var(--c-text-secondary);
}
.pb-kv-grid dd { margin: 0; font-size: 13.5px; color: var(--c-text-strong); }
/* ============================================================================
pb-contact � lista kontakt linkova sa ikonom u soft tile-u
Izvor: /nalog (Korisnicka podrska)
============================================================================ */
.pb-contact { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 12px; }
.pb-contact li { display: flex; align-items: center; gap: 12px; }
.pb-contact__ico {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
background: #eef4ff; color: var(--c-brand);
flex: 0 0 auto;
}
.pb-contact__lab { display: block; font-size: 11.5px; color: var(--c-text-secondary); }
.pb-contact a { font-size: 14px; font-weight: 600; color: var(--c-text-strong); text-decoration: none; }
.pb-contact a:hover { color: var(--c-brand); }
/* ============================================================================
pb-activity � vertikalna lista nedavnih aktivnosti (naslov + sub + pill)
Izvor: /nalog (Poslednja AI potrosnja)
============================================================================ */
.pb-activity { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.pb-activity__row {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--c-border-divider-soft);
}
.pb-activity__row:last-child { border-bottom: 0; }
.pb-activity__main { min-width: 0; }
.pb-activity__title { font-size: 13.5px; font-weight: 600; color: var(--c-text-strong); }
.pb-activity__sub { font-size: 11.5px; color: var(--c-text-secondary); margin-top: 2px; }
/* ============================================================================
pb-form / pb-field / pb-input � forme unutar panela
Izvor: /Account/Team
============================================================================ */
.pb-form { display: flex; flex-direction: column; gap: 10px; }
.pb-field { display: flex; flex-direction: column; gap: 4px; }
.pb-field__lab {
font-size: 11.5px; font-weight: 600; color: var(--c-text-secondary);
text-transform: uppercase; letter-spacing: .06em;
}
.pb-input {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--c-border-hairline);
border-radius: 10px;
padding: 9px 12px;
font-size: 14px;
background: var(--p-white);
color: var(--c-text-strong);
outline: none;
font-family: inherit;
transition: border-color .15s ease, box-shadow .15s ease;
}
.pb-input:focus {
border-color: var(--c-brand);
box-shadow: 0 0 0 3px var(--c-focus-ring);
}
textarea.pb-input { resize: vertical; min-height: 64px; line-height: 1.5; }
select.pb-input { appearance: auto; }
/* 12-kolonski grid forme unutar pb-panel--padded.
Izvor: /Admin/PlanEdit (originalno .plan-edit-grid). Polja koriste
.pb-field--span-N da zauzmu N od 12 kolona; default je puna �irina. */
.pb-form-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 14px;
margin-top: 8px;
}
.pb-form-grid > .pb-field { grid-column: span 12; }
.pb-field--span-3 { grid-column: span 3 !important; }
.pb-field--span-4 { grid-column: span 4 !important; }
.pb-field--span-5 { grid-column: span 5 !important; }
.pb-field--span-6 { grid-column: span 6 !important; }
.pb-field--span-12 { grid-column: span 12 !important; }
/* Vertikalni stek panela na admin/edit stranicama. */
.pb-form-stack { display: flex; flex-direction: column; gap: 18px; }
/* checkbox row */
.pb-check {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px; color: var(--c-text-strong);
}
.pb-check input[type="checkbox"] { accent-color: var(--c-brand); }
/* validation error tekst ispod inputa */
.pb-field__error { color: var(--c-danger-strong); font-size: 12px; font-weight: 500; }
/* footer dugmadi forme */
.pb-form-actions {
display: flex; justify-content: flex-end; gap: 10px;
margin: 14px 0 6px;
}
.pb-form-actions__spacer { flex: 1; }
@media (max-width: 720px) {
.pb-field--span-3,
.pb-field--span-4,
.pb-field--span-5,
.pb-field--span-6 { grid-column: span 12 !important; }
}
.pb-cta-pill[disabled],
.pb-cta-pill:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
/* ============================================================================
pb-flash � inline stranice-level notifikacije
============================================================================ */
.pb-flash {
display: flex; justify-content: space-between; align-items: center; gap: 14px;
padding: 12px 16px; border-radius: 12px;
font-size: 13.5px;
margin-bottom: 16px;
}
.pb-flash--danger { background: var(--c-danger-soft); border: 1px solid var(--c-danger-line); color: var(--c-danger-deep); }
.pb-flash--success { background: var(--c-success-soft); border: 1px solid var(--c-success-line); color: var(--c-success-deep); }
.pb-flash--info { background: var(--c-brand-surface); border: 1px solid var(--c-brand-200); color: var(--p-brand-800); }
.pb-flash--warn { background: var(--c-warn-surface); border: 1px solid var(--c-state-warn-soft); color: var(--c-warn-deep); }
/* Validation summary i prazni flash-evi ne prave vizuelni šum (nasleđeno iz pb-alert). */
.pb-flash:empty { display: none; }
.pb-flash ul { margin: 4px 0 0; padding-left: 18px; }
/* ============================================================================
Helper utility klase (typography / inline forms / link-danger / mono)
============================================================================ */
.pb-text-right { text-align: right; }
.pb-text-center { text-align: center; }
/* Pojacaj specificnost da pobedi .pb-table thead th (koje ima text-align: left). */
.pb-table thead th.pb-text-right,
.pb-table tbody td.pb-text-right { text-align: right; }
.pb-table thead th.pb-text-center,
.pb-table tbody td.pb-text-center { text-align: center; }
/* ============================================================================
Unified content table (.pb-cr-table) � koristi se i na /dokumenti i /analiza-ugovora.
Naslov sa meta-redom, kategorija (pill), brojcana metrika, status (pill), akcije.
============================================================================ */
.pb-cr-table th,
.pb-cr-table td { vertical-align: middle; }
@media (max-width: 880px) {
.pb-cr-table thead { display: none; }
.pb-cr-table tr {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--c-border-hairline);
}
.pb-cr-table td { padding: 0; border: 0; }
.pb-cr-table td:nth-child(1) { grid-column: 1 / -1; }
.pb-cr-table td:nth-child(5) {
grid-column: 2;
grid-row: 1;
justify-self: end;
}
}
.pb-text-muted { color: var(--c-text-secondary); }
.pb-text-warn { color: var(--c-state-warn-strong); font-weight: 600; }
.pb-mono {
font-variant-numeric: tabular-nums;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12.5px;
}
.pb-inline-form { display: inline; }
.pb-link-danger {
background: transparent; border: 0; padding: 0;
color: var(--c-danger-strong); font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.pb-link-danger:hover { text-decoration: underline; }
/* Empty CTA: dopuna primitive-a `.pb-empty` � actions row */
.pb-empty__actions {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
margin-top: 14px;
}
/* ============================================================================
pb-ai-tier � Tier kartica za grupisanje stavki sa varijabilnom �te�inom".
Koristi se npr. na /pricing (AI krediti po akciji: lake / standardne /
kompleksne), ali je dovoljno generi�ka da pokrije bilo koji tier-prikaz
sa naslovom, opsegom i listom ime?vrednost.
============================================================================ */
.pb-ai-tier {
border: 1px solid var(--c-border-hairline);
border-radius: 12px;
background: var(--p-white);
padding: 14px 16px;
display: flex; flex-direction: column; gap: 10px;
}
.pb-ai-tier__head { display: flex; align-items: center; gap: 10px; }
.pb-ai-tier__dot {
width: 10px; height: 10px; border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}
.pb-ai-tier__dot--ok { background: var(--c-state-good); }
.pb-ai-tier__dot--mid { background: var(--c-state-warn); }
.pb-ai-tier__dot--heavy { background: var(--c-state-alert); }
.pb-ai-tier__title {
font-size: 14px; font-weight: 700;
color: var(--c-text-primary); line-height: 1.2;
}
.pb-ai-tier__sub {
font-size: 12px; color: var(--c-text-secondary); margin-top: 1px;
}
.pb-ai-tier__list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column;
}
.pb-ai-tier__list li {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 8px 0;
border-top: 1px dashed var(--c-border-hairline);
font-size: 13.5px;
color: var(--p-slate-600);
}
.pb-ai-tier__list li:first-child { border-top: 0; }
.pb-ai-tier__name { font-weight: 500; }
.pb-ai-tier__cost {
font-weight: 700; font-size: 13px;
color: var(--c-text-primary);
background: var(--p-slate-100);
padding: 2px 10px;
border-radius: 999px;
min-width: 36px;
text-align: center;
}
.pb-ai-tier__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
}
/* ============================================================================
pb-step-badge � numerisani �korak N" badge (za pb-panel__head--step).
Override za default pb-panel__head (justify: space-between) tako da badge
i naslovna grupa stoje zajedno levo.
Izvor: /analiza-ugovora/nova
============================================================================ */
.pb-panel__head--step {
justify-content: flex-start;
align-items: flex-start;
gap: 14px;
}
.pb-panel__head--step > div { min-width: 0; flex: 1; }
.pb-panel__head--step .pb-panel__sub { margin-top: 4px; }
.pb-step-badge {
flex: 0 0 34px;
width: 34px; height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-soft) 100%);
color: var(--p-white);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px;
box-shadow: 0 4px 12px rgba(37, 99, 235, .22);
}
/* ============================================================================
pb-dropzone � drag & drop zona za upload fajlova.
Stanja: .is-dragging (aktivan drag), .has-file (fajl izabran).
Slots: .pb-dropzone__ico, __title, __sub, __link, __file
Izvor: /analiza-ugovora/nova, plan: /dokumenti/novi, /izrada-dokumenata
============================================================================ */
.pb-dropzone {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px;
border: 2px dashed var(--c-border-hairline);
border-radius: 14px;
background:
radial-gradient(1200px 200px at 50% -50px, rgba(37, 99, 235,.06), transparent 60%),
var(--p-slate-100);
padding: 32px 22px;
text-align: center;
cursor: pointer;
transition: border-color .15s ease, background .15s ease, transform .15s ease;
min-height: 200px;
}
.pb-dropzone:hover { border-color: var(--c-brand); }
.pb-dropzone.is-dragging {
border-color: var(--c-brand);
transform: scale(1.005);
}
.pb-dropzone.has-file {
border-style: solid;
border-color: var(--c-brand-200);
background: var(--c-brand-surface);
}
.pb-dropzone.has-file .pb-dropzone__ico {
background: var(--p-white);
color: var(--c-brand);
box-shadow: 0 0 0 1px var(--c-brand-100);
}
.pb-dropzone__ico {
width: 54px; height: 54px;
border-radius: 14px;
background: var(--p-white);
color: var(--c-brand);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 6px 18px rgba(37, 99, 235, .14);
margin-bottom: 4px;
}
.pb-dropzone__ico svg { width: 26px; height: 26px; }
.pb-dropzone__title { font-weight: 600; font-size: 15px; color: var(--c-text-primary); }
.pb-dropzone__sub { color: var(--c-text-secondary); font-size: 13px; }
.pb-dropzone__link { color: var(--c-brand); font-weight: 600; }
.pb-dropzone__file {
margin-top: 8px; font-size: 13px;
color: var(--c-brand-strong); font-weight: 500;
}
/* ============================================================================
pb-overlay � modalni overlay za long-running AI/IO operacije.
Sadr�i pb-spinner (rotiraju�i SVG ring), pb-progress--indeterminate bar
i pb-steps--progress listu (upload ? extract ? analyze ? findings).
Stanja: .pb-steps--progress li.is-active, .is-done
Izvor: /analiza-ugovora/nova; plan: /dokumenti/novi, /izrada-dokumenata.
============================================================================ */
body.pb-overlay-locked { overflow: hidden; }
.pb-overlay[hidden] { display: none !important; }
/* Dupla klasa za vecu specificnost � nadjacava `.workspace > * { position: relative; z-index: 1; }`
iz app.css koje bi inace srusilo fixed pozicioniranje overlay-a. */
.pb-overlay.pb-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 42, .55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
z-index: 9999;
animation: pb-overlay-fade .2s ease;
}
@keyframes pb-overlay-fade { from { opacity: 0 } to { opacity: 1 } }
.pb-overlay__card {
background: var(--p-white);
border-radius: 18px;
padding: 28px 32px;
width: min(460px, 92vw);
box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
text-align: center;
}
.pb-overlay__card h3 {
margin: 12px 0 4px; font-size: 16px;
color: var(--c-text-primary);
}
.pb-overlay__card .pb-text-muted { margin: 0; }
.pb-overlay__hint { font-size: 12px; margin-top: 6px; }
/* Spinner */
.pb-spinner { width: 56px; height: 56px; margin: 0 auto; }
.pb-spinner svg { animation: pb-spin-rot 1.6s linear infinite; width: 100%; height: 100%; }
.pb-spinner__path {
stroke: var(--c-brand);
stroke-dasharray: 90, 150;
stroke-dashoffset: -10;
animation: pb-spin-dash 1.4s ease-in-out infinite;
}
@keyframes pb-spin-rot { 100% { transform: rotate(360deg); } }
@keyframes pb-spin-dash {
0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
/* Steps lista (vertikalna, sa stanjima) */
.pb-steps--progress {
list-style: none; padding: 0; margin: 18px 0 10px;
text-align: left;
display: flex; flex-direction: column; gap: 7px;
}
.pb-steps--progress li {
display: flex; align-items: center; gap: 10px;
color: var(--c-text-secondary);
font-size: 13.5px;
transition: color .2s ease;
}
.pb-steps--progress li .pb-steps__dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--c-border-hairline);
transition: background .2s ease, box-shadow .2s ease;
}
.pb-steps--progress li.is-active {
color: var(--c-text-primary); font-weight: 600;
}
.pb-steps--progress li.is-active .pb-steps__dot {
background: var(--c-brand);
animation: pb-steps-pulse 1.2s ease-in-out infinite;
}
.pb-steps--progress li.is-done { color: var(--c-state-good-strong); }
.pb-steps--progress li.is-done .pb-steps__dot { background: var(--c-state-good-strong); }
@keyframes pb-steps-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235,.45); }
50% { box-shadow: 0 0 0 6px rgba(37, 99, 235,0); }
}
/* Indeterminate progress bar */
.pb-progress {
height: 6px; background: var(--c-border-hairline); border-radius: 999px;
overflow: hidden; margin: 12px 0 6px;
}
.pb-progress__bar {
height: 100%;
width: 35%;
background: linear-gradient(90deg, var(--c-brand), var(--c-brand-soft));
border-radius: 999px;
}
.pb-progress--indeterminate .pb-progress__bar {
animation: pb-progress-slide 1.4s ease-in-out infinite;
}
@keyframes pb-progress-slide {
0% { margin-left: -35%; }
100% { margin-left: 100%; }
}
.pb-cta-pill.is-loading { opacity: .7; cursor: progress; }
/* ============================================================================
App confirm dialog � preme�teno iz inline |