/**
 * Modern stock tooltip ("agt-stock")
 *
 * BLOKK: public/assets/css/wcan-stock-tooltip.css (uj fajl)
 *
 * Flexbox sorok (<br> nelkul), kartya-stilusu popup nyillal, allapotszinezes
 * CSS valtozokkal, opacity + transform atmenet, :hover ES :focus-within nyitas.
 */

.agt-stock {
	--agt-in:        #1a8a1a; /* zold  - normal keszlet            */
	--agt-low:       #d98200; /* narancs - alacsony keszlet        */
	--agt-out:       #c0392b; /* piros - nincs keszleten           */
	--agt-backorder: #8a6d1a; /* okker - elovetelezes / backorder  */

	--agt-pop-bg:     #ffffff;
	--agt-pop-border: #e2e2e2;
	--agt-pop-text:   #333333;
	--agt-pop-muted:  #666666;
	--agt-pop-width:  260px;

	position: relative;
	display: block;
	outline: none;
}

/* ---- Allapot szerinti cimkeszin ------------------------------------- */

.agt-stock__label {
	display: inline;
	font-weight: 600;
	line-height: 1.3;
	cursor: help;
}

.agt-stock--in        .agt-stock__label { color: var(--agt-in); }
.agt-stock--low       .agt-stock__label { color: var(--agt-low); }
.agt-stock--out       .agt-stock__label { color: var(--agt-out); }
.agt-stock--backorder .agt-stock__label { color: var(--agt-backorder); }

/* ---- A popup kartya -------------------------------------------------- */

.agt-stock__pop {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 12px);
	z-index: 9999;

	/* JS allitja az utkozesnel; alapertelmezetten 0. */
	transform: translateX(calc(-50% + var(--agt-shift, 0px))) translateY(6px);

	display: flex;
	flex-direction: column;
	gap: 6px;

	width: max-content;
	max-width: var(--agt-pop-width);
	padding: 10px 12px;

	background: var(--agt-pop-bg);
	color: var(--agt-pop-text);
	border: 1px solid var(--agt-pop-border);
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);

	font-size: 13px;
	line-height: 1.4;
	text-align: left;
	white-space: normal;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

/* Nyil a kartya aljan */
.agt-stock__pop::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: var(--agt-pop-bg);
	/* Finom border-illesztes a nyilhoz */
	filter: drop-shadow(0 1px 0 var(--agt-pop-border));
}

/* ---- Nyitas: hover ES billentyuzet-fokusz (akadalymentesseg) -------- */

.agt-stock:hover .agt-stock__pop,
.agt-stock:focus-within .agt-stock__pop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(calc(-50% + var(--agt-shift, 0px))) translateY(0);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

/* ---- Popup sorok (ikon + szoveg) ------------------------------------ */

.agt-stock__row {
	display: flex;
	align-items: flex-start;
	gap: 7px;
}

.agt-stock__row .agt-stock__text {
	color: var(--agt-pop-muted);
}

/* A popup elso sora (__lead) kiemelve, az allapot szinevel.
   FIGYELEM: a per-allapot Font Color / Font Weight beallitas (ha meg van adva)
   a footer inline stilusbol felulirja ezt - igy a cimke es ez a sor "egyutt"
   allithato a meglevo backend elemekkel. */
.agt-stock__lead .agt-stock__text {
	color: var(--agt-pop-text);
	font-weight: 600;
}

.agt-stock--in        .agt-stock__lead .agt-stock__text { color: var(--agt-in); }
.agt-stock--low       .agt-stock__lead .agt-stock__text { color: var(--agt-low); }
.agt-stock--out       .agt-stock__lead .agt-stock__text { color: var(--agt-out); }
.agt-stock--backorder .agt-stock__lead .agt-stock__text { color: var(--agt-backorder); }

/* A 3. sortol jovo reszletsorok megtartjak az alap formazast (felkover, link...). */
.agt-stock__detail .agt-stock__text a { color: inherit; text-decoration: underline; }
.agt-stock__detail .agt-stock__text strong,
.agt-stock__detail .agt-stock__text b { font-weight: 700; }

/* ---- Inline SVG ikonok ---------------------------------------------- */

.agt-stock__icon {
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	margin-top: 0.1em;
	object-fit: contain;
	color: var(--agt-pop-muted);
}

.agt-stock__icon--truck { color: var(--agt-in); }
.agt-stock__icon--info  { color: var(--agt-pop-muted); }
.agt-stock__icon--box   { color: var(--agt-pop-muted); }

/* ---- Reszletes mozgas kikapcsolasa (prefers-reduced-motion) --------- */

@media (prefers-reduced-motion: reduce) {
	.agt-stock__pop,
	.agt-stock:hover .agt-stock__pop,
	.agt-stock:focus-within .agt-stock__pop {
		transition: opacity 0.01s linear;
		transform: translateX(calc(-50% + var(--agt-shift, 0px)));
	}
}