/**
 * Front-end styling for the claim form and the claimant's own list.
 *
 * Scoped entirely under .expensebook-form-wrap so it cannot leak into the
 * surrounding theme, and built on custom properties so the palette can be
 * swapped wholesale by one attribute. Same architecture as SureBook's booking
 * widget, deliberately: the two plugins land on the same sites, and a claim
 * form that looks like a different product bolted on is worse than one that
 * looks like it belongs.
 */

.expensebook-form-wrap {
	--eb-accent: #2563eb;
	--eb-accent-contrast: #ffffff;
	--eb-surface: #ffffff;
	--eb-surface-sunken: #f6f7f8;
	--eb-text: #1f2328;
	--eb-muted: #6b7280;
	--eb-border: #e2e5e9;
	--eb-ok-bg: #e8f5e9;
	--eb-ok-fg: #1b5e20;
	--eb-warn-bg: #fdf2e9;
	--eb-warn-fg: #9a5b13;
	--eb-error-bg: #fdecea;
	--eb-error-fg: #c62828;
	--eb-radius: 10px;

	/* color-scheme, not just `color`. Without it a native <input type="date">
	   draws its own value text using whatever color-scheme it INHERITS - often
	   "dark" on a modern theme - regardless of the background we set here.
	   That is exactly how a date field ends up white-on-white. The internal
	   text colour comes from color-scheme, not from `color`, so it has to be
	   declared explicitly and has to match the surface we actually paint. */
	color-scheme: light;

	box-sizing: border-box;
	max-width: 46rem;
	margin: 1.5rem 0;
	color: var(--eb-text);
	font-size: 1rem;
	line-height: 1.5;
}

.expensebook-form-wrap * {
	box-sizing: border-box;
}

.expensebook-form-wrap h2 {
	margin: 0 0 1rem;
	font-size: 1.15rem;
	font-weight: 600;
}

.expensebook-form-wrap > h2 + p,
.expensebook-form-wrap .expensebook-claims + p {
	color: var(--eb-muted);
}

/* --- the form card --- */

.expensebook-form {
	padding: 1.5rem;
	background: var(--eb-surface);
	border: 1px solid var(--eb-border);
	border-radius: var(--eb-radius);
}

.expensebook-form h2:first-child {
	margin-top: 0;
}

.expensebook-field {
	display: block;
	margin: 0 0 1.1rem;
}

.expensebook-field label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--eb-muted);
}

/* --- fields: one height, on every engine --- */

/* Scoped to the WRAPPER, not to .expensebook-form.
 *
 * These rules used to hang off .expensebook-form, which exists only on the
 * claim form - so every select and text input on the treasurer's page fell
 * back to raw browser chrome: hairline borders, wrong heights, nothing like
 * the fields ten pixels above them. Anything this plugin renders on the front
 * end is inside .expensebook-form-wrap, so that is where field styling
 * belongs. Width stays with the claim form, which is the only place a field
 * should fill its row. */
.expensebook-form-wrap input[type="text"],
.expensebook-form-wrap input[type="date"],
.expensebook-form-wrap input[type="number"],
.expensebook-form-wrap input[type="file"],
.expensebook-form-wrap select,
.expensebook-form-wrap textarea {
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--eb-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	color: var(--eb-text);
	/* Set explicitly rather than inherited. A text input picks up the theme's
	   own field styling; a <select> does not, so in dark mode the dropdowns
	   came out several shades lighter than the boxes beside them. */
	background: var(--eb-surface);
	/* Comfortably past the 44px touch target iOS and WCAG 2.5.8 ask for. This
	   form is filled in on a phone, standing in a car park, holding a receipt. */
	min-height: 44px;
}

.expensebook-form input[type="text"],
.expensebook-form input[type="date"],
.expensebook-form input[type="number"],
.expensebook-form input[type="file"],
.expensebook-form select,
.expensebook-form textarea {
	width: 100%;
}

.expensebook-form textarea {
	min-height: 5.5rem;
	resize: vertical;
}

/* THE FIELD-HEIGHT RULE.
 *
 * On iOS a date input and a select render as native widgets, and a native
 * widget sizes itself: the min-height and padding above are advisory at best
 * and ignored at worst. That is how a set of fields can match perfectly in
 * every desktop engine and in emulation, and still come out three different
 * heights on a real iPhone.
 *
 * Turning the native appearance off makes them ordinary boxes, so the shared
 * padding, min-height and border-box above are what decide the size
 * everywhere. Tapping either still opens the native picker; only the chrome
 * is ours now - which is why the select needs its arrow drawn back on below.
 */
.expensebook-form-wrap input[type="date"],
.expensebook-form-wrap select {
	-webkit-appearance: none;
	appearance: none;
}

.expensebook-form-wrap select {
	/* The arrow the rule above just removed. A flat mid-grey rather than a
	   token, because a background image cannot read currentColor, and this one
	   reads against both surfaces. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23888888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	background-size: 12px 8px;
	/* Room for it, so a long "Legal & Professional Fees:Accounting" cannot run
	   underneath the arrow. */
	padding-right: 2rem;
}

/* A file input's button is a native widget too, and it is what decides the
   field's height: the button's own box, plus the input's padding, plus two
   borders. Left to itself that came out 51px against everything else's 44 -
   measured, not guessed. Giving the button a fixed height keeps the total
   under 44 so the shared min-height is what wins, exactly as it does for the
   text and date fields beside it. */
.expensebook-form-wrap input[type="file"] {
	padding: 0.4rem 0.7rem;
	line-height: 1.5;
}

.expensebook-form-wrap input[type="file"]::file-selector-button {
	height: 26px;
	margin-right: 0.75rem;
	padding: 0 0.8rem;
	border: 1px solid var(--eb-border);
	border-radius: 6px;
	background: var(--eb-surface-sunken);
	color: var(--eb-text);
	font-family: inherit;
	font-size: 0.85rem;
	line-height: 24px;
	cursor: pointer;
}

.expensebook-form-wrap input:focus-visible,
.expensebook-form-wrap select:focus-visible,
.expensebook-form-wrap textarea:focus-visible {
	outline: 2px solid var(--eb-accent);
	outline-offset: 1px;
}

.expensebook-optional {
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--eb-muted);
}

.expensebook-hint {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.9rem;
	color: var(--eb-muted);
}

/* --- line items --- */

.expensebook-lines {
	margin: 0 0 1.25rem;
	padding: 1rem 1rem 0.5rem;
	border: 1px solid var(--eb-border);
	border-radius: 8px;
	background: var(--eb-surface-sunken);
}

.expensebook-lines legend {
	padding: 0 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--eb-muted);
}

.expensebook-line {
	display: flex;
	gap: 0.75rem;
	align-items: flex-end;
	margin-bottom: 0.9rem;
	flex-wrap: wrap;
}

.expensebook-line > .expensebook-field {
	flex: 1 1 12rem;
	margin: 0;
}

.expensebook-line > .expensebook-amount {
	flex: 0 1 8rem;
}

/* Matched to the field height above, so the row's controls sit on one line
   rather than the remove button floating half a field proud of them. */
.expensebook-remove-line {
	flex: 0 0 auto;
	min-height: 44px;
	min-width: 44px;
	padding: 0 0.7rem;
	border: 1px solid var(--eb-border);
	border-radius: 8px;
	background: var(--eb-surface);
	color: var(--eb-muted);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.expensebook-remove-line:hover {
	color: var(--eb-error-fg);
	border-color: var(--eb-error-fg);
}

/* One item is not a list, so there is nothing to remove from it. */
.expensebook-line-rows .expensebook-line:only-child .expensebook-remove-line {
	display: none;
}

.expensebook-add-line {
	min-height: 44px;
	margin-bottom: 0.75rem;
	padding: 0 1rem;
	border: 1px dashed var(--eb-border);
	border-radius: 8px;
	background: transparent;
	color: var(--eb-text);
	font: inherit;
	cursor: pointer;
}

.expensebook-add-line:hover {
	border-color: var(--eb-accent);
	color: var(--eb-accent);
}

/* --- buttons --- */

.expensebook-actions {
	margin: 1.4rem 0 0.4rem;
}

.expensebook-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.65rem 1.5rem;
	border: none;
	border-radius: 999px;
	background: var(--eb-accent);
	color: var(--eb-accent-contrast);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.1s ease;
}

.expensebook-button:hover {
	opacity: 0.9;
	color: var(--eb-accent-contrast);
}

/* --- notices --- */

.expensebook-notice {
	margin: 1rem 0;
	padding: 0.8rem 1rem;
	border-radius: 8px;
	border-left: 4px solid var(--eb-border);
	background: var(--eb-surface-sunken);
	font-size: 0.95rem;
}

.expensebook-notice p {
	margin: 0;
}

.expensebook-notice-ok {
	background: var(--eb-ok-bg);
	color: var(--eb-ok-fg);
	border-left-color: var(--eb-ok-fg);
}

.expensebook-notice-warn {
	background: var(--eb-warn-bg);
	color: var(--eb-warn-fg);
	border-left-color: var(--eb-warn-fg);
}

.expensebook-notice-error {
	background: var(--eb-error-bg);
	color: var(--eb-error-fg);
	border-left-color: var(--eb-error-fg);
}

/* --- the claimant's own list --- */

.expensebook-claims {
	width: 100%;
	border-collapse: collapse;
	background: var(--eb-surface);
	border: 1px solid var(--eb-border);
	border-radius: var(--eb-radius);
	overflow: hidden;
}

.expensebook-claims th,
.expensebook-claims td {
	text-align: left;
	padding: 0.65rem 0.8rem;
	border-bottom: 1px solid var(--eb-border);
	vertical-align: top;
}

.expensebook-claims thead th {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--eb-muted);
	background: var(--eb-surface-sunken);
}

.expensebook-claims tbody tr:last-child th,
.expensebook-claims tbody tr:last-child td {
	border-bottom: 0;
}

.expensebook-status {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--eb-surface-sunken);
	color: var(--eb-muted);
	font-size: 0.85rem;
	white-space: nowrap;
}

.expensebook-status-posted {
	background: var(--eb-ok-bg);
	color: var(--eb-ok-fg);
}

.expensebook-status-declined {
	background: var(--eb-error-bg);
	color: var(--eb-error-fg);
}

.expensebook-status-failed {
	background: var(--eb-warn-bg);
	color: var(--eb-warn-fg);
}

@media (max-width: 600px) {
	.expensebook-form {
		padding: 1.1rem;
	}

	.expensebook-line > .expensebook-field,
	.expensebook-line > .expensebook-amount {
		flex: 1 1 100%;
	}

	/* Full width once it is on its own row, rather than a lonely square. */
	.expensebook-remove-line {
		width: 100%;
	}
}

/* --- Auto: follow the visitor's own browser preference ---
   Guarded with :not([data-theme="light"]) so an explicit Light choice still
   wins on a dark-preferring browser. An explicit Dark choice needs no guard
   here, because its own unconditional rule below applies either way. */
@media (prefers-color-scheme: dark) {
	.expensebook-form-wrap:not([data-theme="light"]) {
		color-scheme: dark;
		--eb-surface: #1e2126;
		--eb-surface-sunken: #24272d;
		--eb-text: #f0f1f3;
		--eb-muted: #8a9099;
		--eb-border: #33373d;
		--eb-ok-bg: #16311c;
		--eb-ok-fg: #8fd99a;
		--eb-warn-bg: #3a2b12;
		--eb-warn-fg: #f0b968;
		--eb-error-bg: #3a1a1a;
		--eb-error-fg: #ff8a80;
	}
}

/* --- Explicit choice: beats the visitor's preference, which is the point ---
   Light needs no token block of its own: the unguarded rule at the top of this
   file already IS the light palette, and the :not() guard above is what stops
   the dark media query overriding it. */
.expensebook-form-wrap[data-theme="dark"] {
	color-scheme: dark;
	--eb-surface: #1e2126;
	--eb-surface-sunken: #24272d;
	--eb-text: #f0f1f3;
	--eb-muted: #8a9099;
	--eb-border: #33373d;
	--eb-ok-bg: #16311c;
	--eb-ok-fg: #8fd99a;
	--eb-warn-bg: #3a2b12;
	--eb-warn-fg: #f0b968;
	--eb-error-bg: #3a1a1a;
	--eb-error-fg: #ff8a80;
}

/* --- the treasurer's page ------------------------------------------------
   Same tokens as the claim form, so a site that has themed one has themed
   both, and a treasurer moving between them is plainly in one product. */
.expensebook-treasurer { max-width: 56rem; }

.expensebook-views { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0; }
.expensebook-view { padding: .5rem 1rem; min-height: 44px; display: inline-flex; align-items: center; gap: .4rem;
	border: 1px solid var(--eb-border); border-radius: 999px; background: var(--eb-surface); color: var(--eb-text); text-decoration: none; }
.expensebook-view:hover { border-color: var(--eb-accent); color: var(--eb-accent); }
.expensebook-view.is-current { background: var(--eb-accent); border-color: var(--eb-accent); color: var(--eb-accent-contrast); }
.expensebook-view-count { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 999px;
	background: rgba(128,128,128,.25); font-size: .85em; text-align: center; }
.expensebook-view.is-current .expensebook-view-count { background: rgba(255,255,255,.25); }

.expensebook-claim-card { padding: 1.2rem; margin: 0 0 1rem; background: var(--eb-surface);
	border: 1px solid var(--eb-border); border-left: 4px solid var(--eb-accent); border-radius: var(--eb-radius); }
.expensebook-claim-card header { display: flex; flex-wrap: wrap; gap: .7rem; align-items: baseline; margin-bottom: .6rem; }
.expensebook-claim-card header .expensebook-total { margin-left: auto; font-size: 1.25em; font-weight: 600; }
.expensebook-when { opacity: .7; }
.expensebook-claim-lines { width: 100%; border-collapse: collapse; margin: .4rem 0 .8rem; }
.expensebook-claim-lines td { padding: .35rem .5rem .35rem 0; border-bottom: 1px solid var(--eb-border); }
.expensebook-claim-lines .expensebook-cat { opacity: .75; width: 32%; }
.expensebook-claim-lines .expensebook-amt { text-align: right; width: 7rem; font-variant-numeric: tabular-nums; }
.expensebook-noreceipt { color: var(--eb-error-fg); }
.expensebook-posted { color: var(--eb-ok-fg); }
.expensebook-receipt { margin: 0; max-width: 11rem; }
.expensebook-receipt img { display: block; max-width: 11rem; max-height: 11rem; width: auto; height: auto;
	padding: 4px; border: 1px solid var(--eb-border); background: var(--eb-surface); }

.expensebook-claim-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-start;
	margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--eb-border); }
.expensebook-claim-actions form { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.expensebook-claim-actions .expensebook-notice { flex: 1 1 100%; margin: 0; }
.expensebook-claim-actions .expensebook-notice form { flex-wrap: wrap; margin-top: .6rem; }
.expensebook-decline input[type="text"] { flex: 1 1 14rem; min-width: 0; }
.expensebook-button-quiet { background: transparent; border: 1px solid var(--eb-border); color: var(--eb-text); }
.expensebook-button-quiet:hover { border-color: var(--eb-accent); color: var(--eb-accent); }

.expensebook-people-list { width: 100%; border-collapse: collapse; background: var(--eb-surface);
	border: 1px solid var(--eb-border); border-radius: var(--eb-radius); overflow: hidden; }
.expensebook-people-list td { padding: 1rem; border-bottom: 1px solid var(--eb-border); vertical-align: top; }
.expensebook-people-list tr:last-child td { border-bottom: 0; }
.expensebook-people-list .expensebook-person { width: 40%; }
.expensebook-people-list .expensebook-person strong { display: block; font-size: 1.02em; }
.expensebook-people-list select { width: 100%; max-width: 24rem; }
.expensebook-field-label { display: block; margin-bottom: 0.3rem; font-size: 0.78rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.03em; color: var(--eb-muted); }
.expensebook-unlinked { display: inline-block; margin-top: .45rem; padding: .15rem .6rem; border-radius: 999px;
	background: var(--eb-warn-bg); color: var(--eb-warn-fg); font-size: .85em; white-space: nowrap; }
.expensebook-create-vendor { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--eb-border);
	display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.expensebook-create-vendor > label { flex: 1 1 12rem; max-width: 20rem; }
.expensebook-create-vendor input[type="text"] { width: 100%; }
.expensebook-people-save { margin: 1.2rem 0 0; }

.expensebook-empty { padding: 1.2rem; background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: var(--eb-radius); }


/* A two-column table is the right shape on a desktop and the wrong one on a
   phone: the person's name takes 40% of a 390px screen and the supplier
   dropdown beside it truncates to "Books by Bes". Stacking the cells gives
   each control the full width it needs. */
@media (max-width: 600px) {
	.expensebook-people-list,
	.expensebook-people-list tbody,
	.expensebook-people-list tr,
	.expensebook-people-list td {
		display: block;
		width: 100%;
	}

	.expensebook-people-list tr {
		padding: 1rem;
		border-bottom: 1px solid var(--eb-border);
	}

	.expensebook-people-list tr:last-child {
		border-bottom: 0;
	}

	.expensebook-people-list td {
		padding: 0;
		border-bottom: 0;
	}

	.expensebook-people-list .expensebook-person {
		margin-bottom: .7rem;
	}

	.expensebook-people-list select,
	.expensebook-create-vendor > label {
		max-width: none;
	}

	.expensebook-create-vendor button {
		width: 100%;
	}
}

/* The claimant's own note. Set apart from the line items so a treasurer's eye
   does not read it as another one. */
.expensebook-treasurer .expensebook-memo { margin: .6rem 0; padding: .6rem .8rem;
	background: var(--eb-surface-sunken); border-radius: 8px; }
/* flex-basis, not min-width.
 *
 * A min-width appended after the mobile media query silently overrode it -
 * same specificity, later in the file - and put 66px of horizontal overflow on
 * an iPhone. A basis asks for 18rem and still allows the field to shrink when
 * there is not that much room. */
.expensebook-decline input[type="text"] { flex: 1 1 18rem; min-width: 0; }


/* --- phones: the last word ------------------------------------------------
 *
 * Deliberately at the END of this file. A media query adds no specificity, so
 * an ordinary rule written later in the file beats one inside a query written
 * earlier - which is how a polish tweak to the decline field silently undid
 * the mobile layout twice. Keeping every narrow-screen override here, after
 * everything it needs to beat, removes the trap rather than working around it.
 */
@media (max-width: 600px) {
	/* The decline field and its button each get their own line. Side by side
	   they need about 400px and a phone card offers under 300, so the button
	   was hanging off the edge of the card it lives in. */
	.expensebook-claim-actions form {
		flex: 1 1 100%;
		flex-wrap: wrap;
	}

	.expensebook-claim-actions .expensebook-button {
		width: 100%;
	}

	.expensebook-decline input[type="text"] {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
	}

	/* A table cannot shrink below its own content, and a fully qualified
	   category like "Legal & Professional Fees:Accounting" is wider than a
	   320px phone on its own. Stacking each line turns an unbreakable row into
	   three readable ones. */
	.expensebook-claim-lines,
	.expensebook-claim-lines tbody,
	.expensebook-claim-lines tr,
	.expensebook-claim-lines td {
		display: block;
		width: auto;
	}

	.expensebook-claim-lines tr {
		padding: .5rem 0;
		border-bottom: 1px solid var(--eb-border);
	}

	.expensebook-claim-lines tr:last-child {
		border-bottom: 0;
	}

	.expensebook-claim-lines td {
		padding: 0;
		border-bottom: 0;
	}

	/* width:auto has to be repeated for these two by name. The stacking rule
	   above sets it on `td`, but `.expensebook-claim-lines .expensebook-cat`
	   is the more specific selector and its desktop 32% kept winning - which
	   squeezed the category into a third of the row and broke a long account
	   name mid-word, "Accounti / ng". */
	.expensebook-claim-lines .expensebook-cat,
	.expensebook-claim-lines .expensebook-amt {
		width: auto;
	}

	.expensebook-claim-lines .expensebook-cat {
		font-size: .9em;
	}

	.expensebook-claim-lines .expensebook-amt {
		text-align: left;
		font-weight: 600;
	}

	/* Long category names and email addresses must wrap rather than push the
	   card open. */
	/* break-word rather than anywhere: wrap between words normally and only
	   split one when it genuinely cannot fit, so an ordinary category name is
	   not chopped in half. */
	.expensebook-treasurer .expensebook-cat,
	.expensebook-treasurer .expensebook-hint,
	.expensebook-treasurer .expensebook-memo {
		overflow-wrap: break-word;
	}

	.expensebook-claim-card header .expensebook-total {
		margin-left: 0;
		flex: 1 1 100%;
	}
}