/* The new screens on a computer use the whole width of the screen.
   Aakash, 2 Oct: "it's not full fit to computer screen". Every new screen sat in a
   560-1240px column -- the website template's <main class="container"> plus each
   page's own max-width -- leaving a third of a 1920px monitor empty on each side.

   Loaded on website pages through web_include_css (hooks.py). Every rule sits
   inside the computer-screen query and is scoped to a page's own root, so phones
   and the floor tablets keep exactly the layout they had, and website pages that
   are not ours are untouched. !important because several pages carry their own
   inline <style> that would otherwise win on order.

   Card lists (hourly / daily log rounds, the Packing stages and lists) become a
   grid of cards rather than one card stretched across the screen. */
@media (min-width: 1024px) {
	/* the website template's own container */
	html:has(.dm-pay, .fd, .mf, .wf, .jc, .pd-wrap, .hc-wrap, .dl-wrap, .pk) main.container {
		max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
	}

	/* /pay /buy /sell /costing /develop /inbox /qc /part-check /production, and /front-desk */
	.dm-pay .wrap, .fd .wrap { max-width: none !important; padding-left: 32px !important; padding-right: 32px !important; }
	#dm-inbox .cwrap { max-width: none !important; padding-left: 32px !important; padding-right: 32px !important; }
	/* a message reads best at a line length, even on a wide screen */
	#dm-inbox .mb { max-width: 120ch; }

	/* the production floor pages: Today, Machines, Work Orders, History, What it cost, Reports, Job card, Dashboard */
	.mf, .wf, .jc, .pd-wrap { max-width: none !important; padding-inline: 32px !important; }
	.jc .fc-row { max-width: none !important; padding-inline: 32px; }

	/* Hourly Counter Log and Daily Production Log: the rounds side by side */
	.hc-wrap, .dl-wrap { max-width: none !important; padding: 0 32px 100px !important; }
	#hc-rows, #dl-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 12px 16px; align-items: start; }
	#hc-rows > *, #dl-rows > * { margin-top: 0 !important; margin-bottom: 0 !important; min-width: 0; }

	/* Packing: the stage buttons as tiles, entry lists as a grid, everything else full width */
	.pk { max-width: none !important; padding: 16px 32px 120px !important; }
	#pk-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px 16px; align-items: stretch; }
	#pk-body > :not(.pk-big) { grid-column: 1 / -1; }
	#pk-body > .pk-big { margin: 0 !important; }
	.pk-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 10px 14px; }
}

/* The New screens / ERPNext switch at the top of every new screen: dark charcoal, not green
   (Aakash, 14 Oct 2026: "remove green in New UI switch -- dark gray"). #screens is the
   switch on /home, /buy, /sell, /pay ... ; #pfx-screens the one in the production top bar.
   Outside the width query on purpose: the colour holds on every screen size. */
#screens button.on, #pfx-screens button.on {
	background: #2B2F33 !important; border-color: #2B2F33 !important; color: #fff !important;
}
html[data-dm-theme="dark"] #screens button.on, html[data-dm-theme="dark"] #pfx-screens button.on {
	background: #D9DCE1 !important; border-color: #D9DCE1 !important; color: #14161A !important;
}

/* Number boxes: no up / down spinner arrows anywhere on the new screens (Aakash, 26 Oct 2026). */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Phones only (Aakash, 28 Oct 2026: "why New Desk mobile site not working … I don't want changes for desktop"):
   the few New Desk screens that were wider than a phone and slid sideways. Nothing here reaches a screen wider
   than 600px. (The search bar's phone rule lives in dm_global_search.js.) */
@media (max-width: 600px) {
	/* page title row (FindMe): the title block may shrink and wrap instead of pushing past the edge */
	.dm-pay .top-row > div:first-child { flex: 0 1 auto !important; min-width: 0; flex-wrap: wrap; }
	.dm-pay .top-row h1 { white-space: normal !important; }
	/* Inbox Zero: long part numbers in a row break instead of widening the page */
	#dm-inbox .list b.mono, #dm-inbox .list .dm-ib .cpn { overflow-wrap: anywhere; }
	#dm-inbox .list .dm-ib { white-space: normal; flex-wrap: wrap; }
	/* BOM & Packing: the item list sits above the details, not beside them */
	#dm-bompack .bp-layout { grid-template-columns: minmax(0, 1fr) !important; }
	#dm-bompack .bp-side { position: static; max-height: 55vh; }
	/* Mail: folders, then the conversation list, then the open mail, one under the other */
	#dm-mail .ml { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; min-height: 0 !important; }
	#dm-mail .ml-side { max-height: 32vh; }
	#dm-mail .ml-mid { max-height: 70vh; }
	#dm-mail .ml-read { min-height: 50vh; }
	/* Packing (e_packing's /packing): the steps list above the step (it was a 250px column beside a 94px one),
	   and the overview in two stage columns, not four squeezed ones */
	.pk-grid, .pk-grid.with-plan { grid-template-columns: minmax(0, 1fr) !important; }
	.pk-side { position: static !important; }
	.pk-dash { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}