/* ==========================================================================
   FoxIT Fakture — stil aplikacije

   Vodilja: knjigovodstveni tefter. Topao papirni ton umesto hladno belog,
   mastilo-plava preuzeta iz PDF-a računa, vlasaste linije umesto okvira, i
   tabelarne cifre koje se poravnavaju u koloni tako da se iznosi čitaju
   odozgo naniže bez napora.

   Fontovi se ne preuzimaju sa mreže. Constantia, Corbel i Consolas postoje
   na Windowsu i imaju pun srpski skup (č ć š ž đ), pa aplikacija izgleda isto
   i kada je veza spora ili je nema.
   ========================================================================== */

:root {
	--font-display: "Constantia", "Cambria", "Palatino Linotype", Georgia, serif;
	--font-ui: "Corbel", "Candara", "Segoe UI", system-ui, sans-serif;
	--font-num: "Cascadia Mono", "Consolas", ui-monospace, "SFMono-Regular", monospace;

	--ink: #141d2e;
	--brand: #274b7d;
	--brand-dark: #1c3960;
	--brand-tint: #eaf0f8;
	--accent: #a86a1c;
	--accent-tint: #f7efe0;

	--paper: #f6f3ed;
	--card: #fffefb;
	--sidebar: #131c2c;
	--sidebar-2: #1b2739;

	--text: #1e2733;
	--text-soft: #5c6472;
	--text-faint: #8b9099;
	--on-dark: #e8e3d9;
	--on-dark-soft: #98a2b3;

	--rule: #e3ddd1;
	--rule-strong: #cfc7b7;

	--good: #1c7a41;
	--good-tint: #e6f4ea;
	--warn: #9a6a0c;
	--warn-tint: #fbf1dc;
	--bad: #a32d28;
	--bad-tint: #fbe9e8;
	--info: #2b6ba3;
	--info-tint: #e7f0f8;
	--muted: #6f7684;
	--muted-tint: #eeece7;

	--radius: 3px;
	--radius-lg: 6px;
	--shadow-sm: 0 1px 2px rgba(20, 29, 46, .06);
	--shadow: 0 2px 8px rgba(20, 29, 46, .08), 0 1px 2px rgba(20, 29, 46, .06);
	--shadow-lg: 0 12px 40px rgba(20, 29, 46, .18);

	--sidebar-w: 232px;
	--topbar-h: 58px;
	--ease: cubic-bezier(.32, .72, 0, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #141821;
		--card: #1b202b;
		--sidebar: #0e121a;
		--sidebar-2: #171d28;

		--text: #e4e1da;
		--text-soft: #a3a8b3;
		--text-faint: #757b87;

		--rule: #2a303c;
		--rule-strong: #3a4250;

		--brand: #6f9dd6;
		--brand-dark: #86aee0;
		--brand-tint: #1c2635;
		--accent: #d19a4d;
		--accent-tint: #2a2317;

		--good: #58c184;
		--good-tint: #16281d;
		--warn: #d4a24a;
		--warn-tint: #2a2317;
		--bad: #e08a85;
		--bad-tint: #2c1a19;
		--info: #6fa8dc;
		--info-tint: #17232f;
		--muted: #8b929e;
		--muted-tint: #232833;

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
		--shadow: 0 2px 10px rgba(0, 0, 0, .45);
		--shadow-lg: 0 14px 44px rgba(0, 0, 0, .6);
	}
}

/* --------------------------------------------------------------- osnova -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--text);
	background: var(--paper);
	/* Jedva vidljiva zrnatost — papir umesto ravne boje. */
	background-image: radial-gradient(circle at 1px 1px, rgba(20, 29, 46, .022) 1px, transparent 0);
	background-size: 22px 22px;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -.01em;
	margin: 0;
	color: var(--text);
}

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

[hidden] { display: none !important; }

/* Svaki iznos i svaka šifra idu tabelarnim ciframa da se kolone poklope. */
.num, td.num, th.num, input.num {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	font-size: .93em;
	text-align: right;
	white-space: nowrap;
}

/* --------------------------------------------------------------- prijava - */

.login {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
	background:
		radial-gradient(1200px 600px at 15% -10%, rgba(39, 75, 125, .16), transparent 60%),
		radial-gradient(900px 500px at 100% 110%, rgba(168, 106, 28, .12), transparent 55%),
		var(--paper);
}

.login__panel {
	width: 100%;
	max-width: 400px;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 34px 32px 26px;
	animation: rise .5s var(--ease) both;
}

.login__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }

.login__mark, .sidebar__mark {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	flex: none;
	background: var(--brand);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .02em;
	border-radius: var(--radius);
}

.login__brand h1 { font-size: 20px; }
.login__brand p { margin: 2px 0 0; font-size: 13px; color: var(--text-soft); }

.login__form { display: grid; gap: 16px; }

.login__error {
	margin: 0;
	padding: 9px 12px;
	background: var(--bad-tint);
	color: var(--bad);
	border-left: 3px solid var(--bad);
	font-size: 13px;
	border-radius: 0 var(--radius) var(--radius) 0;
}

.login__hint {
	margin: 22px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--rule);
	font-size: 12px;
	color: var(--text-faint);
	text-align: center;
}

/* --------------------------------------------------------------- raspored */

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

.sidebar {
	width: var(--sidebar-w);
	flex: none;
	background: var(--sidebar);
	color: var(--on-dark);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
}

.sidebar__brand {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 15px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.sidebar__mark { width: 32px; height: 32px; font-size: 13px; }

.sidebar__name {
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: .01em;
}

.nav { flex: 1; overflow-y: auto; padding: 12px 10px 20px; }

.nav__group {
	display: block;
	padding: 16px 10px 6px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--on-dark-soft);
	opacity: .65;
}

.nav__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	margin-bottom: 1px;
	border-radius: var(--radius);
	color: var(--on-dark);
	font-size: 14px;
	text-decoration: none;
	transition: background .14s var(--ease), color .14s var(--ease);
	position: relative;
}

.nav__link::before {
	content: "";
	width: 6px; height: 6px;
	flex: none;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	opacity: .38;
	transition: opacity .14s, background .14s;
}

.nav__link:hover { background: var(--sidebar-2); text-decoration: none; }

.nav__link.is-active {
	background: var(--sidebar-2);
	color: #fff;
	font-weight: 600;
	box-shadow: inset 2px 0 0 var(--accent);
}

.nav__link.is-active::before { opacity: 1; background: var(--accent); border-color: var(--accent); }

.sidebar__foot {
	padding: 12px 14px;
	border-top: 1px solid rgba(255, 255, 255, .07);
	display: flex;
	align-items: center;
	gap: 10px;
}

.sidebar__user { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }

.sidebar__avatar {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	flex: none;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
}

.sidebar__username {
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--on-dark);
}

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

.topbar {
	height: var(--topbar-h);
	flex: none;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 22px;
	background: var(--card);
	border-bottom: 1px solid var(--rule);
	position: sticky;
	top: 0;
	z-index: 20;
}

.topbar__menu {
	display: none;
	background: none;
	border: 0;
	font-size: 19px;
	color: var(--text);
	cursor: pointer;
	padding: 4px 6px;
}

.topbar__title {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.topbar__actions { display: flex; align-items: center; gap: 8px; }

.view { flex: 1; padding: 22px; max-width: 1560px; width: 100%; }

/* ---------------------------------------------------------------- kartice */

.card {
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--rule);
}

.card__head h2, .card__head h3 { font-size: 15.5px; flex: 1; min-width: 0; }
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }

.stack { display: grid; gap: 18px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.spacer { flex: 1; }

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ------------------------------------------------------------- pokazatelji */

.stat {
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: 15px 17px;
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
	animation: rise .4s var(--ease) both;
}

/* Tanka traka u boji na vrhu je jedini nosilac boje — ostatak kartice ostaje miran. */
.stat::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--brand);
}
.stat--good::before { background: var(--good); }
.stat--warn::before { background: var(--warn); }
.stat--bad::before { background: var(--bad); }
.stat--muted::before { background: var(--muted); }

.stat__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 7px;
}

.stat__value {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	font-size: 23px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--text);
	line-height: 1.15;
}

.stat__value small { font-size: 13px; font-weight: 400; color: var(--text-soft); margin-left: 4px; }
.stat__sub { margin-top: 6px; font-size: 12.5px; color: var(--text-soft); }

/* ---------------------------------------------------------------- tabele -- */

/* Široke tabele se skroluju u svojoj kutiji, da strana nikad ne dobije
   vodoravni skrol. Posledica: ova kutija je sopstveni kontekst skrolovanja,
   pa zaglavlje ovde NE sme da bude position: sticky — `top` bi se merio od
   vrha kutije, a ne od vrha strane, i zaglavlje bi palo preko prvog reda. */
.table-wrap { overflow-x: auto; }

table.table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

table.table th {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .085em;
	text-transform: uppercase;
	color: var(--text-faint);
	padding: 10px 14px;
	border-bottom: 1px solid var(--rule-strong);
	white-space: nowrap;
	background: var(--card);
}

table.table th.num { text-align: right; }

table.table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--rule);
	vertical-align: middle;
}

table.table tbody tr { transition: background .12s var(--ease); }
table.table tbody tr:hover { background: var(--brand-tint); }
table.table tbody tr:last-child td { border-bottom: 0; }

table.table tbody tr.is-clickable { cursor: pointer; }

.table__primary { font-weight: 600; color: var(--text); }
.table__muted { color: var(--text-soft); font-size: 13px; }

.table__empty {
	padding: 46px 20px;
	text-align: center;
	color: var(--text-faint);
}

.table__empty strong { display: block; font-family: var(--font-display); font-size: 16px; color: var(--text-soft); margin-bottom: 5px; }

/* ---------------------------------------------------------------- oznake -- */

.pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 9px 2px 7px;
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
	background: var(--muted-tint);
	color: var(--muted);
}

.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.pill--good { background: var(--good-tint); color: var(--good); }
.pill--warn { background: var(--warn-tint); color: var(--warn); }
.pill--bad { background: var(--bad-tint); color: var(--bad); }
.pill--info { background: var(--info-tint); color: var(--info); }
.pill--neutral { background: var(--muted-tint); color: var(--muted); }
.pill--muted { background: var(--muted-tint); color: var(--text-faint); }

/* ---------------------------------------------------------------- dugmad -- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	background: var(--card);
	color: var(--text);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	white-space: nowrap;
	transition: background .14s var(--ease), border-color .14s var(--ease), transform .08s var(--ease), box-shadow .14s;
}

.btn:hover { background: var(--brand-tint); border-color: var(--brand); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn--primary {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
	box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { filter: brightness(.93); background: var(--accent); border-color: var(--accent); }

.btn--danger { color: var(--bad); border-color: var(--rule-strong); }
.btn--danger:hover { background: var(--bad-tint); border-color: var(--bad); }

.btn--ghost { background: transparent; border-color: transparent; color: inherit; font-weight: 500; }
.btn--ghost:hover { background: rgba(127, 127, 127, .14); border-color: transparent; }

.btn--small { padding: 4px 9px; font-size: 12.5px; }
.btn--block { width: 100%; }
.btn--icon { padding: 6px 8px; }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

/* --------------------------------------------------------------- obrasci -- */

.field { display: grid; gap: 5px; }

.field__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--text-soft);
}

.field__label span.req { color: var(--bad); }
.field__hint { font-size: 11.5px; color: var(--text-faint); }

input[type="text"], input[type="password"], input[type="email"], input[type="date"],
input[type="number"], input[type="search"], input[type="tel"], input[type="url"],
select, textarea {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	background: var(--card);
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.45;
	transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-tint);
}

input:disabled, select:disabled, textarea:disabled { background: var(--muted-tint); color: var(--text-faint); cursor: not-allowed; }

textarea { resize: vertical; min-height: 68px; }

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235c6472' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 11px;
	padding-right: 30px;
}

.checkbox { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 13.5px; }
.checkbox input { width: auto; margin-top: 2px; accent-color: var(--brand); }

.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-full { grid-column: 1 / -1; }

.fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.fieldset > legend {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	padding: 0 0 9px;
	margin-bottom: 14px;
	width: 100%;
	border-bottom: 1px solid var(--rule);
}

/* ------------------------------------------------------- traka sa filterima */

.toolbar {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	padding: 12px 16px;
	border-bottom: 1px solid var(--rule);
}

/* Polja u traci se šire po sadržaju. Bez ovoga `input[type="date"]` pokupi
   globalno width:100% i sam sebe gurne u nov red. */
.toolbar input, .toolbar select { width: auto; min-width: 150px; }
.toolbar input[type="date"] { min-width: 132px; }
.toolbar .search { min-width: 230px; flex: 1; max-width: 340px; }

/* Oznaka uz polje, u istom redu — za „Od" i „Do" gde sama polja ne kažu šta su. */
.inline-field { display: inline-flex; align-items: center; gap: 6px; }
.inline-field > span {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--text-soft);
	white-space: nowrap;
}

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); padding: 0 16px; overflow-x: auto; }

.tab {
	padding: 11px 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-soft);
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	transition: color .14s, border-color .14s;
}

.tab:hover { color: var(--text); }
.tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }

.pager {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	border-top: 1px solid var(--rule);
	font-size: 13px;
	color: var(--text-soft);
}

/* ------------------------------------------------- urednik stavki dokumenta */

.lines { width: 100%; border-collapse: collapse; }

.lines th {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .085em;
	text-transform: uppercase;
	color: var(--text-faint);
	padding: 8px 8px;
	border-bottom: 1px solid var(--rule-strong);
}

.lines th.num { text-align: right; }
.lines td { padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.lines input, .lines textarea, .lines select { font-size: 13.5px; padding: 6px 8px; }
.lines textarea { min-height: 34px; font-size: 13px; }

.lines .col-drag { width: 26px; padding-left: 4px; padding-right: 0; }
.lines .col-qty { width: 96px; }
.lines .col-price { width: 128px; }
.lines .col-disc { width: 78px; }
.lines .col-tax { width: 118px; }
.lines .col-total { width: 120px; }
.lines .col-del { width: 36px; }

.lines .drag {
	cursor: grab;
	color: var(--text-faint);
	user-select: none;
	line-height: 32px;
	text-align: center;
	font-size: 15px;
}
.lines tr.is-dragging { opacity: .4; }
.lines tr.is-over td { box-shadow: inset 0 2px 0 var(--brand); }

.line-total {
	display: block;
	padding-top: 8px;
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	text-align: right;
	font-weight: 600;
}

/* Zbir dokumenta — poravnat desno, sa naglašenim ukupnim iznosom. */
.totals-box { margin-left: auto; width: min(370px, 100%); }
.totals-box table { width: 100%; border-collapse: collapse; }
.totals-box td { padding: 6px 0; font-size: 14px; }
.totals-box td:first-child { color: var(--text-soft); }
.totals-box td:last-child { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.totals-box tr.grand td {
	border-top: 1px solid var(--rule-strong);
	border-bottom: 2px solid var(--brand);
	padding-top: 9px;
	padding-bottom: 9px;
	font-size: 17px;
	font-weight: 700;
	color: var(--text);
}

.totals-box tr.due td { font-weight: 700; color: var(--bad); }
.totals-box tr.paid td { color: var(--good); }

.words-line {
	margin-top: 12px;
	padding: 9px 12px;
	background: var(--accent-tint);
	border-left: 3px solid var(--accent);
	font-size: 13px;
	color: var(--text);
	border-radius: 0 var(--radius) var(--radius) 0;
}

/* ------------------------------------------------------ pregled dokumenta -- */

.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 18px; align-items: start; }

@media (max-width: 1100px) { .doc-layout { grid-template-columns: 1fr; } }

.doc-frame {
	width: 100%;
	height: 1000px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: var(--shadow);
}

.side-panel { display: grid; gap: 14px; position: sticky; top: calc(var(--topbar-h) + 18px); }

.meta-list { display: grid; gap: 0; }
.meta-list__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.meta-list__row:last-child { border-bottom: 0; }
.meta-list__key { color: var(--text-soft); }
.meta-list__val { font-weight: 600; text-align: right; }

.timeline { display: grid; gap: 0; font-size: 13px; }
.timeline__item { padding: 8px 0 8px 16px; border-left: 1px solid var(--rule); position: relative; }
.timeline__item::before {
	content: "";
	position: absolute;
	left: -4px; top: 14px;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--brand);
}
.timeline__when { color: var(--text-faint); font-size: 11.5px; }

/* ---------------------------------------------------------------- modal --- */

.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }

.modal__backdrop { position: absolute; inset: 0; background: rgba(20, 29, 46, .48); backdrop-filter: blur(2px); animation: fade .2s var(--ease); }

.modal__panel {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 40px);
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	animation: rise .26s var(--ease) both;
}

.modal__panel--wide { max-width: 760px; }

.modal__head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--rule); }
.modal__head h2 { font-size: 16.5px; flex: 1; }
.modal__close { border: 0; background: none; font-size: 15px; color: var(--text-soft); cursor: pointer; padding: 4px 6px; border-radius: var(--radius); }
.modal__close:hover { background: var(--muted-tint); color: var(--text); }
.modal__body { padding: 18px; overflow-y: auto; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------- obaveštenja */

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: grid; gap: 9px; max-width: 380px; }

.toast {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 14px;
	background: var(--card);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--brand);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	font-size: 13.5px;
	animation: slide-in .28s var(--ease) both;
}

.toast--good { border-left-color: var(--good); }
.toast--bad { border-left-color: var(--bad); }
.toast--warn { border-left-color: var(--warn); }
.toast.is-leaving { animation: fade-out .2s var(--ease) both; }

/* ------------------------------------------------------------- pomoćnici -- */

.loading { display: grid; place-items: center; padding: 60px 20px; color: var(--text-faint); gap: 12px; }

.spinner {
	width: 26px; height: 26px;
	border: 2.5px solid var(--rule-strong);
	border-top-color: var(--brand);
	border-radius: 50%;
	animation: spin .7s linear infinite;
}

.muted { color: var(--text-soft); }
.faint { color: var(--text-faint); }
.small { font-size: 12.5px; }
.strong { font-weight: 600; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.banner {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 14px;
	border-radius: var(--radius);
	font-size: 13.5px;
	border-left: 3px solid var(--info);
	background: var(--info-tint);
	color: var(--text);
}
.banner--warn { border-left-color: var(--warn); background: var(--warn-tint); }
.banner--bad { border-left-color: var(--bad); background: var(--bad-tint); }
.banner--good { border-left-color: var(--good); background: var(--good-tint); }

/* Redovi u listama ulaze u talasu — jedan pokret pri učitavanju, bez trzanja posle. */
.stagger > * { animation: rise .34s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .05s; }
.stagger > *:nth-child(3) { animation-delay: .08s; }
.stagger > *:nth-child(4) { animation-delay: .11s; }
.stagger > *:nth-child(5) { animation-delay: .14s; }
.stagger > *:nth-child(6) { animation-delay: .17s; }

@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; transform: translateX(12px); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------ uži ekrani -- */

@media (max-width: 900px) {
	.sidebar {
		position: fixed;
		z-index: 100;
		transform: translateX(-100%);
		transition: transform .24s var(--ease);
		box-shadow: var(--shadow-lg);
	}
	.sidebar.is-open { transform: none; }
	.topbar__menu { display: block; }
	.view { padding: 14px; }
	.doc-layout { grid-template-columns: 1fr; }
	.side-panel { position: static; }
}

@media print {
	.sidebar, .topbar, .toasts, .modal { display: none !important; }
	.view { padding: 0; }
	body { background: #fff; }
}