/*
	Mobile-only styles for TimesheetPLUS.
	Everything here is gated to phones (<= 640.98px, matching the app's existing
	breakpoint) so desktop layouts are unaffected.
*/
@media (max-width: 640.98px) {
	/* mobile rules */

	/* Fullscreen toggle: hidden on desktop (scoped CSS), shown on mobile.
		!important needed so this beats the scoped `.fs-toggle` display:none. */
	.fs-toggle {
		display: inline-flex !important;
	}

	/* Legal Hide/Show toggle: mobile-only (see .legal-toggle in
		MainLayout.razor.css). !important to beat the scoped display:none.
		Reserve a right gutter on the bar so the centered notice text never
		runs under the fixed control pinned to the bottom-right. */
	.legal-toggle {
		display: block !important;
	}

	#legal {
		padding-right: 64px;
	}

	/* Header bar + title/employee text (see MainLayout.razor.css): shrink the
		60px bar and the 36px/x-large text so they fit a phone in one row, add a
		little edge margin so the title and name don't touch the screen edges, and
		pin the bar to the top while scrolling (the nav above it scrolls away).
		z-index keeps the scrolling content from painting over the pinned bar.
		Mirrors the min-width:641px .top-row sticky rule in MainLayout.razor.css. */
	#header {
		height: 48px !important;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		position: sticky;
		top: 0;
		z-index: 1;
	}

	.app-title {
		font-size: 1.15rem !important;
	}

	.app-title-plus {
		font-size: 0.95rem !important;
	}

	.employee-name {
		font-size: 0.95rem !important;
	}

	/* Logo block (see NavMenu.razor.css): shrink the 110px logo so the top
		bar stays compact instead of dominating a phone screen. */
	.nav-header-full,
	.nav-header-full .container-fluid {
		height: 44px !important;
		padding-top: 0 !important;
	}

	#branding_logo {
		height: 44px !important;
	}

	/* Nav menu: cap at half the screen and scroll internally. Without this,
		a long list of timesheets pushes the content area (and the fixed legal
		notice) so far down that the sticky header overlaps the legal text. */
	.sidebar {
		max-height: 50vh;
		overflow-y: auto;
	}

	/* The icon-menu arrow collapses the sidebar on desktop; the sidebar is a
		full-width top bar on mobile, so the arrow has nothing to collapse. */
	.sidebar .bottom-row .icon-menu-arrow {
		display: none;
	}

	/* Fullscreen mode: strip the chrome to maximize the work area. Driven by the
		is-fullscreen class toggled by toggleFullscreen (iOS Safari has no Web
		Fullscreen API, so the class is the source of truth); a fullscreenchange
		listener re-syncs it on any native exit. Hides the sidebar/nav top bar and
		the legal bar. The header line (Timesheet PLUS title, the fullscreen toggle
		button, and the employee name) stays visible as the exit control. */
	html.is-fullscreen .sidebar {
		display: none !important;
	}

	html.is-fullscreen #legal {
		display: none !important;
	}

	/* The legal Show/Hide toggle is a fixed sibling of #legal, so it stays
		visible even when the bar is display:none. Drop it too while fullscreen. */
	html.is-fullscreen .legal-toggle {
		display: none !important;
	}

	/* Timesheet page (see Timesheet.razor + app.css): the resize JS stamps
		desktop-only pixel sizes from AppState.ClientWidth/ClientHeight, e.g.
		width:ClientWidth-440px, which only hold for the 250px-sidebar row layout.
		On the mobile stacked layout those go negative and the grid + top rows
		collapse into a narrow left column (worse after a fullscreen toggle, which
		fires resize with the sidebar hidden, so #NavMenu measures 0). Force a
		fluid, full-width, stacked layout instead. !important is what beats the
		inline styles here (and app.css's #TimeBlocks { width:700px }). */
	#TimeSheet {
		width: auto !important;
	}

	/* Date picker + Show Schedule/Show All buttons: the doc requires them on
		one row. col-auto (set in the markup) keeps them side-by-side at every
		width; shrink the date field and button padding so all three fit a
		360px phone without wrapping. The field is wide enough for the full
		"Sep 30, 2026" value on one line (nowrap guards against wrapping). */
	#TimeDateRow .iva-date-input {
		width: 125px;
		white-space: nowrap;
	}

	#DisplayTimeblockBtns .btn {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		font-size: 0.85rem;
	}

	#TimeSelected,
	#TimeRecording {
		width: 100% !important;
		height: auto !important;
		float: none !important;
		margin-left: 0 !important;
	}

	#TimeBlocks {
		width: 100% !important;
		max-height: none !important;
	}

	#timeSelect {
		width: 100% !important;
	}

	/* Grid cells: 4 columns at phone width. Give each a comfortable tap
		target (min-height 44px) and shrink the text so the time + code fit
		without wrapping. height:auto lets a cell grow if its content wraps. */
	#TimeBlock {
		height: auto;
		min-height: 44px;
		font-size: 0.75rem;
	}

	/* Copy row (date picker + Copy + Clear Selected): full width beneath the
		grid. The date field is wide enough for the "Copy time from" label to
		stay on one line (it floats up over the field when filled); button
		padding is shrunk so all three fit a 360px phone on one line (the row
		is a fixed-height flex with no wrap). */
	#CopyDiv {
		width: 100% !important;
	}

	#CopyDiv .iva-date-input {
		width: 140px;
	}

	/* Keep the "Copy time from" label on one line so it doesn't wrap and
		cover the date value. */
	#CopyDiv .iva-float-label {
		white-space: nowrap;
	}

	#CopyDiv .btn {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		font-size: 0.85rem;
	}

	/* Program/Activity/Note/Save flow full-width after the grid (capped at
		520px so they don't stretch absurdly on a tablet). */
	#TimeRecording select,
	#TimeRecording textarea,
	#Save {
		width: 100% !important;
		max-width: 520px;
	}

	/* Save button fills its row. */
	#Save p {
		display: flex;
		gap: 10px;
	}

	#Save p button {
		flex: 1 1 auto;
	}

	
/* Review and Submit (see Summary.razor): card-ify the Daily Log table so
	
each day is a rounded card with its fields as label/value rows (the
	
data-label attrs added in step 8). Hiding the thead and making each tr a
	
block card also fixes the clipped Hours column. The tfoot totals become
	
the last card. */
	
#TimeSummary {
	
	
display: block;
	
	
width: 100%;
	
}

	
/* The Daily Log wrapper is width:fit-content (wContent); make it
	
full-width on mobile so the card-ified table fills the screen. */
	
.wContent.tab-scroll {
	
	
width: 100%;
	
}

	
#TimeSummary thead {
	
	
display: none;
	
}

	
#TimeSummary tbody,
	
#TimeSummary tfoot {
	
	
display: block;
	
}

	
#TimeSummary tbody tr {
	
	
display: block;
	
	
border: 1px solid #d9d9d9;
	
	
border-radius: 15px;
	
	
margin-bottom: 10px;
	
	
overflow: hidden;
	
}

	
#TimeSummary tbody td {
	
	
display: flex;
	
	
justify-content: space-between;
	
	
align-items: center;
	
	
gap: 10px;
	
	
text-align: left;
	
	
border-radius: 0;
	
	
border-bottom: 1px solid #f0f0f0;
	
}

	
#TimeSummary tbody td:last-child {
	
	
border-bottom: none;
	
}

	
#TimeSummary tbody td::before {
	
	
content: attr(data-label);
	
	
font-weight: bold;
	
	
flex-shrink: 0;
	
}

	
#TimeSummary tfoot tr {
	
	
display: block;
	
	
border: 1px solid #800047;
	
	
border-radius: 15px;
	
	
margin-bottom: 10px;
	
	
background: #800047;
	
	
color: #fff;
	
	
padding: 10px;
	
}

	
#TimeSummary tfoot td {
display: inline;
}

/* My Team (see MyTeam.razor): card-ify the team table the same way as
#TimeSummary — each employee becomes a rounded card with label/value
rows (data-label attrs added in step 9). Hiding the thead and making
each tr a block card also fixes the clipped last columns. The inline
height:40px on the rows is overridden so cards grow to their content.
Both the MyTeam and BackUp modes share this table. */
#teamTable {
display: block;
width: 100%;
}

#teamTable thead {
display: none;
}

#teamTable tbody {
display: block;
}

#teamTable tbody tr {
display: block;
height: auto !important;
border: 1px solid #d9d9d9;
border-radius: 15px;
margin-bottom: 10px;
overflow: hidden;
}

#teamTable tbody td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
text-align: left;
border-radius: 0;
border-bottom: 1px solid #f0f0f0;
}

#teamTable tbody td:last-child {
border-bottom: none;
}

#teamTable tbody td::before {
content: attr(data-label);
font-weight: bold;
flex-shrink: 0;
}

/* The inline-height scroll wrappers (height: ClientHeight-195px) are
desktop-only; on mobile let them grow to their content. */
	
.tab-scroll {
	
	
height: auto !important;
	
	
overflow: visible !important;
	
}

	
/* Tab button group wraps so the tabs fit a phone width. */
	
.btn-group {
	
	
display: flex;
	
	
flex-wrap: wrap;
	
}
	
.Btn-Tab {
	
	
flex: 1 1 auto;
	
	
white-space: normal;
	
}

/* Legal notice: force it to stay pinned to the bottom of the viewport.
	The scoped .bottom-row rule sets position:fixed but it's not taking
	effect on mobile (the bar scrolls with the page). Explicitly pin it
	and cap the height so it doesn't extend up into the sticky header. */
#legal {
	position: fixed !important;
	bottom: 0;
	left: 0;
	right: 0;
	max-height: 35vh;
	overflow-y: auto;
	z-index: 0;
}

/* Reports page (see Reports.razor): the report-type/detail/range dropdowns
	and the View/Export buttons are float:left inline blocks on desktop.
	On mobile they stack full-width and wrap so every control is reachable. */
#ReportDetail,
#ViewDownload {
	float: none !important;
	width: 100% !important;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#ReportDetail .text-field {
	width: auto;
	min-width: 160px;
}

/* Result table: full width, no fixed max-height (the inline
	ClientHeight-120px cap is desktop-only), horizontal scroll for wide
	reports. */
#ReportDisplay {
	width: 100% !important;
	max-height: none !important;
	overflow-x: auto;
}

/* Text selection: the global `div { user-select:none }` in app.css blocks
	text selection in the Note textarea and other inputs on mobile.
	Re-enable it for text inputs (mobile-only, minimal risk). The
	.user-select-auto precedent already exists on the selects. */
textarea,
input {
	user-select: text;
	-webkit-user-select: text;
}

/* Settings page (see Setting.razor): the two tables have inline
	min-width/max-width caps (250px, 400px) that clip on phones.
	Override to fluid width and shrink the cell padding/font. */
.settings-table {
	width: auto !important;
	max-width: 100% !important;
}

.settings-table td,
.settings-table th {
	padding: 4px;
	font-size: 0.85rem;
}

/* Color picker inputs: strip the default browser decoration (small
	colored squares) and show just a clean rounded swatch. */
.settings-table input[type="color"] {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	padding: 0;
	width: 44px;
	height: 32px;
	cursor: pointer;
	background: none;
}

.settings-table input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

.settings-table input[type="color"]::-webkit-color-swatch {
	border: 2px solid #ccc;
	border-radius: 6px;
}

/* Report view toggle: hidden on desktop, shown on mobile. */
.report-view-toggle {
	display: inline-block;
}

/* Card view for the report table (toggled by the Cards/Table button).
	Same pattern as #TimeSummary and #teamTable: hide thead, make each tr
	a block card, each td a flex label/value row. Column labels come from
	nth-child since the table is dynamically generated HTML. */
.report-cards table {
	display: block;
	width: 100%;
}

.report-cards thead {
	display: none;
}

.report-cards tbody {
	display: block;
}

.report-cards tbody tr {
	display: block;
	border: 1px solid #d9d9d9;
	border-radius: 15px;
	margin-bottom: 10px;
	overflow: hidden;
}

.report-cards tbody td {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	text-align: left;
	border-radius: 0;
	border-bottom: 1px solid #f0f0f0;
	width: 100% !important;
}

.report-cards tbody td:last-child {
	border-bottom: none;
}

/* Column labels for "My Entered Activity" (Detail) report:
	1=Date, 2=Start Time, 3=Duration, 4=Program, 5=Activity, 6=Notes */
.report-cards tbody td:nth-child(1)::before {
	content: "Date";
	font-weight: bold;
	flex-shrink: 0;
}

.report-cards tbody td:nth-child(2)::before {
	content: "Start Time";
	font-weight: bold;
	flex-shrink: 0;
}

.report-cards tbody td:nth-child(3)::before {
	content: "Duration";
	font-weight: bold;
	flex-shrink: 0;
}

.report-cards tbody td:nth-child(4)::before {
	content: "Program";
	font-weight: bold;
	flex-shrink: 0;
}

.report-cards tbody td:nth-child(5)::before {
	content: "Activity";
	font-weight: bold;
	flex-shrink: 0;
}

.report-cards tbody td:nth-child(6)::before {
	content: "Notes";
	font-weight: bold;
	flex-shrink: 0;
}

/* tfoot totals as the last card */
.report-cards tfoot {
	display: block;
}

.report-cards tfoot tr {
	display: block;
	border: 1px solid #800047;
	border-radius: 15px;
	margin-bottom: 10px;
	background: #800047;
	color: #fff;
	padding: 10px;
}

.report-cards tfoot td {
	display: inline;
}
}