/* ==========================================================================
   Media Studio Portal - dashboard UI
   ========================================================================== */

:root {
	--bg: #f4f6f8;
	--surface: #ffffff;
	--surface-2: #f8fafc;
	--border: #e2e8f0;
	--border-strong: #cbd5e1;
	--text: #0f172a;
	--text-muted: #64748b;
	--text-faint: #94a3b8;
	--brand: #1d4ed8;
	--brand-dark: #1e40af;
	--brand-soft: #eff6ff;
	--green: #047857;
	--green-soft: #ecfdf5;
	--amber: #b45309;
	--amber-soft: #fffbeb;
	--red: #b91c1c;
	--red-soft: #fef2f2;
	--slate-soft: #f1f5f9;
	--radius: 10px;
	--radius-sm: 6px;
	--shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
	--shadow-lg: 0 10px 25px rgba(15, 23, 42, .10);
	--sidebar-w: 244px;
	--del-col-w: 40px;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

/* Layout ------------------------------------------------------------------ */

.msp-shell { display: flex; min-height: 100vh; }

.msp-sidebar {
	width: var(--sidebar-w);
	flex: 0 0 var(--sidebar-w);
	background: #0f172a;
	color: #cbd5e1;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
}

/* Workspace lockup. One line, sized and spaced like the nav items below it so
   the sidebar reads as a single column rather than a header stuck on top. */
.msp-brand {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	margin: 12px 10px 2px;
	padding: 7px 8px;
	border-radius: var(--radius-sm);
	color: #e2e8f0;
}
.msp-brand:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }

.msp-brand-mark {
	width: 26px; height: 26px;
	flex: 0 0 26px;
	border-radius: 7px;
	background: var(--brand);
	/* A one-pixel top highlight instead of a gradient fill - it catches the
	   light like a real surface without the washed-out diagonal look. */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
	color: #fff;
	display: grid; place-items: center;
	font-weight: 600; font-size: 11px;
}

/* Long business names truncate rather than wrapping the sidebar out of shape;
   the full value stays available as the link's title. */
.msp-brand-name {
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Top padding trimmed - the brand row carries its own margin now that the
   divider under it is gone. */
.msp-nav { padding: 4px 10px 12px; flex: 1; overflow-y: auto; }
.msp-nav-label {
	padding: 14px 10px 6px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #475569;
	font-weight: 600;
}
.msp-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: var(--radius-sm);
	color: #cbd5e1;
	font-weight: 500;
	margin-bottom: 2px;
}
.msp-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.msp-nav a.is-active { background: var(--brand); color: #fff; }
.msp-nav svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .9; }

.msp-sidebar-foot {
	padding: 14px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 12px;
}
.msp-user { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.msp-user-avatar {
	width: 30px; height: 30px; border-radius: 50%;
	background: #334155; color: #e2e8f0;
	display: grid; place-items: center;
	font-size: 11px; font-weight: 600;
}
.msp-user-name { color: #e2e8f0; font-weight: 500; }
.msp-sidebar-foot a { color: #94a3b8; }
.msp-sidebar-foot a:hover { color: #fff; }

.msp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.msp-topbar {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	padding: 16px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	position: sticky; top: 0; z-index: 20;
}
.msp-topbar h1 { font-size: 19px; }
.msp-topbar .msp-sub { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.msp-topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.msp-content { padding: 24px 26px 60px; max-width: 1400px; width: 100%; }

/* Buttons ----------------------------------------------------------------- */

.msp-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-strong);
	background: var(--surface);
	color: var(--text);
	font-size: 13px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: background .12s, border-color .12s;
}
.msp-btn:hover { background: var(--surface-2); text-decoration: none; }
.msp-btn svg { width: 15px; height: 15px; }
.msp-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.msp-btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.msp-btn-success { background: var(--green); border-color: var(--green); color: #fff; }
.msp-btn-success:hover { background: #036147; }
.msp-btn-danger { color: var(--red); border-color: #fecaca; background: var(--red-soft); }
.msp-btn-danger:hover { background: #fee2e2; }
.msp-btn-sm { padding: 5px 10px; font-size: 12px; }
.msp-btn-ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.msp-btn-ghost:hover { background: var(--slate-soft); }

/* Cards & stats ----------------------------------------------------------- */

.msp-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin-bottom: 20px;
	overflow: hidden;
}
.msp-card-head {
	padding: 15px 18px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.msp-card-head h2 { font-size: 14px; }
.msp-card-head .msp-sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.msp-card-body { padding: 18px; }
.msp-card-foot { padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 13px; }

.msp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; }
.msp-stat {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 16px 18px;
}
.msp-stat-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--text-muted);
	font-weight: 600;
	display: flex; align-items: center; gap: 7px;
}
.msp-stat-value { font-size: 25px; font-weight: 600; letter-spacing: -.02em; margin-top: 8px; }
.msp-stat-meta { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.msp-stat-icon {
	width: 26px; height: 26px; border-radius: var(--radius-sm);
	display: grid; place-items: center; margin-left: auto;
	background: var(--brand-soft); color: var(--brand);
}
.msp-stat-icon svg { width: 15px; height: 15px; }
.msp-stat.is-green .msp-stat-value { color: var(--green); }
.msp-stat.is-green .msp-stat-icon { background: var(--green-soft); color: var(--green); }
.msp-stat.is-amber .msp-stat-value { color: var(--amber); }
.msp-stat.is-amber .msp-stat-icon { background: var(--amber-soft); color: var(--amber); }
.msp-stat.is-red .msp-stat-value { color: var(--red); }
.msp-stat.is-red .msp-stat-icon { background: var(--red-soft); color: var(--red); }

.msp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.msp-grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }

/* Tables ------------------------------------------------------------------ */

.msp-table-wrap { overflow-x: auto; }
.msp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.msp-table th {
	text-align: left;
	padding: 10px 16px;
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--text-muted);
	font-weight: 600;
	white-space: nowrap;
}
.msp-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.msp-table tbody tr:last-child td { border-bottom: 0; }
.msp-table tbody tr:hover { background: var(--surface-2); }
.msp-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.msp-table .actions { text-align: right; white-space: nowrap; }
.msp-table .strong { font-weight: 600; }
.msp-table tfoot td { padding: 12px 16px; background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--border); }

.msp-cell-main { font-weight: 500; color: var(--text); }
.msp-cell-sub { color: var(--text-muted); font-size: 12px; margin-top: 1px; }

.msp-avatar {
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--brand-soft); color: var(--brand);
	display: grid; place-items: center;
	font-size: 11px; font-weight: 600;
	flex: 0 0 30px;
}
.msp-name-cell { display: flex; align-items: center; gap: 10px; }

/* Badges ------------------------------------------------------------------ */

.msp-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
}
.msp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.msp-badge-draft { background: var(--slate-soft); color: #475569; }
.msp-badge-sent { background: var(--brand-soft); color: var(--brand); }
.msp-badge-partial { background: var(--amber-soft); color: var(--amber); }
.msp-badge-paid { background: var(--green-soft); color: var(--green); }
.msp-badge-overdue { background: var(--red-soft); color: var(--red); }
.msp-badge-cancelled { background: var(--slate-soft); color: var(--text-faint); }
.msp-badge-plain { background: var(--slate-soft); color: #475569; }
.msp-badge-plain::before { display: none; }

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

.msp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.msp-field { display: flex; flex-direction: column; gap: 6px; }
.msp-field.full { grid-column: 1 / -1; }
.msp-field label { font-size: 12px; font-weight: 600; color: #334155; }
.msp-field .hint { font-size: 11px; color: var(--text-muted); font-weight: 400; }

.msp-input, .msp-select, .msp-textarea {
	width: 100%;
	padding: 8px 11px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--surface);
	font-family: inherit;
	font-size: 13px;
	color: var(--text);
}
.msp-input:focus, .msp-select:focus, .msp-textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}
.msp-textarea { min-height: 84px; resize: vertical; }

/* Every number field steps by 1 (step="any" in the markup), but only Qty and
   the tax rate show the arrows. Those two are excluded from the rule rather
   than switched back on afterwards, so they keep the browser's own behaviour
   of revealing the arrows on hover and focus. */
.msp-input[type="number"]:not(.item-qty):not(#msp-tax-rate) {
	-moz-appearance: textfield;
	appearance: textfield;
}
.msp-input[type="number"]:not(.item-qty):not(#msp-tax-rate)::-webkit-outer-spin-button,
.msp-input[type="number"]:not(.item-qty):not(#msp-tax-rate)::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Spinners only make sense where you step through small values, so they are
   hidden everywhere except Qty and the tax rate. Those two are excluded from
   the rule rather than switched back on, so they keep the browser's own
   behaviour - arrows appearing on hover and focus. */
.msp-input[type="number"]:not(.item-qty):not(#msp-tax-rate) {
	-moz-appearance: textfield;
	appearance: textfield;
}
.msp-input[type="number"]:not(.item-qty):not(#msp-tax-rate)::-webkit-outer-spin-button,
.msp-input[type="number"]:not(.item-qty):not(#msp-tax-rate)::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.msp-input[type="file"] { padding: 6px; background: var(--surface-2); }
.msp-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.msp-check input { width: 15px; height: 15px; }

.msp-form-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 15px 18px;
	border-top: 1px solid var(--border);
	background: var(--surface-2);
	flex-wrap: wrap;
}
.msp-form-actions .spacer { margin-left: auto; }

/* Filter bar -------------------------------------------------------------- */

.msp-filters {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	flex-wrap: wrap;
	padding: 14px 18px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin-bottom: 20px;
}
.msp-filters .msp-field { min-width: 140px; }
.msp-filters .grow { flex: 1; min-width: 200px; }

/* Alerts, empty states ---------------------------------------------------- */

.msp-alert {
	padding: 11px 15px;
	border-radius: var(--radius-sm);
	margin-bottom: 18px;
	font-size: 13px;
	border: 1px solid transparent;
	display: flex; align-items: center; gap: 9px;
}
.msp-alert svg { width: 17px; height: 17px; flex: 0 0 17px; }
.msp-alert-success { background: var(--green-soft); border-color: #a7f3d0; color: #065f46; }
.msp-alert-error { background: var(--red-soft); border-color: #fecaca; color: #991b1b; }
.msp-alert-info { background: var(--brand-soft); border-color: #bfdbfe; color: #1e40af; }

.msp-empty { padding: 46px 20px; text-align: center; color: var(--text-muted); }
.msp-empty-icon {
	width: 42px; height: 42px; margin: 0 auto 12px;
	border-radius: 50%; background: var(--slate-soft);
	display: grid; place-items: center; color: var(--text-faint);
}
.msp-empty-icon svg { width: 20px; height: 20px; }
.msp-empty h3 { font-size: 14px; color: var(--text); margin-bottom: 4px; }
.msp-empty p { margin: 0 0 16px; font-size: 13px; }

/* Pagination -------------------------------------------------------------- */

.msp-pagination {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border);
	background: var(--surface-2); font-size: 12px; color: var(--text-muted);
	flex-wrap: wrap;
}
.msp-pages { display: flex; gap: 4px; }
.msp-pages a, .msp-pages span {
	padding: 5px 10px; border-radius: var(--radius-sm);
	border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
}
.msp-pages span.current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Line item editor -------------------------------------------------------- */

.msp-items { width: 100%; border-collapse: collapse; }
.msp-items th {
	text-align: left; padding: 8px 10px; font-size: 11px;
	text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
	font-weight: 600; border-bottom: 1px solid var(--border);
}
.msp-items td { padding: 7px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.msp-items td:first-child { padding-left: 0; }
.msp-items .col-qty { width: 90px; }
.msp-items .col-unit { width: 90px; }
.msp-items .col-price { width: 130px; }
.msp-items .col-amount { width: 120px; text-align: right; }
/* Set on the input, not just the cell - form controls do not inherit the
   cell's text-align. Matches the Discount field in the totals block. */
.msp-items .col-amount .msp-input { text-align: right; }
.msp-items .col-del { width: var(--del-col-w); }
/* The header pads 10px but body cells pad 6px, which left the right-aligned
   "Amount" label 4px adrift of the input under it. */
.msp-items th.col-amount { padding-right: 6px; }
.msp-line-amount { display: block; padding: 8px 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.msp-row-del {
	border: 0; background: transparent; color: var(--text-faint);
	cursor: pointer; padding: 8px; border-radius: var(--radius-sm); line-height: 0;
}
.msp-row-del:hover { background: var(--red-soft); color: var(--red); }
.msp-row-del svg { width: 15px; height: 15px; }

.msp-totals { margin-left: auto; width: 320px; max-width: 100%; margin-top: 18px; }
/* The delete button keeps its own column on the right of the item table, so the
   Amount inputs stop short of the table edge. Inset the totals by the same
   amount (that column, plus the cell's 6px right padding) and the figures line
   up under the Amount inputs. Both sides read --del-col-w, so changing the
   button column's width keeps them in step. */
.msp-totals-lines { margin-right: calc(var(--del-col-w) + 6px); }
.msp-totals-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 7px 0; font-size: 13px;
}
.msp-totals-row .label { color: var(--text-muted); }
.msp-totals-row .value { font-variant-numeric: tabular-nums; font-weight: 500; }
.msp-totals-row.grand {
	border-top: 2px solid var(--text); margin-top: 6px; padding-top: 12px;
	font-size: 17px; font-weight: 600;
}
.msp-totals-row input { width: 110px; text-align: right; }

/* Simple bar chart -------------------------------------------------------- */

.msp-chart { display: flex; align-items: flex-end; gap: 10px; height: 220px; padding: 10px 4px 0; overflow-x: auto; }
.msp-chart-col { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.msp-chart-bars { display: flex; align-items: flex-end; gap: 3px; flex: 1; width: 100%; justify-content: center; }
.msp-chart-bar { width: 16px; border-radius: 3px 3px 0 0; min-height: 2px; background: var(--brand); position: relative; }
.msp-chart-bar.expense { background: var(--border-strong); }
.msp-chart-bar:hover { opacity: .85; }
.msp-chart-label { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.msp-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
.msp-legend span { display: flex; align-items: center; gap: 6px; }
.msp-legend i { width: 10px; height: 10px; border-radius: 2px; display: block; }

/* Bar list (categories, top customers) ------------------------------------ */

.msp-barlist { display: flex; flex-direction: column; gap: 13px; }
.msp-barlist-row .top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; gap: 10px; }
.msp-barlist-row .top .value { font-variant-numeric: tabular-nums; font-weight: 600; }
.msp-barlist-track { height: 7px; background: var(--slate-soft); border-radius: 4px; overflow: hidden; }
.msp-barlist-fill { height: 100%; background: var(--brand); border-radius: 4px; }

/* Detail list ------------------------------------------------------------- */

.msp-dl { display: grid; grid-template-columns: 130px 1fr; gap: 9px 16px; font-size: 13px; }
.msp-dl dt { color: var(--text-muted); }
.msp-dl dd { margin: 0; font-weight: 500; }

.msp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.msp-tabs a {
	padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--text-muted);
	border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.msp-tabs a:hover { color: var(--text); text-decoration: none; }
.msp-tabs a.is-active { color: var(--brand); border-bottom-color: var(--brand); }

.msp-inline-form { display: inline; }
.msp-muted { color: var(--text-muted); }
.msp-nowrap { white-space: nowrap; }
.msp-mt { margin-top: 20px; }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1024px) {
	.msp-grid-2, .msp-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
	.msp-shell { flex-direction: column; }
	.msp-sidebar { width: 100%; flex: none; height: auto; position: static; }
	.msp-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; }
	.msp-nav a { margin: 0; }
	.msp-nav-label { display: none; }
	.msp-content { padding: 16px; }
	.msp-topbar { padding: 14px 16px; }
	/* The item table scrolls on its own here, so the inset would only push the
	   totals off-centre rather than line them up with anything. */
	.msp-totals-lines { margin-right: 0; }
}

/* Fields stacked straight into a card body (rather than in a .msp-form-grid)
   have no gap of their own - give consecutive ones some breathing room. */
.msp-card-body > .msp-field + .msp-field { margin-top: 18px; }
.msp-card-body > .msp-field + .msp-check { margin-top: 14px; }

/* Logo preview (settings) -------------------------------------------------- */

.msp-logo-preview {
	width: 150px; height: 150px; margin: 0 auto 14px;
	border: 1px solid var(--border-strong); border-radius: 50%;
	overflow: hidden; background: #fff;
	position: relative;
	cursor: grab;
	touch-action: none;
}
.msp-logo-preview:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.msp-logo-preview.is-dragging { cursor: grabbing; }
/* Absolute so left/top are a share of the circle, matching the printed badge. */
.msp-logo-preview img {
	position: absolute;
	transform: translate(-50%, -50%);
	object-fit: contain;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}
/* Centre crosshair, so the logo can be lined up against the middle of the
   circle. Guide only - it is never part of the printed invoice. */
.msp-logo-preview::before,
.msp-logo-preview::after {
	content: "";
	position: absolute;
	background: rgba(29, 78, 216, .35);
	pointer-events: none;
	z-index: 1;
}
.msp-logo-preview::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
.msp-logo-preview::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; }
.msp-logo-preview.is-dragging::before,
.msp-logo-preview.is-dragging::after { background: rgba(29, 78, 216, .7); }

/* Repeatable site visits (invoice editor) ---------------------------------- */

.msp-visit + .msp-visit {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px dashed var(--border-strong);
}
.msp-visit-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
.msp-visit-no {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--text-muted);
	font-weight: 600;
}
.msp-visit-tbc-row { margin-bottom: 12px; }
/* A pending visit still shows its fields, just played down - the customer may
   have given a partial answer worth keeping. */
.msp-visit.is-pending .msp-form-grid { opacity: .55; }
.msp-visit.is-pending .msp-visit-no::after {
	content: " · to be confirmed";
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	color: var(--amber);
}

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

.msp-login { display: flex; min-height: 100vh; }
.msp-login-main { flex: 1; display: grid; place-items: center; padding: 32px 24px; }

.msp-login-card {
	width: 100%;
	max-width: 400px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 32px;
}


.msp-login-card h2 { font-size: 21px; }
.msp-login-lede { margin: 5px 0 22px; color: var(--text-muted); }
.msp-login-card .msp-alert { margin-bottom: 18px; }
.msp-login-card .msp-field + .msp-field { margin-top: 15px; }

.msp-pw { position: relative; }
.msp-pw .msp-input { padding-right: 38px; width: 100%; }
.msp-pw-toggle {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-faint);
	cursor: pointer;
}
.msp-pw-toggle:hover { color: var(--text-muted); background: var(--slate-soft); }
.msp-pw-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Which eye shows is driven entirely by aria-pressed, so the visual state and
   the state announced to a screen reader can never drift apart. */
.msp-pw-toggle .msp-eye-hide,
.msp-pw-toggle[aria-pressed="true"] .msp-eye-show { display: none; }
.msp-pw-toggle[aria-pressed="true"] .msp-eye-hide { display: block; }
.msp-pw-toggle[aria-pressed="true"] { color: var(--brand); }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.msp-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The honeypot is absolutely positioned, so the submit carries the gap that
   used to come from the options row. */
.msp-login-submit {
	width: 100%;
	justify-content: center;
	margin-top: 22px;
	padding: 10px;
	font-size: 14px;
}

@media (max-width: 520px) {
	.msp-login-main { align-items: start; padding: 24px 16px; }
	.msp-login-card { padding: 24px 20px; border-radius: var(--radius); }
}

/* Print ------------------------------------------------------------------- */

/* Any portal page prints as just its content - the sidebar, page header and
   action buttons are navigation, and navigation is meaningless on paper. */
@media print {
	.msp-sidebar,
	.msp-topbar { display: none !important; }

	.msp-shell { display: block; min-height: 0; }
	.msp-content { padding: 0; max-width: none; }
	.msp-body { background: #fff; }
}