/* ============================================================
   responsive.css - mobile-responsive layer for admin_2026.

   Loaded after css.css. Kept as a separate file (rather than
   editing css.css in place) so desktop rendering stays
   unchanged unless a rule here explicitly overrides it.
   ============================================================ */

/* ----- fluid containers (apply at all widths - harmless on desktop,
   since these are equal to or looser than the old fixed values) ----- */
#container { width: auto; max-width: 960px; padding-left: 10px; padding-right: 10px; box-sizing: border-box; }
#headerContainer { height: auto; padding: 10px 0; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
#contentContainer { width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: flex-start; }
#leftContent { flex: 1 1 560px; box-sizing: border-box; }
#rightContent { flex: 0 0 260px; box-sizing: border-box; }
.pageContent { flex: 1 1 100%; width: 100%; padding: 5px; text-align: left; box-sizing: border-box; }

img { max-width: 100%; height: auto; }

/* ----- fonts / readability ----- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ----- header: logo / status / search ----- */
#headerContainer .logo-link { flex: 0 0 auto; }
#headerContainer .logo { display: block; margin-left: 10px; }
#headerContainer .headerStatus { flex: 1 1 auto; text-align: center; margin: 0; }
#headerContainer .autocomplete-container { flex: 0 0 auto; position: static; width: auto; margin: 0; }
#headerContainer .autocomplete { position: static; width: 200px; }
#headerContainer .autocomplete-submit { position: static; vertical-align: middle; margin-left: 4px; }

/* ----- nav toggle button: hidden on desktop, shown at the breakpoint below ----- */
.nav-toggle { display: none; }

/* ----- leads.LeadDetail activity-history columns (replaces old inline
   float/width styles so the mobile override below can take over cleanly) ----- */
.activity-col-form { float: left; width: 350px; text-align: left; padding-right: 5px; }
.activity-col-info { float: left; width: 400px; text-align: left; }

/* ----- decorative box widgets: fluid width instead of fixed px ----- */
.box, #box1_container, #orangebox, #orangeboxsmall, #orangeboxlarge, #boxContainer {
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}
.box-content, div#box1_content { width: auto; max-width: 100%; box-sizing: border-box; }

/* ----- data tables: never let a table force page-level horizontal scroll.
   Applies site-wide so pages not individually tuned yet still degrade
   gracefully on narrow screens. ----- */
table.leads_listing,
table.pagination,
table.trends-data,
#outbox,
#allleads-filters table,
table#details,
#col_headers table {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ============================================================
   Mobile / tablet breakpoint
   ============================================================ */
@media (max-width: 800px) {

	body { width: 100%; }

	/* header stacks and centers on narrow screens */
	#headerContainer { flex-direction: column; text-align: center; }
	#headerContainer .logo-link { margin: 0 auto; }
	#headerContainer .autocomplete-container { width: 100%; }
	#headerContainer .autocomplete { width: 70%; }

	/* two-column home layout stacks - leftContent (lead/agent management) first,
	   rightContent (stat boxes) follows, with a gap so they don't run together */
	#leftContent, #rightContent { flex: 1 1 100%; width: 100%; margin-bottom: 20px; }
	#rightContent { margin-bottom: 0; }

	/* ----- readability: bump the base size back up and stop iOS auto-zooming
	   on form focus (anything under 16px triggers it) ----- */
	body { font-size: 1em; }
	input.text, input[type="text"], input[type="password"], input[type="email"],
	select, textarea, input.select {
		font-size: 16px;
	}

	/* ----- vertical rhythm: stacked blocks shouldn't touch ----- */
	.box, #boxContainer, #orangebox, #orangeboxsmall, #orangeboxlarge,
	div#LeadManangement, div#AgentManagement, div#SearchAndEmail {
		margin-bottom: 15px;
	}

	/* ----- home page "management" sections: these relied on a fixed-height
	   decorative background icon with large left-padding to clear it, which
	   doesn't leave enough room for wrapped text on narrow screens. Drop the
	   icon and padding here, let height grow with content instead. ----- */
	div#LeadManangement, div#AgentManagement, div#SearchAndEmail {
		height: auto;
		background-image: none;
	}
	.NavigationLinks { padding: 15px 10px; }

	/* stack the link "grid" tables inside NavigationLinks into a single
	   column of full-width tap targets instead of a cramped multi-column row */
	.NavigationLinks table, .NavigationLinks table tbody,
	.NavigationLinks table tr, .NavigationLinks table td {
		display: block;
		width: 100% !important;
	}
	.NavigationLinks table td { padding: 6px 0; }

	/* tour buttons on the leads list page: fixed 125px tiles wrap unevenly -
	   let them flex into a 2-up grid instead */
	#welcome_buttons { height: auto; display: flex; flex-wrap: wrap; }
	#welcome_buttons a { float: none; width: 47%; height: auto; min-height: 35px; box-sizing: border-box; }

	/* ----- leads.LeadDetail: a literal 3-column layout <table> (not CSS boxes),
	   so it needs its own stacking rule rather than relying on .box fluidity ----- */
	table.detail-columns > tbody > tr > td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	/* comments section: 2-column table (entry form | comment list) */
	table#comments > tbody > tr > td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	#comments-list { width: auto; max-width: 100%; }
	#comments textarea { width: 100%; box-sizing: border-box; }

	/* activity history date-picker + instructions columns */
	.activity-col { float: none; width: 100%; padding-right: 0; }

	/* ----- hamburger nav toggle ----- */
	.nav-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		box-sizing: border-box;
		padding: 10px 12px;
		margin: 0 0 5px 0;
		background: #fde6b4;
		border: 1px solid #f29514;
		cursor: pointer;
	}
	.nav-toggle-icon { display: flex; flex-direction: column; justify-content: space-between; width: 22px; height: 16px; flex: 0 0 auto; }
	.nav-toggle-bar { display: block; width: 100%; height: 2px; background: #000; }
	.nav-toggle-label { font-weight: bold; font-size: 0.9em; }

	/* nav collapsed by default on mobile, full tree shown when opened */
	ul.jd_menu#mainNav {
		display: none;
		position: static;
		width: 100%;
		z-index: 1000;
		background: #fff;
		border: 1px solid #f29514;
		margin-bottom: 10px;
	}
	ul.jd_menu#mainNav.nav-open { display: block; }

	/* every level becomes a plain stacked list - bypasses jdMenu's
	   hover-positioned behavior, which doesn't work on touch anyway */
	ul.jd_menu#mainNav li,
	ul.jd_menu#mainNav ul li {
		float: none;
		width: 100%;
		box-sizing: border-box;
		text-align: left;
		height: auto;
	}
	ul.jd_menu#mainNav > li {
		border-bottom: 1px solid #eee;
		padding: 8px 10px;
	}
	ul.jd_menu#mainNav ul {
		display: block !important;
		position: static !important;
		width: 100% !important;
		border: 0;
		padding-left: 15px;
	}
	ul.jd_menu#mainNav ul li { padding: 6px 10px; }

	/* larger tap targets in scrollable tables */
	table.leads_listing td, #outbox td { padding: 8px 4px; }
}