/* ---------------------------------------------------------------------------
   BZ Client Portal
   Visual language follows the Claude app: warm cream ground, white cards with
   soft borders, a single coral accent, generous spacing, rounded corners.
   --------------------------------------------------------------------------- */

/* The portal renders as its own page: no theme header, footer or width cap. */
html,
body.bzcp-shell {
	margin: 0;
	padding: 0;
	background: #faf9f5;
}

body.bzcp-shell {
	min-height: 100vh;
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #1f1e1d;
}

body.bzcp-shell img { max-width: 100%; height: auto; }

.bzcp {
	--bz-bg: #faf9f5;
	--bz-panel: #ffffff;
	--bz-side: #f0eee6;
	--bz-line: #e5e2db;
	--bz-line-soft: #efece4;
	--bz-ink: #1f1e1d;
	--bz-ink-2: #55534d;
	--bz-ink-3: #8a8779;
	--bz-accent: #c96442;
	--bz-accent-ink: #ffffff;
	--bz-accent-soft: #f7ece7;
	--bz-good: #3f7a52;
	--bz-good-soft: #e8f1ea;
	--bz-warn: #9a6414;
	--bz-warn-soft: #fbf0dd;
	--bz-bad: #a33a2c;
	--bz-bad-soft: #f8e8e5;
	--bz-r-sm: 8px;
	--bz-r: 12px;
	--bz-r-lg: 16px;

	display: flex;
	gap: 28px;
	align-items: flex-start;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 100vh;
	margin: 0;
	padding: 28px 32px 64px;
	background: var(--bz-bg);
	color: var(--bz-ink);
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.bzcp *,
.bzcp *::before,
.bzcp *::after { box-sizing: border-box; }

/* Signed-out screens centre themselves in the window instead of using the grid. */
.bzcp--bare {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 40px 20px;
}

/* -------------------------------------------------------------- sidebar */

.bzcp-side {
	position: sticky;
	top: 24px;
	flex: 0 0 232px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 20px 16px;
	background: var(--bz-side);
	border: 1px solid var(--bz-line);
	border-radius: var(--bz-r-lg);
}

.bzcp-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bzcp-avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--bz-accent);
	color: var(--bz-accent-ink);
	font-weight: 600;
	font-size: 15px;
}

body.bzcp-shell img.bzcp-logo { display: block; width: auto; height: 18px; }

.bzcp-brand-text,
.bzcp-whoami-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.bzcp-brand-text strong,
.bzcp-whoami-text strong {
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bzcp-brand-text small,
.bzcp-whoami-text small {
	color: var(--bz-ink-3);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bzcp-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bzcp-nav-item {
	padding: 8px 11px;
	border-radius: var(--bz-r-sm);
	color: var(--bz-ink-2);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background .12s ease, color .12s ease;
}

.bzcp-nav-item:hover {
	background: rgba(0, 0, 0, .045);
	color: var(--bz-ink);
}

.bzcp-nav-item.is-active {
	background: var(--bz-panel);
	color: var(--bz-ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.bzcp-side-foot {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--bz-line);
}

.bzcp-whoami {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.bzcp-whoami .bzcp-avatar {
	width: 28px;
	height: 28px;
	font-size: 13px;
	background: #ddd8cb;
	color: var(--bz-ink-2);
}

.bzcp-signout {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid var(--bz-line);
	border-radius: var(--bz-r-sm);
	background: transparent;
	color: var(--bz-ink-2);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.bzcp-signout:hover { background: var(--bz-panel); }

/* ----------------------------------------------------------------- main */

.bzcp-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bzcp-head {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}

.bzcp-title {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.2;
	color: var(--bz-ink);
}

.bzcp-sub {
	margin: 4px 0 0;
	color: var(--bz-ink-3);
	font-size: 14px;
}

.bzcp-eyebrow {
	display: block;
	margin-bottom: 2px;
	color: var(--bz-ink-3);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.bzcp-subtitle {
	margin: 24px 0 8px;
	font-size: 14px;
	font-weight: 600;
}

.bzcp-back { margin: 0; }

.bzcp-back a {
	color: var(--bz-ink-3);
	font-size: 13px;
	text-decoration: none;
}

.bzcp-back a:hover { color: var(--bz-ink); }

.bzcp-muted { color: var(--bz-ink-3); }
.bzcp-right { text-align: right; }
.bzcp-pad { padding: 0 20px 18px; }

.bzcp-prose {
	margin: 16px 0 0;
	color: var(--bz-ink-2);
}

/* ---------------------------------------------------------------- cards */

.bzcp-card {
	padding: 20px;
	background: var(--bz-panel);
	border: 1px solid var(--bz-line);
	border-radius: var(--bz-r-lg);
}

.bzcp-card + .bzcp-card { margin-top: 20px; }
.bzcp-card--flush { padding: 0; }
/* Wide screens: edit/settings cards fill the window like every other screen. */
.bzcp-card--narrow { max-width: 100%; }

.bzcp-card--center {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
}

.bzcp-card-title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 600;
}

.bzcp-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px 12px;
}

.bzcp-card-head .bzcp-card-title { margin: 0; }

.bzcp-card-head a {
	color: var(--bz-accent);
	font-size: 13px;
	text-decoration: none;
}

.bzcp-two {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	align-items: start;
}

.bzcp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
}

.bzcp-empty {
	text-align: center;
	padding: 44px 24px;
}

.bzcp-empty h2 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
}

.bzcp-empty p {
	margin: 0;
	color: var(--bz-ink-3);
}

.bzcp-lead {
	margin: 0;
	font-size: 16px;
	color: var(--bz-ink-2);
}

/* ---------------------------------------------------------------- flash */

.bzcp-flash {
	padding: 11px 15px;
	border: 1px solid transparent;
	border-radius: var(--bz-r);
	font-size: 14px;
}

.bzcp-flash--ok {
	background: var(--bz-good-soft);
	border-color: #cfe0d4;
	color: var(--bz-good);
}

.bzcp-flash--error {
	background: var(--bz-bad-soft);
	border-color: #eccdc7;
	color: var(--bz-bad);
}

/* -------------------------------------------------------------- buttons */

.bzcp-btn {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid var(--bz-line);
	border-radius: var(--bz-r-sm);
	background: var(--bz-panel);
	color: var(--bz-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}

.bzcp-btn:hover {
	background: #f5f3ed;
	color: var(--bz-ink);
}

.bzcp-btn--primary {
	background: var(--bz-accent);
	border-color: var(--bz-accent);
	color: var(--bz-accent-ink);
}

.bzcp-btn--primary:hover {
	background: #b5563a;
	border-color: #b5563a;
	color: var(--bz-accent-ink);
}

.bzcp-btn--danger {
	background: transparent;
	border-color: #e3c4be;
	color: var(--bz-bad);
}

.bzcp-btn--danger:hover { background: var(--bz-bad-soft); }
.bzcp-btn--block { display: block; width: 100%; }

.bzcp-link-btn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--bz-ink-3);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.bzcp-link-btn:hover { color: var(--bz-bad); }

.bzcp-actions {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

.bzcp-danger {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--bz-line-soft);
}

.bzcp-inline { display: inline-block; }

/* ---------------------------------------------------------------- forms */

.bzcp-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bzcp-form--row {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.bzcp-form--row select,
.bzcp-form--row input[type="text"] { flex: 1 1 auto; }

.bzcp-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bzcp-field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}

.bzcp-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--bz-ink-2);
}

.bzcp-optional {
	font-weight: 400;
	color: var(--bz-ink-3);
}

.bzcp-hint {
	font-size: 12px;
	color: var(--bz-ink-3);
}

.bzcp input[type="text"],
.bzcp input[type="email"],
.bzcp input[type="password"],
.bzcp input[type="url"],
.bzcp input[type="date"],
.bzcp input[type="number"],
.bzcp input[type="search"],
.bzcp select,
.bzcp textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--bz-line);
	border-radius: var(--bz-r-sm);
	background: var(--bz-panel);
	color: var(--bz-ink);
	font: inherit;
	font-size: 14px;
}

.bzcp textarea { resize: vertical; }

.bzcp input:focus,
.bzcp select:focus,
.bzcp textarea:focus {
	outline: none;
	border-color: var(--bz-accent);
	box-shadow: 0 0 0 3px var(--bz-accent-soft);
}

.bzcp-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	color: var(--bz-ink-2);
}

.bzcp-check input { margin-top: 3px; }

.bzcp-searchbar {
	display: flex;
	gap: 8px;
	max-width: 460px;
}

/* ----------------------------------------------------------------- tabs */

.bzcp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bzcp-tab {
	padding: 6px 13px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--bz-ink-2);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.bzcp-tab:hover { background: rgba(0, 0, 0, .04); }

.bzcp-tab.is-active {
	background: var(--bz-panel);
	border-color: var(--bz-line);
	color: var(--bz-ink);
}

/* ------------------------------------------------------- pills / status */

.bzcp-pill {
	padding: 6px 13px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bzcp-pill--warn { background: var(--bz-warn-soft); color: var(--bz-warn); }
.bzcp-pill--good { background: var(--bz-good-soft); color: var(--bz-good); }

.bzcp-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: #f0eee6;
	color: var(--bz-ink-2);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.bzcp-status--active,
.bzcp-status--sent { background: var(--bz-accent-soft); color: var(--bz-accent); }

.bzcp-status--completed,
.bzcp-status--paid { background: var(--bz-good-soft); color: var(--bz-good); }

.bzcp-status--on_hold,
.bzcp-status--invited,
.bzcp-status--draft { background: var(--bz-warn-soft); color: var(--bz-warn); }

.bzcp-status--cancelled,
.bzcp-status--overdue,
.bzcp-status--disabled { background: var(--bz-bad-soft); color: var(--bz-bad); }

/* ---------------------------------------------------------------- stats */

.bzcp-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}

.bzcp-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px;
	background: var(--bz-panel);
	border: 1px solid var(--bz-line);
	border-radius: var(--bz-r-lg);
	text-decoration: none;
	color: inherit;
}

.bzcp-stat:hover { border-color: #d8d3c7; }

.bzcp-stat-num {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.bzcp-stat-label {
	color: var(--bz-ink-3);
	font-size: 13px;
}

.bzcp-stat--warn .bzcp-stat-num { color: var(--bz-warn); }

/* ------------------------------------------------------------ job cards */

.bzcp-job-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	transition: border-color .12s ease, transform .12s ease;
}

.bzcp-job-card:hover {
	border-color: #d8d3c7;
	transform: translateY(-1px);
}

.bzcp-job-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.bzcp-job-card-top .bzcp-eyebrow { margin: 0; }

.bzcp-job-title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.bzcp-meta {
	margin: 0;
	color: var(--bz-ink-3);
	font-size: 13px;
}

/* ------------------------------------------------------------- progress */

.bzcp-progress { display: flex; flex-direction: column; gap: 7px; }

.bzcp-progress-bar {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: #ebe7dd;
	overflow: hidden;
}

.bzcp-progress-bar > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--bz-accent);
	transition: width .3s ease;
}

.bzcp-progress-meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}

.bzcp-progress-meta span { color: var(--bz-ink-3); }

.bzcp-mini-progress {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 120px;
}

.bzcp-mini-progress small { color: var(--bz-ink-3); font-size: 12px; }

/* ---------------------------------------------------------------- steps */

.bzcp-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.bzcp-step {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 130px;
	padding: 10px 12px;
	border: 1px solid var(--bz-line-soft);
	border-radius: var(--bz-r);
	font-size: 13px;
	color: var(--bz-ink-3);
}

.bzcp-step-dot {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #ebe7dd;
	color: var(--bz-ink-3);
	font-size: 12px;
	font-weight: 600;
}

.bzcp-step.is-done { color: var(--bz-ink-2); }
.bzcp-step.is-done .bzcp-step-dot { background: var(--bz-good-soft); color: var(--bz-good); }

.bzcp-step.is-now {
	border-color: var(--bz-accent);
	background: var(--bz-accent-soft);
	color: var(--bz-ink);
	font-weight: 600;
}

.bzcp-step.is-now .bzcp-step-dot { background: var(--bz-accent); color: #fff; }

.bzcp-stage-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bzcp-stage-opt {
	position: relative;
	padding: 8px 14px;
	border: 1px solid var(--bz-line);
	border-radius: 999px;
	font-size: 13px;
	cursor: pointer;
}

.bzcp-stage-opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bzcp-stage-opt:hover { background: #f5f3ed; }

.bzcp-stage-opt.is-active {
	background: var(--bz-accent);
	border-color: var(--bz-accent);
	color: #fff;
	font-weight: 600;
}

/* ------------------------------------------------------------- timeline */

.bzcp-timeline {
	margin: 0;
	padding: 0 0 0 6px;
	list-style: none;
}

.bzcp-timeline li {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 0 0 18px 10px;
	border-left: 1px solid var(--bz-line);
}

.bzcp-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }

.bzcp-timeline-dot {
	position: absolute;
	left: -4px;
	top: 6px;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--bz-accent);
}

.bzcp-timeline strong { display: block; font-size: 14px; }
.bzcp-timeline time { color: var(--bz-ink-3); font-size: 12px; }
.bzcp-timeline p { margin: 6px 0 0; color: var(--bz-ink-2); font-size: 14px; }

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

.bzcp-list { margin: 0; padding: 0; list-style: none; }
.bzcp-list li + li { border-top: 1px solid var(--bz-line-soft); }

.bzcp-list-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 13px 20px;
	color: inherit;
	text-decoration: none;
}

.bzcp-list-row:hover { background: #faf9f5; }

.bzcp-list-main { display: flex; flex-direction: column; min-width: 0; }
.bzcp-list-main strong { font-size: 14px; font-weight: 600; }
.bzcp-list-main small { color: var(--bz-ink-3); font-size: 12px; }

.bzcp-list-end {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

.bzcp-list-end strong { font-size: 14px; }

/* --------------------------------------------------------- key/value rows */

.bzcp-kv { margin: 0; padding: 0 20px 18px; list-style: none; }

.bzcp-kv li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 0;
}

.bzcp-kv li + li { border-top: 1px solid var(--bz-line-soft); }
.bzcp-kv span { color: var(--bz-ink-3); font-size: 13px; }
.bzcp-kv strong { font-size: 14px; font-weight: 600; text-align: right; }

/* ---------------------------------------------------------------- table */

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

.bzcp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.bzcp-table th {
	padding: 12px 16px;
	border-bottom: 1px solid var(--bz-line);
	color: var(--bz-ink-3);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.bzcp-table td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--bz-line-soft);
	vertical-align: middle;
}

.bzcp-table tr:last-child td { border-bottom: 0; }
.bzcp-table tbody tr:hover { background: #faf9f5; }
.bzcp-table a { color: var(--bz-accent); text-decoration: none; }
.bzcp-table a:hover { text-decoration: underline; }

.bzcp-row-note td {
	padding-top: 0;
	color: var(--bz-ink-3);
	font-size: 13px;
}

/* ---------------------------------------------------------------- facts */

.bzcp-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin: 0;
}

.bzcp-facts dt {
	color: var(--bz-ink-3);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.bzcp-facts dd { margin: 2px 0 0; font-size: 14px; }
.bzcp-facts a { color: var(--bz-accent); }

/* ---------------------------------------------------------------- chips */

.bzcp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bzcp-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px 5px 12px;
	background: #f5f3ed;
	border: 1px solid var(--bz-line);
	border-radius: 999px;
	font-size: 13px;
}

.bzcp-chip a { color: var(--bz-ink); text-decoration: none; }
.bzcp-chip a:hover { text-decoration: underline; }
.bzcp-chip form { display: inline-flex; }

.bzcp-chip button {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--bz-ink-3);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.bzcp-chip button:hover { background: var(--bz-bad-soft); color: var(--bz-bad); }

/* ---------------------------------------------------------------- files */

.bzcp-files { margin: 0 0 18px; padding: 0; list-style: none; }

.bzcp-file {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bz-line-soft);
}

.bzcp-file:last-child { border-bottom: 0; }

.bzcp-file-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: var(--bz-r-sm);
	background: #f0eee6;
	color: var(--bz-ink-3);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
}

.bzcp-file-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bzcp-file-text a { color: var(--bz-ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.bzcp-file-text a:hover { color: var(--bz-accent); text-decoration: underline; }
.bzcp-file-text small { color: var(--bz-ink-3); font-size: 12px; }

.bzcp-upload {
	padding-top: 16px;
	border-top: 1px solid var(--bz-line-soft);
}

.bzcp-upload .bzcp-label { display: block; margin-bottom: 8px; }

.bzcp-upload-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.bzcp-upload-row input[type="file"] {
	flex: 1 1 180px;
	min-width: 0;
	font-size: 13px;
	color: var(--bz-ink-2);
}

.bzcp-upload .bzcp-hint { display: block; margin: 8px 0 0; }

/* ----------------------------------------------------------------- auth */

.bzcp-auth {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	padding: 32px;
	background: var(--bz-panel);
	border: 1px solid var(--bz-line);
	border-radius: var(--bz-r-lg);
	text-align: center;
}

body.bzcp-shell img.bzcp-auth-logo {
	display: block;
	width: auto;
	height: 20px;
	margin: 0 auto 20px;
}

.bzcp-auth-title {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.015em;
}

.bzcp-auth-sub {
	margin: 0 0 24px;
	color: var(--bz-ink-3);
	font-size: 14px;
}

.bzcp-auth .bzcp-form { text-align: left; }
.bzcp-auth .bzcp-flash { margin-bottom: 20px; text-align: left; }

.bzcp-auth-foot {
	margin: 20px 0 0;
	font-size: 13px;
}

.bzcp-auth-foot a { color: var(--bz-ink-3); text-decoration: none; }
.bzcp-auth-foot a:hover { color: var(--bz-accent); text-decoration: underline; }

/* ------------------------------------------------------------- narrower */

@media (max-width: 860px) {
	.bzcp {
		flex-direction: column;
		gap: 18px;
		padding: 16px 16px 48px;
	}

	.bzcp-side {
		position: static;
		flex: 1 1 auto;
		width: 100%;
		gap: 16px;
	}

	.bzcp-nav { flex-direction: row; flex-wrap: wrap; }
	.bzcp-side-foot { margin-top: 0; }
	.bzcp-whoami { margin-bottom: 0; }

	.bzcp-side-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.bzcp-signout { width: auto; }
	.bzcp-title { font-size: 22px; }
}

/* ------------------------------------------------------- client top bar */

.bzcp[data-area="client"] {
	display: block;
	padding: 0;
}

.bzcp-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 16px 32px;
	background: var(--bz-panel);
	border-bottom: 1px solid var(--bz-line);
}

.bzcp-topbar-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.bzcp-topbar-company {
	padding-left: 12px;
	border-left: 1px solid var(--bz-line);
	color: var(--bz-ink-2);
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bzcp-topbar-nav {
	display: flex;
	gap: 4px;
}

.bzcp-topbar-link {
	padding: 8px 14px;
	border-radius: var(--bz-r-sm);
	color: var(--bz-ink-2);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background .12s ease, color .12s ease;
}

.bzcp-topbar-link:hover {
	background: rgba(0, 0, 0, .045);
	color: var(--bz-ink);
}

.bzcp-topbar-link.is-active {
	background: var(--bz-accent-soft);
	color: var(--bz-accent);
}

.bzcp-main--top {
	max-width: 1040px;
	margin: 0 auto;
	padding: 28px 32px 64px;
}

@media (max-width: 640px) {
	.bzcp-topbar { padding: 14px 16px; }
	.bzcp-main--top { padding: 20px 16px 48px; }
	.bzcp-topbar-company { display: none; }
}




/* -------------------------------------------------- one client's profile */

.bzcp-profile {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 4px 0 22px;
}

.bzcp-profile-text { flex: 1 1 auto; min-width: 0; }

.bzcp-profile-text .bzcp-title { margin: 0; }

.bzcp-avatar--lg {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	font-size: 22px;
}

.bzcp-profile-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 8px 0 0;
	color: var(--bz-ink-3);
	font-size: 13px;
}

.bzcp-profile-meta a { color: var(--bz-ink-2); text-decoration: none; }
.bzcp-profile-meta a:hover { color: var(--bz-accent); text-decoration: underline; }

.bzcp-profile-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 0 0 auto;
}

.bzcp-stats--money { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bzcp-stats--money .bzcp-stat-num { font-size: 21px; }
.bzcp-stats + .bzcp-split,
.bzcp-stats + .bzcp-card { margin-top: 20px; }

.bzcp-stat--good .bzcp-stat-num { color: var(--bz-good); }

.bzcp-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border-color: #e8ded0;
	background: var(--bz-warn-soft);
}

.bzcp-note p { margin: 0; color: var(--bz-ink-2); font-size: 14px; }
.bzcp-note strong { color: var(--bz-ink); }

/* Wide main column with a narrower sidebar beside it. */
.bzcp-split {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.bzcp-split-main,
.bzcp-split-side { display: flex; flex-direction: column; gap: 20px; }
.bzcp-split-main .bzcp-card + .bzcp-card,
.bzcp-split-side .bzcp-card + .bzcp-card { margin-top: 0; }

/* Middle column of a list row: a small progress bar and its stage name. */
.bzcp-list-mid {
	display: none;
	flex: 0 0 150px;
	flex-direction: column;
	gap: 6px;
}

.bzcp-list-mid small { color: var(--bz-ink-3); font-size: 12px; }
.bzcp-list-mid .bzcp-progress-bar { height: 5px; }

.bzcp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.bzcp-cell-sub {
	display: block;
	margin-top: 2px;
	color: var(--bz-ink-3);
	font-size: 12px;
}

.bzcp-timeline--pad { padding: 2px 20px 18px 26px; }

.bzcp-timeline-dot--paid { background: var(--bz-good); }
.bzcp-timeline-dot--invoice { background: var(--bz-warn); }
.bzcp-timeline-dot--file { background: var(--bz-ink-3); }
.bzcp-timeline-dot--stage { background: var(--bz-accent); }
.bzcp-timeline-dot--job { background: var(--bz-ink); }

.bzcp-timeline strong a { color: inherit; text-decoration: none; }
.bzcp-timeline strong a:hover { color: var(--bz-accent); text-decoration: underline; }

@media (min-width: 900px) {
	.bzcp-list-mid { display: flex; }
}

@media (max-width: 1100px) {
	.bzcp-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.bzcp-profile { flex-wrap: wrap; }
	.bzcp-profile-actions { width: 100%; }
	.bzcp-profile-actions .bzcp-btn { flex: 1 1 auto; text-align: center; }
}

/* ------------------------------------------------------------ email log */

.bzcp-status--failed { background: var(--bz-bad-soft); color: var(--bz-bad); }

.bzcp-note--bad {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	border-color: #e8cdc7;
	background: var(--bz-bad-soft);
}

.bzcp-note--bad strong { color: var(--bz-bad); }

.bzcp-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 16px;
	font-size: 13px;
}

.bzcp-pager .bzcp-muted { margin: 0 auto; }

.bzcp-email-preview {
	display: block;
	width: 100%;
	height: 520px;
	border: 0;
	border-top: 1px solid var(--bz-line);
	background: #faf9f5;
}

.bzcp-email-source {
	border-top: 1px solid var(--bz-line);
	padding: 14px 20px;
	font-size: 13px;
}

.bzcp-email-source summary {
	cursor: pointer;
	color: var(--bz-ink-3);
}

.bzcp-email-source summary:hover { color: var(--bz-accent); }

.bzcp-email-source pre {
	margin: 12px 0 0;
	padding: 14px;
	max-height: 320px;
	overflow: auto;
	background: #f6f4ee;
	border: 1px solid var(--bz-line);
	border-radius: var(--bz-r-md, 10px);
	font-size: 12px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}

.bzcp-detail-list {
	margin: 0;
	padding: 0 20px 18px;
	font-size: 14px;
}

.bzcp-detail-list dt {
	margin: 14px 0 2px;
	color: var(--bz-ink-3);
	font-size: 12px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.bzcp-detail-list dt:first-child { margin-top: 0; }

.bzcp-detail-list dd {
	margin: 0;
	color: var(--bz-ink);
	word-break: break-word;
}

.bzcp-detail-list dd a { color: var(--bz-ink); text-decoration: none; }
.bzcp-detail-list dd a:hover { color: var(--bz-accent); text-decoration: underline; }

/* The "email the client" box, when there is nobody to email. */

.bzcp-check.is-disabled { cursor: default; }
.bzcp-check.is-disabled span { color: var(--bz-ink-3); }
.bzcp-check.is-disabled input { cursor: default; }

.bzcp-notify-why {
	display: block;
	margin: 6px 0 0 26px;
	color: var(--bz-warn);
}

/* display:block above would otherwise defeat the hidden attribute. */
.bzcp-notify-why[hidden] { display: none; }


/* ------------------------------------------------------- invoice line items */

.bzcp-btn--quiet {
	background: transparent;
	color: var(--bz-ink-2);
	font-size: 13px;
	padding: 7px 13px;
}

.bzcp-btn--quiet:hover {
	background: var(--bz-side);
	color: var(--bz-ink);
}

.bzcp-head-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.bzcp-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--bz-line);
	border-radius: var(--bz-r);
	background: #fdfcf9;
}

.bzcp-items-top {
	display: flex;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
}

/* Description, quantity, unit price, total, then the remove button. */
.bzcp-items-head,
.bzcp-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 92px 118px 118px 32px;
	gap: 10px;
	align-items: center;
}

.bzcp-items-head {
	padding: 0 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--bz-ink-3);
}

.bzcp-item + .bzcp-item { margin-top: 8px; }

.bzcp-item-cell {
	display: block;
	min-width: 0;
}

.bzcp-item-cell--num input { text-align: right; }

/* The column headings do the labelling on a wide screen. */
.bzcp-item-mobile-label {
	display: none;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--bz-ink-3);
}

.bzcp-item-remove {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--bz-r-sm);
	background: none;
	color: var(--bz-ink-3);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.bzcp-item-remove:hover {
	border-color: #e3c4be;
	background: var(--bz-bad-soft);
	color: var(--bz-bad);
}

.bzcp-items-foot {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid var(--bz-line-soft);
}

.bzcp-items-total {
	display: flex;
	gap: 12px;
	align-items: baseline;
	margin: 0;
	font-size: 13px;
	color: var(--bz-ink-3);
}

.bzcp-items-total strong {
	font-size: 18px;
	font-weight: 600;
	color: var(--bz-ink);
}

/* Narrow screens: one field per row, each with its own label. */
@media (max-width: 720px) {
	.bzcp-items-head { display: none; }

	.bzcp-item {
		grid-template-columns: minmax(0, 1fr) 32px;
		gap: 10px;
		align-items: end;
		padding: 14px;
		border: 1px solid var(--bz-line);
		border-radius: var(--bz-r-sm);
		background: var(--bz-panel);
	}

	.bzcp-item-cell { grid-column: 1; }
	.bzcp-item-cell--num input { text-align: left; }
	.bzcp-item-mobile-label { display: block; }

	.bzcp-item-remove {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
	}
}

.bzcp-nowrap { white-space: nowrap; }
.bzcp-nowrap a + a { margin-left: 14px; }