/* Pro-Tek Services — foundation.
 *
 * Palette and typeface are the client's own, lifted from pro-tekpest.com so
 * the tool feels like part of their business rather than a bolted-on app.
 * Density is our house standard: 14px base, compact rows, real borders.
 *
 * News Cycle is self-hosted — no CDN, so the app still renders if Google is
 * unreachable and no page view leaks to a third party.
 */

@font-face {
	font-family: 'News Cycle';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/newscycle-400.woff2') format('woff2');
}
@font-face {
	font-family: 'News Cycle';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/fonts/newscycle-700.woff2') format('woff2');
}

:root {
	/* Brand */
	--green: #00904c;
	--green-dark: #00703b;
	--green-soft: #3caa59;
	--green-border: #2c7d41;
	--orange: #f27f1c;
	--orange-border: #c5610b;
	--mint: #c0dfce;
	--peach: #f6d5bd;

	/* Surfaces */
	--paper: #ffffff;
	--page: #f2f2f2;
	--panel: #f7f7f7;
	--ink: #323233;
	--ink-soft: #5f6163;
	--ink-faint: #85888b;
	--line: #cdd2d4;
	--line-soft: #e2e6e8;

	/* Status */
	--danger: #c0392b;
	--danger-bg: #fdecea;
	--warn: #a8690b;
	--warn-bg: #fdf3e2;
	--ok: #00904c;
	--ok-bg: #e4f3ec;

	--radius: 4px;
	--gap: 16px;
	--field-h: 32px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--page);
	color: var(--ink);
	font-family: 'News Cycle', 'Trebuchet MS', sans-serif;
	font-size: 14px;
	line-height: 1.4;
}

h1, h2, h3, h4 {
	margin: 0 0 8px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
}
h1 { font-size: 1.4rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.9rem; text-transform: uppercase; color: var(--ink-soft); letter-spacing: 0.06em; }

p { margin: 0 0 10px; max-width: 700px; }

a { color: var(--green); text-decoration: none; }
a:hover, a:focus { color: var(--orange); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* --- Forms ---------------------------------------------------------- */

label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink-soft);
	margin-bottom: 3px;
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], select, textarea {
	width: 100%;
	height: var(--field-h);
	padding: 0 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
}
textarea {
	height: auto;
	min-height: 64px;
	padding: 6px 8px;
	resize: vertical;
}
select { padding-right: 4px; }

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--green);
	box-shadow: 0 0 0 2px rgba(0, 144, 76, 0.18);
}
input:disabled, select:disabled, textarea:disabled,
input[readonly] {
	background: var(--panel);
	color: var(--ink-soft);
}

input[type=checkbox] { width: auto; height: auto; margin: 0 6px 0 0; accent-color: var(--green); }

.field { margin-bottom: 12px; }
.field .hint { font-size: 13px; color: var(--ink-faint); margin-top: 3px; }
.field .hint.warn { color: var(--warn); }

/* Multi-column by default. Forms fill wide screens and collapse gracefully. */
.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px 20px;
	align-items: start;
}
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }
@media (max-width: 620px) {
	.form-grid .span-2 { grid-column: auto; }
}

fieldset {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 12px 14px 14px;
	margin: 0 0 16px;
}
legend {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--green);
	padding: 0 6px;
}

/* --- Buttons -------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: var(--field-h);
	padding: 0 16px;
	border: 1px solid var(--green-border);
	border-radius: var(--radius);
	background: var(--green);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
}
.btn:hover, .btn:focus {
	background: var(--orange);
	border-color: var(--orange-border);
	color: #000;
	text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn:disabled:hover { background: var(--green); border-color: var(--green-border); color: #fff; }

.btn-ghost {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--line);
}
.btn-ghost:hover, .btn-ghost:focus { background: var(--panel); color: var(--orange); border-color: var(--orange); }

.btn-danger { background: var(--danger); border-color: #96271b; }
.btn-danger:hover { background: #96271b; color: #fff; border-color: #96271b; }

.btn-sm { height: 26px; padding: 0 10px; font-size: 13px; }
.btn-lg { height: 38px; padding: 0 24px; font-size: 14px; }

/* --- Tables --------------------------------------------------------- */

table.data {
	width: 100%;
	border-collapse: collapse;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
table.data th {
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	background: var(--green);
	padding: 7px 12px;
	white-space: nowrap;
}
table.data td {
	padding: 0 12px;
	height: 32px;
	border-top: 1px solid var(--line-soft);
	vertical-align: middle;
}
table.data tbody tr:nth-child(even) { background: var(--panel); }
table.data tbody tr:hover { background: var(--mint); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.actions { text-align: right; white-space: nowrap; }

.table-wrap { overflow-x: auto; }

/* --- Utility -------------------------------------------------------- */

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.hidden { display: none !important; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }

.chip {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: 1px solid transparent;
}
.chip.draft { background: var(--panel); color: var(--ink-soft); border-color: var(--line); }
.chip.sent { background: var(--peach); color: #8a4a05; border-color: #e0b48a; }
.chip.accepted { background: var(--ok-bg); color: var(--green-dark); border-color: var(--mint); }
.chip.declined { background: var(--danger-bg); color: var(--danger); border-color: #f0bdb6; }
.chip.expired { background: var(--panel); color: var(--ink-faint); border-color: var(--line); }

.notice {
	padding: 9px 12px;
	border-radius: var(--radius);
	border: 1px solid;
	margin-bottom: 12px;
	font-size: 14px;
}
.notice.error { background: var(--danger-bg); border-color: #f0bdb6; color: #8c2318; }
.notice.warn { background: var(--warn-bg); border-color: #e8cd9a; color: #7a4c06; }
.notice.ok { background: var(--ok-bg); border-color: var(--mint); color: var(--green-dark); }
.notice.info { background: var(--paper); border-color: var(--line); color: var(--ink); }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Opt out of the 700px reading-width cap where a description sits in a
   full-width card and the cap only manufactures extra lines. */
p.wide { max-width: none; }