/*
 * Astro Spice — sloj kalkulatora (K2) · as-calc.css
 *
 * Forma, stanja i blokovi prikaza. Sve je pod `section.as-calc` (widget) i
 * `.as-calc-admin` (napomene koje vidi samo administrator).
 *
 * 🔒 Stanje se stilizuje isključivo kroz `data-stanje` na <section> (§15.3):
 *    ucitavanje · prazno · unos · slanje · uspeh · greska · limit · nedostupan.
 *    Delove prikazuje i skriva widget atributom `hidden`; ovde se samo
 *    obezbeđuje da ga tema ne pregazi.
 *
 * ⚠️ Fontove (Cormorant Garamond za naslove, Mulish za tekst) učitava tema,
 *    sa latin-ext podskupom — bez njega č ć š ž đ padaju na rezervni font.
 *    Ovaj fajl ne učitava nijedan spoljni resurs.
 *
 * Kontrast (WCAG 2.2 AA) proveren nad površinom #2A2A38 i pozadinom #21212B:
 *    tekst 12,9 : 1 · prigušeno 5,1 · zlatna 6,0 · tekst greške 6,1 ·
 *    ivica polja 3,4 · tamni tekst na zlatnoj 6,8 · tamni tekst na narandžastoj 4,6.
 */

/* ═══ 1. Tokeni ═══════════════════════════════════════════════════════════ */

.as-calc,
.as-calc-admin {
	--as-pozadina: #21212b;
	--as-povrsina: #2a2a38;
	--as-povrsina-svetlija: #333345;
	--as-zlatna: #c9a45e;
	--as-zlatna-svetla: #dcc08a;
	--as-narandzasta: #f84f0a;
	--as-narandzasta-svetla: #ff6a2c;
	--as-tekst: #eae7e0;
	--as-priguseno: #9a9aa5;
	/* Tekst greške: brend narandžasta posvetljena do ≥ 4,5 : 1 na obe podloge. */
	--as-greska: #ff8a5c;
	/* Ivica polja: ≥ 3 : 1 i prema površini i prema pozadini polja (WCAG 1.4.11). */
	--as-ivica: #7a7a8e;
	--as-linija: rgba(201, 164, 94, 0.3);
	--as-linija-slaba: rgba(234, 231, 224, 0.1);
	--as-font-naslov: 'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif;
	--as-font-tekst: Mulish, 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
	--as-radijus: 14px;
	--as-radijus-malo: 8px;
	--as-senka: 0 18px 48px -24px rgba(0, 0, 0, 0.65);
}

/* ═══ 2. Omotač i zaštita od teme ═════════════════════════════════════════ */

section.as-calc {
	container: as-calc / inline-size;
	color-scheme: dark;
	box-sizing: border-box;
	position: relative;
	margin: 0 0 2rem;
	padding: clamp(1.1rem, 0.6rem + 2.5vw, 2.25rem);
	border: 1px solid var(--as-linija);
	border-radius: var(--as-radijus);
	background: var(--as-povrsina);
	box-shadow: var(--as-senka);
	color: var(--as-tekst);
	font-family: var(--as-font-tekst);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	text-align: left;
	overflow-wrap: break-word;
	/* Deljeni link skroluje do kalkulatora; fiksno zaglavlje teme ne sme da ga pokrije. */
	scroll-margin-top: 6rem;
}

section.as-calc *,
section.as-calc *::before,
section.as-calc *::after {
	box-sizing: border-box;
}

/* Tema (Divi) daje marginu, padding i boju naslovima, pasusima, listama i tabelama. */
section.as-calc :is(h2, h3, h4, p, ul, ol, dl, dd, fieldset, legend, table, th, td) {
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	letter-spacing: normal;
}

section.as-calc :is(ul, ol) {
	list-style: none;
}

section.as-calc [hidden],
section.as-calc[hidden] {
	display: none !important;
}

section.as-calc :is(button, a, [tabindex]):focus-visible {
	outline: 2px solid var(--as-zlatna);
	outline-offset: 3px;
}

/* ═══ 3. Naslov, opis, učitavanje ═════════════════════════════════════════ */

section.as-calc .as-calc__naziv {
	margin: 0 0 0.4rem;
	font-family: var(--as-font-naslov);
	font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.35rem);
	font-size: clamp(1.65rem, 1.1rem + 2.4cqi, 2.35rem);
	font-weight: 600;
	line-height: 1.15;
	color: var(--as-zlatna);
}

section.as-calc .as-calc__opis {
	max-width: 62ch;
	margin: 0 0 1.6rem;
	color: var(--as-priguseno);
}

section.as-calc[data-stanje='ucitavanje'] .as-calc__telo {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Mesto za formu: manje pomeranja sadržaja (CLS) kad forma zameni poruku. */
	min-height: 22rem;
}

section.as-calc .as-calc__ucitavanje {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--as-priguseno);
}

section.as-calc .as-calc__ucitavanje::before {
	content: '';
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--as-zlatna);
	animation: as-calc-puls 1.2s ease-in-out infinite;
}

section.as-calc .as-calc__bez-js {
	padding: 1rem 1.2rem;
	border: 1px dashed var(--as-linija);
	border-radius: var(--as-radijus-malo);
	color: var(--as-priguseno);
}

/* Bez JavaScript-a „Učitavam…“ bi stajalo zauvek — ostaje samo poruka iz <noscript>. */
@media (scripting: none) {
	section.as-calc .as-calc__ucitavanje {
		display: none;
	}

	section.as-calc[data-stanje='ucitavanje'] .as-calc__telo {
		min-height: 0;
	}
}

/* ═══ 4. Forma ════════════════════════════════════════════════════════════ */

section.as-calc .as-calc__forma {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 1.35rem;
}

section.as-calc .as-calc__osoba {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 1.15rem 1.5rem;
	min-width: 0;
}

section.as-calc fieldset.as-calc__osoba {
	padding: 1rem 1.1rem 1.25rem;
	border: 1px solid var(--as-linija-slaba);
	border-radius: var(--as-radijus-malo);
}

section.as-calc .as-calc__legenda {
	padding: 0 0.4rem;
	font-family: var(--as-font-naslov);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--as-zlatna);
}

section.as-calc .as-calc__polje {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

section.as-calc .as-calc__oznaka {
	float: none;
	width: auto;
	padding: 0;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--as-tekst);
}

/* <legend> nije flex stavka — razmak do sadržaja dobija sam. */
section.as-calc legend.as-calc__oznaka {
	margin-bottom: 0.4rem;
}

section.as-calc .as-calc__pomoc {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--as-priguseno);
}

section.as-calc .as-calc__unos {
	appearance: none;
	width: 100%;
	min-height: 2.9rem;
	margin: 0;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--as-ivica);
	border-radius: var(--as-radijus-malo);
	background: var(--as-pozadina);
	box-shadow: none;
	color: var(--as-tekst);
	font: inherit;
	/* ≥ 16 px: iOS ne uvećava stranu kad polje dobije fokus. */
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

section.as-calc .as-calc__unos::placeholder {
	color: var(--as-priguseno);
	opacity: 1;
}

section.as-calc .as-calc__unos:hover:not(:disabled) {
	border-color: var(--as-zlatna-svetla);
}

section.as-calc .as-calc__unos:focus {
	border-color: var(--as-zlatna);
	/* ⚠️ Boja i pozadina se ponavljaju jer tema boji polje u fokusu (Divi
	 *    `input[type=text]:focus`, živi test Z6, 2026-10-16) — v. as-forma.css. */
	background-color: var(--as-pozadina);
	box-shadow: 0 0 0 3px rgba(201, 164, 94, 0.35);
	color: var(--as-tekst);
	/* Providna ivica ostaje vidljiva u režimu prinudnih boja (Windows). */
	outline: 2px solid transparent;
}

section.as-calc .as-calc__unos:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

section.as-calc .as-calc__unos[aria-invalid='true'] {
	border-color: var(--as-narandzasta);
}

section.as-calc .as-calc__unos[aria-invalid='true']:focus {
	box-shadow: 0 0 0 3px rgba(248, 79, 10, 0.35);
}

section.as-calc select.as-calc__unos {
	padding-right: 2.1rem;
	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.5l5 5 5-5' fill='none' stroke='%23c9a45e' stroke-width='1.6'/%3E%3C/svg%3E");
	background-position: right 0.7rem center;
	background-repeat: no-repeat;
	background-size: 0.75rem;
	cursor: pointer;
}

section.as-calc select.as-calc__unos option {
	background: var(--as-pozadina);
	color: var(--as-tekst);
}

/* Dan · mesec · godina, sat · minut */
section.as-calc .as-calc__delovi {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

section.as-calc .as-calc__deo {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

section.as-calc .as-calc__deo-oznaka {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--as-priguseno);
}

section.as-calc :is(.as-calc__unos--dan, .as-calc__unos--sat, .as-calc__unos--minut) {
	width: 3.5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

section.as-calc .as-calc__unos--godina {
	width: 5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

section.as-calc .as-calc__unos--mesec {
	width: 100%;
	min-width: 7rem;
}

/* Brojčana polja i mesec su uski — manje unutrašnjeg razmaka, da „septembar“ stane. */
section.as-calc :is(.as-calc__unos--dan, .as-calc__unos--sat, .as-calc__unos--minut, .as-calc__unos--godina) {
	padding-right: 0.5rem;
	padding-left: 0.5rem;
}

section.as-calc select.as-calc__unos--mesec {
	padding-right: 1.9rem;
	padding-left: 0.6rem;
	background-position: right 0.55rem center;
}

/* Mesec zauzima ostatak reda: dan · mesec · godina staju u jedan red od 360 px naviše. */
section.as-calc .as-calc__deo:has(> .as-calc__unos--mesec) {
	flex: 1 1 7rem;
	max-width: 13rem;
}

section.as-calc .as-calc__unos--broj {
	max-width: 12rem;
	font-variant-numeric: tabular-nums;
}

/* Čekboks „Ne znam tačno vreme“ i izbor pola */
section.as-calc :is(.as-calc__cek, .as-calc__izbor) {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.75rem;
}

section.as-calc :is(.as-calc__cek, .as-calc__izbor) label {
	font-weight: 600;
	cursor: pointer;
}

section.as-calc :is(.as-calc__cek-unos, .as-calc__izbor-unos) {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--as-zlatna);
	cursor: pointer;
}

section.as-calc .as-calc__izbori {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.4rem;
}

/* Mesto: combobox sa listom predloga */
section.as-calc .as-calc__kombo {
	position: relative;
}

section.as-calc .as-calc__predlozi {
	position: absolute;
	z-index: 30;
	top: calc(100% + 0.35rem);
	right: 0;
	left: 0;
	max-height: 16rem;
	margin: 0;
	padding: 0.35rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--as-linija);
	border-radius: var(--as-radijus-malo);
	background: var(--as-povrsina-svetlija);
	box-shadow: var(--as-senka);
	list-style: none;
}

section.as-calc .as-calc__predlog {
	padding: 0.6rem 0.75rem;
	border-radius: 6px;
	line-height: 1.35;
	cursor: pointer;
}

section.as-calc .as-calc__predlog:hover,
section.as-calc .as-calc__predlog[aria-selected='true'] {
	background: rgba(201, 164, 94, 0.16);
}

section.as-calc .as-calc__predlog[aria-selected='true'] {
	box-shadow: inset 3px 0 0 var(--as-zlatna);
}

section.as-calc .as-calc__predlog[aria-disabled='true'] {
	background: none;
	box-shadow: none;
	color: var(--as-priguseno);
	cursor: not-allowed;
}

section.as-calc .as-calc__predlog-dodatak {
	font-size: 0.85em;
	color: var(--as-priguseno);
}

section.as-calc .as-calc__stanje-mesta {
	font-size: 0.875rem;
	color: var(--as-priguseno);
}

section.as-calc .as-calc__greska-polja {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--as-greska);
}

/* Široka forma (kontejner ≥ 40 rem): polja u dve kolone. */
@container as-calc (min-width: 40rem) {
	section.as-calc .as-calc__forma,
	section.as-calc .as-calc__osoba {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	section.as-calc .as-calc__forma > :is(.as-calc__osoba, .as-calc__dugmad) {
		grid-column: 1 / -1;
	}
}

/* ═══ 5. Dugmad ═══════════════════════════════════════════════════════════ */

section.as-calc .as-calc__dugmad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding-top: 0.25rem;
}

section.as-calc .as-calc__dugme {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 2.9rem;
	margin: 0;
	padding: 0.7rem 1.5rem;
	border: 1px solid var(--as-zlatna);
	border-radius: 999px;
	background: var(--as-zlatna);
	color: var(--as-pozadina);
	font-family: var(--as-font-tekst);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

section.as-calc .as-calc__dugme:hover {
	border-color: var(--as-zlatna-svetla);
	background: var(--as-zlatna-svetla);
	color: var(--as-pozadina);
}

section.as-calc .as-calc__dugme:active {
	transform: translateY(1px);
}

section.as-calc .as-calc__dugme:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

section.as-calc .as-calc__dugme--sporedno {
	background: transparent;
	color: var(--as-zlatna);
}

section.as-calc .as-calc__dugme--sporedno:hover {
	background: rgba(201, 164, 94, 0.12);
	color: var(--as-zlatna-svetla);
}

/* ═══ 6. Stanja (§15.3) ═══════════════════════════════════════════════════ */

section.as-calc .as-calc__status {
	display: grid;
	justify-items: start;
	gap: 0.6rem;
}

/* Poruka stanja je živ region: uvek u DOM-u, prazna ne zauzima mesto. */
section.as-calc .as-calc__poruka:not(:empty) {
	margin-top: 1.1rem;
	padding: 0.8rem 1rem;
	border-left: 3px solid var(--as-zlatna);
	border-radius: var(--as-radijus-malo);
	background: rgba(201, 164, 94, 0.08);
}

section.as-calc:is([data-stanje='greska'], [data-stanje='limit'], [data-stanje='nedostupan']) .as-calc__poruka:not(:empty) {
	border-left-color: var(--as-narandzasta);
	background: rgba(248, 79, 10, 0.1);
}

section.as-calc .as-calc__odbrojavanje {
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	color: var(--as-priguseno);
}

section.as-calc[data-stanje='slanje'] {
	cursor: progress;
}

section.as-calc[data-stanje='slanje'] .as-calc__forma .as-calc__dugme:disabled {
	opacity: 1;
	cursor: progress;
}

section.as-calc[data-stanje='slanje'] .as-calc__forma .as-calc__dugme::after {
	content: '';
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: as-calc-vrti 0.8s linear infinite;
}

/* Mala forma parametara drži stari rezultat ispod sebe dok stiže novi. */
section.as-calc[data-stanje='slanje'] .as-calc__rezultat {
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

section.as-calc[data-stanje='limit'] .as-calc__forma .as-calc__dugme:disabled {
	opacity: 0.4;
}

section.as-calc[data-stanje='uspeh'] .as-calc__rezultat {
	animation: as-calc-pojava 0.35s ease-out both;
}

/* ═══ 7. Alatke rezultata ═════════════════════════════════════════════════ */

section.as-calc .as-calc__alatke {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin: 0 0 1.5rem;
	padding: 0 0 1.1rem;
	border-bottom: 1px solid var(--as-linija-slaba);
}

section.as-calc .as-calc__alatke-dugmad {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-left: auto;
}

section.as-calc .as-calc__napomena-deljeno {
	font-style: italic;
	color: var(--as-priguseno);
}

section.as-calc .as-calc__rucno-kopiranje {
	flex: 1 1 100%;
	font-size: 0.9rem;
}

section.as-calc .as-calc__obavestenje {
	flex: 0 1 auto;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--as-zlatna);
}

/* ═══ 8. Rezultat i blokovi (§8) ══════════════════════════════════════════ */

section.as-calc .as-calc__rezultat {
	display: grid;
	gap: 1.75rem;
	min-width: 0;
	scroll-margin-top: 6rem;
}

section.as-calc .as-calc__rezultat:focus:not(:focus-visible) {
	outline: none;
}

section.as-calc .as-prikaz {
	min-width: 0;
}

section.as-calc .as-prikaz__naslov {
	margin: 0 0 0.85rem;
	font-family: var(--as-font-naslov);
	font-size: 1.55rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--as-zlatna);
}

section.as-calc :is(.as-prikaz__grupa-naslov, .as-prikaz__tumacenje-naslov) {
	margin: 0 0 0.4rem;
	font-family: var(--as-font-naslov);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--as-tekst);
}

section.as-calc :is(.as-prikaz__ucitavanje, .as-prikaz__bez-teksta) {
	font-style: italic;
	color: var(--as-priguseno);
}

/* Blokovi sa rasporedom u mreži sami daju razmak naslovu. */
section.as-calc :is(.as-prikaz--tumacenje, .as-prikaz--raspodela, .as-prikaz--napomena, .as-prikaz--upozorenje, .as-prikaz--poziv-sat, .as-prikaz--zakljucano) > .as-prikaz__naslov {
	margin: 0;
}

/* ─── istaknuto ─── */

section.as-calc .as-prikaz--istaknuto {
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--as-linija);
	border-radius: var(--as-radijus);
	background: linear-gradient(145deg, rgba(201, 164, 94, 0.1), rgba(201, 164, 94, 0) 60%), var(--as-pozadina);
}

section.as-calc .as-prikaz__istaknuto {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.9rem;
}

section.as-calc .as-prikaz__vrednost {
	font-family: var(--as-font-naslov);
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
	font-weight: 600;
	line-height: 1.05;
	color: var(--as-tekst);
}

section.as-calc .as-prikaz__dodatak {
	font-size: 1.1rem;
	font-variant-numeric: tabular-nums;
	color: var(--as-zlatna);
}

section.as-calc .as-prikaz__detalji {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: 0.75rem 1.5rem;
	margin-top: 1rem;
}

section.as-calc .as-prikaz__detalj dt {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--as-priguseno);
}

section.as-calc .as-prikaz__detalj dd {
	margin: 0.15rem 0 0;
	font-weight: 600;
}

/* ─── tumacenje ─── */

section.as-calc .as-prikaz--tumacenje {
	display: grid;
	gap: 1rem;
}

section.as-calc .as-prikaz__tumacenje {
	padding: 1rem 1.2rem;
	border-left: 3px solid var(--as-zlatna);
	border-radius: 0 var(--as-radijus-malo) var(--as-radijus-malo) 0;
	background: rgba(234, 231, 224, 0.03);
}

section.as-calc .as-prikaz__teaser-tekst {
	white-space: pre-line;
}

section.as-calc .as-prikaz__veza {
	display: inline-block;
	margin-top: 0.6rem;
	font-weight: 700;
	color: var(--as-zlatna);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

section.as-calc .as-prikaz__veza:hover {
	color: var(--as-zlatna-svetla);
}

/* ─── tabela ─── */

/* Široka tabela na uskom ekranu skroluje vodoravno; senke na ivicama kažu da ima još. */
section.as-calc .as-prikaz__tabela-omotac {
	overflow-x: auto;
	border: 1px solid var(--as-linija-slaba);
	border-radius: var(--as-radijus-malo);
	background:
		linear-gradient(to left, var(--as-povrsina) 30%, rgba(42, 42, 56, 0)) right center / 2.5rem 100% no-repeat local,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.5), transparent) right center / 0.9rem 100% no-repeat scroll;
}

section.as-calc table.as-prikaz__tabela {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

section.as-calc table.as-prikaz__tabela :is(th, td) {
	padding: 0.6rem 0.85rem;
	border: 0;
	border-bottom: 1px solid var(--as-linija-slaba);
	/* ⚠ Boja se ponavlja i ovde: Divi `.entry-content tr th { color: #555 }` (0,1,2) je
	 *    jednak resetu gore, a Divi-jev CSS stiže posle našeg — zaglavlja redova su bila
	 *    sivo na tamnom (axe color-contrast, živi test Z6, 2026-10-16). Ovo je (0,2,3). */
	color: inherit;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
}

section.as-calc table.as-prikaz__tabela thead th {
	background: rgba(0, 0, 0, 0.16);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--as-priguseno);
}

section.as-calc table.as-prikaz__tabela tbody th {
	min-width: 6.5rem;
	font-weight: 700;
	white-space: normal;
}

/* Prva kolona (ime reda) ostaje na mestu dok se tabela skroluje. */
section.as-calc table.as-prikaz__tabela :is(thead th:first-child, tbody th) {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--as-povrsina);
	box-shadow: inset -1px 0 0 var(--as-linija-slaba);
}

section.as-calc table.as-prikaz__tabela thead th:first-child {
	/* Neprovidna boja zaglavlja: površina sa 16 % crne. */
	background: #23232f;
}

section.as-calc table.as-prikaz__tabela .as-prikaz__grupa-reda:last-child tr:last-child > * {
	border-bottom: 0;
}

section.as-calc .as-prikaz__red:hover > td {
	background: rgba(201, 164, 94, 0.05);
}

section.as-calc table.as-prikaz__tabela .as-prikaz__red:hover > th {
	/* Isto osvetljenje, ali neprovidno — ispod lepljive kolone prolaze ostale. */
	background: #32303a;
}

section.as-calc table.as-prikaz__tabela .as-prikaz__red-tumacenje > td {
	padding: 0.35rem 0.85rem 1rem 2.1rem;
	background: rgba(0, 0, 0, 0.12);
	white-space: normal;
}

/* Teaser u razvijenom redu staje u vidljivi deo tabele, i kad je tabela šira od ekrana. */
section.as-calc table.as-prikaz__tabela .as-prikaz__red-tumacenje .as-prikaz__teaser-mesto {
	position: sticky;
	left: 1rem;
	max-width: calc(100cqi - 3.25rem);
}

@container as-calc (max-width: 30rem) {
	section.as-calc table.as-prikaz__tabela :is(th, td) {
		padding: 0.5rem 0.6rem;
		font-size: 0.9rem;
	}

	section.as-calc table.as-prikaz__tabela thead th {
		font-size: 0.7rem;
	}

	section.as-calc table.as-prikaz__tabela .as-prikaz__red-tumacenje > td {
		padding-left: 1.4rem;
	}
}

/* Red koji se razvija: dugme izgleda kao tekst ćelije, strelica pokazuje stanje. */
section.as-calc .as-prikaz__red-dugme {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

section.as-calc .as-prikaz__red-dugme::before {
	content: '';
	flex: none;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid var(--as-zlatna);
	border-bottom: 2px solid var(--as-zlatna);
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}

section.as-calc .as-prikaz__red-dugme[aria-expanded='true']::before {
	transform: rotate(45deg);
}

section.as-calc .as-prikaz__red-dugme:hover {
	color: var(--as-zlatna);
}

section.as-calc .as-prikaz__teaser + .as-prikaz__teaser {
	margin-top: 0.9rem;
}

section.as-calc .as-prikaz__teaser-naslov {
	margin-bottom: 0.2rem;
	font-weight: 700;
	color: var(--as-zlatna);
}

section.as-calc .as-prikaz__vise {
	appearance: none;
	margin: 0.75rem 0 0;
	padding: 0.4rem 0;
	border: 0;
	background: none;
	color: var(--as-zlatna);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* ─── aspekti ─── */

section.as-calc .as-prikaz__aspekti {
	display: grid;
	gap: 0.5rem;
}

section.as-calc .as-prikaz__aspekti[data-izgled='mreza'] {
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

section.as-calc .as-prikaz__aspekt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--as-linija-slaba);
	border-radius: var(--as-radijus-malo);
	background: rgba(234, 231, 224, 0.02);
}

section.as-calc .as-prikaz__aspekti[data-izgled='mreza'] .as-prikaz__aspekt {
	flex-direction: column;
	align-items: flex-start;
}

section.as-calc .as-prikaz__aspekt > :first-child {
	flex: 1 1 14rem;
}

section.as-calc .as-prikaz__par {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem;
}

section.as-calc .as-prikaz__telo {
	font-weight: 700;
}

section.as-calc .as-prikaz__strana {
	margin-left: 0.3rem;
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: rgba(201, 164, 94, 0.15);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--as-zlatna);
}

section.as-calc .as-prikaz__aspekt-tip {
	font-style: italic;
	color: var(--as-zlatna);
}

section.as-calc .as-prikaz__aspekt-meta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.9rem;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	color: var(--as-priguseno);
}

section.as-calc .as-prikaz__jacina {
	display: inline-block;
	width: 4.5rem;
	height: 0.4rem;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(234, 231, 224, 0.12);
}

section.as-calc .as-prikaz__jacina-punjenje {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--as-zlatna);
}

section.as-calc .as-prikaz__aspekt > .as-prikaz__red-tumacenje {
	flex: 1 1 100%;
	padding: 0.4rem 0 0.2rem 1.1rem;
}

/* ─── raspodela ─── */

section.as-calc .as-prikaz--raspodela {
	display: grid;
	gap: 1.25rem;
}

section.as-calc .as-prikaz__trake {
	display: grid;
	gap: 0.45rem;
}

section.as-calc .as-prikaz__traka {
	display: grid;
	grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) 2.75rem;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.95rem;
}

section.as-calc .as-prikaz__traka-linija {
	display: block;
	height: 0.55rem;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(234, 231, 224, 0.1);
}

section.as-calc .as-prikaz__traka-punjenje {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--as-zlatna), var(--as-zlatna-svetla));
}

section.as-calc .as-prikaz__traka-broj {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--as-priguseno);
}

@container as-calc (min-width: 40rem) {
	section.as-calc .as-prikaz--raspodela {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	section.as-calc .as-prikaz--raspodela > .as-prikaz__naslov {
		grid-column: 1 / -1;
	}
}

/* ─── tocak — mesto za crtač iz P8 ─── */

section.as-calc .as-prikaz__tocak-mesto {
	display: grid;
	place-items: center;
	width: min(100%, 26rem);
	aspect-ratio: 1;
	margin: 0 auto;
	padding: 2.5rem;
	border: 1px dashed var(--as-linija);
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(201, 164, 94, 0.1), rgba(201, 164, 94, 0) 62%),
		repeating-conic-gradient(rgba(201, 164, 94, 0.16) 0deg 0.6deg, transparent 0.6deg 30deg);
	text-align: center;
}

section.as-calc .as-prikaz--tocak[data-varijanta='teaser'] .as-prikaz__tocak-mesto {
	width: min(100%, 18rem);
}

section.as-calc .as-prikaz__tocak-poruka {
	max-width: 16rem;
	font-style: italic;
	color: var(--as-priguseno);
}

/* ─── vremenska ─── */

section.as-calc .as-prikaz__vremenska {
	display: grid;
	gap: 0.5rem;
}

section.as-calc .as-prikaz__vremenska-red {
	display: grid;
	grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem;
}

section.as-calc .as-prikaz__vremenska-oznaka {
	font-size: 0.9rem;
	font-weight: 700;
}

section.as-calc .as-prikaz__vremenska-staza {
	position: relative;
	height: 1.25rem;
	border-radius: 999px;
	background: rgba(234, 231, 224, 0.06);
}

section.as-calc .as-prikaz__vremenska-traka {
	position: absolute;
	top: 0.2rem;
	bottom: 0.2rem;
	border-radius: 999px;
	background: var(--as-zlatna);
}

section.as-calc .as-prikaz__vremenska-traka[data-stil='senka'] {
	background: rgba(201, 164, 94, 0.35);
}

section.as-calc .as-prikaz__vremenska-traka[data-stil='prazan_hod'] {
	background: repeating-linear-gradient(135deg, rgba(154, 154, 165, 0.6) 0 4px, transparent 4px 8px);
}

section.as-calc .as-prikaz__vremenska-tacka {
	position: absolute;
	top: 50%;
	width: 0.7rem;
	height: 0.7rem;
	margin: -0.35rem 0 0 -0.35rem;
	border-radius: 50%;
	background: var(--as-narandzasta);
	box-shadow: 0 0 0 2px var(--as-povrsina);
}

section.as-calc .as-prikaz__vremenska-osa {
	display: flex;
	justify-content: space-between;
	font-size: 0.8rem;
	color: var(--as-priguseno);
}

/* Isti podaci kao spisak — samo za čitače ekrana (§8.7). */
section.as-calc .as-prikaz__za-citace {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* ─── mera ─── */

section.as-calc .as-prikaz__mera {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.9rem;
}

section.as-calc .as-prikaz__mera-oznaka {
	font-weight: 700;
}

section.as-calc .as-prikaz__mera-linija {
	display: block;
	height: 0.7rem;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(234, 231, 224, 0.1);
}

section.as-calc .as-prikaz__mera-punjenje {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--as-narandzasta), var(--as-zlatna));
}

section.as-calc .as-prikaz__mera-vrednost {
	font-family: var(--as-font-naslov);
	font-size: 1.6rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--as-zlatna);
}

/* ─── napomena ─── */

section.as-calc .as-prikaz--napomena {
	display: grid;
	justify-items: start;
	gap: 0.75rem;
	padding: 1rem 1.2rem;
	border-left: 3px solid var(--as-priguseno);
	border-radius: 0 var(--as-radijus-malo) var(--as-radijus-malo) 0;
	background: rgba(234, 231, 224, 0.04);
}

section.as-calc .as-prikaz--napomena[data-vrsta='upozorenje'] {
	border-left-color: var(--as-narandzasta);
	background: rgba(248, 79, 10, 0.08);
}

section.as-calc .as-prikaz--napomena[data-vrsta='uspeh'] {
	border-left-color: var(--as-zlatna);
	background: rgba(201, 164, 94, 0.08);
}

/* ─── upozorenje — ne može da se sakrije (§8.12) ─── */

section.as-calc .as-prikaz--upozorenje {
	display: grid;
	justify-items: start;
	gap: 0.75rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid rgba(248, 79, 10, 0.45);
	border-left-width: 4px;
	border-radius: var(--as-radijus-malo);
	background: rgba(248, 79, 10, 0.07);
}

section.as-calc .as-prikaz--upozorenje > .as-prikaz__naslov {
	font-family: var(--as-font-tekst);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--as-greska);
}

section.as-calc .as-prikaz__upozorenja {
	display: grid;
	gap: 0.5rem;
}

section.as-calc .as-prikaz__upozorenja li {
	position: relative;
	padding-left: 1.1rem;
}

section.as-calc .as-prikaz__upozorenja li::before {
	content: '';
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--as-narandzasta);
}

section.as-calc .as-prikaz__nepouzdana {
	font-size: 0.95rem;
	color: var(--as-priguseno);
}

/* ─── poziv za sat (bez_sata: poziv_sat) ─── */

section.as-calc .as-prikaz--poziv-sat {
	display: grid;
	justify-items: start;
	gap: 0.8rem;
	padding: 1.25rem 1.4rem;
	border: 1px dashed var(--as-linija);
	border-radius: var(--as-radijus);
	background: rgba(201, 164, 94, 0.05);
}

section.as-calc .as-prikaz__poziv-tekst {
	max-width: 52ch;
}

/* ─── zakljucano i cta ─── */

section.as-calc .as-prikaz--zakljucano {
	display: grid;
	justify-items: center;
	gap: 0.9rem;
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--as-linija);
	border-radius: var(--as-radijus);
	background: radial-gradient(120% 140% at 50% 0%, rgba(201, 164, 94, 0.14), rgba(201, 164, 94, 0) 60%), var(--as-pozadina);
	text-align: center;
}

section.as-calc .as-prikaz__zakljucano-tekst {
	max-width: 30ch;
	font-family: var(--as-font-naslov);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.3;
}

section.as-calc .as-prikaz--cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* Dva CTA jedan za drugim stoje bliže nego dva bloka sadržaja. */
section.as-calc .as-prikaz--cta + .as-prikaz--cta {
	margin-top: -1rem;
}

section.as-calc :is([data-cta='kupovina'] .as-prikaz__cta, .as-prikaz__otkljucaj[data-cta='kupovina']) {
	border-color: var(--as-narandzasta);
	background: var(--as-narandzasta);
	color: var(--as-pozadina);
}

section.as-calc :is([data-cta='kupovina'] .as-prikaz__cta, .as-prikaz__otkljucaj[data-cta='kupovina']):hover {
	border-color: var(--as-narandzasta-svetla);
	background: var(--as-narandzasta-svetla);
	color: var(--as-pozadina);
}

section.as-calc .as-prikaz__komponenta {
	min-width: 0;
}

/* ═══ 9. Napomene za administratora ═══════════════════════════════════════ */

.as-calc-admin {
	box-sizing: border-box;
	margin: 0 0 1rem;
	padding: 0.85rem 1.1rem;
	border: 1px dashed var(--as-zlatna);
	border-radius: 8px;
	background: var(--as-povrsina);
	color: var(--as-tekst);
	font-family: var(--as-font-tekst);
	font-size: 0.9rem;
	line-height: 1.55;
	text-align: left;
}

.as-calc-admin--greska {
	border-style: solid;
	border-color: var(--as-narandzasta);
	border-left-width: 4px;
}

.as-calc-admin p {
	margin: 0 0 0.5rem;
	padding: 0;
	color: inherit;
}

.as-calc-admin p:last-child {
	margin-bottom: 0;
}

.as-calc-admin ul {
	margin: 0 0 0.6rem;
	padding: 0 0 0 1.1rem;
	list-style: disc;
}

.as-calc-admin strong {
	color: var(--as-greska);
}

.as-calc-admin code {
	padding: 0.05rem 0.35rem;
	border-radius: 4px;
	background: var(--as-pozadina);
	font-size: 0.85em;
	color: var(--as-zlatna);
}

/* ═══ 10. Pokret, prinudne boje, štampa ═══════════════════════════════════ */

@keyframes as-calc-vrti {
	to {
		transform: rotate(360deg);
	}
}

@keyframes as-calc-puls {
	0%,
	100% {
		opacity: 0.35;
		transform: scale(0.85);
	}

	50% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes as-calc-pojava {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	section.as-calc *,
	section.as-calc *::before,
	section.as-calc *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media (forced-colors: active) {
	section.as-calc :is(.as-prikaz__traka-punjenje, .as-prikaz__jacina-punjenje, .as-prikaz__mera-punjenje, .as-prikaz__vremenska-traka, .as-prikaz__vremenska-tacka) {
		forced-color-adjust: none;
		background: CanvasText;
	}

	section.as-calc .as-calc__dugme {
		border: 1px solid ButtonText;
	}
}

@media print {
	section.as-calc {
		border-color: #999;
		background: #fff;
		box-shadow: none;
		color: #000;
	}

	section.as-calc :is(.as-calc__unos-omotac, .as-calc__status, .as-calc__alatke, .as-prikaz--cta, .as-prikaz--poziv-sat, .as-prikaz__vise, .as-prikaz__poziv-sat, .as-prikaz__otkljucaj) {
		display: none !important;
	}

	/* Na papiru idu i sklopljeni redovi. */
	section.as-calc .as-prikaz__grupa-reda[hidden] {
		display: table-row-group !important;
	}

	section.as-calc .as-prikaz__aspekt[hidden] {
		display: flex !important;
	}

	section.as-calc :is(.as-calc__naziv, .as-prikaz__naslov, .as-prikaz__vrednost, .as-prikaz__dodatak, .as-prikaz__aspekt-tip, .as-prikaz__veza, .as-prikaz__mera-vrednost) {
		color: #000;
	}

	section.as-calc :is(.as-prikaz--istaknuto, .as-prikaz--upozorenje, .as-prikaz--zakljucano, .as-prikaz__tumacenje, .as-prikaz__aspekt) {
		break-inside: avoid;
		background: none;
	}
}