/* --------------------------------------------------------------------------------------------------------------------- */
/* 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-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;
}

.vfy-edit-frame
{
	width: 100%;
	height: 100%;
	border: 0;
	border-left: 1px solid #e3e8ec;
}

.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;
}

.vfy-modal-foot .button[disabled]
{
	opacity: 0.4;
	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;
	}
}

.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;
}

.vfy-tab-on
{
	border-color: #5b6a75;
	font-weight: 600;
}

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

.vfy-doc-tools .button[disabled]
{
	opacity: 0.35;
	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;
}

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

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

.vfy-doc-img
{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: none;
	transform-origin: center center;
}

.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;
}

.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;
}