/* path => static/css/cp-components.css
   Shared page components (staff redesign, Phase 1/2): page header, card, stat tile, empty state, form layout.
   Every selector starts with .cp- so it is safe to load on every page; the staff-only frame overrides live in cp-staff.css. */

:root { --cp-border: #dee2e6; --cp-muted: #3b4147; }

.cp-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), .cp-form select, .cp-form textarea {
  display: block; width: 100%; padding: .4rem .65rem; border: 1px solid #ced4da; border-radius: .375rem; background: #fff; font: inherit;
}
.cp-form input:focus, .cp-form select:focus, .cp-form textarea:focus {
  border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .2rem rgba(13,110,253,.2);
}

/* ---- Shared components ---- */
.cp-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.cp-page-header h1 { margin: 0; }
.cp-page-header .cp-sub { color: var(--cp-muted); margin: .15rem 0 0; }
.cp-card { background: #fff; border: 1px solid var(--cp-border); border-radius: .5rem; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.cp-card > h2, .cp-card > h3 { margin-top: 0; }
.cp-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.cp-card-head h2, .cp-card-head h3 { margin: 0; }
.cp-stat { background: #fff; border: 1px solid var(--cp-border); border-radius: .5rem; padding: .9rem 1.1rem; }
.cp-stat .cp-stat-label { color: var(--cp-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.cp-stat .cp-stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.cp-empty { text-align: center; color: var(--cp-muted); padding: 2rem 1rem; border: 1px dashed var(--cp-border); border-radius: .5rem; }
.cp-form { max-width: 720px; }
.cp-form .cp-field { margin-bottom: 1rem; }
.cp-form .cp-field label { font-weight: 600; margin-bottom: .25rem; display: block; }
.cp-form .cp-field .cp-help { color: var(--cp-muted); font-size: .85rem; margin-top: .2rem; }
.cp-form .cp-field .cp-error { color: #b02a37; font-size: .875rem; margin-top: .2rem; }
.cp-form .cp-field.cp-check label { display: inline; font-weight: 500; margin-left: .35rem; }
.cp-form .cp-field.cp-check input { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: middle; margin: 0; }
.cp-form .cp-actions { display: flex; gap: .5rem; margin-top: 1.25rem; }
.cp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 720px) { .cp-form-grid { grid-template-columns: 1fr; } }
.cp-form.cp-form-wide { max-width: none; }
.cp-form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.25rem; }
@media (max-width: 992px) { .cp-form-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .cp-form-grid-4 { grid-template-columns: 1fr; } }
.cp-scroll { max-height: 460px; overflow-y: auto; }
.cp-scroll thead th { position: sticky; top: 0; z-index: 1; }

/* Client portal navbar: solid white links (Bootstrap's default is 55% white, hard to read on the dark bar) */
#client-navbar .nav-link, #client-navbar .navbar-brand { color: #fff; font-weight: 500; }
#client-navbar .nav-link:hover, #client-navbar .nav-link:focus, #client-navbar .nav-link.show { color: #111; background: #fff; border-radius: .375rem; }