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

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

/* --------------------------------------------------------------------------------------------------------------------- */
/* TRANSACTION PANE */
/* --------------------------------------------------------------------------------------------------------------------- */

/* Shares the dog edit pane's chrome, one layer below it: a dog is edited in
   the dog pane, opened on top of this one. */
.dog-edit-overlay.tx-overlay
{
	z-index: 9050;
}

.tx-pane-body
{
	flex: 1 1 auto;
	overflow-y: auto;
}

.tx-section
{
	padding: 12px 14px;
	border-bottom: 1px solid #e3e8ec;
}

.tx-pane-foot
{
	justify-content: flex-end;
}

/* Label, amount, currency, action - one row per figure. */
.tx-grid
{
	display: grid;
	grid-template-columns: 11rem 6rem 4rem max-content;
	align-items: center;
	gap: 6px 8px;
	margin: 8px 0;
}

.tx-grid .tx-span2
{
	grid-column: 4;
	grid-row: span 2;
}

.tx-grid .tx-wide
{
	grid-column: span 2;
}

.tx-grid .button,
.tx-class-edit .button,
.tx-dog > .button
{
	margin: 0;
	float: none;
}

.tx-amount,
.tx-currency
{
	width: 100%;
	box-sizing: border-box;
}

.tx-facts
{
	margin: 6px 0 10px;
}

.tx-strip
{
	padding-left: 0;
	padding-right: 0;
	border-top: 0;
}

.tx-show
{
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px dashed #e3e8ec;
}

/* Class select, save and withdraw on one row under the show. */
.tx-class-edit,
.entry_class_edit
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}

.tx-class-select,
.entry_class_select
{
	margin: 0;
	min-width: 0;
	max-width: 100%;
}

/* Classes that do not normally apply to this dog stay selectable, marked. */
.tx-class-select option[data-flagged="1"],
.entry_class_select option[data-flagged="1"]
{
	color: #b35c00;
}

.has-flagged-selection
{
	border: 1px solid #b35c00;
	background-color: #fff6e6;
}

.entry_class_legend
{
	display: block;
	font-size: 11px;
	color: #b35c00;
}

.entry_class_history
{
	display: block;
	font-size: 11px;
	color: #666;
}

@media screen and (max-width: 700px)
{
	.tx-grid
	{
		grid-template-columns: 1fr 5rem;
	}

	.tx-grid label,
	.tx-grid .tx-span2,
	.tx-grid .tx-wide,
	.tx-grid > .button
	{
		grid-column: 1 / -1;
		grid-row: auto;
	}
}