/* ==========================================================================
   Mobile-responsive fixes for assets/thema/2019/index.phtml
   (AdminLTE 2.x, skin-blue — the header + sidebar shell every page uses)

   Requires two small edits already made in index.phtml:
     - the company-name <span> now has class="_headerPt"
     - the white content box now has id="_contentBox"
   Everything below is scoped to @media (max-width) + !important, so
   load order relative to bootstrap/AdminLTE.min.css doesn't matter.
   ========================================================================== */

/* The <footer class="main-footer"> in index.phtml is empty — it's just
   dead space AdminLTE reserves at the bottom of every page. On mobile,
   when the off-canvas sidebar opens, AdminLTE's app.js (line ~241) adds
   body.sidebar-open and translates .content-wrapper/.right-side/
   .main-footer sideways together — the empty footer's border/background
   is what you're seeing sitting oddly near the sidebar. Since it's
   unused, just remove it everywhere, not only on mobile. */
.main-footer {
	display: none !important;
}

@media (max-width: 767px) {

	/* While the sidebar drawer is open, hide the Save/Prev/Last/Add/Edit
	   toolbar — with the sidebar's 230px eating most of a phone's width,
	   the toolbar buttons wrap into a single narrow column that visually
	   clashes with the sidebar. You're navigating, not filling the form,
	   while the drawer is open anyway. body.sidebar-open is the real
	   class AdminLTE's app.js toggles (dist/js/app.js line ~242). */
	body.sidebar-open .tabButton2 {
		display: none !important;
	}

	/* Bell / date / avatar row (.navbar-custom-menu). AdminLTE already
	   stacks .logo and .navbar into two full-width rows on mobile
	   (its own 767px rule), which is what .main-sidebar's
	   padding-top: 100px below is sized for. This row was rendering as
	   a THIRD stacked row that the sidebar's padding didn't account for,
	   so it sat on top of the sidebar's "Master" menu item instead of
	   pushing it down. It's non-essential chrome on a phone — hide it
	   and keep the header at AdminLTE's normal two-row mobile height. */
	.main-header .navbar-custom-menu {
		display: none !important;
	}

	/* Company name (PT. TRIDAYA AGRO SEJAHTERA) next to the hamburger —
	   don't let a long name force horizontal scroll, truncate it */
	.main-header .sidebar-toggle ._headerPt {
		display: inline-block;
		max-width: 70vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: middle;
		font-size: 12px !important;
	}

	/* Matches AdminLTE's own default mobile header height (logo row +
	   navbar row, ~50px each) now that .navbar-custom-menu no longer
	   adds a third row */
	.main-sidebar,
	.left-side {
		padding-top: 100px !important;
	}

	/* The white content box (id="_contentBox") — 20px margin + 20px
	   padding per side eats 80px of a 375px-wide screen before the
	   form even starts */
	#_contentBox {
		margin-left: 8px !important;
		margin-right: 8px !important;
		padding: 10px !important;
	}
}

@media (max-width: 420px) {
	.main-header .sidebar-toggle ._headerPt {
		max-width: 55vw;
		font-size: 11px !important;
	}
}