/* ===============================================================
   pageframe.css
   Loads AFTER main.css on any page that includes it, so these
   rules override main.css for that page only. Old pages that
   don't link this file are completely untouched.
   =============================================================== */

/* Replaces the stretched pagebg_lrg.png with a plain CSS box.
   No image = no distortion, no matter how tall the page gets. */
#pagelrg {
	background-image: none;
	background-color: #ffffff;
	border-radius: 12px 12px 12px 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
	padding-bottom: 10px;
	min-height: calc(100vh - 40px);

	/* THE ACTUAL FIX for "doesn't adjust to screen size": main.css
	   gives #pagelrg a hard width: 1160px, on top of margin-left: 155px
	   for the fixed left sidebar. That's a fixed-size box glued to the
	   left sidebar — however wide or narrow the monitor is, the box
	   stays exactly 1160px and the rest of the screen is just empty
	   background. Every earlier change in this file only touched the
	   <1024px mobile breakpoint, so above that this line never moved.

	   Fixing it: keep the left margin (that's genuinely the left
	   sidebar's width, not a screen-size thing), reserve the same space
	   on the right for the fixed 150px-wide .rightlrg sidebar plus its
	   30px margin-right, and let the box's own width go auto — so it
	   fills whatever room is actually left between the two sidebars on
	   THIS monitor, instead of a number picked for one specific screen. */
	margin-right: 200px;
	width: auto;
	max-width: none;
	box-sizing: border-box;
}

/* Switches the menus from "absolute" (pinned to the document,
   scrolls away) to "fixed" (pinned to the browser window, stays
   visible). No top/left/right numbers are set here on purpose —
   leaving them out means each menu keeps the exact position it
   already has today; only the scrolling behaviour changes. */
.leftlrg {
	position: fixed;
}

.rightlrg {
	position: fixed;
}

/* ===============================================================
   MOBILE MENU (below 1024px)
   Menus slide off-screen and are opened via two small toggle
   buttons + a dark backdrop. Above 1024px none of this applies —
   desktop behaviour is untouched.
   =============================================================== */

/* Toggle buttons + backdrop: hidden on desktop by default */
.menu-toggle-left,
.menu-toggle-right,
.menu-overlay {
	display: none;
}

@media (max-width: 1024px) {

	.leftlrg,
	.rightlrg {
		top: 0;
		width: 300px;
		max-width: 85vw;
		height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
		box-sizing: border-box;
		padding: 10px;
		z-index: 2000;
		background-color: #ffffff;
		transition: transform 0.3s ease;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
	}

	.leftlrg {
		left: 0;
		transform: translateX(-100%);
	}

	.rightlrg {
		right: 0;
		transform: translateX(100%);
	}

	.leftlrg.menu-open,
	.rightlrg.menu-open {
		transform: translateX(0);
	}

	/* Toggle buttons: shown only on mobile widths */
	.menu-toggle-left,
	.menu-toggle-right {
		display: block;
		position: fixed;
		top: 12px;
		z-index: 2100;
		width: 42px;
		height: 42px;
		background-color: #000;
		color: #fff;
		border: none;
		border-radius: 6px;
		font-size: 20px;
		cursor: pointer;
	}

	.menu-toggle-left {
		left: 12px;
	}

	.menu-toggle-right {
		right: 12px;
	}

	/* Dark backdrop shown behind an open menu */
	.menu-overlay {
		position: fixed;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1900;
	}

	.menu-overlay.active {
		display: block;
	}
}

/* ===============================================================
   RESPONSIVE CONTENT AREA
   ---------------------------------------------------------------
   #pagelrg itself is fluid now (fixed above), but several things
   nested INSIDE it in main.css still carry their own fixed pixel
   widths, sized to fit the old fixed 1160px box: #scroll-container
   (1020px) and the table inside it (1080px), .main-content (1020px),
   #frame (1000px), #breadcrumb (1095px). Now that #pagelrg itself
   stretches to fill the screen, anything still pinned to one of
   those old numbers just sits at the left with empty white space
   next to it — that's exactly what "the content stays narrow" is.

   These rules are unconditional (no media query) so the content
   fills whatever width #pagelrg actually has on THIS screen, not
   only below the 1024px mobile breakpoint. */

#scroll-container,
.main-content,
#frame,
#breadcrumb {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}

/* THE ACTUAL BLOCKER on the legal-debt pages (bad_debt_summary.php,
   bad_debt_movement.php, and anything else rendered through
   legalDebtCss()): that PHP function — in debtor_common.php — outputs
   ".proj-container { width: 1120px; ... }" and ".finance-nav { width:
   1120px; ... }" into a <style> block that loads AFTER pageframe.css.
   .proj-container is the div that directly wraps the whole report body
   on these pages, so this one rule capped everything inside it at
   1120px regardless of anything done to #pagelrg or the table — no
   inline style involved this time, just a class rule I hadn't written
   an override for yet. */
.proj-container,
.finance-nav {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}

/* legalDebtCss() only ever gave .proj-container a margin-left: 10px —
   never a margin-right — because at a fixed 1120px it never needed
   one; there was always slack left over on the right by accident.
   Now that it's fluid, give it back some right-hand breathing room so
   the table/content doesn't run flush to the box's own edge. */
.proj-container {
	padding-right: 15px;
}

/* Safety net for tables like the one on manual_debtors.php, which drops
   <table class="proj-table"> straight into .proj-form-box with no
   .table-scroll / #scroll-container wrapper at all (bad_debt_summary.php
   has one, this page never got one). table-layout is auto, and columns
   like Client/Owed To/Description aren't forced to wrap, so once their
   natural content needs more room than the viewport has — which
   browser zoom brings on early, since zooming in shrinks the effective
   CSS-pixel width of the viewport — there was nothing to catch the
   overflow, so the table pushed .proj-form-box, .proj-container and the
   page itself wider instead of scrolling internally. .proj-form-box is
   the one wrapper every one of these report panels already has, with or
   without an extra scroll div inside it, so this is a permanent safety
   net rather than a per-page patch. */
.proj-form-box {
	overflow-x: auto;
}

/* The report table itself can still be its natural (possibly wider)
   size and scroll horizontally within #scroll-container, which
   already sets overflow-x: auto for that — this is for genuinely
   too-many-columns tables, not a substitute for the container
   filling the page. */
#scroll-container table {
	width: max-content;
	min-width: 100%;
}

.total-box {
	min-width: 0;
	width: 100%;
}

/* bad_debt_summary.php (and presumably other pages styled through
   legalDebtCss()) put the report table in its own scroll wrapper —
   .table-scroll — with the <table> itself carrying an inline
   style="width: 1080px". Same pattern as everything else here: that
   number was sized to fit the old fixed box, so now it just sits
   narrow inside the new fluid one. !important overrides the inline
   width; min-width keeps the original 1080px as the point below
   which .table-scroll's own overflow-x: auto takes over and the
   table scrolls horizontally instead of squeezing illegibly. */
.proj-table {
	width: 100% !important;
	min-width: 1080px;
}

/* Same story on home.php: the div wrapping #breadcrumb, and the
   <hr> under it, carry inline style="width:1050px" / "width:1125px".
   An inline style normally beats an external stylesheet, but
   !important still wins over a plain (non-important) inline style —
   the same trick this codebase already uses for its print rules and
   the single-scrollbar section further down. Targeted via
   "#content > div:first-child" because main.css already keys its own
   sticky-header rule off that exact structural selector, so it's
   guaranteed to be the right element on every page that follows this
   layout, regardless of what inline width a given page happens to
   set on it. */
#content > div:first-child {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	flex-wrap: wrap;
}

#content > div:first-child hr {
	width: 100% !important;
}

@media (max-width: 1024px) {

	/* No more 155px/180px reserved for sidebars that are now an
	   off-canvas drawer, and no more fixed width. */
	#pagelrg {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
	}

	body {
		padding: 10px;
	}
}

@media (max-width: 600px) {

	/* Slightly larger, more tappable base text on phones than the
	   desktop 9pt. */
	* {
		font-size: 11px;
	}

	.category-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.count-box {
		flex-wrap: wrap;
	}

	.performance-card h3,
	.performance-label strong {
		font-size: 18px;
	}
}