/* ============================================================
   Client portal
   Loaded only on /client/ pages, on top of theme.css.
   ============================================================ */

.page-head--portal { padding-bottom: var(--s-3); }

.portal-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-3);
}
.portal-head .page-sub .badge { margin-left: 0.4rem; vertical-align: 2px; }
.portal-signout { margin: 0; }

/* ---- Section nav ---- */

.portal-nav {
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
	position: sticky;
	top: 0;
	z-index: 15;
}
.portal-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.portal-nav a {
	display: block;
	padding: 0.85rem 0;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.portal-nav a:hover { color: var(--brand); }
.portal-nav .is-current a { color: var(--brand); border-bottom-color: var(--brand); }

.portal { padding: var(--s-5) 0 var(--s-6); }

/* ---- Overview ---- */

.portal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--s-3);
	margin-bottom: var(--s-5);
}
.portal-stat {
	font-size: var(--step-1);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 0.35rem;
}

.portal-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--s-3);
	align-items: start;
}
.portal-cols--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

.portal-section { margin-top: var(--s-5); }
.portal-section .section-title { font-size: var(--step-1); }

/* ---- Action bars ---- */

.portal-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	margin: 0 0 var(--s-3);
	padding-bottom: var(--s-2);
	border-bottom: 1px solid var(--rule-soft);
}
.portal-actions__title { margin: 0; font-size: var(--step-1); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.portal-actions__title .muted { font-size: var(--step--1); font-weight: 400; }
.portal-actions__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.inline-form { margin: 0; display: inline; }

/* ---- Detail lists ---- */

.details-list { margin: 0; }
.details-list__row {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: var(--s-2);
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--rule-soft);
}
.details-list__row:last-child { border-bottom: 0; }
.details-list dt { font-size: var(--step--1); color: var(--muted); }
.details-list dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 520px) {
	.details-list__row { grid-template-columns: 1fr; gap: 0; }
}

/* ---- Report toolbar ---- */

.toolbar--report .field { min-width: 9rem; }
.toolbar--report select,
.toolbar--report input[type="date"] { min-width: 9rem; }

/* ---- Sortable headings ---- */

.sortlink {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: inherit;
	text-decoration: none;
}
.sortlink:hover { color: var(--brand); }
.sortlink__arrow {
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	opacity: 0;
}
.sortlink:hover .sortlink__arrow { opacity: 0.4; border-bottom: 5px solid currentColor; }
.sortlink.is-sorted { color: var(--brand); }
.sortlink.is-sorted .sortlink__arrow { opacity: 1; }
.sortlink.is-asc .sortlink__arrow { border-bottom: 5px solid currentColor; }
.sortlink.is-desc .sortlink__arrow { border-top: 5px solid currentColor; }

.schedule--history td { vertical-align: middle; }

/* ---- The staff list ----
 *
 * Four columns of very different character, which the default table
 * layout handles badly: it gave a fifth of the width to a job title
 * column that was empty for the entire account, and left the phone
 * column so narrow that 916-653-5987 broke in half at a hyphen.
 *
 * The two columns with a predictable shape get one, and email takes
 * what is left. Whether the title column is drawn at all is decided in
 * isinc_portal_staff_table(), because that is a question about the data
 * rather than about the styling.
 */
/* Widths only where there are columns. Below 820px this table collapses
   into a stacked card per person, and a 22% wide cell in that layout is
   nonsense; the collapse rules set every cell to full width, and these
   are more specific than they are, so they have to be kept out of it. */
@media (min-width: 821px) {
	.schedule--staff .col-name { width: 22%; min-width: 11rem; }
	.schedule--staff .col-title { width: 20%; }
	.schedule--staff .col-phone { width: 1%; }
}

/* Long addresses break where they have to rather than pushing the whole
   table sideways. */
.schedule--staff .col-email { overflow-wrap: anywhere; }

/* A phone number is one thing and reads as one thing. Hyphens are break
   opportunities as far as a browser is concerned, so this has to be
   said out loud. */
.schedule--staff .col-phone { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Two addresses on one record stack rather than running together. */
.cell-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }

.schedule--staff .col-name .badge { margin-left: 0.4rem; }

/*
 * A row the filter has put away.
 *
 * Needed because the stacked layout gives every row `display: block`,
 * and an explicit display beats the browser's own rule for [hidden].
 * Without this the filter would appear to do nothing on a phone.
 */
.schedule--staff tr[hidden] { display: none; }

/* ---- Finding one person in a long list ---- */

.list-filter {
	display: grid;
	grid-template-columns: auto minmax(0, 22rem) auto;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-3);
}
.list-filter__label { font-weight: 600; font-size: 0.9rem; }
.list-filter__input {
	inline-size: 100%;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--rule);
	border-radius: 6px;
	background: var(--surface);
	font: inherit;
}
.list-filter__input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.list-filter__count { margin: 0; font-size: 0.86rem; }

@media (max-width: 620px) {
	.list-filter { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}

/* A search box that only filters what is on screen has nothing to say on
   paper, and the count beside it would be misleading there. */
@media print {
	.list-filter { display: none; }
}

/* ---- Sign in ---- */

.portal-signin {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: var(--s-4);
	align-items: start;
	max-width: 56rem;
}
@media (max-width: 820px) { .portal-signin { grid-template-columns: 1fr; } }
.portal-signin .panel--form { max-width: none; }

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

.field-pair { display: flex; gap: 0.5rem; }
.field-pair input:first-child { width: 4.5rem; flex: 0 0 auto; }
.req { color: var(--accent); font-weight: 700; }

.notice--warn {
	border-color: rgb(var(--accent-rgb) / 0.35);
	background: rgb(var(--accent-rgb) / 0.07);
}
.notice p:last-child { margin-bottom: 0; }

/* ---- Print: the portal is printed constantly, so make it clean ---- */

@media print {
	.portal-nav,
	.portal-signout,
	.portal-actions__buttons,
	.toolbar { display: none !important; }

	.portal { padding: 0; }
	.panel { border: 0; padding: 0 0 1rem; break-inside: avoid; }
	.portal-cols, .portal-grid { display: block; }
	.details-list__row { break-inside: avoid; }
	.badge { border: 1px solid #999; color: #000 !important; background: none !important; }
}