/*
 * vyzvy.skola.sk - úpravy zobrazenia pre mobil a tablet (10.11.2026)
 * Pripojené v index.php a konfigurator/index.php ako /css/mobile.css?v=...
 * Desktop (od 1200 px) sa nemení - všetko je v @media.
 */

/* ---- Hlavička stránky: nadpis + tlačidlá (rozpočet vzorovej učebne, zoznam položiek, vymazať, odoslať) ---- */
@media (max-width: 1199.98px) {
	main > .d-flex.border-bottom { flex-wrap: wrap !important; }
	main > .d-flex.border-bottom > h1 { flex: 1 1 100%; }
	main > .d-flex.border-bottom .btn-toolbar { margin-bottom: .5rem; }
	.ctabut { flex-wrap: wrap; gap: .5rem; margin-right: 0 !important; }
	.ctabut > .btn { flex: 0 0 auto; margin: 0 !important; border-radius: var(--bs-border-radius) !important; }
}
/* dlaždice podkategórií pod popisom učebne: pri 992-1199 px 3 v rade namiesto 4 */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.row.buttons > .col-lg-3 { width: 33.3333%; }
}
@media (max-width: 575.98px) {
	main > .d-flex.border-bottom > h1 { font-size: 1.6rem; }
	main > .d-flex.border-bottom .btn-toolbar, .ctabut { width: 100%; }
	.ctabut { flex-direction: column; }
	.ctabut > .btn { width: 100%; }
}

/* ---- Zoznam produktov v kategórii (konfigurátor, tabuľka #products) -> karty ---- */
@media (max-width: 991.98px) {
	#products > thead { display: none; }
	#products, #products > tbody { display: block; width: 100% !important; }
	#products > tbody > tr {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr) auto;
		grid-template-areas: "img opis opis" "cena cena pridat";
		column-gap: 10px; row-gap: 8px;
		padding: 12px 6px;
		border-bottom: 1px solid #dee2e6;
	}
	#products > tbody > tr:nth-of-type(odd) { background: #f6f7f8; }
	#products > tbody > tr > td { display: block; padding: 0; border: 0; box-shadow: none !important; background: transparent !important; }
	#products > tbody > tr > td:first-child { display: none; }
	#products td.td-img { grid-area: img; padding: 0; text-align: center; }
	#products td.td-img img { max-width: 84px !important; max-height: 84px !important; }
	#products td.opis { grid-area: opis; width: auto; text-align: left; }
	#products td.price { grid-area: cena; align-self: center; text-align: left; padding: 0; font-size: 15px; font-weight: 600; }
	#products td.addButton { grid-area: pridat; display: flex; align-items: center; gap: 6px; }
	#products td.addButton > strong, #products td.addButton > br { display: none; }
	#products td.addButton input { width: 64px; margin: 0; }
	#products td.addButton button { width: auto !important; white-space: nowrap; }
	/* skrátený popis - triedu js-skratit pridáva JS v konfigurator/app.php (bez JS sa popis neskracuje) */
	#products.js-skratit td.opis { position: relative; max-height: 11em; overflow: hidden; cursor: pointer; }
	#products.js-skratit td.opis::after {
		content: "▾ Zobraziť celý popis";
		position: absolute; left: 0; right: 0; bottom: 0;
		padding-top: 1.6em;
		background: linear-gradient(rgba(255,255,255,0), #fff 60%);
		color: #0d6efd; font-weight: 600;
	}
	#products.js-skratit > tbody > tr:nth-of-type(odd) td.opis::after { background: linear-gradient(rgba(246,247,248,0), #f6f7f8 60%); }
	#products.js-skratit td.opis.otvorene { max-height: none; }
	#products.js-skratit td.opis.otvorene::after { content: "▴ Skryť popis"; position: static; display: block; padding-top: .3em; background: none !important; }
}

/* ---- Zoznam položiek (list.php, tabuľka .list) -> karty ---- */
@media (max-width: 991.98px) {
	table.list > thead { display: none; }
	table.list, table.list > tbody { display: block; width: 100%; }
	table.list > tbody > tr {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		grid-template-areas: "nazov nazov info del" "kod kod kod kod" "qty jedn spolu spolu";
		column-gap: 8px; row-gap: 4px;
		align-items: center;
		padding: 10px 4px;
		border-bottom: 1px solid #dee2e6;
	}
	table.list > tbody > tr > td { display: block; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; }
	table.list > tbody > tr:not([class]) { display: none; } /* prázdny oddeľovač pred "Cena celkom" */
	table.list td.c-nazov { grid-area: nazov; }
	table.list td.c-kod { grid-area: kod; color: #6c757d; font-size: 12px; }
	table.list td.c-qty { grid-area: qty; }
	table.list td.c-qty input { width: 64px; }
	table.list td.c-jedn { grid-area: jedn; text-align: left; color: #495057; }
	table.list td.c-jedn::before { content: "× "; }
	table.list td.c-jedn::after { content: " bez DPH"; font-size: 11px; color: #6c757d; }
	table.list td.c-dph, table.list td.c-bez, table.list td.c-dphsuma, table.list td.c-nic { display: none; }
	table.list td.c-spolu, table.list td.c-od { grid-area: spolu; text-align: right; font-size: 15px; }
	table.list td.infoButton { grid-area: info; width: auto !important; }
	table.list td.delButton { grid-area: del; width: auto !important; }
	/* riadok s názvom kategórie a prázdny oddeľovač */
	table.list td.divider, table.list td[colspan="9"] { grid-column: 1 / -1; }
	table.list td.divider { font-size: 14px; padding: 6px 8px; background: #E4E4E4 !important; }
	/* medzisúčet a súčet: popis na celý riadok, pod ním 3 sumy */
	table.list > tbody > tr.subtotal, table.list > tbody > tr.total {
		grid-template-areas: none;
		grid-template-columns: repeat(3, 1fr);
		background: #f1f6fb;
		padding: 10px 8px;
	}
	table.list tr.subtotal > td:first-child, table.list tr.total > td:first-child { grid-column: 1 / -1; text-align: left; }
	table.list tr.subtotal > td:nth-child(2)::before, table.list tr.total > td:nth-child(2)::before { content: "bez DPH"; }
	table.list tr.subtotal > td:nth-child(3)::before, table.list tr.total > td:nth-child(3)::before { content: "DPH"; }
	table.list tr.subtotal > td:nth-child(4)::before, table.list tr.total > td:nth-child(4)::before { content: "s DPH"; }
	table.list tr.subtotal > td::before, table.list tr.total > td::before { display: block; font-size: 11px; font-weight: 400; color: #6c757d; }
	table.list tr.subtotal > td:nth-child(5), table.list tr.total > td:nth-child(5) { display: none; }
}