/* --------------------------------------------------------------------------------------------------------------------- */
/* ADMINISTRATION ENTRIES */
/* --------------------------------------------------------------------------------------------------------------------- */

.pagination
{
	clear: left;
}

.pagination strong
{
	text-align: center;
	line-height: 10px;
	float: left;
	display: inline;
	height: 10px;
	padding: 10px;
	margin: 1px;
	border: 1px solid;
	border-top-color: #2492b3;
	border-left-color: #2492b3;
	border-bottom-color: #369;
	border-right-color: #2492b3;
}

.pagination a
{
	margin: 1px;
	text-align: center;
	line-height: 10px;
	float: left;
	display: inline;
	height: 10px;
	padding: 10px;
	border: 1px solid;
	border-top-color: #ccc;
	border-left-color: #ccc;
	border-bottom-color: #999;
	border-right-color: #ccc;
}

div.entry
{
	margin: 10px 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid;
	border-top-width: 20px;
	border-top-color: #2492b3;
	border-left-color: #ccc;
	border-bottom-color: #999;
	border-right-color: #ccc;
	position: relative;
}

div.entry p strong
{
	margin-right: 20px;
}

.entry_side
{
	float: right;
}

.entry_main
{
	float: left;
	width: 600px;
}

span.status_confirmed,
span.status_unconfirmed
{
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 5px;
	width: 130px;
	color: #fff;
	text-align: center;
}

span.status_confirmed
{
	background: #080;
}

span.status_unconfirmed
{
	background: #800;
}

a.icon_delete,
a.icon_edit,
a.icon_approve,
a.icon_refuse,
a.icon_reset_password
{
	display: inline;
	height: 22px;
	width: 22px;
	background-position: center center;
	text-decoration: none;
	float: left;
}

a.icon_delete
{
	background-image: url(../img/delete.gif);
}

a.icon_edit
{
	background-image: url(../img/edit.gif);
}

a.icon_approve
{
	background-image: url(../img/approve.gif);
}

a.icon_refuse
{
	background-image: url(../img/refuse.gif);
}

a.icon_reset_password
{
	background-image: url(../img/reset_password.gif);
}

a.icon_with_text
{
	float: none;
	width: auto;
	height: auto;
	padding-left: 20px;
	background-position: left center;
	background-repeat: no-repeat;
	margin-right: 10px;
	cursor: pointer;
	text-decoration: underline;
}

a.icon_add
{
	background-image: url(../img/add.gif);
	padding-left: 20px;
	background-position: left center;
}


/* --------------------------------------------------------------------------------------------------------------------- */
/* ADMINISTRATION LIST CARDS */
/* --------------------------------------------------------------------------------------------------------------------- */

/* One card per record, shared by the transactions, members, dogs and entries
   lists: a header carrying identity, state and the one figure that matters,
   a body of blocks and labelled facts, an optional table of child rows, and
   a footer of actions. Below 1000px the tables stack into labelled blocks. */

div.entry.adm-card
{
	margin: 0 0 16px;
	padding: 0;
	/* #main is a flex column, so without this the card takes its width from
	   the widest thing inside it and the page scrolls sideways. */
	min-width: 0;
	border: 1px solid #d8dee3;
	border-top: 3px solid #2492b3;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* div.entry p strong spaces every value 20px to the right of its label,
   which the layouts inside the card place themselves. */
.adm-card p strong
{
	margin-right: 0;
}

.adm-head
{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	padding: 10px 14px;
	background: #f4f7f9;
	border-bottom: 1px solid #e3e8ec;
}

.adm-head-id
{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}

.adm-index
{
	color: #98a2ab;
}

.adm-title
{
	font-size: 1.125rem;
}

/* Whether the dog is confirmed, carried by the name rather than by a badge of
   its own. Same two colours the badges use, so the meaning stays the one the
   rest of the admin already teaches. The state is also on the title attribute:
   colour alone should not be the only way to read it. */
.adm-title-ok strong   { color: #1e8449; }

.adm-title-wait strong { color: #b9770e; }

.adm-title-idle strong { color: #7f8c8d; }

.adm-note
{
	color: #5b6a75;
	font-size: 0.875rem;
}

.adm-head-side
{
	text-align: right;
	white-space: nowrap;
}

.adm-amount
{
	display: block;
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1.6rem;
}

.adm-head-meta
{
	display: block;
	color: #5b6a75;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.adm-badge
{
	display: inline-block;
	padding: 1px 10px;
	border-radius: 10px;
	color: #fff;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	white-space: nowrap;
}

.adm-badge-ok   { background: #1e8449; }

.adm-badge-wait { background: #b9770e; }

.adm-badge-bad  { background: #922b21; }

.adm-badge-info { background: #2471a3; }

.adm-badge-idle { background: #7f8c8d; }

.adm-body
{
	display: flex;
	flex-wrap: wrap;
	gap: 12px 30px;
	padding: 12px 14px;
}

.adm-block
{
	flex: 1 1 260px;
}

.adm-label
{
	display: block;
	color: #8a949e;
	font-size: 0.75rem;
	line-height: 1.2rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* A second label in the same block, e.g. the co-owner under the owner's
   address and contact, set apart from the lines above it. */
.adm-label-gap
{
	margin-top: 8px;
}

.adm-name
{
	font-size: 1.0625rem;
	font-weight: 900;
	line-height: 1.5rem;
}

.adm-muted
{
	color: #5b6a75;
	font-size: 0.875rem;
	line-height: 1.3rem;
}

/* Label/value pairs that belong to the record as a whole. */
.adm-facts
{
	flex: 1 1 300px;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 2px 12px;
	align-content: start;
	font-size: 0.875rem;
}

.adm-facts dt
{
	color: #8a949e;
	line-height: 1.3rem;
}

.adm-facts dd
{
	margin: 0;
	line-height: 1.3rem;
	word-break: break-word;
}

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

/* The global table rules paint a heavy blue frame around every table. The
   rows inside a card are a quiet grid instead. */
table.adm-table
{
	width: 100%;
	min-width: 640px;
	border: 0;
	border-top: 1px solid #e3e8ec;
	border-collapse: collapse;
	table-layout: fixed;
}

table.adm-table th,
table.adm-table td
{
	padding: 7px 14px;
	border: 0;
	border-bottom: 1px solid #edf1f4;
	font-size: 0.875rem;
	line-height: 1.25rem;
	text-align: left;
	vertical-align: top;
}

table.adm-table th
{
	background: #fbfcfd;
	color: #8a949e;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

table.adm-table tbody tr:last-child td
{
	border-bottom: 0;
}

table.adm-table .adm-num
{
	padding-right: 20px;
	text-align: right;
	white-space: nowrap;
}

table.adm-table .adm-nowrap
{
	white-space: nowrap;
}

/* A second line under a value: the breed standard, the amount actually paid. */
.adm-sub
{
	display: block;
	color: #8a949e;
	font-size: 0.8125rem;
}

/* The nowrap cells hold their value on one line; a note underneath may wrap. */
.adm-num .adm-sub
{
	white-space: normal;
}

.adm-strong
{
	font-weight: 900;
}

/* A small boxed value: a sex, a show and the class the dog stands in. */
.adm-chip
{
	display: inline-block;
	margin: 1px 4px 1px 0;
	padding: 1px 8px;
	border: 1px solid #d6e2ea;
	border-radius: 3px;
	background: #f5f9fb;
	font-size: 0.8125rem;
	line-height: 1.25rem;
}

.adm-chip strong
{
	font-weight: 900;
}

.adm-chip-note
{
	color: #8a949e;
}

.adm-tag
{
	display: inline-block;
	min-width: 16px;
	padding: 0 4px;
	border-radius: 3px;
	background: #eef3f6;
	color: #4a5761;
	font-size: 0.75rem;
	text-align: center;
}

.adm-empty
{
	padding: 12px 14px;
	border-top: 1px solid #e3e8ec;
	color: #8a949e;
	font-size: 0.875rem;
}

.adm-foot
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 10px 14px;
	border-top: 1px solid #e3e8ec;
	background: #fbfcfd;
}

.adm-foot form
{
	margin: 0;
}

.adm-foot .button
{
	margin: 0;
	float: none;
}

/* Actions that are links rather than form buttons. */
.adm-foot a.icon_with_text
{
	float: none;
	margin: 0;
}

/* Below 1300px the section is 80% of the viewport, so a 1000px window only
   leaves a card about 800px wide - under that a multi-column table stops
   being readable and each row becomes a labelled block instead. */
@media screen and (max-width: 1000px)
{
	/* The search input keeps its default 20-character width unless told
	   otherwise, which with the 125px button held the whole page open at
	   about 420px - wider than the phone, and the cards stretched to it. */
	.adm-filter .grid_search
	{
		grid-template-columns: 1fr;
	}

	.adm-filter .text
	{
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	/* A float cannot wrap; a filter row becomes a wrapping flex line with its
	   submit button pushed to the end of it. */
	.adm-filter-row
	{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
	}

	.adm-filter-row .float_right
	{
		order: 9;
	}

	.adm-filter-row br
	{
		display: none;
	}

	.adm-head-side
	{
		text-align: left;
	}

	.adm-table-wrap
	{
		overflow-x: visible;
	}

	table.adm-table,
	table.adm-table tbody,
	table.adm-table tr,
	table.adm-table td
	{
		display: block;
		width: auto;
		min-width: 0;
	}

	table.adm-table thead
	{
		display: none;
	}

	table.adm-table tr
	{
		padding: 8px 0;
		border-bottom: 1px solid #edf1f4;
	}

	table.adm-table tbody tr:last-child
	{
		border-bottom: 0;
	}

	table.adm-table td,
	table.adm-table .adm-num
	{
		padding: 1px 14px;
		border: 0;
		text-align: left;
		white-space: normal;
	}

	table.adm-table td[data-label]::before
	{
		content: attr(data-label) ": ";
		color: #8a949e;
	}

	table.adm-table td:first-child
	{
		padding-bottom: 3px;
	}

	/* The second lines read as their own values once the columns are gone. */
	table.adm-table .adm-sub
	{
		display: inline;
		margin-left: 6px;
	}
}

/* A row of related links or chips across the card: uploaded documents, tags. */
.adm-strip
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 8px 14px;
	border-top: 1px solid #e3e8ec;
}

.adm-strip .adm-label
{
	display: inline;
}

/* A record compact enough to read as one row: a few short values side by side
   with the actions closing the row off. Collapses to one value per line below
   the same breakpoint as the tables. */
.adm-cols
{
	display: grid;
	/* The phone column is sized to its own content so a number never wraps;
	   the two text columns share what is left. */
	grid-template-columns: minmax(0, 1.5fr) max-content minmax(0, 2.6fr) max-content;
	gap: 8px 20px;
	align-items: start;
	padding: 10px 14px;
	font-size: 0.875rem;
	line-height: 1.3rem;
}

/* A long email is one unbreakable word and would otherwise spill into the
   next column rather than wrap inside its own. */
.adm-cols > div
{
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Icons only, on one line: the column costs three icons rather than three
   labels, and the address column takes the width over. The label is the
   anchor's title, so it shows on hover. */
.adm-cols .adm-actions
{
	display: flex;
	align-items: center;
	gap: 10px;
}

.adm-cols .adm-actions a.icon_only
{
	/* a.icon_only is sized by its float elsewhere; inside the row it has to
	   carry its own box or the background image has nothing to paint on. */
	float: none;
	display: inline-block;
	width: 22px;
	height: 22px;
}

@media screen and (max-width: 1000px)
{
	.adm-cols
	{
		grid-template-columns: minmax(0, 1fr);
	}

}

/* --------------------------------------------------------------------------------------------------------------------- */
/* DOG EDIT PANE */
/* --------------------------------------------------------------------------------------------------------------------- */

/* The dog form is loaded into a frame inside this pane, so the pane is sized
   rather than grown by its content: the frame scrolls on its own. */
.dog-edit-overlay
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9100;
}

.dog-edit-pane
{
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	position: relative;
	margin: 20px auto;
	max-width: 60rem;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
}

.dog-edit-bar
{
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding: 10px 14px;
	border-bottom: 1px solid #e3e8ec;
	background: #fbfcfd;
}

.dog-edit-title
{
	font-weight: 600;
}

.dog-edit-status
{
	flex: 1 1 auto;
	font-size: 0.875rem;
}

.dog-edit-status-ok    { color: #1e8449; }

.dog-edit-status-error { color: #922b21; }

.dog-edit-x
{
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 20px;
	background: none;
	border: 0;
	cursor: pointer;
}

.dog-edit-frame
{
	flex: 1 1 auto;
	width: 100%;
	border: 0;
}

@media screen and (max-width: 1000px)
{
	.dog-edit-pane
	{
		margin: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
}

/* --------------------------------------------------------------------------------------------------------------------- */
/* VERIFICATION STATION */
/* --------------------------------------------------------------------------------------------------------------------- */

/* The verification modal fills the viewport - reading a pedigree against the
   form wants the room - and lays the document beside the edit frame. */
.vfy-modal
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9200;
}

.vfy-modal-pane
{
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	margin: 20px auto;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
}

.vfy-modal-bar
{
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding: 10px 14px;
	border-bottom: 1px solid #e3e8ec;
	background: #fbfcfd;
}

.vfy-modal-title
{
	font-weight: 600;
}

.vfy-modal-status
{
	flex: 1 1 auto;
	font-size: 0.875rem;
}

.vfy-modal-status-ok    { color: #1e8449; }

.vfy-modal-status-error { color: #922b21; }

.vfy-modal-x
{
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 20px;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Document left, edit frame right; each scrolls inside itself. */
.vfy-modal-body
{
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 1fr 30rem;
	min-height: 0;
}

/* The right column: the check strip or the edit frame, one at a time. */
.vfy-side
{
	min-height: 0;
	border-left: 1px solid #e3e8ec;
}

/* The dog modal reads left to right: the data first, the documents after. */
#vfy-modal .vfy-modal-body
{
	grid-template-columns: 30rem 1fr;
}

#vfy-modal .vfy-side
{
	border-left: 0;
	border-right: 1px solid #e3e8ec;
}

.vfy-edit-frame
{
	width: 100%;
	height: 100%;
	border: 0;
}

/* Check strip: the dog's data read-only, in reading size, most important
   first. Each row opens the edit form on its field. */
/* Centred down the column, where the eye is on the document - never higher
   than the document's top, below its toolbar. The two spacers share the room
   left over and give it up first, so a strip taller than the screen still
   starts at the top and scrolls. */
.vfy-facts
{
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 0;
	overflow: auto;
}

.vfy-facts::before,
.vfy-facts::after
{
	content: '';
	flex: 1 1 0;
}

.vfy-facts::before
{
	min-height: 40px;
}

.vfy-facts > *
{
	flex: 0 0 auto;
}

.vfy-fact
{
	padding: 7px 18px;
	border-bottom: 1px solid #eef1f4;
	cursor: pointer;
}

.vfy-fact:hover
{
	background: #f4f8fb;
}

.vfy-fact dt
{
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #5d6d7e;
}

.vfy-fact dd
{
	margin: 2px 0 0;
}

.vfy-fact-value
{
	font-size: 1.05rem;
	overflow-wrap: anywhere;
}

.vfy-fact-big
{
	font-size: 1.35rem;
	font-weight: 600;
}

.vfy-fact-mono
{
	font-family: Consolas, "Courier New", monospace;
	letter-spacing: 0.05em;
}

.vfy-fact-prefix
{
	margin-right: 8px;
	font-weight: normal;
	color: #5d6d7e;
}

.vfy-fact-hint
{
	margin-left: 10px;
	font-size: 0.875rem;
	color: #5d6d7e;
}

/* Found on a document by the automatic reading; a click shows where. */
.vfy-ocr-found
{
	display: inline-block;
	margin-left: 10px;
	padding: 1px 8px;
	border: 1px solid #a9dfbf;
	border-radius: 10px;
	background: #eafaf1;
	color: #1e8449;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	vertical-align: middle;
	cursor: pointer;
}

.vfy-ocr-found:hover
{
	background: #d5f5e3;
}

/* Above the facts: the reading at work, and a document none of the dog was found on. */
.vfy-ocr-note
{
	margin: 0 18px 8px;
	font-size: 0.875rem;
	color: #5d6d7e;
}

.vfy-ocr-note:empty
{
	display: none;
}

.vfy-ocr-warn
{
	padding: 6px 10px;
	border-left: 3px solid #e67e22;
	background: #fef5e7;
	color: #9a6700;
	font-weight: 600;
}

/* On its own line under the value. */
.vfy-fact-link
{
	display: block;
	width: fit-content;
	margin-top: 4px;
	font-size: 0.9375rem;
}


.vfy-fact-flag .vfy-fact-value
{
	color: #922b21;
	font-weight: 600;
}

/* MEOESZ check of a MET pedigree number, under the number. */
.vfy-check
{
	margin-top: 4px;
	font-size: 0.875rem;
}

.vfy-check-ok          .vfy-check-verdict { color: #1e8449; }
.vfy-check-fix         .vfy-check-verdict,
.vfy-check-missing     .vfy-check-verdict,
.vfy-check-letter      .vfy-check-verdict,
.vfy-check-year        .vfy-check-verdict,
.vfy-check-repeat      .vfy-check-verdict,
.vfy-check-code        .vfy-check-verdict,
.vfy-check-unknown     .vfy-check-verdict { color: #9a6700; font-weight: 600; }
.vfy-check-other_breed .vfy-check-verdict,
.vfy-check-group       .vfy-check-verdict,
.vfy-check-prefix      .vfy-check-verdict { color: #922b21; font-weight: 600; }

.vfy-check-suggestion
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

/* The proposal that fits the variant the dog is entered with. */
.vfy-check-match
{
	margin-left: -6px;
	padding: 3px 6px;
	border-radius: 4px;
	background: #e6f4ea;
}

.vfy-check-value
{
	font-size: 1.05rem;
	font-weight: 600;
}

.vfy-check-suggestion .vfy-fact-hint
{
	margin-left: 0;
}

.vfy-check-apply
{
	padding: 2px 10px;
}

/* The same in the dog form: the mark under the field's label, the check on a
   row of its own under the pedigree number, the reading's note above the form. */
.vfy-form-mark
{
	display: block;
	width: fit-content;
	margin: 4px 0 0;
}

.vfy-form-check
{
	grid-column: 2 / -1;
	margin-top: 0;
}

.vfy-form-note
{
	margin: 0 0 10px;
}

@media screen and (max-width: 900px)
{
	.vfy-form-check
	{
		grid-column: 1 / -1;
	}
}

/* A row edited in place: just its own fields, Save and Cancel beside them. */
.vfy-fact-editing,
.vfy-fact-editing:hover
{
	background: #eef5fb;
	cursor: default;
}

.vfy-inline
{
	margin-top: 4px;
}

.vfy-inline-line
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.vfy-inline-line input,
.vfy-inline-line select
{
	flex: 1 1 6rem;
	min-width: 0;
	font-size: 1rem;
	padding: 4px 6px;
}

/* The birth date: day and month narrow, the year its four digits. */
.vfy-inline-line .vfy-inline-birth_date_day,
.vfy-inline-line .vfy-inline-birth_date_year
{
	flex: 0 0 5rem;
}

.vfy-inline-line .vfy-inline-pedigree_initials
{
	flex: 1 1 100%;
}

.vfy-inline-fixed
{
	color: #5d6d7e;
}

.vfy-inline-error
{
	margin: 4px 0 0;
	color: #922b21;
	font-size: 0.875rem;
}

.vfy-inline-error:empty
{
	display: none;
}

.vfy-modal-foot
{
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border-top: 1px solid #e3e8ec;
	background: #fbfcfd;
}

/* Payment check: the proof left, the transaction's figures right. */
.pay-check-data
{
	overflow: auto;
	padding: 14px 18px;
	border-left: 1px solid #e3e8ec;
}

.pay-check-facts
{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	margin: 0 0 14px;
}

.pay-check-facts dt
{
	color: #5d6d7e;
}

.pay-check-facts dd
{
	margin: 0;
}

.pay-check-remaining
{
	grid-column: 1 / -1;
	color: #922b21;
	font-weight: bold;
}

/* The amount Confirm records, picked out in the transaction form. */
.pay-check-paid-input
{
	border: 2px solid #1e8449 !important;
	font-weight: bold;
}

/* The payment check carries the whole transaction form, so it takes more of
   the width than the dog form does - except where the panes stack. */
@media screen and (min-width: 1101px)
{
	#pv-modal .vfy-modal-body
	{
		grid-template-columns: 1fr 46rem;
	}
}

/* A yes/no question beside the button that asked it (verifyAsk). */
.vfy-ask
{
	position: fixed;
	z-index: 9500;
	max-width: 360px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid #c9d2da;
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.vfy-ask p
{
	margin: 0 0 10px;
	font-weight: 600;
}

.vfy-ask-buttons
{
	display: flex;
	gap: 8px;
	justify-content: center;
}

/* Below the dog modal, which the form opens a dog in. */
#pv-modal
{
	z-index: 9100;
}

.vfy-modal-foot .button[disabled]
{
	cursor: default;
}

@media screen and (max-width: 1100px)
{
	.vfy-modal-body
	{
		grid-template-columns: 1fr;
		grid-template-rows: 55% 45%;
	}

	.vfy-edit-frame
	{
		border-left: 0;
		border-top: 1px solid #e3e8ec;
	}

	/* Stacked, the dog modal keeps its reading order: the data above, the
	   documents under it. */
	#vfy-modal .vfy-modal-body
	{
		grid-template-columns: 1fr;
		grid-template-rows: 45% 55%;
	}

	#vfy-modal .vfy-side
	{
		border-right: 0;
		border-bottom: 1px solid #e3e8ec;
	}

	#vfy-modal .vfy-edit-frame
	{
		border-top: 0;
	}
}

.vfy-doc
{
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	border: 1px solid #e3e8ec;
	border-radius: 4px;
	background: #fbfcfd;
	overflow: hidden;
}

.vfy-doc-bar
{
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	flex-wrap: wrap;
	padding: 8px 10px;
	border-bottom: 1px solid #e3e8ec;
	background: #fff;
}

.vfy-doc-tabs
{
	display: flex;
	gap: 6px;
	flex: 1 1 auto;
	flex-wrap: wrap;
}

.vfy-doc-tabs .adm-chip
{
	cursor: pointer;
	border: 1px solid transparent;
}

/* A tab is the document's name plus its remove button, side by side. */
.vfy-tab
{
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.vfy-tab-show,
.vfy-tab-remove
{
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.vfy-tab-remove
{
	margin-left: 4px;
	padding: 0 3px;
	font-size: 15px;
	line-height: 1;
	font-weight: 400;
	border-radius: 3px;
	opacity: 0.6;
}

.vfy-tab-remove:hover
{
	color: #fff;
	background: #c0392b;
	opacity: 1;
}

/* The document on screen: filled, so it is told apart at a glance. */
.vfy-doc-tabs .vfy-tab-on
{
	border-color: #1f6391;
	background: #1f6391;
	color: #fff;
	font-weight: 600;
}

.vfy-doc-tabs .vfy-tab-on .vfy-tab-remove
{
	opacity: 0.85;
}

/* Not yet put on screen for this dog - Confirm warns about these. */
.vfy-tab-unseen::before
{
	content: '';
	width: 7px;
	height: 7px;
	margin-right: 4px;
	border-radius: 50%;
	background: #e67e22;
}

.vfy-doc-tools
{
	display: flex;
	gap: 4px;
	flex: 0 0 auto;
	align-items: center;
}

.vfy-doc-tools .button[disabled]
{
	cursor: default;
}

/* The stage holds either the browser PDF viewer or a bare image. A rotated
   image keeps its unrotated box, so it is carried by a canvas that is sized in
   script to the rotated bounding box - the stage then scrolls over the picture
   as it is actually drawn instead of over where it used to be. */
.vfy-doc-stage
{
	flex: 1 1 auto;
	overflow: auto;
	background: #55606a;
	text-align: center;
}

/* A Word document as docx-preview lays it out: its pages on the stage. */
.vfy-doc-word
{
	text-align: left;
}

.vfy-doc-word .docx-wrapper
{
	background: transparent;
	padding: 20px;
}

.vfy-doc-frame
{
	width: 100%;
	height: 100%;
	border: 0;
	background: #fff;
}

.vfy-doc-canvas
{
	position: relative;
	margin: 0 auto;
}

/* The picture and the boxes marked on it, turned and zoomed as one. */
.vfy-doc-sheet
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: center center;
}

.vfy-doc-img
{
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

/* Where the automatic reading found a fact. */
.vfy-doc-mark
{
	position: absolute;
	box-sizing: content-box;
	margin: -4px 0 0 -4px;
	padding: 4px;
	border: 3px solid #e67e22;
	border-radius: 4px;
	background: rgba(241, 196, 15, 0.25);
	pointer-events: none;
	animation: vfy-mark-in 0.6s ease-out 2;
}

@keyframes vfy-mark-in
{
	50% { border-color: #f1c40f; }
}

.vfy-nodoc
{
	color: #e8edf1;
	padding: 40px 20px;
}


/* --------------------------------------------------------------------------------------------------------------------- */
/* ADMINISTRATION CONFIGURATION */
/* --------------------------------------------------------------------------------------------------------------------- */

/* One card per setting, side by side, each with its own save button. */

.adm-config-head
{
	margin-bottom: 12px;
}

.adm-config-head h2
{
	margin-bottom: 2px;
}

.adm-config #messages p
{
	margin: 0 0 12px 0;
}

.adm-config-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
	align-items: stretch;
}

.adm-config-grid div.entry.adm-card
{
	display: flex;
	margin: 0;
}

/* the form fills the card so the footers of both cards line up */
.adm-config-grid div.entry.adm-card form
{
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
}

.adm-config-body
{
	flex: 1;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 8px;
}

.adm-config-body p.adm-muted
{
	font-size: 0.875rem;
	line-height: 1.3rem;
}

.adm-config-field
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.adm-config-field input[type="date"]
{
	padding: 7px 10px;
	border: 1px solid #b9ccdd;
	border-radius: 4px;
	background: #fff;
	font: inherit;
	font-size: 1rem;
	color: #1b2a38;
}

.adm-config-field input[type="date"]:focus
{
	outline: none;
	border-color: #2980b9;
	box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.2);
}

.adm-config .adm-foot .button
{
	margin: 0;
}

/* the card title already names the field; the label stays for screen readers */
.adm-visually-hidden
{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* on / off switch drawn over a real checkbox, which stays focusable */

.adm-switch
{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-weight: 900;
}

.adm-switch input[type="checkbox"]
{
	position: absolute;
	opacity: 0;
	width: 44px;
	height: 24px;
	margin: 0;
	cursor: pointer;
}

.adm-switch-track
{
	position: relative;
	flex: none;
	width: 44px;
	height: 24px;
	border-radius: 12px;
	background: #c3ccd4;
	transition: background-color 0.15s ease;
}

.adm-switch-track::after
{
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

.adm-switch input:checked + .adm-switch-track
{
	background: #1e8449;
}

.adm-switch input:checked + .adm-switch-track::after
{
	transform: translateX(20px);
}

.adm-switch input:focus-visible + .adm-switch-track
{
	box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.35);
}

@media (prefers-reduced-motion: reduce)
{
	.adm-switch-track,
	.adm-switch-track::after
	{
		transition: none;
	}
}


/* --------------------------------------------------------------------------------------------------------------------- */
/* ADMINISTRATION DASHBOARD */
/* --------------------------------------------------------------------------------------------------------------------- */

/* The admin home: what is waiting first, then where the entries stand, the
   dogs per show and the two settings, each tile a link to its list. */

.adm-dash
{
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

.adm-dash-head
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e3e8ec;
}

.adm-dash-head h2
{
	margin-bottom: 0;
}

.adm-dash #messages p
{
	margin: 0;
}

/* no message: no empty row between the heading and the first section */
.adm-dash #messages:not(:has(p))
{
	display: none;
}

.adm-dash-title
{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	color: #1f6391;
	font-size: 0.85rem;
	line-height: 1.3rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

a.adm-dash-more
{
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #1f6391 !important;
	text-decoration: none;
}

a.adm-dash-more:hover
{
	text-decoration: underline;
}

.adm-dash-tiles
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

/* fixed-size tiles, so a section with one or two figures does not stretch
   them across the page */
.adm-dash-tiles-fill
{
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

a.adm-dash-tile
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	border: 1px solid #d8dee3;
	border-top: 3px solid #2492b3;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	color: #1b2a38 !important;
	text-decoration: none;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

a.adm-dash-tile:hover,
a.adm-dash-tile:focus-visible
{
	border-color: #2492b3;
	box-shadow: 0 4px 12px rgba(27, 42, 56, 0.12);
}

/* waiting work in the amber of the "waiting" badge, cleared work in green */
a.adm-dash-tile-wait
{
	border-top-color: #b9770e;
	background: #fffaf0;
}

a.adm-dash-tile-wait .adm-dash-num
{
	color: #b9770e;
}

.adm-dash-num
{
	color: #b9770e;
}

.adm-dash-num
{
	font-size: 1.9rem;
	line-height: 2.2rem;
	font-weight: 900;
	color: #1f6391;
	font-variant-numeric: tabular-nums;
}

.adm-dash-name
{
	font-size: 0.95rem;
	line-height: 1.3rem;
}

.adm-dash-link
{
	margin-top: 4px;
	font-size: 0.8rem;
	color: #5b6a75;
}

/* dogs per show */

.adm-dash-shows
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	border: 1px solid #d8dee3;
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
}

.adm-dash-show
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 8px;
	text-align: center;
}

.adm-dash-show + .adm-dash-show
{
	border-left: 1px solid #e3e8ec;
}

.adm-dash-show:nth-child(even)
{
	background: #f6f7f9;
}

.adm-dash-show-type
{
	padding: 1px 10px;
	border: 1px solid;
	border-radius: 999px;
	font-size: 0.72rem;
	line-height: 1.2rem;
	font-weight: 900;
	letter-spacing: 0.06em;
}

.adm-dash-cacib
{
	border-color: #1f6391;
	background: #1f6391;
	color: #fff;
}

.adm-dash-cac
{
	border-color: #1f6391;
	background: #d6e7f5;
	color: #174d72;
}

/* club / special shows carry their full name, so the badge may wrap */
.adm-dash-club
{
	max-width: 100%;
	border-color: #8a5a00;
	background: #fbeccb;
	color: #6b4600;
}

.adm-dash-show-date
{
	font-size: 0.8rem;
	color: #5b6a75;
}

/* the two settings, in the heading */

.adm-dash-settings
{
	display: grid;
	grid-template-columns: max-content auto;
	gap: 6px 14px;
	align-items: center;
	margin: 0;
}

.adm-dash-settings dt
{
	color: #8a949e;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.adm-dash-settings dd
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0;
}

.adm-dash-settings dd strong
{
	font-size: 1.05rem;
}

@media screen and (max-width: 600px)
{
	.adm-dash-show + .adm-dash-show
	{
		border-left: 0;
	}
}

@media (prefers-reduced-motion: reduce)
{
	a.adm-dash-tile
	{
		transition: none;
	}
}


/* --------------------------------------------------------------------------------------------------------------------- */
/* ADMINISTRATION DOG STATE FILTER */
/* --------------------------------------------------------------------------------------------------------------------- */

.adm-state-filter
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.adm-state-filter a,
.adm-state-filter span.adm-state-current
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 3px 4px 3px 12px;
	border: 1px solid #cfdbe6;
	border-radius: 999px;
	background: #fff;
	color: #3d4f5c !important;
	font-size: 0.9rem;
	line-height: 1.3rem;
	text-decoration: none;
}

.adm-state-filter a:hover,
.adm-state-filter a:focus-visible
{
	border-color: #2980b9;
}

.adm-state-filter b
{
	min-width: 1.4rem;
	padding: 0 7px;
	border-radius: 999px;
	background: #e8eff5;
	color: #1f6391;
	font-weight: 900;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.adm-state-filter span.adm-state-current
{
	border-color: #1f6391;
	background: #1f6391;
	color: #fff !important;
}

.adm-state-filter span.adm-state-current b
{
	background: #fff;
}

/* The document viewer's toolbar: compact buttons, the zoom ones square. */
.vfy-doc-tools .button
{
	min-width: 32px;
	min-height: 32px;
	padding: 0 10px;
	line-height: 30px;
	font-size: 0.85rem;
}

/* The results of a dog in the entries list: its download and regenerate
   buttons stack, with room between them. */
.results_container .button
{
	margin: 6px 0;
}

/* MET. / PKR. are joined to the number with their dot, no gap. */
.vfy-fact-prefix.vfy-fact-prefix-joined
{
	margin-right: 0;
}

/* The owner's name in the dog form, with the link to the member's data right
   under it. */
.owner-field
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

/* As tall as the form's other fields, which take their height from the grid. */
.owner-field input
{
	box-sizing: border-box;
	width: 100%;
	height: 40px;
}

.owner-data-link
{
	font-size: 0.9375rem;
}