/*
Admin styles. Deliberately minimal - this is a working dashboard, not a
product surface. The one real job here is keeping wide report tables usable
on a phone.
*/

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	padding: 1rem;
	/* 16px base: iOS safari zooms the page when a smaller input takes focus */
	font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	color: #222;
}

h1 { font-size: 1.35rem; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
h3 { font-size: .95rem; margin: 1rem 0 .35rem; }
p  { margin: .35rem 0; }

hr { margin: 1.25rem 0; border: 0; border-top: 1px solid #ccc; }

.notice,
.warning-msg { padding: .5rem; background: #fff3cd; border: 1px solid #e0c97f; }

input, button, select { font: inherit; max-width: 100%; }

/* Tap targets - 44px is the floor both platforms' guidelines land on */
button { min-height: 44px; padding: .5rem 1rem; }


/* Report tables
-------------------------------------------------- */
/*
The table keeps its natural width and scrolls inside this wrapper, instead of
stretching the document and making every heading and paragraph on the page
scroll sideways with it.
*/
.table-wrap {
	overflow-x: auto;
	/* momentum scrolling on older ios */
	-webkit-overflow-scrolling: touch;
	border: 1px solid #ccc;
}

table {
	border-collapse: collapse;
	/* Fill the wrapper when the columns are narrow, overflow it when they
	   are not - `width` alone would squash a wide table back into the frame */
	min-width: 100%;
	font-size: .8rem;
}

th, td {
	padding: .45rem .6rem;
	text-align: left;
	border-bottom: 1px solid #ddd;
	/*
	One line per row keeps a row scannable while the wrapper scrolls
	sideways. The long values - user agent, destination, referer - clip with
	an ellipsis and carry their full text in a title attribute.
	*/
	white-space: nowrap;
	max-width: 15rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

th {
	background: #f2f2f2;
	border-bottom: 2px solid #ccc;
	font-weight: 600;
}

tbody tr:nth-child(even) { background: #fafafa; }

/*
The summary is a single record, so it renders transposed - label on the left,
value on the right - which reads down a narrow screen instead of across it.
*/
.summary { min-width: 0; width: 100%; }
.summary th { width: 55%; background: transparent; border-bottom: 1px solid #ddd; }
.summary td { white-space: normal; text-align: right; font-variant-numeric: tabular-nums; }