html,
	body {
		margin: 0;
		padding: 0;
		overflow-x: auto;
		/* Lubame desktopis scrollbari */
		overflow-y: auto;
		/* Lubame pikkusel vabalt kasvada, et resizer saaks õige mõõdu */
		min-height: 100%;
	}

	body {
		position: relative;
		padding-bottom: 20px !important;
		/* Lisa puhver alla värvivaliku jaoks */
	}

	td {
		font-family: arial, helvetica, sans-serif;
		font-size: 8pt;
	}

	xtd {
		border: 1px solid green;
	}


	select {
		font-family: arial, helvetica, sans-serif;
		font-size: 8pt;
	}

	label {
		cursor: pointer;
	}

	.brd_post_selected {
		position: absolute;
		cursor: pointer;
		border: 1px solid #bbee00;
		background-color: #ccff00;
	}


	.brd_rida_selected {
		position: absolute;
		cursor: pointer;
		border: 1px solid #bbee00;
		background-color: #ccff00;
	}

	.varv1 {
		cursor: pointer;
		width: 30px;
		height: 30px;
		border-radius: 5px;
	}

	.varv2 {
		cursor: pointer;
		width: 15px;
		height: 15px;
	}



	.inpt_hind {
		width: 40px;
		height: 14px;
		color: #000000;
		border: 0px solid transparent;

		text-align: right;
		font-weight: bold;
		font-family: arial, helvetica, sans-serif;
		font-size: 10pt;
		background-color: transparent;
	}

	.inp_frm {
		font-family: arial, helvetica, sans-serif;
		font-size: 8pt;
	}

	.inpt_noed {
		width: 25px;
		height: 10px;
		background-color: #dddddd;
		color: #aaaaaa;
		border: 1px solid #bbbbbb;
		font-family: arial, helvetica, sans-serif;
		font-size: 7pt;
		line-height: 10px;
		text-align: center;
	}

	.inpt {
		width: 25px;
		height: 12px;
		background-color: #fafafa;
		color: #000000;
		border: 1px solid #bbbbbb;
		font-family: arial, helvetica, sans-serif;
		font-size: 7pt;
		line-height: 10px;
		text-align: center;
		box-sizing: border-box;
		padding: 0;
		margin: 0 auto;
		display: block;
	}

	.butt {
		width: 75px;
	}

	.moot_h {
		border-top: 1px solid #000000;
		text-align: center;
		font-size: 8pt;
	}

	.moot_txt {
		background-color: #ffffff;
		font-family: arial, helvetica, sans-serif;
		font-size: 8pt;
		white-space: nowrap;
		padding-left: 3px;
		padding-right: 3px;
	}



	.brd_bg {
		position: absolute;
	}

	legend {
		color: #000000;
		font-family: arial, helvetica, sans-serif;
		font-size: 9pt;
		font-weight: bold;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	fieldset {
		-moz-border-radius: 0px;
		border-radius: 0px;
		-webkit-border-radius: 0px;
		max-width: 100%;
		overflow-x: hidden;
		min-width: 0;
	}

	/* =====================================================
	   RESPONSIVE DESIGN SUPPORT
	   ===================================================== */

	/* Base responsive container */
	#frm {
		max-width: 100%;
		overflow-x: hidden !important;
		/* Eemaldame desktopilt scrolli täielikult */
	}

	/* Main table - kasutab 100% laiust */
	#frm>table {
		width: 100%;
		max-width: 100%;
		table-layout: fixed;
		/* Kriitiline desktopis, et td ei veniks riiulist laiemaks */
	}

	/* Kõik td elemendid peamises tabelis */
	#frm>table>tbody>tr>td {
		max-width: 100%;
	}

	/* Pruun värvivaliku triip - 100% laius, ei tekita overflow'i */
	#varv_valik {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
	}

	/* Pruun pilt - venitab 100% laiuseks */
	#varv_valik img {
		width: 100% !important;
		max-width: 100% !important;
		height: 40px !important;
	}

	/* Värvivaliku konteinerid - flex-wrap lubab murduda mitmele reale */
	#varvid_koht1,
	#varvid_koht2 {
		width: 100% !important;
		max-width: 100% !important;
		padding-bottom: 10px;
		box-sizing: border-box;
		/* EI OLE overflow-x: hidden - laseb värvid nähtavale */
	}

	/* Color selector flex container (generated by JS) */
	#varvid_koht1>.color-selector-flex,
	#varvid_koht2>.color-selector-flex,
	#varvid_koht1>div,
	#varvid_koht2>div {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 3px;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Make color table display as flexbox with wrap (fallback for table structure) */
	#varvid_koht1 table,
	#varvid_koht2 table {
		display: flex;
		flex-wrap: wrap;
		gap: 2px;
		width: 100%;
	}

	#varvid_koht1 tbody,
	#varvid_koht2 tbody {
		display: flex;
		flex-wrap: wrap;
		gap: 2px;
		width: 100%;
	}

	#varvid_koht1 tr,
	#varvid_koht2 tr {
		display: contents;
		/* This makes tr children flow directly into the flex container */
	}

	#varvid_koht1 td,
	#varvid_koht2 td {
		padding: 3px;
	}

	/* Color swatch styling for wrap */
	.varv1,
	.varv2 {
		display: inline-block;
		box-sizing: border-box;
	}

	/* Shelf display area */
	#riiuli_koht {
		position: relative;
		/* Vajalik, et absoluutsed elemendid (postid, riiulid) liiguksid koos scrolliga */
		display: block !important;
		width: 100% !important;
		max-width: 100vw !important;
		overflow-x: hidden !important;
		/* Vaikimisi peidus (desktop) */
		-webkit-overflow-scrolling: touch;
	}

	/* Mobiili vaates lubame scrolli */
	@media screen and (max-width: 768px) {
		#riiuli_koht {
			overflow-x: auto !important;
		}
	}

	#riiuli_koht td {
		padding: 0 !important;
		border-collapse: collapse;
	}

	/* Fieldsets should be flexible */
	fieldset {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Desktopil ja üldiselt peidame leheülese horisontaalse scrolli, et vältida loksumist ja topelt-scrolle */
	html,
	body {
		overflow-x: hidden !important;
	}

	/* Responsive layout for smaller screens (mobile & tablet) */
	@media screen and (max-width: 768px) {

		/* Peidame mobiilis leheülese horisontaalse scrolli, et vältida loksumist ja topelt-scrolle */
		#frm {
			overflow-x: auto !important;
		}

		/* Stack main table cells as blocks to prevent width overflow */
		#frm>table,
		#frm>table>tbody,
		#frm>table>tbody>tr,
		#frm>table>tbody>tr>td {
			display: block !important;
			width: 100% !important;
			max-width: 100vw !important;
			box-sizing: border-box !important;
		}

		/* editor1 - parameetrite sektsioon */
		#editor1 {
			width: 100% !important;
			max-width: 100vw !important;
			box-sizing: border-box;
			padding: 5px !important;
		}

		/* Teeme tabelist paindliku konteineri */
		#editor1 fieldset#editor1 table,
		#editor1 table {
			display: flex !important;
			flex-wrap: wrap !important;
			justify-content: flex-start !important;
			align-items: center !important;
			width: 100% !important;
			gap: 4px 0 !important;
		}

		/* Lase td elementidel voolata otse tabeli sisse */
		#editor1 tr,
		#editor1 tbody {
			display: contents !important;
		}

		#editor1 td {
			display: inline-flex !important;
			align-items: center !important;
			padding: 4px 2px !important;
			white-space: nowrap !important;
			box-sizing: border-box !important;
		}

		/* Peida tühjad ja peidetud elemendid */
		#editor1 td[style*="display:none"],
		#editor1 td:empty,
		#editor1 td[nowrap]:empty {
			display: none !important;
		}

		/* 
		   Parameetrite paarid (Silt + Kast)
		   Kasutame orderit, et need püsiksid loogiliselt koos 
		*/

		/* 1. Paar: Püstikuid */
		#editor1 td:has(#lng_pystikuid) {
			flex: 0 0 22% !important;
			justify-content: flex-end !important;
			order: 1;
			font-size: 8pt !important;
		}

		#editor1 td:has(#latte) {
			flex: 0 0 28% !important;
			justify-content: flex-start !important;
			order: 2;
		}

		/* 2. Paar: Kõrgus */
		#editor1 td:has(#lng_korgus) {
			flex: 0 0 22% !important;
			justify-content: flex-end !important;
			order: 3;
			font-size: 8pt !important;
		}

		#editor1 td:has(#ridu) {
			flex: 0 0 28% !important;
			justify-content: flex-start !important;
			order: 4;
		}

		/* 3. Paar: Suurendus */
		#editor1 td:has(#lng_suurendus) {
			flex: 0 0 22% !important;
			justify-content: flex-end !important;
			order: 5;
			font-size: 8pt !important;
		}

		#editor1 td:has(#zoom) {
			flex: 0 0 28% !important;
			justify-content: flex-start !important;
			order: 6;
		}

		/* 4. Paar: Sügavus */
		#editor1 td:has(#lng_sygavus) {
			flex: 0 0 22% !important;
			justify-content: flex-end !important;
			order: 7;
			font-size: 8pt !important;
		}

		#editor1 td:has(#sygavus) {
			flex: 0 0 28% !important;
			justify-content: flex-start !important;
			order: 8;
		}

		/* Hind: Silt + Väärtus ühte ritta (100% laius) */
		#editor1 td:has(.price-box) {
			flex: 0 0 100% !important;
			order: 20 !important;
			padding: 10px 0 !important;
			justify-content: center !important;
		}

		#editor1 td:has(.price-box) fieldset {
			width: 100% !important;
			box-sizing: border-box !important;
		}

		#editor1 td:has(.price-box) .price-box {
			justify-content: center !important;
		}

		#editor1 .inpt_hind {
			width: 65px !important;
			font-size: 13pt !important;
			font-weight: bold;
		}

		/* Trüki ja Algseis nupud - ühte ritta keskele */
		#editor1 td[rowspan="2"] {
			flex: 0 0 100% !important;
			order: 30 !important;
			justify-content: center !important;
			gap: 10px !important;
			border-top: 1px dashed #ddd;
			padding: 15px 0 !important;
			margin-top: 5px !important;
		}

		#editor1 td[rowspan="2"] br {
			display: none !important;
		}

		#editor1 .butt {
			min-width: 80px;
			padding: 6px 12px;
		}

		/* TELLIN nupp - kõige viimasena suurtest nuppudest */
		#editor1 td:has(#order) {
			flex: 0 0 100% !important;
			order: 40 !important;
			padding: 5px 0 !important;
		}

		#editor1 #order {
			width: 100% !important;
			padding: 12px !important;
			font-size: 11pt !important;
		}

		#riiuli_koht {
			display: block !important;
			width: 100% !important;
			position: relative !important;
			/* Kriitiline, et absoluutsed elemendid liiguksid mobiilis kaasa */
			overflow-x: auto !important;
			-webkit-overflow-scrolling: touch !important;
			margin-top: 10px !important;
			scrollbar-width: none;
			/* Firefox */
			-ms-overflow-style: none;
			/* IE/Edge */
		}

		#riiuli_koht::-webkit-scrollbar {
			display: none;
			/* Chrome/Safari */
		}

		#riiuli_koht::before {
			content: '← Lohista riiulit küljele →';
			display: block;
			text-align: center;
			font-size: 9px;
			color: #666;
			padding: 4px;
			background: #eee;
			margin-bottom: 5px;
			border-radius: 2px;
			font-weight: bold;
		}

		fieldset {
			width: 100% !important;
			max-width: 100vw !important;
			min-width: 0 !important;
			box-sizing: border-box;
			margin: 5px 0 !important;
			padding: 8px !important;
		}
	}

	/* Mobiili lisaviimistlus (scalemise kohandamine) */
	@media screen and (max-width: 480px) {

		#editor1 td:has(#lng_pystikuid),
		#editor1 td:has(#lng_korgus),
		#editor1 td:has(#lng_suurendus),
		#editor1 td:has(#lng_sygavus) {
			flex: 0 0 25% !important;
			font-size: 7.5pt !important;
		}

		#editor1 td:has(#latte),
		#editor1 td:has(#ridu),
		#editor1 td:has(#zoom),
		#editor1 td:has(#sygavus) {
			flex: 0 0 25% !important;
		}

		#editor1 select {
			max-width: 100% !important;
			font-size: 7.5pt !important;
			height: 24px;
		}

		#editor1 .inpt_hind {
			font-size: 11pt !important;
		}
	}

	/* Tablet screens */
	@media screen and (min-width: 769px) and (max-width: 1024px) {
		select {
			min-height: 28px;
			font-size: 12px !important;
		}

		.varv1 {
			width: 24px !important;
			height: 24px !important;
		}
	}

	/* Print styles - hide scroll hints */
	@media print {
		#riiuli_koht::before {
			display: none !important;
		}

		#riiuli_koht {
			overflow: visible !important;
		}
	}

	/* Touch device improvements */
	@media (hover: none) and (pointer: coarse) {

		/* Prevent accidental double-tap zoom */
		* {
			touch-action: manipulation;
		}
	}