/* ------------------------ Base Overrides ------------------------ */
html {
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

.page-wrapper {
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* The single CapabilityDelta token set. Change brand colours here only. */
:root {
    --cd-primary: #2B6CAF;
    --cd-primary-hover: #245C95;
    --cd-primary-active: #1E4D7D;
    --cd-primary-light: #E9F0F8;
    --cd-secondary: #829CCF;
    --cd-accent: #FF993C;           /* tertiary */
    --cd-dark: #1A202C;
    --cd-light: #F5F5F5;
    --cd-background: #FFFFFF;
    --cd-grid: #E5E7EB;             /* light grey grid lines */
    --cd-success: #198754;
    --cd-danger: #DC3545;
    --cd-warning: #FFA500;
    --cd-info: #0DCAF0;
    --bs-primary: #2B6CAF;
    --bs-primary-rgb: 43, 108, 175;
}

/* NOTE: Button colors are dynamically applied in header.php and header_login.php */
.btn-primary, .theme-btn, .orange-btn {
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-primary:hover, .btn-primary:focus, .theme-btn:hover, .orange-btn:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.btn-primary:active, .btn-primary.active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
}

.btn-outline-primary {
    background-color: transparent;
    font-weight: 600;
}

.btn-secondary, .btn-cta, .theme-btn-2 {
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-secondary:hover, .btn-cta:hover, .theme-btn-2:hover {
    opacity: 0.9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Success button - Match primary button styling for consistency */
.btn-success {
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-success:hover, .btn-success:focus {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.btn-success:active, .btn-success.active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
}

/* Info button - Consistent styling */
.btn-info {
    background-color: #0DCAF0 !important;
    border-color: #0DCAF0 !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-info:hover, .btn-info:focus {
    background-color: #0bb4d1 !important;
    border-color: #0bb4d1 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Warning button - Consistent styling */
.btn-warning {
    background-color: #FFA500 !important;
    border-color: #FFA500 !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-warning:hover, .btn-warning:focus {
    background-color: #e69500 !important;
    border-color: #e69500 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Danger button - Consistent styling */
.btn-danger {
    background-color: #DC3545 !important;
    border-color: #DC3545 !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-danger:hover, .btn-danger:focus {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Outline button variants */
.btn-outline-success {
    color: var(--theme-primary-btn-bg) !important;
    border-color: var(--theme-primary-btn-border) !important;
    background-color: transparent;
    font-weight: 600;
}

.btn-outline-success:hover, .btn-outline-success:focus {
    background-color: var(--theme-primary-btn-bg) !important;
    border-color: var(--theme-primary-btn-border) !important;
    color: var(--theme-primary-btn-text) !important;
}

.btn-outline-danger {
    color: #DC3545 !important;
    border-color: #DC3545 !important;
    background-color: transparent;
    font-weight: 600;
}

.btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color: #DC3545 !important;
    border-color: #DC3545 !important;
    color: #ffffff !important;
}

/* ------------------------ Colors & Backgrounds ------------------------ */
.bg-primary, .bg-active-primary-text-white { background-color: var(--cd-primary) !important; }
.text-primary { color: var(--cd-primary) !important; }

a.text-primary:hover { color: var(--cd-primary-hover) !important; }

/* ------------------------ Badge Styles ------------------------ */
.badge.bg-primary, .badge-primary { background-color: var(--cd-primary) !important; color: #ffffff; }
.badge-success, .badge-paid { background-color: #0D6EFD !important; color: #ffffff; }
.badge-danger, .badge-overdue { background-color: #DC3545 !important; color: #ffffff; }
.badge-warning, .badge-pending { background-color: #FFA500 !important; color: #ffffff; }
.badge-info, .badge-partial { background-color: #0DCAF0 !important; color: #000000; }
.badge-role { font-size: 13px; font-weight: 600; padding: 0.5rem 1rem; border-radius: 8px; }

/* ------------------------ Alert Styles ------------------------ */
.alert { border-radius: 0; text-align: center; padding: 12px; border: none; }
.alert-primary { background-color: var(--cd-primary-light) !important; border-left: 4px solid var(--cd-primary); color: var(--cd-primary-active) !important; }
.alert-success { background-color: #d4edda; color: #155724; }
.alert-error, .alert-danger { background-color: #f8d7da; color: #721c24; }
.alert-warning { background-color: #fff3cd; color: #856404; }
.alert-info { background-color: #d1ecf1; color: #0c5460; }

/* Note: Form focus colors are now applied dynamically in header.php and header_login.php */
.form-control:focus, .form-select:focus {
    border-color: var(--cd-primary);
    box-shadow: 0 0 0 0.25rem rgba(43, 108, 175, 0.25);
}

/* ------------------------ Navigation ------------------------ */
.nav-pills .nav-link { color: var(--cd-primary, var(--cd-primary)); }
.nav-pills .nav-link:hover { background-color: color-mix(in srgb, var(--cd-primary, var(--cd-primary)) 10%, transparent); color: color-mix(in srgb, var(--cd-primary, var(--cd-primary)) 85%, black); }
.nav-pills .nav-link.active { background-color: var(--cd-primary, var(--cd-primary)) !important; color: #ffffff !important; }
.sidebar .nav-link:hover, .nav-link.active { color: var(--cd-primary) !important; }

/* ------------------------ Pagination ------------------------ */
.pagination .page-link { color: var(--cd-primary, var(--cd-primary)) !important; }
.pagination .page-link:hover { background-color: color-mix(in srgb, var(--cd-primary, var(--cd-primary)) 8%, white); color: color-mix(in srgb, var(--cd-primary, var(--cd-primary)) 85%, black) !important; }
.pagination .page-item.active .page-link {
    background-color: var(--cd-primary, var(--cd-primary)) !important;
    border-color: var(--cd-primary, var(--cd-primary)) !important;
    color: #ffffff !important;
}

/* ------------------------ Cards ------------------------ */
.card {
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
.card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.card .card-header {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.card .card-body:last-child {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.card-header.bg-primary { background-color: var(--cd-primary, var(--cd-primary)) !important; color: #ffffff !important; font-weight: 600; }

/* Card Title Styles */

.card-title-md {
    font-size: 14px;
    font-weight: 600;
    color: var(--cd-dark);
}

/* ------------------------ Tables ------------------------ */
.table thead th {
    background-color: #F5F5F5;
    color: var(--cd-dark);
    font-weight: 600;
    /* Border color is set dynamically in header.php using --cd-primary */
}
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(43, 108, 175, 0.05); }

/* ------------------------ Dropdown ------------------------ */
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--cd-primary) !important;
    color: #ffffff !important;
}
.dropdown-item:hover { background-color: var(--cd-primary-light); color: var(--cd-primary-hover); }

/* ------------------------ Progress & Spinners ------------------------ */
.progress-bar, .progress-bar.bg-primary { background-color: var(--cd-primary, var(--cd-primary)) !important; }
.spinner-border.text-primary { color: var(--cd-primary, var(--cd-primary)) !important; }

/* ------------------------ List Groups ------------------------ */
.list-group-item-primary { background-color: var(--cd-primary-light) !important; color: var(--cd-primary-active) !important; }
.list-group-item:hover { background-color: #F5F5F5; }

/* ------------------------ Accordion ------------------------ */
.accordion-button { background-color: #F5F5F5; color: var(--cd-dark); }
.accordion-button:not(.collapsed) { background-color: color-mix(in srgb, var(--cd-primary, var(--cd-primary)) 8%, white); color: var(--cd-primary, var(--cd-primary)); }
.accordion-button:focus {
    border-color: var(--cd-primary, var(--cd-primary));
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cd-primary, var(--cd-primary)) 25%, transparent);
}

/* Page Container - Standard background and padding */
.page-container {
    background: #F5F5F5;
    padding: 2rem;
    flex: 1 0 auto;
}

footer, footer * {
    margin-bottom: 0 !important;
}

/* Row Spacing for Dashboard Sections */
.row.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}
.row.mb-4 {
    margin-bottom: 1.5rem !important;
}

.stat-card {
    background: #ffffff;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 100%;
}
.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}
.stat-card .card-body { 
    padding: 1.75rem !important; 
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 16px !important;
}

.kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6C757D;
    margin-bottom: 0.75rem;
}

/* ------------------------ Stat Cards ------------------------ */
.stat-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ------------------------ Timeline Styles ------------------------ */
.timeline-container {
    position: relative;
}
.timeline-item {
    position: relative;
    padding-left: 0;
}
.timeline-icon {
    font-size: 1.25rem;
}

/* Custom Scrollbar for Timeline */
.timeline-container::-webkit-scrollbar {
    width: 8px;
}
.timeline-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.timeline-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
.timeline-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ------------------------ Navigation Tabs ------------------------ */
.nav-tabs .nav-link.active {
    color: #003366 !important;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 600;
}
.nav-tabs .nav-link {
    color: #6c757d;
    transition: all 0.3s ease;
}
.nav-tabs .nav-link:hover {
    color: #003366;
    border-color: #e9ecef #e9ecef #dee2e6;
}
.nav-tabs .nav-link i {
    transition: transform 0.3s ease;
}
.nav-tabs .nav-link:hover i {
    transform: scale(1.1);
}

/* ------------------------ Permission Checkboxes ------------------------ */
.permission-checkbox { 
    width: 18px; 
    height: 18px; 
    cursor: pointer;
    accent-color: var(--cd-accent);
}
.permission-checkbox:checked {
    background-color: var(--cd-accent);
    border-color: var(--cd-accent);
}

/* ------------------------ Page Headers ------------------------ */
.page-header-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--cd-dark);
}
.page-header-subtitle {
    font-size: 14px;
    color: #6c757d;
}

/* ------------------------ Code Display ------------------------ */
pre {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px;
    max-height: 400px;
    overflow-y: auto;
}
code {
    background-color: #f8f9fa;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 90%;
}

/* Progress Circle (Collection Rate) */
.progress-circle-container {
    position: relative;
    display: inline-block;
}
.progress-ring {
    transform: rotate(-90deg);
}
.progress-ring-circle-bg {
    fill: none;
    stroke: #f0f0f0;
    stroke-width: 8;
}
.progress-ring-circle {
    fill: none;
    stroke: var(--cd-primary);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: calc(326.73 - (326.73 * var(--percent)) / 100);
    transition: stroke-dashoffset 1s ease-in-out;
}
.progress-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* Section Card Styling */
.section-card {
    background: #ffffff;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
.section-card .card-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 1.25rem 1.5rem !important;
    color: var(--cd-dark) !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}
.section-card .card-body {
    padding: 1.5rem !important;
}

.section-card .card-body:last-child {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

.section-card .card-body-table {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 0 !important;
    padding-bottom: 1.5rem !important;
}

.section-card .card-body-table:last-child {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

/* Activity Timeline */

.timeline-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 0;
}
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: -24px;
    width: 2px;
    background: #e0e0e0;
}
.timeline-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}
.timeline-icon i {
    font-size: 18px;
}

.text-success {
    color: var(--cd-primary) !important;
}

.text-primary {
    color: #0D6EFD !important;
}
.bg-info-subtle {
    background-color: rgba(13, 202, 240, 0.1);
}
.text-info {
    color: #0DCAF0 !important;
}

.text-warning {
    color: #FFA500 !important;
}

.text-secondary {
    color: #6C757D !important;
}

.text-danger {
    color: #DC3545 !important;
}

/* Notification Items */
.notification-item {
    display: flex;
    align-items: start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
    background: #f8f9fa;
}
.notification-item:hover {
    background: #f0f0f0;
}

.notification-dismiss {
    border: none;
    background: transparent;
    color: #6C757D;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.notification-dismiss:hover {
    background: #e0e0e0;
    color: var(--cd-dark);
}

/* Schools KPI Cards */
.schools-page-kpi-card {
    background: #ffffff;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.schools-page-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.schools-page-kpi-card .card-body {
    padding: 1.5rem !important;
}

/* Large KPI Value for Schools Page */
.kpi-value-large {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cd-dark);
    margin-bottom: 0.25rem;
}

/* Page Header Styles */
.page-header-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--cd-dark);
    margin-bottom: 0.5rem;
}

.page-header-subtitle {
    font-size: 14px;
    color: #6C757D;
}

/* Schools View Page - Compressed Styles */

.section-header {
    padding: 1.25rem 1.5rem;
    color: var(--theme-primary-btn-bg);
    font-size: 15px;
}

.section-header h6 {
    color: inherit;
}

.section-body {
    padding: 1.5rem;
}

/* Ensure icon and text are vertically centered */

.info-table th {
    width: 40%;
    color: #6C757D;
    font-weight: 500;
    font-size: 14px;
    padding: 10px 0;
}

.info-table td {
    color: var(--cd-dark);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 0;
}

/* ------------------------ Select2 ------------------------ */
.select2-container { width: 100% !important; }
.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}
.form-select-sm.select2-hidden-accessible + .select2-container--bootstrap-5 .select2-selection {
    min-height: 39px !important;
    font-size: 14px;
}
.form-select-sm.select2-hidden-accessible + .select2-container--bootstrap-5 .select2-selection__rendered {
    line-height: 21px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--cd-primary, var(--cd-primary)) !important;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cd-primary, var(--cd-primary)) 25%, transparent) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cd-primary, var(--cd-primary)) !important;
    color: #ffffff !important;
}
.select2-dropdown {
    border-color: var(--cd-primary, var(--cd-primary));
    border-radius: 0.375rem;
    z-index: 1050 !important;
}

/* ------------------------ Modals & Toasts ------------------------ */
.modal-header { background-color: var(--cd-primary, var(--cd-primary)); color: #ffffff; }
.modal-header .modal-title { color: #ffffff !important; }
.modal-header .btn-close { filter: brightness(0) invert(1); }
.toast-header { background-color: var(--cd-primary, var(--cd-primary)); color: #ffffff; }
.toast-success { border-left: 4px solid #0D6EFD; }
.toast-error { border-left: 4px solid #DC3545; }
.toast-warning { border-left: 4px solid #FFA500; }

/* ------------------------ Loading States ------------------------ */

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ------------------------ Scrollbar ------------------------ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #F5F5F5; }
::-webkit-scrollbar-thumb { 
    background: var(--cd-primary, var(--cd-primary)); 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: color-mix(in srgb, var(--cd-primary, var(--cd-primary)) 85%, black);
}

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

@media (max-width: 768px) {
    
    
    
    
    .stat-card .card-body { padding: 1.25rem !important; }
    
    
    .card { margin-bottom: 1rem; }
}

@media print {
    .btn, .sidebar, .header-main { display: none; }
    .card { box-shadow: none; border: 1px solid #dee2e6; }
}

/* Ensure print colors on all browsers */
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    /* Optimize receipt for printing */
    body {
        background: white !important;
    }
    
    
}

/* ------------------------ App UI ------------------------ */
/* The shell and base styles for every page except the landing page:
   body.cd-app (templates/header_app.php) and body.cd-app.cd-auth
   (templates/header_auth.php). No template stylesheet is loaded. */
:root {
    --cd-font-heading: "Instrument Sans", "DM Sans", system-ui, sans-serif;
    --cd-font-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --cd-muted: #5B6472;
    --cd-radius: 0.75rem;
    --cd-radius-sm: 0.5rem;
    --cd-shadow: 0 1px 3px rgba(26, 32, 44, 0.1), 0 1px 2px rgba(26, 32, 44, 0.06);
}

body.cd-app {
    background: var(--cd-light);
    color: var(--cd-dark);
    display: flex;
    flex-direction: column;
    font-family: var(--cd-font-text);
    font-size: 0.9375rem;
    line-height: 1.6;
    min-height: 100vh;
}

.cd-app h1, .cd-app h2, .cd-app h3, .cd-app h4, .cd-app h5, .cd-app h6,
.cd-app .h1, .cd-app .h2, .cd-app .h3, .cd-app .h4, .cd-app .h5, .cd-app .h6 {
    color: var(--cd-dark);
    font-family: var(--cd-font-heading);
    letter-spacing: -0.015em;
}

.cd-app a {
    color: var(--cd-primary);
    text-decoration: none;
}

.cd-app a:hover {
    color: var(--cd-primary-active);
}

.cd-app .text-muted {
    color: var(--cd-muted) !important;
}

.cd-main {
    flex: 1 0 auto;
}

/* Navigation */
.cd-nav {
    background: var(--cd-background);
    border-bottom: 1px solid var(--cd-grid);
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* The button at the right of a top bar (templates/_nav_button.php): "Log in",
   or "My dashboard" on the landing page. One rule for the app's bar and the
   landing page's, so it does not depend on either page's button styles. */
.cd-nav-button,
.cd-app a.cd-nav-button {
    align-items: center;
    background: var(--cd-background);
    border: 1px solid var(--cd-grid);
    border-radius: var(--cd-radius-sm);
    color: var(--cd-dark);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.375rem;
    line-height: 1.5;
    padding: 0.4375rem 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.cd-nav-button:hover,
.cd-nav-button:focus-visible,
.cd-app a.cd-nav-button:hover,
.cd-app a.cd-nav-button:focus-visible {
    border-color: var(--cd-dark);
    color: var(--cd-dark);
    text-decoration: none;
}

.cd-nav-button:focus-visible {
    outline: 2px solid var(--cd-primary);
    outline-offset: 2px;
}

/* One height for the top bar on every page: 60px plus the 1px rule under it,
   whether it holds the links and account button or only "Log in". The landing
   page's bar (.cd-l-nav) is set to the same height. */
.cd-nav .navbar {
    min-height: 3.75rem;
    padding: 0.625rem 0;
}

.cd-nav-brand {
    margin-right: 2.5rem;
}

/* Lockup: the product name beside the CapabilityDelta mark, on the app and
   landing bars. Hidden below 1200px, where the links need the room; the name
   is still in the tab title and the footer there. */
.cd-nav-brand,
.cd-l-logo {
    display: flex;
    align-items: center;
}

.cd-brand-product {
    display: none;
    max-width: 11rem;   /* two lines: "Professional Development / Dashboard" */
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--cd-grid);
    color: var(--cd-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .cd-brand-product {
        display: block;
    }
}

.cd-nav-brand img {
    display: block;
    height: 30px;
    width: auto;
}

.cd-nav .navbar-nav {
    gap: 0.25rem;
}

.cd-app .cd-nav-link {
    border-radius: var(--cd-radius-sm);
    color: var(--cd-muted);
    display: block;
    font-weight: 500;
    padding: 0.4375rem 0.75rem;
}

.cd-app .cd-nav-link:hover,
.cd-app .cd-nav-link:focus-visible {
    background: var(--cd-light);
    color: var(--cd-dark);
}

.cd-app .cd-nav-link.active {
    background: var(--cd-primary-light);
    color: var(--cd-primary);
}

.cd-nav-account {
    align-items: center;
    background: none;
    border: 1px solid var(--cd-grid);
    border-radius: 999px;
    color: var(--cd-dark);
    display: inline-flex;
    font-weight: 500;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
}

/* Initials in a circle: the account button and the head of its menu */
.cd-avatar {
    align-items: center;
    background: var(--cd-primary-light);
    border-radius: 50%;
    color: var(--cd-primary);
    display: inline-flex;
    flex: none;
    font-size: 0.75rem;
    font-weight: 600;
    height: 1.875rem;
    justify-content: center;
    letter-spacing: 0.02em;
    width: 1.875rem;
}

.cd-avatar-lg {
    font-size: 0.9375rem;
    height: 2.5rem;
    width: 2.5rem;
}

.cd-avatar-xl {
    font-family: var(--cd-font-heading);
    font-size: 2rem;
    height: 6rem;
    width: 6rem;
}

/* A photo fills the circle whatever its shape */
img.cd-avatar {
    object-fit: cover;
}

/* Profile page side card: photo, name and account facts, centred */
.cd-profile-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.cd-profile-name {
    font-family: var(--cd-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1rem;
}

.cd-profile-photo {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.25rem;
}

/* The file input is hidden; its label is the button, so it needs the focus ring */
.cd-profile-photo input:focus-visible + label {
    border-color: var(--cd-primary) !important;
    box-shadow: 0 0 0 3px rgba(43, 108, 175, 0.15);
}

.cd-profile-facts {
    border-top: 1px solid var(--cd-grid);
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    text-align: left;
    width: 100%;
}

/* The account menu: who is signed in, then grouped links, then Log out in red */
.cd-app .cd-account-menu {
    min-width: 17rem;
    padding: 0.5rem;
}

.cd-account-head {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem;
}

.cd-account-who {
    min-width: 0;
}

.cd-app .cd-account-menu .dropdown-divider {
    border-color: var(--cd-grid);
    margin: 0.375rem 0;
}

.cd-app .cd-account-menu .dropdown-item {
    align-items: center;
    border-radius: 0.375rem;
    display: flex;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
}

.cd-app .cd-account-menu .dropdown-item .bi {
    color: var(--cd-muted);
    font-size: 1rem;
}

.cd-app .cd-account-menu .dropdown-item.active {
    background: var(--cd-primary-light) !important;
    color: var(--cd-primary) !important;
}

.cd-app .cd-account-menu .dropdown-item.active .bi {
    color: var(--cd-primary);
}

/* Log out reads as leaving: red text, and a pale red background on hover */
.cd-app .cd-account-menu .cd-dropdown-danger,
.cd-app .cd-account-menu .cd-dropdown-danger .bi {
    color: #B42318;
}

.cd-app .cd-account-menu .cd-dropdown-danger:hover,
.cd-app .cd-account-menu .cd-dropdown-danger:focus {
    background: #FDECEC;
    color: #B42318;
}

@media (max-width: 991.98px) {
    /* Inside the collapsed menu the account menu takes the full width */
    .cd-app .cd-account-menu { min-width: 100%; }
}

.cd-nav-account:hover,
.cd-nav-account:focus-visible {
    border-color: var(--cd-dark);
}

.cd-nav .navbar-toggler {
    border: 1px solid var(--cd-grid);
    color: var(--cd-dark);
    font-size: 1.25rem;
    padding: 0.125rem 0.5rem;
}

.cd-app .dropdown-menu {
    border: 1px solid var(--cd-grid);
    border-radius: var(--cd-radius-sm);
    box-shadow: 0 12px 24px -12px rgba(26, 32, 44, 0.25);
    font-size: 0.875rem;
}

.cd-app .dropdown-item {
    color: var(--cd-dark);
}

.cd-app .dropdown-item:hover,
.cd-app .dropdown-item:focus {
    background: var(--cd-light);
    color: var(--cd-dark);
}

/* Footer */
.cd-footer {
    border-top: 1px solid var(--cd-grid);
    color: var(--cd-muted);
    font-size: 0.8125rem;
    padding: 1.25rem 0;
}

.cd-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

/* Buttons that read as links: they open the Terms and Privacy modals */
.cd-footer-links button {
    background: none;
    border: 0;
    color: var(--cd-muted);
    font: inherit;
    padding: 0;
}

.cd-footer-links button:hover,
.cd-footer-links button:focus-visible {
    color: var(--cd-primary);
    text-decoration: underline;
}

/* Terms and Privacy text inside the modals */
.cd-legal {
    font-size: 0.9375rem;
    line-height: 1.65;
}

.cd-legal h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
}

.cd-legal ul {
    padding-left: 1.25rem;
}

.cd-legal li {
    margin-bottom: 0.375rem;
}

.cd-legal-updated {
    color: var(--cd-muted);
    font-size: 0.8125rem;
}

/* Page sections */
.cd-section {
    padding: 2.5rem 0 4rem;
}

.cd-section-title {
    color: var(--cd-dark);
    font-family: var(--cd-font-heading);
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Cards: a soft shadow instead of a border */
.cd-app .card,
.cd-card {
    background: var(--cd-background);
    border: 0;
    border-radius: var(--cd-radius);
    box-shadow: var(--cd-shadow);
}

.cd-card {
    padding: 1.5rem;
}

.cd-app .card-header {
    background: var(--cd-background);
    border-bottom: 1px solid var(--cd-grid);
    border-radius: var(--cd-radius) var(--cd-radius) 0 0;
}

.cd-card-title {
    color: var(--cd-dark);
    font-family: var(--cd-font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Buttons: blue is the action colour inside the app. One text size; -lg is only taller. */
.cd-app .btn {
    border-radius: var(--cd-radius-sm);
    box-shadow: none;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 0.875rem;
    transform: none;
}

.cd-app .btn:hover,
.cd-app .btn:focus,
.cd-app .btn:active {
    box-shadow: none;
    transform: none;
}

.cd-app .btn-sm {
    font-size: 0.8125rem;
    padding: 0.3125rem 0.625rem;
}

.cd-app .btn-lg {
    padding: 0.75rem 1rem;
}

.cd-app .btn-primary,
.cd-app .btn-success {
    background-color: var(--cd-primary) !important;
    border-color: var(--cd-primary) !important;
    color: #FFFFFF !important;
}

.cd-app .btn-primary:hover,
.cd-app .btn-primary:focus,
.cd-app .btn-success:hover,
.cd-app .btn-success:focus {
    background-color: var(--cd-primary-hover) !important;
    border-color: var(--cd-primary-hover) !important;
}

.cd-app .btn-outline-primary,
.cd-app .btn-outline-success {
    background-color: var(--cd-background) !important;
    border-color: var(--cd-grid) !important;
    color: var(--cd-dark) !important;
}

.cd-app .btn-outline-primary:hover,
.cd-app .btn-outline-primary:focus,
.cd-app .btn-outline-success:hover,
.cd-app .btn-outline-success:focus {
    border-color: var(--cd-dark) !important;
    color: var(--cd-dark) !important;
}

.cd-app .btn-secondary {
    background-color: var(--cd-dark) !important;
    border-color: var(--cd-dark) !important;
    color: #FFFFFF !important;
}

.cd-app .btn-outline-secondary {
    background-color: var(--cd-background) !important;
    border-color: var(--cd-grid) !important;
    color: var(--cd-dark) !important;
}

.cd-app .btn-outline-secondary:hover,
.cd-app .btn-outline-secondary:focus {
    border-color: var(--cd-dark) !important;
}

.cd-app .btn-outline-danger {
    background-color: var(--cd-background);
    border-color: var(--cd-grid);
    color: var(--cd-danger);
}

.cd-app .btn-outline-danger:hover,
.cd-app .btn-outline-danger:focus {
    background-color: var(--cd-danger);
    border-color: var(--cd-danger);
    color: #FFFFFF;
}

.cd-app .btn:focus-visible {
    outline: 2px solid var(--cd-primary);
    outline-offset: 2px;
}

.cd-app .bg-primary { background-color: var(--cd-primary) !important; }

/* Status badges: tinted pills, never solid blocks of colour. One shape and one
   size everywhere (status, role type, audit action, activity): no per-page
   padding or size classes on a badge. Gap scores (.cd-gap-badge) and group
   codes are values, not badges, and keep their own shape. */
.cd-app .badge[class*="bg-"] {
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.3em 0.75em;
    vertical-align: middle;
}

.cd-app .badge.bg-primary,
.cd-app .badge[class*="bg-info"] { background-color: var(--cd-primary-light) !important; color: var(--cd-primary) !important; }
.cd-app .badge.bg-success { background-color: #E7F6EC !important; color: #17663A !important; }
.cd-app .badge.bg-warning { background-color: #FFF3E2 !important; color: #8A4B08 !important; }
.cd-app .badge.bg-danger { background-color: #FDECEC !important; color: #B42318 !important; }
.cd-app .badge.bg-secondary,
.cd-app .badge.bg-dark,
.cd-app .badge.bg-light { background-color: #EEF0F3 !important; color: #414A58 !important; }
.cd-app .text-primary { color: var(--cd-primary) !important; }

/* Forms */
.cd-app .form-label {
    font-size: 0.875rem;
    font-weight: 500;
}

.cd-app .form-control,
.cd-app .form-select {
    border-color: #D5D9E0;
    border-radius: var(--cd-radius-sm);
    font-size: 0.875rem;
}

.cd-app .form-control:not(.form-control-sm):not(textarea) {
    padding: 0.5rem 0.75rem;
}

.cd-app .input-group > .form-control:not(:last-child) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.cd-app .input-group > .form-control:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.cd-app .form-check-label,
.cd-app .form-text {
    font-size: 0.875rem;
}

.cd-app .form-control:focus,
.cd-app .form-select:focus {
    border-color: var(--cd-primary);
    box-shadow: 0 0 0 3px rgba(43, 108, 175, 0.15);
}

.cd-app .form-check-input:checked {
    background-color: var(--cd-primary);
    border-color: var(--cd-primary);
}

.cd-app .form-text {
    color: var(--cd-muted);
}

/* Help between a label (or a section title) and its field: close to the label, clear of the field */
.cd-app .form-label + .form-text,
.cd-app .visually-hidden + .form-text,
.cd-app .cd-form-section-title + .form-text {
    margin-top: -0.25rem;
    margin-bottom: 0.5rem;
}

/* Tables */
.cd-app .table {
    --bs-table-bg: transparent;
    font-size: 0.875rem;
    margin-bottom: 0;
}

.cd-app .table thead th {
    background: var(--cd-background);
    border-bottom: 1px solid var(--cd-grid);
    color: var(--cd-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.75rem 1rem;
    text-transform: uppercase;
}

.cd-app .table tbody td {
    border-color: var(--cd-grid);
    padding: 0.875rem 1rem;
    vertical-align: middle;
}

.cd-app .table tbody tr:last-child td {
    border-bottom: 0;
}

/* Pagination: small quiet buttons, the current page tinted */
.cd-app .pagination {
    gap: 0.25rem;
}

.cd-app .page-link {
    background: var(--cd-background);
    border-radius: var(--cd-radius-sm) !important;
    font-size: 0.8125rem;
    padding: 0.3125rem 0.625rem;
}

.cd-app .page-item.disabled .page-link {
    background: var(--cd-background);
    color: var(--cd-muted) !important;
    opacity: 0.6;
}

.cd-app .page-item.active .page-link {
    background-color: var(--cd-primary-light) !important;
    border-color: var(--cd-primary-light) !important;
    color: var(--cd-primary) !important;
}

.cd-app .page-link {
    border-color: var(--cd-grid);
    color: var(--cd-dark);
}

/* Label and value tables (user detail, audit log detail): stacked on a phone */
@media (max-width: 575.98px) {
    .cd-app .table-borderless th,
    .cd-app .table-borderless td {
        display: block;
        padding: 0.125rem 0;
        width: 100% !important;
    }

    .cd-app .table-borderless tr {
        display: block;
        padding: 0.5rem 0;
    }

    .cd-app .table-borderless td {
        overflow-wrap: anywhere;
    }
}

/* Tighter table cells on a phone */
@media (max-width: 575.98px) {
    .cd-app .table thead th,
    .cd-app .table tbody td {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }
}

/* Permission matrix on a phone: the category moves under the permission name
   and the six action columns narrow, so all of them fit without scrolling */
@media (max-width: 767.98px) {
    .cd-app .cd-matrix th:first-child,
    .cd-app .cd-matrix td:first-child {
        display: none;
    }

    .cd-app .cd-matrix thead th,
    .cd-app .cd-matrix tbody td {
        padding-left: 0.125rem;
        padding-right: 0.125rem;
        width: auto !important;
    }

    .cd-app .cd-matrix thead th {
        font-size: 0.625rem;
        letter-spacing: 0;
    }

    .cd-app .cd-matrix th:nth-child(2),
    .cd-app .cd-matrix td:nth-child(2) {
        padding-left: 0.75rem;
    }
}

/* On the narrowest phones the action headings are turned on their side, so each
   column is only as wide as its checkbox */
@media (max-width: 359.98px) {
    .cd-app .cd-matrix thead th:nth-child(n+3) {
        padding: 0.5rem 0.25rem !important;
        transform: rotate(180deg);
        vertical-align: middle;
        white-space: nowrap;
        writing-mode: vertical-rl;
    }

    .cd-app .cd-matrix tbody td:nth-child(n+3) {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* Table footers (count and pagination) wrap instead of widening the table area */
.cd-app .dataTables_wrapper .pagination {
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    /* Inherited admin pages: the same 12px page gutter as the rest of the app, and slimmer cards */
    .cd-main > .container-fluid,
    .cd-main > div > .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .cd-app .section-card .card-body,
    .cd-app .section-card .card-header,
    .cd-app .section-card .card-body-table {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .cd-app .section-card .card-body:has(.cd-matrix) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .cd-app .dataTables_wrapper .dataTables_paginate {
        margin-top: 0.5rem;
    }

    .cd-app .dataTables_wrapper .pagination {
        justify-content: flex-start;
    }
}

/* Long unbroken values (email addresses, URLs) wrap instead of widening the page */
.cd-app #auditLogsTable td,
.cd-app .timeline-container .flex-grow-1 {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Alerts, lists, modals */
.cd-app .alert {
    border: 0;
    border-radius: var(--cd-radius-sm);
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    text-align: left;
}

.cd-app .alert-success { background-color: #E7F6EC; color: #17663A; }
.cd-app .alert-danger { background-color: #FDECEC; color: #B42318; }
.cd-app .alert-warning { background-color: #FFF3E2; color: #8A4B08; }
.cd-app .alert-info { background-color: var(--cd-primary-light); color: var(--cd-primary-active); }

/* Room for the close button, and a close button sized to the text beside it */
.cd-app .alert-dismissible {
    padding-right: 2.75rem;
}

.cd-app .alert-dismissible .btn-close {
    font-size: 0.625rem;
    padding: 0.5rem;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.cd-app .list-group-item {
    border-color: var(--cd-grid);
}

.cd-app .modal-content {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 20px 40px -16px rgba(26, 32, 44, 0.35);
}

.cd-app .modal-header,
.cd-app .modal-footer {
    border-color: var(--cd-grid);
    padding: 1rem 1.5rem;
}

.cd-app .modal-body {
    padding: 1.5rem;
}

.cd-app .modal-header {
    background: var(--cd-background);
    border-radius: 1rem 1rem 0 0;
    color: var(--cd-dark);
}

.cd-app .modal-header .modal-title {
    color: var(--cd-dark) !important;
    font-size: 1rem;
    font-weight: 600;
}

.cd-app .modal-header .btn-close {
    filter: none;
    font-size: 0.75rem;
}

/* Summary lists, link cards and feeds (system dashboard) */
.cd-meter {
    background: var(--cd-light);
    height: 0.375rem;
    margin: 0.75rem 0 0.5rem;
}

.cd-meter .progress-bar {
    background: var(--cd-primary);
}

.cd-stat-list {
    font-size: 0.875rem;
    margin: 0;
}

.cd-stat-list > div {
    align-items: baseline;
    border-top: 1px solid var(--cd-grid);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.625rem 0;
}

.cd-stat-list > div:first-child {
    border-top: 0;
    padding-top: 0;
}

.cd-stat-list > div:last-child {
    padding-bottom: 0;
}

.cd-stat-list dt {
    color: var(--cd-muted);
    font-weight: 400;
}

.cd-stat-list dt small {
    display: block;
    font-size: 0.75rem;
}

.cd-stat-list dd {
    font-weight: 600;
    margin: 0;
}

.cd-app .cd-link-card {
    color: var(--cd-dark);
    display: block;
    transition: box-shadow 0.15s ease;
}

.cd-app .cd-link-card:hover,
.cd-app .cd-link-card:focus-visible {
    box-shadow: 0 0 0 1px var(--cd-primary), var(--cd-shadow);
    color: var(--cd-dark);
}

.cd-link-card-title {
    display: block;
    font-family: var(--cd-font-heading);
    font-weight: 600;
}

.cd-link-card-text {
    color: var(--cd-muted);
    display: block;
    font-size: 0.875rem;
}

.cd-feed {
    font-size: 0.875rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cd-feed > li {
    border-top: 1px solid var(--cd-grid);
    padding: 0.75rem 0;
}

.cd-feed > li:first-child {
    border-top: 0;
    padding-top: 0;
}

.cd-feed > li:last-child {
    padding-bottom: 0;
}

.cd-feed .btn-close {
    font-size: 0.625rem;
}

/* System dashboard: the meter follows the disk alert levels; stat cards end
   with a link to the page that manages them; alerts sit in one strip on top */
.cd-meter--warning .progress-bar {
    background-color: var(--cd-warning);
}

.cd-meter--danger .progress-bar {
    background-color: var(--cd-danger);
}

.cd-card--stack {
    display: flex;
    flex-direction: column;
}

.cd-card--stack .cd-stat-list {
    margin-bottom: 1rem;
}

.cd-app .cd-card-foot {
    border-top: 1px solid var(--cd-grid);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: auto;
    padding-top: 0.875rem;
}


.cd-dot {
    border-radius: 50%;
    flex: none;
    height: 0.5rem;
    margin-top: 0.4375rem;
    width: 0.5rem;
}

/* Inherited admin pages (users, roles, audit logs, settings, system dashboard):
   same width as the navigation, and the quieter card and button treatment */
.cd-main > .container-fluid,
.cd-main > div > .container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3rem;
    padding-top: 2.5rem;
}

/* The inherited .page-container adds 2rem at the sides, which set these pages'
   titles and cards further in than the dashboard's. Same gutter as .container. */
.cd-main > .container-fluid.page-container {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

@media (min-width: 576px) { .cd-main > .container-fluid, .cd-main > div > .container-fluid { max-width: 540px; } }
@media (min-width: 768px) { .cd-main > .container-fluid, .cd-main > div > .container-fluid { max-width: 720px; } }
@media (min-width: 992px) { .cd-main > .container-fluid, .cd-main > div > .container-fluid { max-width: 960px; } }
@media (min-width: 1200px) { .cd-main > .container-fluid, .cd-main > div > .container-fluid { max-width: 1140px; } }
@media (min-width: 1400px) { .cd-main > .container-fluid, .cd-main > div > .container-fluid { max-width: 1320px; } }

.cd-app [class*="kpi-card"],
.cd-app .section-card,
.cd-app .stat-card {
    border: 0 !important;
    border-radius: var(--cd-radius) !important;
    box-shadow: var(--cd-shadow) !important;
    transform: none !important;
}

.cd-app .kpi-label {
    color: var(--cd-dark);
    font-family: var(--cd-font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.cd-app .kpi-value-large {
    font-family: var(--cd-font-heading);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.1;
    margin-top: 1rem;
}

.cd-app .dataTables_wrapper {
    font-size: 0.875rem;
}

.cd-app .dataTables_wrapper .dataTables_info {
    color: var(--cd-muted);
}

.cd-app .btn-info {
    background-color: var(--cd-background) !important;
    border-color: var(--cd-grid) !important;
    color: var(--cd-dark) !important;
}

.cd-app .btn-info:hover,
.cd-app .btn-info:focus {
    background-color: var(--cd-background) !important;
    border-color: var(--cd-dark) !important;
    color: var(--cd-dark) !important;
}

/* One size for the heading of a card, whichever tag the view uses */
.cd-app .card-header h5,
.cd-app .card-header h6,
.cd-app .card-title-md {
    font-size: 1rem;
    font-weight: 600;
}

/* One solid button per view. Secondary actions and row actions stay quiet. */
.cd-app .btn-warning,
.cd-app .btn-light,
.cd-app .btn-outline-info,
.cd-app .table .btn-primary,
.cd-app .table .btn-danger {
    background-color: var(--cd-background) !important;
    border-color: var(--cd-grid) !important;
    color: var(--cd-dark) !important;
}

.cd-app .btn-warning:hover,
.cd-app .btn-light:hover,
.cd-app .btn-outline-info:hover,
.cd-app .table .btn-primary:hover,
.cd-app .table .btn-danger:hover {
    border-color: var(--cd-dark) !important;
}

.cd-app .table .btn-danger {
    color: var(--cd-danger) !important;
}

/* Row actions in a table are icon buttons, and the icon's colour says what it
   does: view is primary, edit is tertiary, delete is danger. The column is
   only as wide as its buttons. */
.cd-app .table .btn .bi-eye { color: var(--cd-primary); }
.cd-app .table .btn .bi-pencil { color: var(--cd-accent); }   /* tertiary */
.cd-app .table .btn .bi-trash { color: var(--cd-danger); }
.cd-app .table .btn .bi-link-45deg,
.cd-app .table .btn .bi-check-lg { color: var(--cd-muted); }   /* copy a link; copied */

.cd-actions-col {
    white-space: nowrap;
    width: 1%;
}

.cd-actions-col .btn + .btn {
    margin-left: 0.25rem;
}

/* Select2 inside the app: the same box, text size, focus ring and menu as the
   app's own fields and dropdown menus. A dropdown with more than two options is
   a Select2 (assets/js/pages/select2-global.js). */
.cd-app .select2-container--bootstrap-5 .select2-selection {
    border-color: #D5D9E0;
    border-radius: var(--cd-radius-sm);
    font-size: 0.875rem;
    min-height: 2.4375rem !important;
}

.cd-app .select2-container--bootstrap-5 .select2-selection--single {
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
}

.cd-app .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--cd-dark);
    line-height: 1.5 !important;
    padding: 0 !important;
}

.cd-app .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: var(--cd-muted);
}

/* The small size, beside a small input in a table card's filter row */
.cd-app .form-select-sm.select2-hidden-accessible + .select2-container--bootstrap-5 .select2-selection {
    font-size: 0.875rem;
    min-height: 1.9375rem !important;
    padding: 0.25rem 2.25rem 0.25rem 0.5rem;
}

.cd-app .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.cd-app .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--cd-primary) !important;
    box-shadow: 0 0 0 3px rgba(43, 108, 175, 0.15) !important;
}

.cd-app .select2-container--bootstrap-5 .select2-dropdown {
    border-color: #D5D9E0;
    border-radius: var(--cd-radius-sm);
    box-shadow: 0 12px 24px -12px rgba(26, 32, 44, 0.25);
    font-size: 0.875rem;
    overflow: hidden;
}

.cd-app .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

.cd-app .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--cd-light) !important;
    color: var(--cd-dark) !important;
}

.cd-app .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.cd-app .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background-color: var(--cd-primary-light) !important;
    color: var(--cd-primary) !important;
}

.cd-app .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    border-color: #D5D9E0;
    border-radius: var(--cd-radius-sm);
    font-size: 0.875rem;
}

/* A Select2 is as wide as the element around it: this gives one in a card's
   header row (not in a form column) a sensible width */
.cd-select-inline {
    max-width: 100%;
    width: 16rem;
}

/* Filters in a table card's header: a row on wide screens, stacked on phones */
.cd-table-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cd-table-filter-search { width: 16rem; }
.cd-table-filter-select { width: 9.5rem; }

@media (max-width: 575.98px) {
    .cd-table-filter { width: 100%; }
    .cd-table-filter-search { flex: 1 1 100%; width: 100%; }
    .cd-table-filter-select { flex: 1 1 8rem; width: auto; }
}

/* The name-and-email column of a list: wide enough on a desktop that an
   email address is not broken mid-word; free to wrap on smaller screens */
@media (min-width: 992px) {
    .cd-col-person { min-width: 15rem; }
}

/* Label and value pairs in a detail modal: side by side on a wide screen,
   label above value on a phone (dl.row with col-sm-* on dt and dd) */
.cd-detail-list {
    font-size: 0.875rem;
}

.cd-detail-list dt {
    color: var(--cd-muted);
    font-weight: 500;
}

.cd-detail-list dd {
    margin-bottom: 0.625rem;
}

/* Recorded data shown as text (the before and after of an audit log entry) */
.cd-pre {
    background: var(--cd-light);
    border-radius: var(--cd-radius-sm);
    font-size: 0.75rem;
    padding: 0.75rem 1rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* A form split into titled sections (the cohort modal: Details, Joining).
   A rule separates each section from the one above it. */
.cd-form-section + .cd-form-section,
.cd-form-note + .cd-form-section,
.cd-form-section + .cd-form-note {
    border-top: 1px solid var(--cd-grid);
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.cd-app .cd-form-section-title {
    color: var(--cd-muted);
    font-family: var(--cd-font-text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 0 0 0.875rem;
    text-transform: uppercase;
}

.cd-form-note {
    color: var(--cd-muted);
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* A value shown in a form that cannot be edited: the box of a field, tinted */
.cd-readonly-field {
    align-items: center;
    background: var(--cd-light);
    border: 1px solid #D5D9E0;
    border-radius: var(--cd-radius-sm);
    display: flex;
    min-height: 2.375rem;
    padding: 0.25rem 0.75rem;
}

.cd-readonly-field .cd-join-code {
    background: none;
    padding: 0;
}

/* A switch that sits in a field: the same box as an input, with the state in
   words on the left and the track on the right. The words follow the state
   without script, so they are right however the box gets checked. */
.cd-switch-field {
    align-items: center;
    background: var(--cd-background);
    border: 1px solid #D5D9E0;
    border-radius: var(--cd-radius-sm);
    cursor: pointer;
    display: flex;
    font-size: 0.875rem;
    gap: 0.75rem;
    margin: 0;
    min-height: 2.375rem;
    padding: 0.375rem 0.75rem;
}

.cd-switch-field:focus-within {
    border-color: var(--cd-primary);
    box-shadow: 0 0 0 3px rgba(43, 108, 175, 0.15);
}

.cd-switch {
    appearance: none;
    -webkit-appearance: none;
    background-color: #C9CED6;
    background-image: radial-gradient(circle, #FFFFFF 0 0.5rem, transparent 0.5625rem);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 1.375rem 100%;
    border-radius: 999px;
    cursor: pointer;
    flex: none;
    height: 1.375rem;
    margin: 0 0 0 auto;
    order: 2;
    outline: 0;
    transition: background-color 0.15s ease, background-position 0.15s ease;
    width: 2.5rem;
}

.cd-switch:checked {
    background-color: var(--cd-primary);
    background-position: right center;
}

.cd-switch-on,
.cd-switch-off {
    font-weight: 500;
}

.cd-switch-off {
    color: var(--cd-muted);
}

.cd-switch:checked ~ .cd-switch-off,
.cd-switch:not(:checked) ~ .cd-switch-on {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .cd-switch { transition: none; }
}

/* A form that wraps a modal's header, body and footer must not break the
   modal's own layout (needed for a scrolling body) */
.d-contents {
    display: contents;
}

/* The icon in front of a button's label (Bootstrap Icons, aria-hidden).
   Every text button has one; icon-only buttons do not use this class. */
.cd-btn-icon {
    margin-right: 0.375rem;
}

/* Close and Cancel in a modal or a confirmation dialog are always a light
   button, never the primary colour, whatever btn-* class the markup carries */
.cd-app .modal-footer [data-bs-dismiss="modal"],
.cd-app .swal2-cancel.btn {
    background-color: var(--cd-light) !important;
    border-color: var(--cd-grid) !important;
    color: var(--cd-dark) !important;
}

.cd-app .modal-footer [data-bs-dismiss="modal"]:hover,
.cd-app .modal-footer [data-bs-dismiss="modal"]:focus,
.cd-app .swal2-cancel.btn:hover,
.cd-app .swal2-cancel.btn:focus {
    background-color: var(--cd-grid) !important;
    border-color: var(--cd-grid) !important;
}

.cd-app .page-header-title {
    font-size: 1.625rem;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .cd-app .page-container .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 1rem;
    }
}

/* Login, register and password pages */
.cd-auth {
    align-items: center;
}

.cd-auth-logo {
    display: block;
    margin: 0 auto 1.5rem;
    width: fit-content;
}

.cd-auth-logo img {
    display: block;
    height: 34px;
    width: auto;
}

/* Even 1.5rem rhythm between form groups */
.cd-auth .card {
    border-radius: 1rem;
}


.cd-auth form .mb-3,
.cd-auth form .mb-4 {
    margin-bottom: 1.5rem !important;
}



/* margin: auto centres the card but keeps its top reachable when it is taller than the screen */
.cd-auth-wrap {
    margin: auto;
    max-width: 27rem;
    padding: 2.5rem 1rem;
    width: 100%;
}

.cd-auth-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    text-align: center;
}

.cd-app .cd-auth-small {
    color: var(--cd-muted);
    font-size: 0.875rem;
}

.cd-app .cd-auth-small:hover {
    color: var(--cd-dark);
    text-decoration: underline;
}

.cd-app .cd-auth-toggle {
    background: var(--cd-background);
    border-color: #D5D9E0;
    color: var(--cd-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    min-width: 4rem;
}

.cd-auth-alt {
    color: var(--cd-muted);
    font-size: 0.875rem;
    margin: 1.5rem 0 0;
    text-align: center;
}

.cd-auth-alt a {
    font-weight: 600;
}

.cd-auth .card-body {
    padding: 2rem;
}

/* Trap field for scripts on the register form: off screen, not display:none,
   because some scripts skip fields that are not rendered */
.cd-hp {
    height: 0;
    left: -9999px;
    overflow: hidden;
    position: absolute;
}

.cd-auth-footer {
    color: var(--cd-muted);
    font-size: 0.75rem;
    margin: 2rem 0 0;
    text-align: center;
}

@media (max-width: 991.98px) {
    .cd-nav .navbar-collapse {
        border-top: 1px solid var(--cd-grid);
        margin-top: 0.625rem;
        padding: 0.75rem 0 0.25rem;
    }

    .cd-nav .dropdown {
        margin-top: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .cd-auth .card-body { padding: 1.5rem; }
}

/* Register: body.cd-auth--split. A wider card with a two-column form from
   768px, and a brand panel beside it from 992px. Login and the password pages
   do not carry the modifier and keep the narrow card. */
.cd-auth-brand {
    display: none;
}

.cd-auth-notice {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

.cd-auth-hint-met {
    color: var(--cd-success);
}

@media (min-width: 768px) {
    .cd-auth--split .cd-auth-wrap {
        max-width: 44rem;
    }

    /* A short, single-column form (login) stays narrow */
    .cd-auth--split.cd-auth--narrow .cd-auth-wrap {
        max-width: 27rem;
    }
}

@media (min-width: 992px) {
    body.cd-auth--split {
        align-items: stretch;
        background: var(--cd-background);
        flex-direction: row;
    }

    .cd-auth--split .cd-auth-brand {
        background: var(--cd-primary-active);
        color: #FFFFFF;
        display: flex;
        flex: 0 0 38%;
        flex-direction: column;
        max-width: 32rem;
        min-height: 100vh;
        padding: 2.5rem;
    }

    /* The logo artwork is dark, so it sits on a white plate */
    .cd-auth-brand-logo {
        background: #FFFFFF;
        border-radius: var(--cd-radius-sm);
        padding: 0.625rem 0.875rem;
        width: fit-content;
    }

    .cd-auth-brand-logo img {
        display: block;
        height: 30px;
        width: auto;
    }

    .cd-auth-brand-body {
        margin: auto 0;
        padding: 2rem 0;
    }

    .cd-auth-brand-title {
        font-family: var(--cd-font-heading);
        font-size: 1.75rem;
        font-weight: 600;
        letter-spacing: -0.015em;
        line-height: 1.25;
        margin: 0 0 1.5rem;
    }

    .cd-auth-brand-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cd-auth-brand-list li {
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        padding: 0.75rem 0;
    }

    .cd-auth-brand-note {
        font-size: 0.875rem;
        margin: 0 0 1rem;
    }

    .cd-auth-brand-copy {
        font-size: 0.75rem;
        margin: 0;
    }

    /* The panel carries the logo and the copyright line */
    .cd-auth--split .cd-auth-logo,
    .cd-auth--split .cd-auth-footer {
        display: none;
    }

    /* Tighter rhythm so the whole form fits a 1366x768 screen */
    .cd-auth--split .cd-auth-wrap {
        padding: 1rem 2rem;
    }

    .cd-auth--split .card {
        border: 0;
        box-shadow: none;
    }

    .cd-auth--split .card-body {
        padding: 0;
    }

    .cd-auth--split .cd-auth-title {
        margin-bottom: 1rem;
        text-align: left;
    }

    .cd-auth--split form .mb-3,
    .cd-auth--split form .mb-4 {
        margin-bottom: 1rem !important;
    }

    .cd-auth--split .cd-auth-alt {
        margin-top: 1rem;
    }
}

/* ------------------------ Landing Page ------------------------ */
/* Scoped to body.cd-landing (templates/header_landing.php), which loads no
   template stylesheet. Orange (--cd-accent) is used for the call to action only. */
.cd-landing {
    --cd-l-heading: "Instrument Sans", "DM Sans", system-ui, sans-serif;
    --cd-l-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --cd-l-muted: #5B6472;
    background: var(--cd-background);
    color: var(--cd-dark);
    font-family: var(--cd-l-text);
    font-size: 1rem;
    line-height: 1.6;
}

.cd-landing a {
    text-decoration: none;
}

/* Type */
.cd-l-label {
    color: var(--cd-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
}

.cd-l-h1,
.cd-l-h2,
.cd-l-h3 {
    color: var(--cd-dark);
    font-family: var(--cd-l-heading);
    letter-spacing: -0.02em;
}

.cd-l-h1 {
    font-size: clamp(2.25rem, 4.6vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
    margin: 0;
}

.cd-l-h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 1rem;
    max-width: 34rem;
}

.cd-l-h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 0.375rem;
}

.cd-l-lead {
    color: var(--cd-l-muted);
    font-size: 1.1875rem;
    margin: 1.25rem 0 0;
    max-width: 30rem;
}

.cd-l-body {
    color: var(--cd-l-muted);
    max-width: 36rem;
}

.cd-l-fine {
    color: var(--cd-l-muted);
    font-size: 0.875rem;
    margin: 1rem 0 0;
}

/* Navigation */
.cd-l-nav {
    align-items: center;
    background: var(--cd-background);
    border-bottom: 1px solid var(--cd-grid);
    box-sizing: border-box;
    display: flex;
    min-height: 3.8125rem;   /* the same 61px as .cd-nav */
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.cd-l-logo img {
    display: block;
    height: 30px;   /* as .cd-nav-brand img */
    width: auto;
}

.cd-l-navlink {
    color: var(--cd-l-muted);
    font-size: 0.9375rem;
    font-weight: 500;
}

.cd-l-navlink:hover,
.cd-l-navlink:focus-visible {
    color: var(--cd-dark);
}

/* Buttons and links */
.cd-l-btn {
    border-radius: 0.5rem;
    display: inline-block;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cd-l-btn-cta {
    background: var(--cd-accent);
    color: var(--cd-dark);
    font-size: 1.0625rem;
    padding: 1rem 1.5rem;
}

.cd-l-btn-cta:hover,
.cd-l-btn-cta:focus-visible {
    background: #F0872A;
    color: var(--cd-dark);
}

.cd-l-btn-quiet {
    border: 1px solid var(--cd-grid);
    color: var(--cd-dark);
    font-size: 0.9375rem;
    padding: 0.625rem 1rem;
}

.cd-l-btn-quiet:hover,
.cd-l-btn-quiet:focus-visible {
    border-color: var(--cd-dark);
    color: var(--cd-dark);
}

.cd-l-textlink {
    color: var(--cd-primary);
    font-weight: 600;
}

.cd-l-textlink:hover,
.cd-l-textlink:focus-visible {
    color: var(--cd-primary-active);
    text-decoration: underline;
}

.cd-l-btn:focus-visible,
.cd-l-textlink:focus-visible,
.cd-l-navlink:focus-visible {
    outline: 2px solid var(--cd-primary);
    outline-offset: 3px;
}

/* Sections */
.cd-l-hero {
    padding: 5rem 0 5.5rem;
}

.cd-l-section {
    padding: 5.5rem 0;
}

.cd-l-section-tint {
    background: var(--cd-light);
}

/* Product preview: the real results components */
.cd-l-preview,
.cd-l-frame {
    background: var(--cd-background);
    border: 1px solid var(--cd-grid);
    border-radius: 0.75rem;
    box-shadow: 0 24px 48px -24px rgba(26, 32, 44, 0.25);
    overflow: hidden;
}

.cd-l-frame {
    box-shadow: none;
}

.cd-l-preview-bar {
    align-items: center;
    border-bottom: 1px solid var(--cd-grid);
    display: flex;
    font-size: 0.875rem;
    font-weight: 600;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
}

.cd-l-preview-tag {
    color: var(--cd-l-muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cd-l-preview-top {
    border-bottom: 1px solid var(--cd-grid);
}

.cd-l-preview-side {
    padding: 1rem 1.25rem;
}

.cd-l-preview-side + .cd-l-preview-side {
    border-left: 1px solid var(--cd-grid);
}

.cd-l-preview-caption {
    color: var(--cd-l-muted);
    font-size: 0.8125rem;
}

.cd-l-score {
    font-family: var(--cd-l-heading);
    font-size: 2rem;
    padding: 0.25rem 0.875rem;
}

.cd-l-toplist .list-group-item {
    border-color: var(--cd-grid);
    font-size: 0.875rem;
    padding: 0.375rem 0;
}

.cd-l-toplist .cd-gap-badge {
    font-size: 0.8125rem;
    min-width: 1.75rem;
    padding: 0.1rem 0.4rem;
}

.cd-l-frame #pddBar {
    padding: 0.5rem 0.75rem 0;
}

/* How it works: a numbered sequence, not cards */
.cd-l-steps {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
}

.cd-l-steps li {
    border-top: 1px solid var(--cd-dark);
    padding-top: 1.25rem;
}

.cd-l-step-number {
    color: var(--cd-primary);
    display: block;
    font-family: var(--cd-l-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.cd-l-steps p {
    color: var(--cd-l-muted);
    font-size: 0.9375rem;
    margin: 0;
}

/* Framework: one table-like block */
.cd-l-matrix {
    background: var(--cd-background);
    border: 1px solid var(--cd-grid);
    border-radius: 0.75rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
}

.cd-l-matrix-col + .cd-l-matrix-col {
    border-left: 1px solid var(--cd-grid);
}

.cd-l-matrix-head {
    border-bottom: 1px solid var(--cd-grid);
    color: var(--cd-primary);
    font-family: var(--cd-l-heading);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    padding: 1rem 1.5rem;
}

.cd-l-matrix-cell {
    padding: 1rem 1.5rem;
}

.cd-l-matrix-cell + .cd-l-matrix-cell {
    border-top: 1px solid var(--cd-grid);
}

.cd-l-matrix-cell strong {
    display: block;
    font-weight: 600;
}

.cd-l-matrix-cell span {
    color: var(--cd-l-muted);
    font-size: 0.9375rem;
}

/* Results points */
.cd-l-points {
    margin: 1.5rem 0 0;
}

.cd-l-points dt {
    font-weight: 600;
    margin-top: 1.25rem;
}

.cd-l-points dd {
    color: var(--cd-l-muted);
    font-size: 0.9375rem;
    margin: 0.125rem 0 0;
}

/* Individuals / teams */
.cd-l-split-col {
    padding: 0 3rem 0 0;
}

.cd-l-split-col + .cd-l-split-col {
    border-left: 1px solid var(--cd-grid);
    padding: 0 0 0 3rem;
}

.cd-l-note {
    border-top: 1px solid var(--cd-grid);
    color: var(--cd-l-muted);
    font-size: 0.9375rem;
    margin: 4rem 0 0;
    padding-top: 1.5rem;
}

/* Closing band and footer */
.cd-l-closing {
    background: var(--cd-dark);
    padding: 4rem 0;
}

.cd-l-closing .cd-l-h2 {
    color: #FFFFFF;
}

.cd-l-footer {
    background: var(--cd-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    padding: 1.5rem 0;
}

/* Terms and Privacy links on the dark footer */
.cd-l-footer .cd-footer-links button {
    color: rgba(255, 255, 255, 0.7);
}

.cd-l-footer .cd-footer-links button:hover,
.cd-l-footer .cd-footer-links button:focus-visible {
    color: #FFFFFF;
}

@media (max-width: 991.98px) {
    .cd-l-hero { padding: 3.5rem 0 4rem; }
    .cd-l-section { padding: 4rem 0; }
    .cd-l-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    .cd-l-steps,
    .cd-l-matrix { grid-template-columns: 1fr; }
    .cd-l-matrix-col + .cd-l-matrix-col { border-left: 0; border-top: 1px solid var(--cd-grid); }
    .cd-l-split-col,
    .cd-l-split-col + .cd-l-split-col { border-left: 0; padding: 0; }
    .cd-l-split-col + .cd-l-split-col { border-top: 1px solid var(--cd-grid); margin-top: 2.5rem; padding-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cd-l-btn { transition: none; }
}


/* ------------------------ PDD Assessment & Results ------------------------ */
:root {
    --cd-gap-small: #198754;
    --cd-gap-medium: #E0A800;
    --cd-gap-large: #DC3545;
    --cd-gap-above: #6B7280;
}

.cd-category {
    background: var(--cd-background);
    border: 1px solid var(--cd-grid);
    border-radius: var(--cd-radius);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.cd-category-header {
    border-bottom: 1px solid var(--cd-grid);
    padding: 0.875rem 1.25rem;
}

.cd-category-title {
    color: var(--cd-primary);
    font-family: var(--cd-font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
}

.cd-category-gap {
    color: var(--cd-muted);
    font-size: 0.8125rem;
}

.cd-row {
    margin: 0;
    padding: 0.75rem 0.5rem 1rem;
}

.cd-row + .cd-row {
    border-top: 1px solid var(--cd-grid);
}

.cd-row-label {
    color: var(--cd-dark);
    font-weight: 600;
}

.cd-row-description,
.cd-row-gap-label,
.cd-overall-scale {
    color: var(--cd-muted);
    font-size: 0.875rem;
}

.cd-slider-label {
    display: flex;
    font-size: 0.875rem;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.cd-slider-value {
    color: var(--cd-primary);
    font-weight: 700;
}

.cd-category .form-range::-webkit-slider-thumb {
    background: var(--cd-primary);
}

.cd-category .form-range::-moz-range-thumb {
    background: var(--cd-primary);
}

.cd-gap-badge {
    background: var(--cd-gap-small);
    border-radius: 0.375rem;
    color: #FFFFFF;
    display: inline-block;
    font-weight: 700;
    min-width: 2.25rem;
    padding: 0.2rem 0.6rem;
    text-align: center;
    white-space: nowrap;
}

.cd-gap-badge-lg {
    font-size: 1.25rem;
    margin-left: 0.5rem;
}

.cd-gap-badge-xl {
    font-family: var(--cd-font-heading);
    font-size: 2.25rem;
    padding: 0.3rem 1rem;
}

.cd-gap-small { background: var(--cd-gap-small); }
.cd-gap-medium { background: var(--cd-gap-medium); color: var(--cd-dark); }
.cd-gap-large { background: var(--cd-gap-large); }
.cd-gap-above { background: var(--cd-gap-above); }

.cd-summary {
    background: var(--cd-background);
    border: 1px solid var(--cd-grid);
    border-radius: var(--cd-radius);
    padding: 1.25rem;
}

.cd-summary-label {
    font-weight: 600;
}

.cd-legend {
    color: var(--cd-muted);
    font-size: 0.875rem;
}

.cd-legend .cd-gap-badge {
    min-width: 1rem;
    padding: 0 0.5rem;
}

/* Guided assessment: one card per step (intro, each area, review) */
.cd-step {
    background: var(--cd-background);
    border-radius: var(--cd-radius);
    box-shadow: var(--cd-shadow);
    padding: 1.5rem;
}

.cd-guide-text {
    color: var(--cd-dark);
    font-size: 0.9375rem;
    margin-bottom: 1rem;
}

.cd-guide-note {
    color: var(--cd-muted);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.cd-area-progress {
    color: var(--cd-muted);
    display: flex;
    font-size: 0.875rem;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.cd-area-progress-bar {
    height: 0.25rem;
    margin-bottom: 1rem;
}

/* Scrolled to below the sticky top bar */
#pddForm,
.cd-step-actions {
    scroll-margin-top: 5rem;
    scroll-margin-bottom: 1rem;
}

.cd-area-title {
    color: var(--cd-dark);
    font-family: var(--cd-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.cd-area-title:focus {
    outline: none;
}

.cd-area-step-label {
    color: var(--cd-primary);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cd-target-step {
    border-top: 1px solid var(--cd-grid);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

.cd-guide-note--tight {
    margin-bottom: 0.5rem;
}

.cd-app .cd-disclosure {
    background: none;
    border: 0;
    color: var(--cd-primary);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.cd-app .cd-disclosure:hover {
    color: var(--cd-primary-hover);
}

.cd-anchor-panel {
    background: var(--cd-light);
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    padding: 1rem;
}

.cd-anchor-list {
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.cd-anchor-list dt {
    color: var(--cd-dark);
    font-weight: 600;
}

.cd-anchor-list dd {
    color: var(--cd-dark);
    margin-bottom: 0.5rem;
}

/* A 1-10 rating: one radio per score, drawn as a row of buttons */
.cd-rating {
    margin-top: 1rem;
}

.cd-rating-question {
    color: var(--cd-dark);
    float: none;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cd-scale {
    display: grid;
    gap: 0.375rem;
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

/* Buttons on the first row, each anchor name centred under its score below */
.cd-scale-btn {
    grid-row: 1;
    align-items: center;
    background: var(--cd-background);
    border: 1px solid var(--cd-grid);
    border-radius: 0.5rem;
    color: var(--cd-dark);
    cursor: pointer;
    display: flex;
    font-size: 0.875rem;
    font-weight: 600;
    justify-content: center;
    min-height: 2.75rem;
}

.cd-scale-btn:hover {
    border-color: var(--cd-primary);
}

.btn-check:checked + .cd-scale-btn {
    background: var(--cd-primary);
    border-color: var(--cd-primary);
    color: #FFFFFF;
}

.btn-check:focus-visible + .cd-scale-btn {
    outline: 2px solid var(--cd-primary);
    outline-offset: 2px;
}

/* A stage name spans the scores it covers; the end stages align to the outer edge */
.cd-scale-anchor {
    color: var(--cd-muted);
    font-size: 0.875rem;
    grid-row: 2;
    line-height: 1.3;
    text-align: center;
}

.cd-scale-anchor--student { grid-column: 1 / span 2; text-align: left; }
.cd-scale-anchor--novice { grid-column: 3 / span 3; }
.cd-scale-anchor--mastery { grid-column: 6 / span 3; }
.cd-scale-anchor--sage { grid-column: 9 / span 2; text-align: right; }

.cd-rating-readout {
    color: var(--cd-dark);
    font-size: 0.875rem;
    margin: 0.5rem 0 0;
    min-height: 1.3125rem;
}

.cd-area-gap {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 1rem 0 0;
}

.cd-area-gap-label {
    color: var(--cd-dark);
    margin-left: 0.25rem;
}

.cd-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* Why Continue is disabled, just above it */
.cd-step-hint {
    margin: 1.5rem 0 0;
    text-align: right;
}

.cd-step-hint + .cd-step-actions {
    margin-top: 0.5rem;
}

/* Start over sits apart from Back and Continue */
.cd-step-actions [data-action="reset"] {
    margin-right: auto;
}

/* Review: every pair with its gap */
.cd-review-category {
    color: var(--cd-primary);
    font-family: var(--cd-font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
}

.cd-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cd-review-row {
    align-items: center;
    border-top: 1px solid var(--cd-grid);
    display: grid;
    font-size: 0.875rem;
    gap: 0.5rem 1rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 0.5rem 0;
}

.cd-review-label {
    color: var(--cd-dark);
    font-weight: 600;
}

.cd-review-values {
    align-items: center;
    color: var(--cd-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.cd-review-values strong {
    color: var(--cd-dark);
}

.cd-review-overall {
    align-items: center;
    border-top: 1px solid var(--cd-grid);
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
}

@media (max-width: 575.98px) {
    .cd-step {
        padding: 1rem;
    }

    /* Two rows of five, each followed by its stage names */
    .cd-scale {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .cd-scale-btn:nth-of-type(n+6) { grid-row: 3; }

    .cd-scale-anchor--student { grid-column: 1 / span 2; grid-row: 2; }
    .cd-scale-anchor--novice { grid-column: 3 / span 3; grid-row: 2; }
    .cd-scale-anchor--mastery { grid-column: 1 / span 3; grid-row: 4; text-align: left; }
    .cd-scale-anchor--sage { grid-column: 4 / span 2; grid-row: 4; }

    .cd-scale-anchor {
        padding-bottom: 0.25rem;
    }

    /* Name and edit on the first line; levels and gap together on the second */
    .cd-review-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cd-review-values {
        gap: 0.5rem 0.75rem;
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .cd-review-values > span {
        white-space: nowrap;
    }

    /* "+2" on a phone; "above target" stays for screen readers (the grey and the legend say it too) */
    .cd-review-values .cd-gap-words {
        clip: rect(0, 0, 0, 0);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .cd-review-row .cd-row-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .cd-step-actions .btn {
        flex: 1 1 0;
    }

    .cd-step-actions [data-action="reset"] {
        margin-right: 0;
    }
}

.cd-overall {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.cd-unlock {
    background: var(--cd-background);
    border: 1px solid var(--cd-grid);
    border-radius: var(--cd-radius);
    padding: 1.5rem;
}

.cd-unlock-title {
    font-family: var(--cd-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
}

.cd-unlock ul {
    color: var(--cd-muted);
    padding-left: 1.25rem;
}

/* ------------------------ SMART Goals ------------------------ */
.cd-goal-fields dt {
    color: var(--cd-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cd-goal-fields dd {
    margin-bottom: 0.75rem;
}

.cd-goal-completed {
    background: #FAFAFB;
}

.cd-goal-completed .cd-goal-fields {
    opacity: 0.7;
}

/* ------------------------ Cohorts ------------------------ */
.cd-join-code {
    background: var(--cd-light);
    border-radius: 0.375rem;
    color: var(--cd-dark);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 0.2rem 0.5rem;
    text-transform: uppercase;
}

input.cd-join-code {
    background: var(--cd-background);
    padding: 0.5rem 0.75rem;
}

/* A placeholder is an example, not a code: plain, so it is not read as one */
input.cd-join-code::placeholder {
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

/* The code and its button on one line; the button drops below on a phone */
.cd-join-row {
    display: flex;
    gap: 0.5rem;
}

.cd-join-row .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.cd-join-row .btn {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .cd-join-row {
        flex-direction: column;
    }
}

/* Short points, each led by an icon in a tinted circle */
.cd-point-list {
    display: grid;
    gap: 0.875rem;
    list-style: none;
    padding: 0;
}

.cd-point-list li {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
}

.cd-point-list .bi,
.cd-membership-icon {
    align-items: center;
    background: var(--cd-primary-light);
    border-radius: 50%;
    color: var(--cd-primary);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

/* One cohort the user is in: icon, name and details, then the way to leave */
.cd-membership {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
}

.cd-membership-text {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cd-kpi {
    color: var(--cd-dark);
    font-family: var(--cd-font-heading);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.1;
}

/* A meter under a figure in a table cell */
.cd-meter--cell {
    margin: 0.375rem 0 0;
    max-width: 7rem;
}

/* Actions on a card that is not a table row (a goal card): the same icon
   buttons and colours as a table's row actions, plus complete and reopen */
.cd-row-actions .btn + .btn,
.cd-row-actions form + .btn,
.cd-row-actions .btn + form,
.cd-row-actions form + form {
    margin-left: 0.25rem;
}

.cd-app .cd-row-actions .btn .bi-eye { color: var(--cd-primary); }
.cd-app .cd-row-actions .btn .bi-pencil { color: var(--cd-accent); }   /* tertiary */
.cd-app .cd-row-actions .btn .bi-trash { color: var(--cd-danger); }
.cd-app .cd-row-actions .btn .bi-check-lg { color: var(--cd-gap-small); }
.cd-app .cd-row-actions .btn .bi-arrow-counterclockwise { color: var(--cd-muted); }

/* A filter that shows or hides what is on the page: a row of pills, one pressed */
.cd-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cd-pill {
    background: var(--cd-background);
    border: 1px solid var(--cd-grid);
    border-radius: 999px;
    color: var(--cd-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.3125rem 0.875rem;
}

.cd-pill span {
    font-weight: 600;
    margin-left: 0.25rem;
}

.cd-pill:hover,
.cd-pill:focus-visible {
    border-color: var(--cd-dark);
    color: var(--cd-dark);
}

.cd-pill.active {
    background: var(--cd-primary-light);
    border-color: var(--cd-primary-light);
    color: var(--cd-primary);
}

/* A change in a gap score between two assessments: a narrower gap is progress
   (the small-gap green), a wider one is not (the large-gap red) */
.cd-change-down,
.cd-change-up {
    font-weight: 600;
}

.cd-change-down { color: var(--cd-gap-small); }
.cd-change-up { color: var(--cd-gap-large); }

/* A shared goal as a tile on the cohort benchmark page */
.cd-goal-tile {
    background: var(--cd-light);
    border-radius: var(--cd-radius-sm);
    padding: 1rem 1.25rem;
}

/* The way back to a list, above a page's title (templates/_back_link.php).
   Every "back" in the app is this link, never a button. */
.cd-app a.cd-back-link {
    align-items: center;
    color: var(--cd-muted);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 500;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.cd-app a.cd-back-link:hover,
.cd-app a.cd-back-link:focus-visible {
    color: var(--cd-primary);
}

/* Under the card on the login-related pages, where it is centred */
.cd-app .cd-auth-alt a.cd-back-link {
    font-weight: 500;
    margin-bottom: 0;
}

.cd-shared-goal {
    border-top: 1px solid var(--cd-grid);
    padding: 1rem 0;
}

.cd-shared-goal:first-of-type {
    border-top: 0;
    padding-top: 0;
}

/* ------------------------ AI Recommendations ------------------------ */
.cd-insight-heading {
    color: var(--cd-dark);
    font-family: var(--cd-font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}

.cd-insight-list {
    padding-left: 1.25rem;
}

ol.cd-insight-list { list-style: decimal; }
ul.cd-insight-list { list-style: disc; }

.cd-insight-list li {
    margin-bottom: 0.5rem;
}

/* Recommended resources: catalog items, grouped by type (assessment/_resources.php) */
.cd-resource-group {
    color: var(--cd-dark);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
}

.cd-resource-list {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.cd-resource {
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
}

.cd-resource-title {
    font-weight: 600;
    margin-right: 0.5rem;
}

.cd-resource-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

/* Resources table: the gaps an item helps with, as pills that wrap within the
   column instead of stretching the table */
.cd-gap-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 12rem;
    max-width: 22rem;
}

/* Edit resource modal: a LillyxL course's title and link are read-only, and
   look it, tinted like .cd-readonly-field */
#editResourceModal .form-control[readonly] {
    background: var(--cd-light);
    color: var(--cd-muted);
}

/* ------------------------ Preloader ------------------------ */
.cd-preloader {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    transition: opacity .25s ease, visibility .25s ease;
}
.cd-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.cd-preloader svg { width: 96px; height: auto; overflow: visible; }
.cd-preloader path {
    fill-opacity: 0; stroke-width: 16;
    stroke-linejoin: round; stroke-linecap: round;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: cd-trace 1.2s cubic-bezier(.6, 0, .3, 1) infinite;
}
.cd-preloader .cd-blue   { fill: var(--cd-primary); stroke: var(--cd-primary); }
.cd-preloader .cd-orange { fill: var(--cd-accent); stroke: var(--cd-accent); }
.cd-preloader .cd-p2 { animation-delay: .1s; }
.cd-preloader .cd-p3 { animation-delay: .2s; }
@keyframes cd-trace {
    0%   { stroke-dashoffset: 1; fill-opacity: 0; opacity: 1; }
    45%  { stroke-dashoffset: 0; fill-opacity: 0; }
    62%  { stroke-dashoffset: 0; fill-opacity: 1; }
    85%  { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; }
    100% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cd-preloader path { animation: cd-pulse 1.6s ease-in-out infinite; stroke-dashoffset: 0; fill-opacity: 1; }
    @keyframes cd-pulse { 50% { opacity: .45; } }
}