/* ClientPost portal — neutral Sagentic-branded styles
   Mobile-first. CSS custom properties so per-client overrides are trivial. */

/* ── ClientPost standard "Portal Slate" palette ──────────────────────────────
   Neutral, professional theme used on EVERY portal install (slate grays + a
   calm blue accent). theme.php may inject --cp-primary / --cp-accent from a
   site's clientPost_settings.json to override, but the standard is to leave
   these as-is so all client portals look consistent. */
:root {
	--cp-primary:    #2f3e4e;   /* slate — headings, primary buttons, dark top bar */
	--cp-accent:     #0094e6;   /* blue  — icons, focus rings, highlights */
	--cp-bg:         #f4f6f8;   /* soft slate-gray page background */
	--cp-card:       #ffffff;
	--cp-border:     #dde3e9;
	--cp-text:       #1f2933;
	--cp-text-muted: #647079;
	--cp-success:    #2e7d57;
	--cp-danger:     #d64545;
	--cp-warning:    #c08a2d;
	--cp-info:       #0094e6;
	--cp-radius:     6px;
	--cp-shadow:     0 1px 3px rgba(15,30,45,0.08);
	--cp-shadow-lg:  0 4px 14px rgba(15,30,45,0.14);
}

* { box-sizing: border-box; }

.cp-body {
	margin: 0;
	background: var(--cp-bg);
	color: var(--cp-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.45;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Accessibility helpers */
.cp-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible {
	outline: 3px solid var(--cp-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Top bar */
.cp-topbar {
	background: var(--cp-primary);
	color: #fff;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: var(--cp-shadow);
}
.cp-brand { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.cp-logo { max-height: 36px; max-width: 200px; display: block; }
.cp-top-right { display: flex; gap: 16px; align-items: center; font-size: 14px; }
.cp-user { color: rgba(255,255,255,0.85); }
.cp-link { color: #fff; text-decoration: none; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--cp-radius); }
.cp-link:hover { background: rgba(255,255,255,0.1); }

/* Light top bar variant — for full-color client logos that need a white background.
   Set portalBranding.topbarStyle = "light" in clientPost_settings.json. */
.cp-topbar--light { background: var(--cp-card); color: var(--cp-primary); border-bottom: 1px solid var(--cp-border); }
.cp-topbar--light .cp-brand { color: var(--cp-primary); }
.cp-topbar--light .cp-logo { max-height: 44px; }
.cp-topbar--light .cp-user { color: var(--cp-text-muted); }
.cp-topbar--light .cp-link { color: var(--cp-primary); border-color: color-mix(in srgb, var(--cp-primary) 30%, #fff); }
.cp-topbar--light .cp-link:hover { background: color-mix(in srgb, var(--cp-primary) 8%, #fff); }

/* User menu (dropdown under the username) */
.cp-usermenu { position: relative; }
.cp-usermenu-toggle {
	display: inline-flex; align-items: center; gap: 8px;
	background: transparent; color: inherit; font: inherit; cursor: pointer;
	border: 1px solid rgba(255,255,255,0.3); border-radius: var(--cp-radius); padding: 7px 12px;
}
.cp-usermenu-toggle:hover { background: rgba(255,255,255,0.1); }
.cp-usermenu-name { font-weight: 600; }
.cp-usermenu-toggle .cp-caret { font-size: 0.78em; transition: transform .15s; opacity: 0.8; }
.cp-usermenu.open .cp-caret { transform: rotate(180deg); }
.cp-usermenu-dropdown {
	position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px;
	background: var(--cp-card); border: 1px solid var(--cp-border); border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow-lg); padding: 6px; display: none; z-index: 1000; text-align: left;
}
.cp-usermenu.open .cp-usermenu-dropdown { display: block; }
.cp-usermenu-item {
	display: flex; align-items: center; gap: 10px; padding: 9px 12px; white-space: nowrap;
	color: var(--cp-text); text-decoration: none; border-radius: var(--cp-radius); font-size: 14px;
}
.cp-usermenu-item:hover { background: color-mix(in srgb, var(--cp-primary) 8%, #fff); }
.cp-usermenu-item i { color: var(--cp-primary); width: 16px; text-align: center; }
/* Light top bar: darker toggle border to read on white */
.cp-topbar--light .cp-usermenu-toggle { color: var(--cp-primary); border-color: color-mix(in srgb, var(--cp-primary) 30%, #fff); }
.cp-topbar--light .cp-usermenu-toggle:hover { background: color-mix(in srgb, var(--cp-primary) 8%, #fff); }
@media (max-width: 600px) { .cp-usermenu-dropdown { right: auto; left: 0; } }

/* Main + footer */
.cp-main { flex: 1; padding: 24px 20px 60px; max-width: 1200px; margin: 0 auto; width: 100%; }
.cp-footer { text-align: center; color: var(--cp-text-muted); padding: 16px; font-size: 13px; }

/* Login */
.cp-login-shell {
	min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cp-login-card {
	background: var(--cp-card); border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow-lg);
	max-width: 420px; width: 100%; padding: 32px 28px;
	text-align: center;
}
.cp-login-logo { max-height: 60px; margin-bottom: 12px; }
.cp-login-title { margin: 0 0 6px; font-size: 22px; color: var(--cp-primary); }
.cp-login-tagline { color: var(--cp-text-muted); margin: 0 0 24px; }
.cp-login-help { color: var(--cp-text-muted); font-size: 13px; margin-top: 18px; }

/* Form */
.cp-form { text-align: left; }
.cp-form-row { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.cp-form-row label { font-weight: 600; font-size: 14px; }
.cp-form-row input, .cp-form-row textarea, .cp-form-row select {
	width: 100%; padding: 9px 11px; border: 1px solid var(--cp-border); border-radius: var(--cp-radius);
	font: inherit; background: #fff; color: var(--cp-text);
}
.cp-form-row textarea { resize: vertical; min-height: 60px; }
.cp-form-row input:focus, .cp-form-row textarea:focus, .cp-form-row select:focus {
	border-color: var(--cp-accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-accent) 25%, transparent);
}
.cp-required { color: var(--cp-danger); margin-left: 2px; }

/* Buttons */
.cp-btn {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--cp-card); color: var(--cp-text);
	border: 1px solid var(--cp-border); border-radius: var(--cp-radius);
	padding: 8px 14px; font: inherit; cursor: pointer;
	text-decoration: none;
}
.cp-btn:hover { background: #f0f0f0; }
.cp-btn-primary { background: var(--cp-primary); color: #fff; border-color: var(--cp-primary); }
.cp-btn-primary:hover { background: color-mix(in srgb, var(--cp-primary) 82%, #000); }
.cp-btn-danger { background: var(--cp-danger); color: #fff; border-color: var(--cp-danger); }
.cp-btn-block { width: 100%; justify-content: center; padding: 11px; font-weight: 600; }
.cp-btn-sm { font-size: 13px; padding: 5px 10px; }
.cp-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Alerts */
.cp-alert { padding: 12px 14px; border-radius: var(--cp-radius); border: 1px solid; margin: 12px 0; }
.cp-alert-success { background: #e6f7ec; color: #1c6b35; border-color: #b6e0c4; }
.cp-alert-danger  { background: #fdecea; color: #952b25; border-color: #f5b8b3; }
.cp-alert-warning { background: #fff7e0; color: #6b5300; border-color: #ffe699; }
.cp-alert-info    { background: #e7f4fa; color: #0c5a73; border-color: #b6d8e8; }

/* Page header */
.cp-page-title { margin: 0 0 6px; font-size: 26px; color: var(--cp-primary); }
.cp-page-desc  { color: var(--cp-text-muted); margin: 0 0 24px; }
.cp-section-title { font-size: 18px; color: var(--cp-primary); margin: 28px 0 12px; }

/* Breadcrumb */
.cp-breadcrumb ol { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; }
.cp-breadcrumb li { color: var(--cp-text-muted); }
.cp-breadcrumb li + li:before { content: "›"; margin-right: 6px; color: var(--cp-text-muted); }
.cp-breadcrumb a { color: var(--cp-primary); text-decoration: none; }
.cp-breadcrumb a:hover { text-decoration: underline; }

/* Tile grid */
.cp-tile-grid {
	display: grid; gap: 16px;
	grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 600px)  { .cp-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .cp-tile-grid { grid-template-columns: repeat(3, 1fr); } }

.cp-tile {
	display: block; position: relative; text-decoration: none; color: inherit;
	background: var(--cp-card); border: 1px solid var(--cp-border); border-radius: var(--cp-radius);
	padding: 24px 20px; text-align: center; min-height: 150px;
	box-shadow: var(--cp-shadow); transition: box-shadow .15s, transform .15s;
}
.cp-tile:hover { box-shadow: var(--cp-shadow-lg); transform: translateY(-2px); }
.cp-tile:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 2px; }
.cp-tile-icon { font-size: 32px; color: var(--cp-accent); margin-bottom: 8px; }
.cp-tile-label { font-weight: 600; font-size: 16px; color: var(--cp-primary); margin-bottom: 4px; }
.cp-tile-desc { color: var(--cp-text-muted); font-size: 13px; }
.cp-tile-badge {
	position: absolute; top: 10px; right: 12px;
	background: var(--cp-primary); color: #fff;
	border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600;
}

/* Upload shell */
.cp-upload-shell {
	background: var(--cp-card); border: 1px solid var(--cp-border); border-radius: var(--cp-radius);
	padding: 20px; margin-bottom: 24px;
}

.cp-drop {
	border: 2px dashed var(--cp-border); border-radius: var(--cp-radius);
	padding: 30px 20px; text-align: center; cursor: pointer;
	margin-bottom: 16px; transition: border-color .15s, background .15s;
	color: var(--cp-text-muted);
	position: relative;
}
.cp-drop:hover, .cp-drop:focus-visible, .cp-drop.is-dragover {
	border-color: var(--cp-accent); background: color-mix(in srgb, var(--cp-accent) 6%, #fff); color: var(--cp-text);
}
.cp-drop input[type="file"] {
	position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.cp-drop-label { font-weight: 600; margin: 8px 0 4px; color: var(--cp-text); }
.cp-drop-help { font-size: 13px; margin: 0; }
.cp-file-chosen { margin-top: 10px; font-weight: 600; color: var(--cp-primary); }

.cp-form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.cp-progress {
	display: inline-flex; align-items: center; gap: 10px; flex: 1;
	background: var(--cp-bg); border-radius: var(--cp-radius); height: 24px; padding: 0 8px;
	position: relative; overflow: hidden;
}
.cp-progress-bar {
	position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
	background: var(--cp-accent); transition: width .15s;
}
.cp-progress-pct { position: relative; z-index: 1; font-size: 12px; color: var(--cp-text); }

.cp-upload-result { margin-top: 12px; }

/* File table */
.cp-files-table { width: 100%; border-collapse: collapse; background: var(--cp-card); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); overflow: hidden; }
.cp-files-table th, .cp-files-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--cp-border); }
.cp-files-table th { background: var(--cp-bg); font-size: 13px; color: var(--cp-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.cp-files-table tr:last-child td { border-bottom: 0; }
.cp-actions-col { width: 200px; text-align: right; }
.cp-actions-col .cp-btn { margin-left: 4px; }
.cp-file-title a { color: var(--cp-primary); text-decoration: none; font-weight: 500; }
.cp-file-title a:hover { text-decoration: underline; }

.cp-empty { color: var(--cp-text-muted); font-style: italic; padding: 16px; text-align: center; }

/* Inline edit row */
.cp-files-table tr.is-editing .cp-file-title { display: none; }
.cp-edit-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cp-edit-form input { flex: 1; min-width: 200px; }

/* Modal / confirm */
.cp-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; }
.cp-modal { background: var(--cp-card); padding: 24px; border-radius: var(--cp-radius); max-width: 480px; width: 100%; box-shadow: var(--cp-shadow-lg); }
.cp-modal h3 { margin: 0 0 12px; color: var(--cp-primary); }
.cp-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

@media (max-width: 600px) {
	.cp-topbar { flex-direction: column; gap: 10px; align-items: stretch; text-align: center; }
	.cp-top-right { justify-content: center; }
	.cp-actions-col { width: auto; }
	.cp-files-table thead { display: none; }
	.cp-files-table, .cp-files-table tbody, .cp-files-table tr, .cp-files-table td { display: block; width: 100%; }
	.cp-files-table tr { margin-bottom: 12px; border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 8px; }
	.cp-files-table td { border: 0; padding: 4px 0; }
}

/* Record/event editor forms (status badges, venue fieldset, form grid) */
.cp-records-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cp-records-header .cp-section-title { margin: 0; }
.cp-record-sub { color: var(--cp-text-muted); }
.cp-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.cp-badge-live { background: #e6f4ea; color: #1e7e34; }
.cp-badge-warn { background: #fff6e0; color: #9a6700; }
.cp-badge-muted { background: var(--cp-bg); color: var(--cp-text-muted); }
.cp-form-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 0 16px; }
.cp-field-help { color: var(--cp-text-muted); font-size: 13px; }
.cp-fixed-value { margin: 0; padding: 10px 12px; background: var(--cp-bg); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); }
.cp-check-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
.cp-check-label input { width: auto; }
.datepicker { z-index: 1100 !important; }
@media (max-width: 600px) {
	.cp-form-grid { grid-template-columns: 1fr; }
}
.cp-venue-fieldset { border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 12px 14px; margin: 0 0 14px; }
.cp-venue-fieldset legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
.cp-venue-fieldset > .cp-field-help { display: block; margin-bottom: 10px; }
.cp-form-grid-3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 600px) { .cp-form-grid-3 { grid-template-columns: 1fr; } }

/* Spacing + checkbox alignment refinements (2026-06-12) */
.cp-venue-fieldset { margin: 22px 0; padding: 16px 18px 10px; }
.cp-venue-fieldset > .cp-field-help { display: block; margin: 2px 0 16px; }
.cp-form-row .cp-field-help { margin-top: 2px; }
.cp-fixed-value { margin-bottom: 4px; }
.cp-check-label { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; }
.cp-check-label input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; accent-color: var(--cp-primary); }
.cp-form-actions { margin-top: 20px; }
.cp-venue-toolbar { display: flex; justify-content: flex-end; margin: -6px 0 10px; }

/* Table action buttons — soft tints that fill on hover */
.cp-actions-col .cp-btn-sm { font-weight: 600; border-radius: 6px; padding: 6px 12px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.cp-actions-col .cp-btn-sm i { margin-right: 3px; }
.cp-edit-btn { background: color-mix(in srgb, var(--cp-primary) 9%, #fff); border-color: color-mix(in srgb, var(--cp-primary) 30%, #fff); color: var(--cp-primary); }
.cp-edit-btn:hover { background: var(--cp-primary); border-color: var(--cp-primary); color: #fff; }
.cp-view-btn { background: color-mix(in srgb, var(--cp-accent) 14%, #fff); border-color: color-mix(in srgb, var(--cp-accent) 50%, #fff); color: color-mix(in srgb, var(--cp-accent) 60%, #000); }
.cp-view-btn:hover { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; }
.cp-delete-btn { background: color-mix(in srgb, var(--cp-danger, #c0392b) 8%, #fff); border-color: color-mix(in srgb, var(--cp-danger, #c0392b) 30%, #fff); color: var(--cp-danger, #c0392b); }
.cp-delete-btn:hover { background: var(--cp-danger, #c0392b); border-color: var(--cp-danger, #c0392b); color: #fff; }
.cp-files-table .cp-actions-col { width: 1%; white-space: nowrap; }

/* Activity Log */
.cp-badge-danger { background: color-mix(in srgb, var(--cp-danger) 10%, #fff); color: var(--cp-danger); }
.cp-badge i { margin-right: 3px; }
.cp-log-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cp-log-filter label { font-weight: 600; font-size: 14px; }
.cp-log-filter select { padding: 6px 10px; border: 1px solid var(--cp-border); border-radius: 6px; }
.cp-log-when { white-space: nowrap; color: var(--cp-text-muted); }
.cp-log-details { color: var(--cp-text-muted); font-size: 13px; max-width: 320px; }
.cp-files-table .cp-badge { white-space: nowrap; }
.cp-log-pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 16px; }
.cp-log-page { color: var(--cp-text-muted); font-size: 13px; }
.cp-tile-log .cp-tile-icon { color: var(--cp-accent); }
.cp-password-shell { max-width: 480px; }

/* Split count pill for record-form tiles: total (dark) + active (green) */
.cp-tile-badge-split { padding: 0; background: transparent; overflow: hidden; display: inline-flex; line-height: 1; }
.cp-tile-badge-split span { padding: 3px 9px; font-size: 12px; font-weight: 700; }
.cp-tile-badge-split .cp-badge-total { background: var(--cp-primary); color: #fff; }
.cp-tile-badge-split .cp-badge-active { background: #1e7e34; color: #fff; }
.cp-visibility-help { display: block; margin-bottom: 12px; }
.cp-form-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .cp-form-grid-2 { grid-template-columns: 1fr; } }

/* Sub-card sections + branded labels (2026-06-12) */
.cp-venue-fieldset {
	border-left: 3px solid var(--cp-accent);
	background: color-mix(in srgb, var(--cp-accent) 5%, #fff);
}
.cp-venue-fieldset legend {
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-weight: 700;
	color: var(--cp-primary);
}
.cp-venue-fieldset legend i { color: var(--cp-accent); }
/* A little brand color on field labels so sections/fields read apart from body text */
.cp-form-row label { color: var(--cp-primary); }

/* ==========================================================================
   Form Submissions tile - "Send this again" panel
   ========================================================================== */
.cp-resend-row { max-width: 420px; }
.cp-resend-btn { margin-top: 6px; }
.cp-forms-nav { margin-bottom: 14px; }
.cp-forms-nav .cp-btn { margin-right: 6px; }

/* Checkbox rows. `.cp-form-row input` sets width:100%, which stretches a checkbox
   to the full row and leaves it floating above its label looking unattached.
   Reusable for any checkbox inside a cp-form-row. */
.cp-check-row { margin-bottom: 14px; }
.cp-check-row label {
	display: flex; align-items: center; gap: 9px;
	font-weight: 600; font-size: 14px; cursor: pointer;
}
.cp-check-row input[type="checkbox"] {
	width: auto; flex: 0 0 auto; margin: 0; padding: 0;
	inline-size: 16px; block-size: 16px; accent-color: var(--cp-accent);
}
/* Provenance footer under a form submission's answers: submission number and the
   IP it was sent from. Set apart with a heavier top rule and muted text so it
   reads as metadata rather than as two more answers. */
.cp-files-table tr.cp-submission-meta > * { border-top: 2px solid var(--cp-border); }
/* ...but only above the group: the rule separates metadata from answers, and CSS
   has no ":first row with this class", so the later ones drop it again. */
.cp-files-table tr.cp-submission-meta + tr.cp-submission-meta > * { border-top: 0; }
.cp-files-table tr.cp-submission-meta td { color: var(--cp-text-muted); font-variant-numeric: tabular-nums; }
.cp-ip-lookup { white-space: nowrap; }
.cp-ip-lookup i { font-size: 0.8em; margin-left: 6px; opacity: 0.7; }

/* "From the previous version of this form" - answers rescued from a MachForm
   whose questions the replacement form no longer asks (legacy_answers). */
.cp-legacy-answers {
	margin-top: 18px;
	padding: 14px 16px;
	border-left: 3px solid var(--cp-accent);
	background: #f6f8fa;
	border-radius: 4px;
}
.cp-legacy-answers h3 {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--cp-primary);
}
.cp-legacy-answers p {
	margin: 0 0 10px;
	font-size: 13px;
	color: #5c6773;
}
.cp-legacy-answers pre {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.55;
}
/* A disabled action button (e.g. View on a form with no submissions) keeps the row
   height even, so it must NOT light up on hover the way a live one does. */
.cp-actions-col .cp-btn-sm:disabled,
.cp-actions-col .cp-btn-sm:disabled:hover {
	background: #f4f6f8;
	border-color: var(--cp-border, #d7dce2);
	color: #98a2ad;
	opacity: 1;
	cursor: not-allowed;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Billing Authorizations tile (arb.php) — site-specific to sagentic.com.
   The card panel is read off-screen and keyed into Blesta by hand, so the
   numbers are set in a monospaced face at a size that survives a glance.
   -------------------------------------------------------------------------- */
.cp-card-panel {
	border: 1px solid var(--cp-border, #d9dee3);
	border-left: 4px solid var(--cp-accent, #0094e6);
	border-radius: 10px;
	background: var(--cp-surface, #f7f9fb);
	padding: 18px 20px;
}
.cp-card-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--cp-border, #e3e8ec);
}
.cp-card-row:last-of-type { border-bottom: 0; }
.cp-card-label {
	flex: 0 0 9.5rem;
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cp-muted, #6b7885);
}
.cp-card-value {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--cp-primary, #2f3e4e);
	overflow-wrap: anywhere;
	-webkit-user-select: all;
	user-select: all;                 /* one click selects the whole number */
}
.cp-card-value-plain {
	font-family: inherit;
	font-size: 1rem;
	letter-spacing: normal;
	font-weight: 500;
}
.cp-card-meta {
	margin: 14px 0 0;
	font-size: .875rem;
	color: var(--cp-muted, #6b7885);
}
.cp-card-ok  { color: #2e7d57; font-weight: 600; }
.cp-card-bad { color: #b3261e; font-weight: 600; }

@media (max-width: 480px) {
	.cp-card-label { flex-basis: 100%; }
	.cp-card-value { font-size: 1.1875rem; }
}

/* "Send this again" as its own card, separated from the answers table above it.
   .cp-files-shell is an unstyled wrapper, so the card is built from the same tokens
   .cp-tile uses - the portal has no Bootstrap, and inventing a second card look would
   be worse than matching the one the tiles already use. */
.cp-resend-card {
	margin-top: 32px;
	padding: 22px 24px;
	background: var(--cp-card);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
}
.cp-resend-card .cp-records-header { margin-bottom: 6px; }
.cp-resend-card .cp-page-desc { margin: 0 0 18px; }
.cp-resend-card form { margin: 0; }
/* A group of buttons on the right of a .cp-records-header. That header is
   space-between, so loose siblings spread across the row - anything past the title
   plus one button needs wrapping in this, or the middle button ends up stranded. */
.cp-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   A _formPrivateFields answer shown in the generic Form Submissions tile.
   Only rendered for a viewer who also holds the purpose-built tile for that
   table (cpForms_maySeePrivate). Marked so it reads as sensitive rather than
   as just another answer, and set monospaced because these are things people
   transcribe by hand.
   -------------------------------------------------------------------------- */
.cp-private-row > th { position: relative; }
.cp-private-row > th::after {
	content: "SENSITIVE";
	display: inline-block;
	margin-left: .5rem;
	padding: 1px 6px;
	border-radius: 3px;
	background: #fdecea;
	color: #b3261e;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .06em;
	vertical-align: 2px;
}
.cp-private-value {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: .04em;
	-webkit-user-select: all;
	user-select: all;
}
/* --------------------------------------------------------------------------
   Click-to-copy button (data-cp-copy, handled in clientpost.js).
   Sits beside a value that exists to be re-typed somewhere else.
   -------------------------------------------------------------------------- */
.cp-copy-btn {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin-left: .6rem;
	padding: 3px 9px;
	border: 1px solid var(--cp-border, #cbd3da);
	border-radius: 5px;
	background: #fff;
	color: var(--cp-primary, #2f3e4e);
	font: inherit;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	cursor: pointer;
	vertical-align: middle;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.cp-copy-btn:hover  { background: var(--cp-accent, #0094e6); border-color: var(--cp-accent, #0094e6); color: #fff; }
.cp-copy-btn:focus-visible { outline: 2px solid var(--cp-accent, #0094e6); outline-offset: 2px; }
.cp-copy-btn.is-copied { background: #2e7d57; border-color: #2e7d57; color: #fff; }
.cp-copy-btn.is-failed { background: #b3261e; border-color: #b3261e; color: #fff; }

/* In the card panel the button is the row's third column, so keep it hard right. */
.cp-card-row .cp-copy-btn { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
	.cp-copy-btn { transition: none; }
}
@media print {
	.cp-copy-btn { display: none !important; }
}
/* .cp-private-value sets user-select:all so one click grabs the value - but that
   also fires when clicking the Copy button inside it, highlighting the whole cell
   and making the button feel broken. Opt the button out. */
.cp-copy-btn { -webkit-user-select: none; user-select: none; }

/* Attachment list on a submission (resumes, cover letters). One row per file:
   a download button naming the applicant, then the size, so a page of twenty
   applications can be worked through without opening each one. */
.cp-attach-list { list-style: none; margin: 0; padding: 0; }
.cp-attach-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-attach-list li + li { margin-top: 8px; }
.cp-attach-size { color: var(--cp-text-muted); font-size: 12px; }
.cp-attach-missing { color: var(--cp-danger); }