/*
 * Front-end styling for the TMS console shell.
 *
 * Highlander's own brand colours, sampled from their logo: #00A651 green and
 * #231F20 near-black. On dark grounds the brand green reads too dark, so the
 * dark palette below substitutes #35c47c with #08130d for text on it.
 *
 * Forked from creo-edi-connector's assets/app.css and renamed cedi- -> ctms-
 * throughout. Only the chrome survived the fork — the layout, the card and
 * form language, the theme tokens, the mobile header collapse. Everything
 * bound to a tender's own behaviour (the countdown ticker, the arrival tint
 * and its "New" pill, the revision diff table, the shipment journey bar, the
 * status-sequence buttons and their confirmation dialog, the arrival chime
 * and its sound toggle, the deadline-reminder row builder, the raw-EDI
 * <details> block) had no meaning here and was left out rather than carried
 * over unused. Do not merge this file back with the connector's — the two
 * plugins deploy independently and each has its own cache-busting version
 * constant.
 *
 * Laid out mobile-first: nothing here depends on the WordPress theme — this
 * is an application, and inheriting a marketing theme's typography would
 * fight it the whole way.
 */

/* Light is the default palette. Dark is defined twice below — once behind the
   OS preference, once behind an explicit choice — so all three states (light,
   dark, and "follow the system") resolve to a complete set. Every colour is a
   token: a literal anywhere else is a colour that only works in one theme. */
:root {
	--brand: #00a651;
	--brand-dark: #008542;
	--on-brand: #ffffff;
	--ink: #231f20;
	--muted: #6b7280;
	--line: #e3e5e8;
	--bg: #f4f6f5;
	--card: #ffffff;
	--field: #ffffff;
	--danger: #b32d2e;
	--warn: #bd5c00;
	--radius: 10px;

	/* Semantic washes, kept separate from the brand accent. */
	--ok-wash: #e6f6ed;   --ok-line: #a8ddc0;   --ok-ink: #008542;
	--bad-wash: #fdecec;  --bad-line: #f0b6b6;  --bad-ink: #b32d2e;
	--warn-wash: #fff4e5; --warn-line: #f3d3a5; --warn-ink: #bd5c00;
	--info-wash: #eef4fb; --info-line: #bcd3ee; --info-ink: #14568f;

	--shadow: rgba(0, 0, 0, .12);
	--shadow-lg: rgba(0, 0, 0, .22);
	--backdrop: rgba(15, 23, 20, .45);
	--halo: rgba(0, 166, 81, .16);
	--on-brand-soft: rgba(255, 255, 255, .85);
	--on-brand-chip: rgba(255, 255, 255, .28);

	/* Native form controls — the date and time picker panels, scrollbars,
	   spinners — follow this, not our tokens. Omitting it leaves a white
	   calendar popping out of a dark page. */
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--brand: #35c47c;
		--brand-dark: #7ddcab;
		--on-brand: #08130d;
		--ink: #e6ece8;
		--muted: #93a29a;
		--line: #2a352e;
		--bg: #0e1411;
		--card: #161d19;
		--field: #1b2420;
		--danger: #ef8b83;
		--warn: #e0a663;

		--ok-wash: #11291d;   --ok-line: #1f6a45;   --ok-ink: #7ddcab;
		--bad-wash: #2c1513;  --bad-line: #6d2b26;  --bad-ink: #ef8b83;
		--warn-wash: #2a1f10; --warn-line: #6b4a1c; --warn-ink: #e0a663;
		--info-wash: #11202e; --info-line: #22405c; --info-ink: #8fbde8;

		--shadow: rgba(0, 0, 0, .5);
		--shadow-lg: rgba(0, 0, 0, .6);
		--backdrop: rgba(0, 0, 0, .62);
		--halo: rgba(53, 196, 124, .22);
		--on-brand-soft: rgba(8, 19, 13, .72);
		--on-brand-chip: rgba(8, 19, 13, .18);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--brand: #35c47c;
	--brand-dark: #7ddcab;
	--on-brand: #08130d;
	--ink: #e6ece8;
	--muted: #93a29a;
	--line: #2a352e;
	--bg: #0e1411;
	--card: #161d19;
	--field: #1b2420;
	--danger: #ef8b83;
	--warn: #e0a663;

	--ok-wash: #11291d;   --ok-line: #1f6a45;   --ok-ink: #7ddcab;
	--bad-wash: #2c1513;  --bad-line: #6d2b26;  --bad-ink: #ef8b83;
	--warn-wash: #2a1f10; --warn-line: #6b4a1c; --warn-ink: #e0a663;
	--info-wash: #11202e; --info-line: #22405c; --info-ink: #8fbde8;

	--shadow: rgba(0, 0, 0, .5);
	--shadow-lg: rgba(0, 0, 0, .6);
	--backdrop: rgba(0, 0, 0, .62);
	--halo: rgba(53, 196, 124, .22);
	--on-brand-soft: rgba(8, 19, 13, .72);
	--on-brand-chip: rgba(8, 19, 13, .18);
}

* { box-sizing: border-box; }

/* Author rules beat the UA stylesheet whatever their specificity, so anything
   with its own `display` — a .ctms-btn, say — ignores the hidden attribute
   without this. */
[hidden] { display: none !important; }

body.ctms {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* ---- chrome ---------------------------------------------------------- */

.ctms-bar {
	background: var(--field);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 20;
}
.ctms-bar-in { position: relative; }

.ctms-bar-in {
	max-width: 1100px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.ctms-brand { display: block; flex: 0 0 auto; }
.ctms-bar img { height: 38px; width: auto; display: block; }

.ctms-bar nav {
	display: flex;
	gap: 4px;
	margin-left: auto;
	align-items: center;
	flex-wrap: wrap;
}

.ctms-bar nav a {
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	padding: 7px 12px;
	border-radius: 7px;
}

.ctms-bar nav a:hover { background: var(--bg); }
.ctms-bar nav a.on { background: var(--brand); color: var(--on-brand); }
.ctms-bar nav .who { color: var(--muted); font-weight: 400; font-size: 13px; }
.ctms-navsep { display: none; }

.ctms-tools { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }

/* Hamburger, drawn rather than iconed so it inherits the theme and animates
   into a close button. Hidden entirely on desktop. */
.ctms-burger {
	display: none;
	width: 42px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: none;
	cursor: pointer;
	position: relative;
}
.ctms-burger span {
	position: absolute;
	left: 11px;
	width: 18px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform .18s ease, opacity .12s ease;
}
.ctms-burger span:nth-child(1) { top: 13px; }
.ctms-burger span:nth-child(2) { top: 19px; }
.ctms-burger span:nth-child(3) { top: 25px; }

.ctms-burger[aria-expanded="true"] { border-color: var(--brand); }
.ctms-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ctms-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ctms-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
	.ctms-burger span { transition: none; }
}

/* ---- phone ----------------------------------------------------------
 *
 * A row of nav links wrapping across a sticky bar eats the top third of a
 * phone screen. Below this width the links collapse into a panel and only
 * the one-tap theme toggle stays out.
 */
@media (max-width: 760px) {
	.ctms-bar-in { padding: 8px 14px; gap: 10px; }
	.ctms-bar img { height: 30px; }
	.ctms-burger { display: block; }

	.ctms-bar nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		margin: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--field);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 10px 24px var(--shadow);
		padding: 6px;
		display: none;
	}
	.ctms-bar nav.open { display: flex; }

	/* Full-width rows with a real tap target, not 14px links side by side. */
	.ctms-bar nav a {
		padding: 13px 14px;
		font-size: 15.5px;
		border-radius: 8px;
		min-height: 46px;
		display: flex;
		align-items: center;
	}
	.ctms-bar nav a.on { background: var(--brand); color: var(--on-brand); }

	.ctms-navsep {
		display: block;
		height: 1px;
		background: var(--line);
		margin: 6px 8px;
	}
	.ctms-bar nav .who {
		padding: 4px 14px 8px;
		font-size: 12.5px;
		text-transform: uppercase;
		letter-spacing: .06em;
	}
	.ctms-bar nav a.ctms-out { color: var(--danger); }
}

.ctms-wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }

h1.ctms-h { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; }
.ctms-titlebar {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.ctms-titlebar h1.ctms-h { margin: 0; }
.ctms-titlebar .ctms-tags { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
h2.ctms-h { font-size: 16px; margin: 28px 0 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ctms-sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }

/* ---- cards ----------------------------------------------------------- */

.ctms-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	margin-bottom: 12px;
}

a.ctms-card { display: block; text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
a.ctms-card:hover { border-color: var(--brand); transform: translateY(-1px); }

.ctms-card-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

/* ---- status pills ------------------------------------------------------ */

.ctms-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--bg);
	color: var(--muted);
}
.ctms-pill.ok { background: var(--ok-wash); color: var(--ok-ink); }
.ctms-pill.bad { background: var(--bad-wash); color: var(--bad-ink); }
.ctms-pill.warn { background: var(--warn-wash); color: var(--warn-ink); }
.ctms-pill.info { background: var(--info-wash); color: var(--info-ink); }

/* ---- dispatch board ---------------------------------------------------
 *
 * Semantic colour only (the --ok/--bad/--warn/--info washes above), never
 * the brand green — see the class docblock at the top of this file. Late
 * and "revision unseen" are the two flags the board has to make impossible
 * to miss without reading every row.
 */

.ctms-filters { display: flex; flex-direction: column; gap: 0; }
.ctms-filter-flags { margin-top: -2px; }
.ctms-check { display: flex; align-items: center; gap: 6px; font-weight: 400; flex: 0 1 auto; }

table.ctms-board-t { min-width: 880px; }
.ctms-arrow { color: var(--muted); padding: 0 2px; }

/* A revised tender landed under a load someone may already have planned
   around — the single most important thing on the board, so it gets both a
   stripe (readable at a glance down the whole list) and the pill next to
   the load number (readable in the row itself). */
tr.ctms-row-revision { box-shadow: inset 4px 0 0 var(--warn-line); }
tr.ctms-row-revision td:first-child { padding-left: 8px; }

/* Late is its own thing from "revised" — a row can be both, and the two
   must read as two different problems, not one blurred together. */
tr.ctms-row-late { background: var(--bad-wash); }
tr.ctms-row-late:hover { background: var(--bad-wash); }

/* A comms problem — a 990/214 the connector gave up on, or a 997 rejection —
   means the customer's system disagrees with what this board shows, or was
   never told at all. Same visual language as ctms-row-revision (a stripe
   plus a pill), because it is the same kind of fact: something happened to
   this load that the dispatcher has not accounted for yet. Uses --bad-line
   rather than --warn-line since, unlike a revision, nothing here resolves on
   its own without someone noticing. */
tr.ctms-row-comms-problem { box-shadow: inset 4px 0 0 var(--bad-line); }
tr.ctms-row-comms-problem td:first-child { padding-left: 8px; }

/* ---- board heartbeat ----------------------------------------------------
 *
 * "checked HH:MM:SS" — proof the poller is alive even when it has nothing
 * to report. Same shape as creo-edi-connector's own status line.
 */

.ctms-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--brand);
	margin-right: 7px;
	vertical-align: middle;
}
.ctms-checked { color: var(--muted); font-weight: 400; margin-left: 6px; }

/* ---- key/value ------------------------------------------------------- */

.ctms-kv { width: 100%; border-collapse: collapse; }
.ctms-kv th { text-align: left; font-weight: 500; color: var(--muted); padding: 7px 12px 7px 0; width: 190px; vertical-align: top; font-size: 14px; }
.ctms-kv td { padding: 7px 0; font-size: 14px; }
.ctms-kv tr + tr th, .ctms-kv tr + tr td { border-top: 1px solid var(--line); }

/* ---- forms ----------------------------------------------------------- */

label.ctms-l { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.ctms-hint { color: var(--muted); font-size: 12px; margin-top: 4px; }

input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
select,
textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--line);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	background: var(--field);
	color: var(--ink);
}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--brand);
	outline-offset: -1px;
	border-color: var(--brand);
}

.ctms-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ctms-row > div { flex: 1 1 160px; min-width: 0; }

/* Date and time controls carry an intrinsic minimum width — their internal
   segments plus the picker button — that the browser enforces whatever we set
   on the wrapper. Given the same 160px basis as a text field they get squeezed
   past it and spill out to the right. These bases match what the controls
   actually need, so the row wraps instead of overflowing. */
.ctms-row > div.f-date { flex: 1 1 175px; min-width: 165px; }
.ctms-row > div.f-time { flex: 1 1 135px; min-width: 125px; }
.ctms-row > div.f-state { flex: 0 1 96px; min-width: 84px; }

/* Nothing in a field row may exceed its wrapper, whatever the control thinks
   its natural size is. */
.ctms-row input,
.ctms-row select { max-width: 100%; }

/* At phone width two per row reads better than five squeezed onto one. */
@media (max-width: 560px) {
	.ctms-row > div.f-date { flex: 1 1 150px; min-width: 140px; }
	.ctms-row > div.f-time { flex: 1 1 110px; min-width: 104px; }
	.ctms-row > div.f-state { flex: 0 1 84px; min-width: 72px; }
}

.ctms-btn {
	display: inline-block;
	padding: 11px 20px;
	border: 0;
	border-radius: 8px;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	background: var(--brand);
	color: var(--on-brand);
}
.ctms-btn:hover { background: var(--brand-dark); }
.ctms-btn.ghost { background: var(--field); color: var(--ink); border: 1px solid var(--line); }
.ctms-btn.ghost:hover { border-color: var(--danger); color: var(--danger); background: var(--field); }
.ctms-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- shipment status buttons ------------------------------------------
   Four buttons, in trip order, driven entirely by a channel's own
   sequence() state — 'primary' (the one to press), 'done' (greyed, with a
   tick and "sent by / at"), 'ahead' (dimmed, still pressable — see
   includes/class-status.php). Text wraps rather than truncating: the
   "sent by X at Y" line is often longer than the label above it. */
.ctms-status-btns { align-items: stretch; }
.ctms-status-btn {
	flex: 1 1 150px;
	min-width: 130px;
	text-align: left;
	white-space: normal;
	line-height: 1.35;
}
.ctms-status-btn.done { background: var(--field); color: var(--ink); border: 1px solid var(--line); opacity: .75; }
.ctms-status-btn.ahead { background: var(--field); color: var(--ink); border: 1px solid var(--line); opacity: .85; }
.ctms-status-btn .ctms-hint { display: block; margin-top: 3px; }
.ctms-status-btn:disabled { cursor: default; }

/* ---- notices --------------------------------------------------------- */

.ctms-note {
	padding: 12px 16px;
	border-radius: var(--radius);
	margin-bottom: 16px;
	font-size: 14px;
	border: 1px solid;
}
.ctms-note.ok { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok-ink); }
.ctms-note.bad { background: var(--bad-wash); border-color: var(--bad-line); color: var(--bad-ink); }
.ctms-note.info { background: var(--info-wash); border-color: var(--info-line); color: var(--info-ink); }
.ctms-note.warn { background: var(--warn-wash); border-color: var(--warn-line); color: var(--warn-ink); }

.ctms-empty { text-align: center; padding: 44px 16px; color: var(--muted); }

/* ---- tables ---------------------------------------------------------- */

.ctms-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ctms-t { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
table.ctms-t th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); }
table.ctms-t td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.ctms-t tr:last-child td { border-bottom: 0; }

/* ---- documents --------------------------------------------------------
   The thumbnail's src IS the capability-checked /document/<id> route, never
   a direct file URL — see class-documents.php's docblock. No separate
   thumbnail file is generated; the browser just renders the full image
   small. */

.ctms-doc-thumb { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* ---- login ----------------------------------------------------------- */

.ctms-login { max-width: 360px; margin: 12vh auto; padding: 0 16px; }
.ctms-login .ctms-card { padding: 30px 28px 28px; }
.ctms-login img { height: 70px; display: block; margin: 0 auto 26px; }

/* With the heading gone the form is the whole card, so it carries the spacing
   the heading used to provide. */
.ctms-login #ctms-login p { margin: 0 0 14px; }
.ctms-login #ctms-login p.login-submit { margin: 20px 0 0; }
.ctms-login #ctms-login label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.ctms-login #ctms-login .login-remember label { font-weight: 400; font-size: 13px; color: var(--muted); }
.ctms-login #ctms-login .login-remember input { width: auto; margin-right: 7px; }
.ctms-login #ctms-login input[type=submit] {
	width: 100%;
	padding: 11px 20px;
	border: 0;
	border-radius: 8px;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	background: var(--brand);
	color: var(--on-brand);
}
.ctms-login #ctms-login input[type=submit]:hover { background: var(--brand-dark); }

@media (max-width: 640px) {
	.ctms-titlebar .ctms-tags { margin-left: 0; width: 100%; }
	.ctms-bar-in { gap: 10px; }
	.ctms-bar img { height: 30px; }
	.ctms-kv th { width: 130px; }
}

/* Theme toggle ----------------------------------------------------------- */

/* Stays on the bar at every width rather than folding into the mobile menu —
   it is one tap, and burying it makes it useless. */
.ctms-theme {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 6px 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
}
.ctms-theme:hover { border-color: var(--brand); color: var(--ink); }
.ctms-theme .ico { font-size: 14px; line-height: 1; }
.ctms-theme[aria-pressed="true"] { color: var(--brand-dark); border-color: var(--brand); }

@media (max-width: 760px) { .ctms-theme .lbl { display: none; } }

/* The whole page shifts at once rather than each surface easing on its own
   schedule, which reads as flicker. */
@media (prefers-reduced-motion: no-preference) {
	body.ctms,
	.ctms-bar,
	.ctms-card,
	input, select, textarea {
		transition: background-color .18s ease, border-color .18s ease, color .18s ease;
	}
}

/* Date and time fields ---------------------------------------------------
 *
 * These carry an internal picker indicator that browsers size and colour
 * themselves, so left alone they sit at a different height to their text
 * siblings in the same row and their icon can vanish against a dark field.
 */

input[type=date],
input[type=time] {
	/* Deliberately NOT `appearance: none`. It is the usual fix for Safari
	   sizing these to their content, but on Safari it can also strip the
	   native picker button — trading a few pixels of width for a field nobody
	   can open. width:100% from the rule above handles the sizing on its own.
	   min-width:0 stops the intrinsic size overriding it inside a flex row. */
	min-width: 0;
	min-height: 38px;
	line-height: 1.2;
}

/* The calendar and clock buttons. Tinted to the brand so they read as part of
   the field rather than as browser furniture, and made visible in dark mode
   where the default glyph is near-black. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: .55;
	padding: 2px;
	border-radius: 4px;
	transition: opacity .12s, background-color .12s;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
	background: var(--ok-wash);
}

:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator {
	filter: invert(1) brightness(1.6);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) input[type=date]::-webkit-calendar-picker-indicator,
	:root:not([data-theme="light"]) input[type=time]::-webkit-calendar-picker-indicator {
		filter: invert(1) brightness(1.6);
	}
}

/* The editable segments inside the field. */
input[type=date]::-webkit-datetime-edit,
input[type=time]::-webkit-datetime-edit { color: var(--ink); padding: 0; }
input[type=date]::-webkit-datetime-edit-fields-wrapper,
input[type=time]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type=date]::-webkit-datetime-edit-text,
input[type=time]::-webkit-datetime-edit-text { color: var(--muted); padding: 0 1px; }

/* An empty field should read as a prompt, not as a filled value. */
input[type=date]:invalid::-webkit-datetime-edit,
input[type=time]:invalid::-webkit-datetime-edit { color: var(--muted); }

/* Firefox puts its own clear button in; it fights the layout. */
input[type=date]::-moz-calendar-picker-indicator { cursor: pointer; }

select {
	/* Match the pickers rather than sitting a pixel or two off. */
	min-height: 38px;
}

/* ---- date and time on touch devices ------------------------------------
 *
 * iOS Safari sizes a native date/time control to the box it wants and ignores
 * width, max-width and its flex wrapper entirely, so in a two-up row it draws
 * itself wider than the column it was given and spills past the card's right
 * edge. `appearance: none` is what makes width apply again.
 *
 * The note above says not to use it — that holds for mouse browsers, where it
 * can take the native calendar button with it. On a coarse pointer there is no
 * button to lose: the picker is a full-screen wheel that opening the field
 * summons, so the field keeps working exactly as before and merely obeys its
 * width. Scoped to `pointer: coarse` so desktop keeps its button.
 */
@media (pointer: coarse) {
	input[type=date],
	input[type=time] {
		-webkit-appearance: none;
		appearance: none;
	}

	/* WebKit centres the value once the native appearance is off; left-align it
	   so the date and time read along the same line as every other field. */
	input[type=date]::-webkit-date-and-time-value,
	input[type=time]::-webkit-date-and-time-value {
		text-align: left;
		margin: 0;
	}

	/* With width honoured, split the row exactly in half rather than leaving
	   the two controls to negotiate it from different bases. */
	@media (max-width: 560px) {
		.ctms-row > div.f-date,
		.ctms-row > div.f-time { flex: 1 1 calc(50% - 6px); min-width: 0; }
	}
}

/* ---- printing an invoice -------------------------------------------------
 *
 * /invoice/<id> only. Deliberately no PDF library on the server — gotenberg
 * runs on this VM and is the process implicated in its OOM history (see
 * HANDOVER.md); adding invoice rendering to it would be the wrong trade for a
 * one-page document. The browser's own Print -> Save as PDF is the entire
 * mechanism, so all this has to do is hide the chrome nothing on paper wants:
 * the nav bar, the theme toggle, the filter forms, the Approve/Void actions.
 * .ctms-no-print marks anything else a screen wants hidden when printed.
 */
@media print {
	.ctms-bar,
	.ctms-burger,
	.ctms-no-print {
		display: none !important;
	}

	body.ctms,
	.ctms-wrap {
		background: #fff;
		color: #000;
	}

	.ctms-wrap {
		max-width: none;
		padding: 0;
	}

	.ctms-invoice-sheet .ctms-card {
		border: none;
		box-shadow: none;
		padding: 0;
		margin-bottom: 16px;
	}

	.ctms-pill {
		border: 1px solid #000;
		background: none !important;
		color: #000 !important;
	}

	a {
		color: inherit;
		text-decoration: none;
	}
}