/* ==========================================================================
   Mobile-responsive fix for the RasioProject form builder
   (view/default/index.phtml → #_rasioForm / ._input row+col layout)

   WHY THIS FILE EXISTS
   Every module (Obeli, Tbeli, Nbeli, master-supp, etc.) renders its form
   through the SAME loop in view/default/index.phtml:

       <div class="_input" style="margin-left: <?= $row['col'] ?>px;
                                   margin-top:  <?= $row['row'] ?>px">

   ...positioned with `#_rasioForm ._input { position:absolute; }` in that
   file's own <style> block. That's fine on a wide desktop canvas (it's
   basically a manual x/y grid), but on a phone viewport the fixed
   pixel `col` values push inputs straight off the right edge of the
   screen — that's the "Berat / Refraksi / Harga" overflow you're
   seeing on Order Beli.

   Because it's one shared template, fixing it HERE fixes it for every
   controller built on Basic/RasioProject — not just obeli — with no
   PHP changes required.

   HOW TO WIRE IT IN
   Add one <link> tag for this file, loaded AFTER the existing
   stylesheets, in whichever layout wraps assets/view/<view>.phtml
   (that's the AdminLTE-skinned header/sidebar file — not included in
   what you sent me, so you'll need to add the <link> there yourself,
   right before </head>). Because everything below is scoped inside
   @media queries + !important, load order doesn't actually matter —
   you can safely link it first if that's easier to add.
   ========================================================================== */

@media (max-width: 767px) {

	/* Kill the fixed-pixel canvas the absolute layout needs on desktop */
	#_rasioForm {
		height: auto !important;
		min-height: 0 !important;
		width: 100% !important;
		padding: 12px !important;
		box-sizing: border-box;
		overflow: visible;
	}

	#_rasioForm #background {
		position: static !important;
	}

	/* Each field's wrapper: absolute box -> normal stacked block */
	#_rasioForm ._input {
		position: static !important;
		display: block !important;
		float: none !important;
		width: 100% !important;
		margin: 0 0 10px 0 !important;
	}

	/* Label above the input instead of floated beside it */
	#_rasioForm ._input ._label {
		float: none !important;
		display: block !important;
		width: 100% !important;
		margin-bottom: 3px;
		font-weight: 600;
		color: #555;
	}

	/* The field's inner wrapper is <div id="_divLoc_<name>" style="float:left">
	   (see view/default/index.phtml ~line 1229). Turn it into a flex row so
	   the input and its search/load icon sit side by side and wrap safely. */
	div[id^="_divLoc_"] {
		float: none !important;
		display: flex !important;
		align-items: center;
		width: 100% !important;
	}

	#_rasioForm input[type="text"],
	#_rasioForm input[type="password"],
	#_rasioForm select,
	#_rasioForm textarea {
		flex: 1 1 auto;
		min-width: 0;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		font-size: 16px; /* stops iOS Safari auto-zooming on focus */
	}

	/* The little magnifier/load buttons injected after lookup fields
	   ($('#'+k).after(_imgLoad) — see index.phtml ~line 1275) were
	   positioned with negative margins sized for a narrow fixed input. */
	#_rasioForm ._imgCari,
	#_rasioForm ._imgCariD {
		position: static !important;
		margin: 0 0 0 6px !important;
		flex: 0 0 auto;
	}

	/* Detail / line-item grid (._rasioDet), for modules that use one */
	._rasioDet {
		position: static !important;
		width: 100% !important;
		margin: 0 0 15px 0 !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Save/First/Prev/Next/Last/Browse/Add/Del/Edit/prinT/View toolbar */
	.tabButton2 {
		display: flex !important;
		flex-wrap: wrap;
		gap: 6px;
		padding: 10px 6px !important;
	}

	.tabButton2 input[type="button"],
	.tabButton2 input[type="submit"] {
		flex: 1 1 calc(33.333% - 6px);
		min-width: 90px;
		margin: 0 !important;
		box-sizing: border-box;
	}
}

/* Small phones (~iPhone SE and narrower): 2 buttons per row instead of 3 */
@media (max-width: 420px) {
	.tabButton2 input[type="button"],
	.tabButton2 input[type="submit"] {
		flex: 1 1 calc(50% - 6px);
	}
}
