/* ============================================================
   CB5 PSA Shell Layout
   App chrome: header, sidebar, content area
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

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

/* Dark mode: force all elements to inherit text color — overrides browser defaults on
   inputs, selects, buttons, textareas, and other elements that use OS-level dark color */
[data-theme="dark"] * {
  color: inherit;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] button {
  color: var(--cb5-text-primary);
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
[data-theme="dark"] {
  color-scheme: dark;
}

/* --- App Shell --- */
.cb5-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* --- Header --- */
.cb5-header {
  height: var(--cb5-header-height);
  background: var(--cb5-brand);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  z-index: var(--cb5-z-header);
  flex-shrink: 0;
  box-shadow: var(--cb5-shadow-sm);
}

.cb5-wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cb5-text-md);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
  text-decoration: none;
  letter-spacing: -0.2px;
  flex-shrink: 0;
}

.cb5-header-spacer { flex: 1; }

.cb5-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cb5-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--cb5-radius);
  border: none;
  background: transparent;
  color: var(--cb5-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--cb5-transition-fast),
              color var(--cb5-transition-fast);
}

.cb5-icon-btn:hover {
  background: var(--cb5-surface-raised);
  color: var(--cb5-text-primary);
}

/* Page-level icon buttons — slightly larger, used in page headers next to titles */
.cb5-icon-btn--page {
  width: 36px;
  height: 36px;
}

/* Danger icon button — red on hover, used for delete actions */
.cb5-icon-btn--danger {
  color: var(--cb5-text-secondary);
}
.cb5-icon-btn--danger:hover {
  background: var(--cb5-error-bg);
  color: var(--cb5-danger);
}

/* Icon buttons inside the blue header */
.cb5-header .cb5-icon-btn {
  color: rgba(255, 255, 255, 0.8);
}
.cb5-header .cb5-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--cb5-text-on-primary);
}
.cb5-header .cb5-icon-btn:disabled {
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
}
.cb5-header a:hover svg text {
  fill: var(--cb5-brand-accent);
}
[data-theme="dark"] .cb5-header {
  background: var(--cb5-surface);
}

/* --- Body (rail | sidebar | content) --- */
.cb5-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0; /* allow flex child to shrink below content height */
  overflow: hidden;
}

/* --- Module Chooser (header dropdown) --- */
.cb5-module-chooser-host {
  position: relative;
}
.cb5-module-chooser-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--cb5-text-sm);
  font-family: inherit;
  font-weight: var(--cb5-weight-semibold);
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 10px;
  border-radius: var(--cb5-radius-sm);
  transition: background var(--cb5-transition-fast), color var(--cb5-transition-fast);
  white-space: nowrap;
}
.cb5-module-chooser-btn:hover,
.cb5-module-chooser-btn.open {
  background: rgba(255, 255, 255, 0.12);
  color: var(--cb5-text-on-primary);
}
.cb5-module-chooser-btn svg:last-child {
  transition: transform var(--cb5-transition-fast);
  opacity: 0.7;
}
.cb5-module-chooser-btn.open svg:last-child {
  transform: rotate(180deg);
}
[data-theme="dark"] .cb5-module-chooser-btn {
  color: var(--cb5-text-secondary);
}
[data-theme="dark"] .cb5-module-chooser-btn:hover,
[data-theme="dark"] .cb5-module-chooser-btn.open {
  background: var(--cb5-surface-hover);
  color: var(--cb5-text-primary);
}
.cb5-module-chooser-icon {
  display: flex;
  align-items: center;
}
.cb5-module-chooser-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chooser panel (rich dropdown) */
.cb5-module-chooser-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08);
  min-width: 320px;
  z-index: var(--cb5-z-dropdown);
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.cb5-module-chooser-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--cb5-radius);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background var(--cb5-transition-fast);
}
.cb5-module-chooser-card:hover {
  background: var(--cb5-surface-hover);
}
.cb5-module-chooser-card.active {
  background: var(--cb5-primary-light);
}
.cb5-module-chooser-card.disabled {
  opacity: 0.4;
  cursor: default;
}
.cb5-module-chooser-card.disabled:hover {
  background: transparent;
}
.cb5-module-chooser-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 1px;
}
.cb5-module-chooser-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cb5-module-chooser-card-name {
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
}
.cb5-module-chooser-card-desc {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-tertiary);
  line-height: 1.3;
}
.cb5-module-chooser-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--cb5-z-dropdown) - 1);
}

/* Header home link */
.cb5-header-home {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

/* Header breadcrumb */
.cb5-header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  font-size: var(--cb5-text-xs);
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
}
.cb5-header-breadcrumb-sep {
  opacity: 0.5;
}
.cb5-header-breadcrumb-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--cb5-transition-fast);
}
.cb5-header-breadcrumb-link:hover {
  color: var(--cb5-text-on-primary);
  text-decoration: underline;
}
.cb5-header-breadcrumb-current {
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--cb5-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] .cb5-header-breadcrumb {
  color: var(--cb5-text-tertiary);
}
[data-theme="dark"] .cb5-header-breadcrumb-link {
  color: var(--cb5-text-secondary);
}
[data-theme="dark"] .cb5-header-breadcrumb-link:hover {
  color: var(--cb5-text-primary);
}
[data-theme="dark"] .cb5-header-breadcrumb-current {
  color: var(--cb5-text-primary);
}

/* Sidebar section label (e.g. "Core") */
.cb5-sidebar-section-label {
  padding: 12px 14px 4px;
  font-size: 10px;
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Pinned module headers at sidebar bottom (Help, Settings) */
.cb5-nav-pinned-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  font-family: inherit;
  transition: background var(--cb5-transition-fast), color var(--cb5-transition-fast);
}
.cb5-nav-pinned-header:hover {
  background: var(--cb5-surface-hover);
  color: var(--cb5-text-secondary);
}
.cb5-nav-pinned-header.active {
  color: var(--cb5-text-secondary);
}
.cb5-nav-pinned-header.disabled {
  opacity: 0.4;
  cursor: default;
}
.cb5-nav-pinned-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.cb5-nav-pinned-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb5-nav-pinned-chevron {
  display: flex;
  align-items: center;
  opacity: 0.5;
  margin-left: auto;
}
/* Hide pinned labels/chevrons when sidebar collapsed */
.cb5-sidebar.collapsed .cb5-nav-pinned-label,
.cb5-sidebar.collapsed .cb5-nav-pinned-chevron { display: none; }
.cb5-sidebar.collapsed .cb5-nav-pinned-header {
  justify-content: center;
  padding: 8px 0;
}

/* ── Environment badge (header) ── */
.cb5-env-badge {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 12px;
}
.cb5-env-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--env-color, #F57F26);
}
.cb5-env-badge .cb5-icon-btn {
  width: 22px;
  height: 22px;
}
.cb5-env-badge .cb5-hft {
  margin-left: 0;
}


/* Bottom area: separator + pinned modules + collapse btn */
/* ── Recent Items ── */
.cb5-recent-section {
  padding: 4px 0;
}
.cb5-recent-header-wrap {
  position: relative;
}
.cb5-recent-header {
  /* Reset button defaults so the element renders as a header. */
  appearance: none;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 14px 6px;
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  letter-spacing: 0.03em;
  cursor: default;
}
.cb5-recent-chevron {
  display: flex;
  align-items: center;
  opacity: 0.5;
}
.cb5-recent-section:hover .cb5-recent-chevron {
  opacity: 1;
}

/* Flyout panel — hidden by default, shown on hover */
.cb5-recent-flyout {
  display: none;
}
.cb5-recent-section:hover .cb5-recent-flyout {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: calc(100% + 4px);
  bottom: 0;
  min-width: 280px;
  max-width: 380px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--cb5-surface);
  border: 0.5px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
  z-index: 200;
}
/* Invisible bridge covers the gap between trigger and flyout */
.cb5-recent-section:hover .cb5-recent-flyout::after {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  width: 12px;
}
.cb5-recent-flyout-title {
  padding: 6px 12px 8px;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--cb5-border);
  margin-bottom: 4px;
}
.cb5-recent-flyout-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  color: var(--cb5-text-secondary);
  text-decoration: none;
  font-size: var(--cb5-text-xs);
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--cb5-transition-fast);
}
.cb5-recent-flyout-item:hover {
  background: var(--cb5-surface-hover);
  color: var(--cb5-text-primary);
}
.cb5-recent-flyout-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb5-recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 18px;
  color: var(--cb5-text-secondary);
  text-decoration: none;
  font-size: var(--cb5-text-xs);
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--cb5-transition-fast), color var(--cb5-transition-fast);
}
.cb5-recent-item:hover {
  background: var(--cb5-surface-hover);
  color: var(--cb5-text-primary);
}
.cb5-recent-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

/* ── Sidebar submenu (NavPage.Children flyout) ──
   Used by NavItem when a nav entry has child sub-items (e.g. cross-module
   Imports / Exports). Mirrors the Recent Items flyout visuals — same hover
   trigger, same panel positioning, same invisible bridge — so the two
   slide-out patterns feel identical in production. */
.cb5-nav-submenu-section {
  position: relative;
}
.cb5-nav-submenu-chevron {
  margin-left: auto;
  display: flex;
  align-items: center;
  opacity: 0.45;
  transition: opacity var(--cb5-transition-fast);
}
.cb5-nav-submenu-section:hover .cb5-nav-submenu-chevron {
  opacity: 0.9;
}
.cb5-nav-submenu-flyout {
  display: none;
}
.cb5-nav-submenu-section:hover .cb5-nav-submenu-flyout {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: calc(100% + 4px);
  top: 0;
  min-width: 280px;
  max-width: 360px;
  background: var(--cb5-surface);
  border: 0.5px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 4px 0 6px;
  z-index: 200;
}
.cb5-nav-submenu-title {
  padding: 8px 14px 6px;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--cb5-border);
  margin-bottom: 4px;
}
/* Invisible bridge covers the gap between trigger and flyout so the hover
   doesn't fall through when the cursor moves diagonally into the panel. */
.cb5-nav-submenu-section:hover .cb5-nav-submenu-flyout::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  width: 12px;
}
.cb5-nav-submenu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 14px;
  color: var(--cb5-text-secondary);
  text-decoration: none;
  transition: background var(--cb5-transition-fast), color var(--cb5-transition-fast);
}
.cb5-nav-submenu-item:hover,
.cb5-nav-submenu-item.active {
  background: var(--cb5-surface-hover);
  color: var(--cb5-text-primary);
}
.cb5-nav-submenu-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  opacity: 0.75;
}
.cb5-nav-submenu-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.cb5-nav-submenu-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.cb5-nav-submenu-label {
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb5-nav-submenu-badge {
  flex-shrink: 0;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  background: var(--cb5-surface-raised);
  border-radius: 999px;
  padding: 1px 8px;
  line-height: 1.4;
}
.cb5-nav-submenu-item.active .cb5-nav-submenu-badge {
  background: var(--cb5-primary-light);
  color: var(--cb5-primary);
}
.cb5-nav-submenu-desc {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-tertiary);
  white-space: normal;
  line-height: 1.3;
}
.cb5-recent-icon svg {
  width: 16px;
  height: 16px;
}
.cb5-recent-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Favorites menu (header dropdown) ── */
.cb5-favorites-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
}
.cb5-favorites-wrap {
  position: relative;
}
.cb5-favorites-trigger {
  position: relative;
}
.cb5-favorites-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  background: var(--cb5-brand);
  color: var(--cb5-text-on-primary);
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
}
.cb5-favorites-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  max-width: 320px;
  background: var(--cb5-surface);
  border: 0.5px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 4px 0;
  z-index: 300;
}
.cb5-favorites-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  border-bottom: 1px solid var(--cb5-border);
  margin-bottom: 2px;
}
.cb5-favorites-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  color: var(--cb5-text-secondary);
  text-decoration: none;
  font-size: var(--cb5-text-sm);
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--cb5-transition-fast);
  cursor: pointer;
}
.cb5-favorites-item:hover {
  background: var(--cb5-surface-hover);
  color: var(--cb5-text-primary);
}
.cb5-favorites-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.6;
}
.cb5-favorites-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Star toggle on pages */
.cb5-favorite-toggle {
  color: var(--cb5-text-tertiary);
}
.cb5-favorite-toggle:hover {
  color: var(--cb5-warning);
}
.cb5-favorite-toggle.active {
  color: var(--cb5-warning);
}
.cb5-favorite-toggle.active:hover {
  color: var(--cb5-text-tertiary);
}

/* ── View Toggle (list | kanban) ── */
.cb5-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cb5-view-toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 4px 2px 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-medium);
  color: var(--cb5-text-tertiary);
  transition: color var(--cb5-transition-fast), border-color var(--cb5-transition-fast);
}
.cb5-view-toggle-item:hover {
  color: var(--cb5-text-secondary);
}
.cb5-view-toggle-item.active {
  color: var(--cb5-primary);
  border-bottom-color: var(--cb5-primary);
}
.cb5-view-toggle-sep {
  color: var(--cb5-border-strong);
  font-size: var(--cb5-text-sm);
  user-select: none;
}

/* ── Pagination ── */
.cb5-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.cb5-pagination .cb5-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  font-size: var(--cb5-text-sm);
  border: 1px solid transparent;
  border-radius: var(--cb5-radius-sm);
  background: none;
  color: var(--cb5-text-primary);
  cursor: pointer;
}
.cb5-pagination .cb5-page-btn:hover:not(:disabled):not(.active) {
  border-color: var(--cb5-border);
  background: var(--cb5-bg-secondary);
}
.cb5-pagination .cb5-page-btn.active {
  background: var(--cb5-brand);
  color: var(--cb5-text-on-primary);
  border-color: var(--cb5-brand);
  font-weight: 600;
}
.cb5-pagination .cb5-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.cb5-pagination .cb5-page-nav {
  font-size: 1.1rem;
  font-weight: 600;
}

/* ── Copy Button ── */
.cb5-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: opacity 0.15s;
}
.cb5-copy-btn:hover { opacity: 0.8 !important; }
.cb5-copy-btn.copied { opacity: 0.8 !important; color: var(--cb5-success); }

/* Hover-reveal: icon hidden until parent hovered */
.cb5-copy-on-hover .cb5-copy-btn { opacity: 0; transition: opacity 0.15s; }
.cb5-copy-on-hover:hover .cb5-copy-btn { opacity: 0.6; }
.cb5-copy-on-hover:hover .cb5-copy-btn:hover { opacity: 1; }
.cb5-copy-on-hover:hover .cb5-copy-btn.copied { opacity: 1; }

/* ── Pipeline Flow Indicator (stepper) ── */
.cb5-flow-indicator {
  display: flex;
  align-items: center;
  gap: 0;
}
.cb5-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  flex: 1;
  min-width: 0;
}
/* Connector line between nodes */
.cb5-flow-node:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 9px;
  left: calc(50% + 10px);
  right: calc(-50% + 10px);
  height: 2px;
  background: var(--cb5-border);
  z-index: 0;
}
.cb5-flow-node.completed:not(:last-child)::after {
  background: var(--cb5-primary);
}
.cb5-flow-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--cb5-border);
  background: var(--cb5-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--cb5-text-on-primary);
  z-index: 1;
  transition: all var(--cb5-transition-fast);
}
.cb5-flow-node.completed .cb5-flow-dot {
  border-color: transparent;
}
.cb5-flow-node.active .cb5-flow-dot {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(0, 131, 177, 0.2);
}
.cb5-flow-node.failed .cb5-flow-dot {
  border-color: transparent;
  background: var(--cb5-error) !important;
}
.cb5-flow-node.future .cb5-flow-dot {
  background: var(--cb5-surface);
  border-color: var(--cb5-border);
}
.cb5-flow-label {
  font-size: 9px;
  color: var(--cb5-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
  text-align: center;
}
.cb5-flow-node.active .cb5-flow-label {
  color: var(--cb5-text-primary);
  font-weight: var(--cb5-weight-semibold);
}
.cb5-flow-node.completed .cb5-flow-label {
  color: var(--cb5-text-secondary);
}

/* Compact mode (tooltip) — smaller dots, no labels */
.cb5-flow-indicator.compact .cb5-flow-dot {
  width: 12px;
  height: 12px;
  font-size: 7px;
}
.cb5-flow-indicator.compact .cb5-flow-node:not(:last-child)::after {
  top: 5px;
  left: calc(50% + 7px);
  right: calc(-50% + 7px);
}

/* Status Tooltip Popover */
.cb5-status-tooltip-wrap {
  position: relative;
  display: inline-flex;
  cursor: default;
}
.cb5-status-tooltip-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  padding: 10px 16px;
  white-space: nowrap;
  z-index: var(--cb5-z-dropdown);
  min-width: 200px;
}
/* Arrow pointing down */
/* No arrow: the popover is position:fixed + JS-pinned to the anchor (cb5.pinPopoverToAnchor),
   so it floats free of the anchor and a static CSS arrow can't reliably point at it — matching the
   arrow-less hover cards. See docs/sdd/specs/ui/overlays.md. */

/* ── Search Jump (typeahead navigate) ── */
.cb5-search-jump-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 360px;
  max-width: 480px;
  background: var(--cb5-surface);
  border: 0.5px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  padding: 4px 0;
  z-index: var(--cb5-z-dropdown);
  max-height: 320px;
  overflow-y: auto;
}
.cb5-search-jump-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background var(--cb5-transition-fast);
}
/* Context-menu icons should never be taller than the row text. Blazicons' Size param is
   unreliable (see roadmap #29), so cap the rendered svg here for every search-jump dropdown
   (site search, workflow-action menu, skills selector, kanban kebabs). */
.cb5-search-jump-item svg {
  width: 14px;
  height: 14px;
  flex: none;
}
/* Reusable compact menu: smaller item text + tighter padding/icon. Apply alongside
   .cb5-search-jump-results anywhere a dense dropdown is wanted (e.g. kanban card kebabs). */
.cb5-menu-sm .cb5-search-jump-item {
  font-size: var(--cb5-text-sm);
  padding: 5px 10px;
}
.cb5-menu-sm .cb5-search-jump-item svg {
  width: 13px;
  height: 13px;
}
.cb5-search-jump-item:hover,
.cb5-search-jump-item.highlighted {
  background: var(--cb5-surface-hover);
}
.cb5-search-jump-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--cb5-z-dropdown) - 1);
}
/* Divider between groups of items in a dropdown menu (e.g. row/card action menus). */
.cb5-menu-divider {
  border-top: 1px solid var(--cb5-border);
  margin: 3px 0;
}

/* ── SmartSearch (collapsible, categorized search) ── */
.cb5-smart-search {
  position: relative;
  display: inline-block;
}
.cb5-smart-search-panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: var(--cb5-z-dropdown);
  min-width: 340px;
  background: var(--cb5-bg);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.cb5-smart-search--left .cb5-smart-search-panel {
  right: auto;
  left: 0;
}
.cb5-smart-search-input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--cb5-border);
}
.cb5-smart-search-input input {
  flex: 1;
  border: none;
  box-shadow: none;
  padding: 2px 4px;
}
.cb5-smart-search-input input:focus {
  outline: none;
}
.cb5-smart-search-results {
  max-height: 340px;
  overflow-y: auto;
  padding: 4px 0;
}
.cb5-smart-search-cat {
  padding: 6px 10px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cb5-text-muted);
}

/* ── Notification Bell (header dropdown) ── */
.cb5-notification-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
}
.cb5-notification-wrap {
  position: relative;
}
.cb5-notification-trigger {
  position: relative;
}
.cb5-notification-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--cb5-error);
  color: var(--cb5-text-on-primary);
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 3px;
  pointer-events: none;
}
/* Generic informational count badge — mirrors .cb5-favorites-count (the header star's blue
   corner circle) for "N items exist" contexts with no unread/urgency semantic (e.g. the
   Leads-list timeline icon's entry count). Sits INSIDE the icon button's top-right corner. */
.cb5-count-badge-trigger {
  position: relative;
}
.cb5-count-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  background: var(--cb5-brand);
  color: var(--cb5-text-on-primary);
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  padding: 0 2px;
  pointer-events: none;
}

/* Timeline row-action trigger — orange timeline glyph with the entry count as a blue pill sitting
   BESIDE it ([icon] [count]) rather than overlapping the corner, so a 2-digit count isn't cramped.
   The whole button is one clickable unit that opens the timeline dock. */
.cb5-tl-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: none;
  border-radius: var(--cb5-radius);
  background: transparent;
  color: var(--cb5-brand-accent);
  cursor: pointer;
  transition: background var(--cb5-transition-fast);
}
.cb5-tl-trigger:hover {
  background: var(--cb5-surface-raised);
}
.cb5-tl-count {
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--cb5-brand);
  color: var(--cb5-text-on-primary);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
}
.cb5-notification-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 320px;
  max-width: 400px;
  max-height: 440px;
  overflow-y: auto;
  background: var(--cb5-surface);
  border: 0.5px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 0;
  z-index: 300;
}
.cb5-notification-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  border-bottom: 1px solid var(--cb5-border);
}
.cb5-notification-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  color: var(--cb5-text-secondary);
  text-decoration: none;
  font-size: var(--cb5-text-xs);
  cursor: pointer;
  transition: background var(--cb5-transition-fast);
  border-bottom: 0.5px solid var(--cb5-border);
}
.cb5-notification-item:last-child {
  border-bottom: none;
}
.cb5-notification-item:hover {
  background: var(--cb5-surface-hover);
}
.cb5-notification-item.unread {
  background: var(--cb5-primary-light);
  border-left: 3px solid var(--cb5-primary);
}
.cb5-notification-item-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.6;
}
.cb5-notification-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.cb5-notification-item-title {
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb5-notification-item-message {
  color: var(--cb5-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.cb5-notification-item-time {
  flex-shrink: 0;
  color: var(--cb5-text-tertiary);
  font-size: 10px;
  white-space: nowrap;
  margin-top: 2px;
}
.cb5-notification-view-all {
  display: block;
  text-align: center;
  padding: 8px 12px;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-primary);
  text-decoration: none;
  border-top: 1px solid var(--cb5-border);
}
.cb5-notification-view-all:hover {
  background: var(--cb5-surface-hover);
}

/* ── Notification Page Rows ── */
.cb5-notification-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--cb5-border);
  transition: background var(--cb5-transition-fast);
}
.cb5-notification-row:last-child {
  border-bottom: none;
}
.cb5-notification-row:hover {
  background: var(--cb5-surface-hover);
}
.cb5-notification-row.unread {
  background: var(--cb5-primary-light);
  border-left: 3px solid var(--cb5-primary);
}
.cb5-notification-row-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.6;
}
.cb5-notification-row-content {
  flex: 1;
  min-width: 0;
}
.cb5-notification-row-title {
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
  margin-bottom: 2px;
}
.cb5-notification-row-message {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-secondary);
  line-height: 1.4;
}
.cb5-notification-row-time {
  flex-shrink: 0;
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-tertiary);
  white-space: nowrap;
  margin-top: 2px;
}
.cb5-notification-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}

/* ── Toast Notifications ── */
.cb5-toast-container {
  position: fixed;
  top: calc(var(--cb5-header-height) + 12px);
  right: 16px;
  z-index: var(--cb5-z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.cb5-toast {
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-left: 4px solid var(--cb5-primary);
  border-radius: var(--cb5-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  padding: 12px 16px;
  min-width: 280px;
  max-width: 380px;
  pointer-events: auto;
  cursor: pointer;
  animation: cb5-toast-in 0.3s ease-out;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.cb5-toast.fade-out {
  opacity: 0;
  transform: translateX(20px);
}
.cb5-toast-title {
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
  margin-bottom: 2px;
}
.cb5-toast-message {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-secondary);
  line-height: 1.4;
}
@keyframes cb5-toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.cb5-nav-bottom {
  flex-shrink: 0;
  padding: 4px 0;
}

.cb5-sidebar-sep {
  height: 2px;
  background: var(--cb5-divider);
  margin: 6px 8px;
}

/* --- Sidebar panel (collapsible) --- */
.cb5-sidebar {
  width: var(--cb5-sidebar-width);
  min-width: 0;
  flex-shrink: 0;
  position: relative;
  background: var(--cb5-surface);
  border-right: 0.5px solid var(--cb5-border);
  display: flex;
  flex-direction: column;
  overflow: visible; /* must be visible so flyouts can escape */
  transition: width var(--cb5-transition-fast);
  z-index: var(--cb5-z-sidebar);
}

/* Collapse to icon-only width */
.cb5-body.sidebar-collapsed .cb5-sidebar {
  width: var(--cb5-sidebar-collapsed);
}

.cb5-sidebar.collapsed {
  transition: width var(--cb5-transition-fast);
}

/* When collapsed: hide labels, section labels, separator */
.cb5-sidebar.collapsed .cb5-nav-label,
.cb5-sidebar.collapsed .cb5-nav-item-label,
.cb5-sidebar.collapsed .cb5-sidebar-section-label,
.cb5-sidebar.collapsed .cb5-sidebar-sep,
.cb5-sidebar.collapsed .cb5-nav-submenu-chevron { display: none; }

.cb5-sidebar.collapsed .cb5-nav-item {
  justify-content: center;
  padding: 8px 0;
}

.cb5-sidebar.collapsed .cb5-nav-pinned {
  padding-left: 0;
  justify-content: center;
}

.cb5-sidebar.collapsed .cb5-sidebar-collapse-btn {
  width: 100%;
  border-radius: 0;
  border: none;
  border-top: 0.5px solid var(--cb5-border);
  justify-content: center;
}

/* No sidebar on dashboard — center content */
.cb5-body.no-sidebar .cb5-content {
  margin-left: 0;
}
.cb5-body.no-sidebar .cb5-page {
  max-width: var(--cb5-max-content-width);
  margin-left: auto;
  margin-right: auto;
}


/* Collapse/expand button */
.cb5-sidebar-collapse-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  border-top: 0.5px solid var(--cb5-border);
  background: none;
  color: var(--cb5-text-tertiary);
  cursor: pointer;
  font-size: var(--cb5-text-sm);
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--cb5-transition-fast), color var(--cb5-transition-fast);
  flex-shrink: 0;
}

.cb5-sidebar-collapse-btn:hover {
  color: var(--cb5-text-primary);
  background: var(--cb5-surface-hover);
}

.cb5-nav {
  flex: 1;
  overflow: visible; /* must be visible so flyouts escape — nav items won't overflow in practice */
  padding: 8px 0;
}

.cb5-nav-section {
  padding: 8px 12px 4px;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--cb5-transition-fast);
}

.cb5-nav-section.active {
  color: var(--cb5-primary);
}

.cb5-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 34px;
  margin: 1px 8px 1px 0;
  border-radius: 0 var(--cb5-radius) var(--cb5-radius) 0;
  color: var(--cb5-text-secondary);
  text-decoration: none;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-medium);
  cursor: pointer;
  transition: background var(--cb5-transition-fast),
              color var(--cb5-transition-fast);
  white-space: nowrap;
  overflow: hidden;
  border: none;
  background: transparent;
  width: calc(100% - 8px);
  text-align: left;
  position: relative;
}

/* Home-sidebar module launcher rows (spec: docs/sdd/specs/ui/home-sidebar-and-last-location.md).
   Inherits .cb5-nav-item; disabled = visible but greyed, tooltip explains why. */
.cb5-sidebar-module-link.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cb5-sidebar-module-link.disabled:hover {
  background: transparent;
  color: var(--cb5-text-secondary);
}

.cb5-nav-item:hover {
  background: var(--cb5-surface-hover);
  color: var(--cb5-text-primary);
}

.cb5-nav-item.active {
  background: var(--cb5-primary-light);
  color: var(--cb5-primary);
  font-weight: var(--cb5-weight-semibold);
}

/* Active item blue bar — overlays the continuous grey bar */
.cb5-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cb5-primary);
  border-radius: 0 1.5px 1.5px 0;
}

/* Hover: show a darker grey bar so the continuous rail stays visible on mouse-over */
.cb5-nav-item:hover:not(.active)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cb5-text-tertiary);
  border-radius: 0 1.5px 1.5px 0;
}

.cb5-nav-item svg,
.cb5-nav-item .nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cb5-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--cb5-transition);
}


/* --- Main Content --- */
.cb5-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--cb5-bg-secondary);
}


/* --- Mobile bottom tab bar --- */
.cb5-bottom-tabs {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  border-top: 0.5px solid var(--cb5-border);
  background: var(--cb5-surface);
  align-items: center;
  justify-content: space-around;
  z-index: var(--cb5-z-sidebar);
}

/* --- Responsive: tablet (768–1023px) — sidebar hidden, rail visible --- */
@media (max-width: 1023px) {
  .cb5-sidebar {
    display: none;
    /* TODO: implement as overlay drawer on rail icon tap */
  }
  .cb5-sidebar-collapse-btn {
    display: none;
  }
}

/* --- Responsive: mobile (<768px) — rail hidden, bottom tab bar shown --- */
@media (max-width: 767px) {
  .cb5-body {
    padding-bottom: 56px;
  }
  .cb5-rail {
    display: none;
  }
  .cb5-bottom-tabs {
    display: flex;
  }
}

.cb5-page {
  padding: var(--cb5-content-padding);
  padding-left: 32px;
  max-width: var(--cb5-max-content-width);
}
.cb5-page--wide {
  /* Wide variant: leaves room for data-heavy grids while still preventing the
     content from sprawling across UHD/4K viewports. Left-aligned, dead space
     to the right. */
  max-width: 1500px;
}

/* --- Page Header --- */
.cb5-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.cb5-page-title {
  font-size: var(--cb5-text-xl);
  font-weight: var(--cb5-weight-bold);
  color: var(--cb5-text-heading);
  margin: 0;
  letter-spacing: -0.3px;
  outline: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.cb5-page-subtitle {
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-tertiary);
  margin: 2px 0 0;
  line-height: 1.4;
}

[data-theme="dark"] .cb5-page-title { color: var(--cb5-text-heading); }

/* Legacy inline breadcrumbs — now rendered in header via BreadcrumbSegment */
.cb5-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-tertiary);
  margin-bottom: 4px;
}

.cb5-breadcrumb a {
  color: var(--cb5-text-link);
  text-decoration: none;
}

.cb5-breadcrumb a:hover { text-decoration: underline; }

/* --- Cards --- */
.cb5-card {
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  box-shadow: var(--cb5-shadow-sm);
}

.cb5-card-body { padding: 20px; }

.cb5-card-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--cb5-divider);
  font-weight: var(--cb5-weight-semibold);
  font-size: var(--cb5-text-md);
}

/* --- Tabs --- */
.cb5-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--cb5-border);
  margin-bottom: 20px;
}

.cb5-tab {
  padding: 8px 16px;
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-medium);
  color: var(--cb5-text-secondary);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--cb5-transition-fast),
              border-color var(--cb5-transition-fast);
}

.cb5-tab:hover { color: var(--cb5-text-primary); }

.cb5-tab.active {
  color: var(--cb5-primary);
  border-bottom-color: var(--cb5-primary);
  font-weight: var(--cb5-weight-semibold);
}

/* Count badge inside a tab label (e.g. "Timesheets" + "3") */
.cb5-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: var(--cb5-weight-semibold);
  background: var(--cb5-primary);
  color: white;
  border-radius: 9px;
}

/* --- Buttons --- */
.cb5-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-medium);
  border-radius: var(--cb5-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--cb5-transition-fast),
              border-color var(--cb5-transition-fast),
              color var(--cb5-transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.cb5-btn-primary {
  background: var(--cb5-primary);
  color: var(--cb5-text-on-primary);
  border-color: var(--cb5-primary);
}

.cb5-btn-primary:hover {
  background: var(--cb5-primary-hover);
  border-color: var(--cb5-primary-hover);
}

.cb5-btn-secondary {
  background: var(--cb5-surface);
  color: var(--cb5-text-primary);
  border-color: var(--cb5-border-strong);
}

.cb5-btn-secondary:hover {
  background: var(--cb5-surface-raised);
}

.cb5-btn-danger {
  background: transparent;
  color: var(--cb5-error);
  border-color: var(--cb5-error);
}

.cb5-btn-danger:hover {
  background: var(--cb5-error-bg);
}

.cb5-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Small button variant — pairs with chip pills, table-row toolbars, dense menus */
.cb5-btn-sm {
  padding: 3px 10px;
  font-size: var(--cb5-text-sm);
  gap: 4px;
}

/* Compact input/select — pairs with .cb5-btn-sm for dense toolbars (RM-59 review; the
   app-wide compact-size adoption is tracked in app-todo). Keeps a uniform 26–28px control
   height next to -sm buttons. */
.cb5-input-sm,
.cb5-select-sm {
  padding: 3px 8px !important;
  font-size: var(--cb5-text-sm) !important;
  line-height: 1.3;
}

/* Icon Size= is a no-op on Blazicon (see feedback-board.css precedents) — unpinned SVGs render
   full-size and stretch compact buttons (RM-59 review round 2: Prev/Next/Copy/Legend/Shortcuts/
   Submit were taller than their text-only siblings). Pin every icon inside an -sm button. */
.cb5-btn-sm svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* --- Form Elements --- */
.cb5-form-group { margin-bottom: 16px; }

.cb5-label {
  display: block;
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-medium);
  color: var(--cb5-text-secondary);
  margin-bottom: 5px;
}

.cb5-label .required { color: var(--cb5-error); margin-left: 2px; }

/* FieldLabel help icon & popover */
.cb5-field-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  color: var(--cb5-text-secondary);
  border: 1px solid var(--cb5-border);
  border-radius: 50%;
  margin-left: 4px;
  cursor: pointer;
  vertical-align: middle;
  user-select: none;
  transition: background-color 0.15s, color 0.15s;
}
.cb5-field-help-icon:hover {
  background-color: var(--cb5-brand);
  color: var(--cb5-text-on-primary);
  border-color: var(--cb5-brand);
}
.cb5-field-help-popover {
  position: relative;
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: 6px;
  padding: 10px 28px 10px 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  max-width: 360px;
  z-index: 10;
}
.cb5-field-help-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--cb5-text-secondary);
  line-height: 1;
  padding: 0 4px;
}
.cb5-field-help-close:hover {
  color: var(--cb5-text-primary);
}

/* ── Help/Feedback Trigger (? icon) ── */
.cb5-hft-backdrop {
  position: fixed;
  inset: 0;
  z-index: 399;
}
.cb5-hft {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
}
/* Smaller icon button variant for inline use */
.cb5-icon-btn--sm {
  width: 24px;
  height: 24px;
}
.cb5-hft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cb5-text-tertiary);
  border: none;
  border-radius: var(--cb5-radius);
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: background var(--cb5-transition-fast), color var(--cb5-transition-fast);
  line-height: 1;
  padding: 0;
  font-family: inherit;
}
.cb5-hft-btn:hover {
  background: var(--cb5-surface-raised);
  color: var(--cb5-text-primary);
}

/* Page-level: always visible */
.cb5-hft-page .cb5-hft-btn {
  opacity: 1;
}

/* Field-level: hidden until parent label hovered */
.cb5-hft-field .cb5-hft-btn {
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.cb5-field-label:hover .cb5-hft-field .cb5-hft-btn {
  opacity: 1;
}

/* ── Rich help popover (HelpPopover) — replaces the retired hft dropdown menu ── */
.cb5-help-pop-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cb5-text-tertiary);
  cursor: pointer;
  border-radius: var(--cb5-radius);
  padding: 2px;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.cb5-help-pop-trigger:hover {
  color: var(--cb5-text-primary);
  background: var(--cb5-surface-raised);
}
.cb5-help-pop-trigger svg { width: 16px; height: 16px; }
.cb5-help-pop-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
/* Page-level: always visible. Field-level: revealed on label hover (or while the card is open).
   List-grid column headers reuse the same reveal, scoped per-th (spec Feature D). */
.cb5-help-pop-trigger--page { opacity: 1; }
.cb5-help-pop-trigger--field { opacity: 0; }
.cb5-field-label:hover .cb5-help-pop-trigger--field,
.lp-table th:hover .cb5-help-pop-trigger--field,
.cb5-hovercard-link.is-active .cb5-help-pop-trigger--field { opacity: 1; }

/* Read-only view caption variant (detail pages) — small/muted; keeps the ?-reveal behavior. */
.cb5-field-label--caption {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-tertiary);
  margin-bottom: 2px;
}

/* Muted trigger: field help hidden from regular users but shown (dimmed) to admins, so a hidden
   tip stays reachable/editable. Faintly visible even without hover; a bit stronger on hover. */
.cb5-help-pop-trigger--muted { color: var(--cb5-text-tertiary); }
.cb5-help-pop-trigger--field.cb5-help-pop-trigger--muted { opacity: 0.4; }
.cb5-field-label:hover .cb5-help-pop-trigger--field.cb5-help-pop-trigger--muted,
.cb5-hovercard-link.is-active .cb5-help-pop-trigger--field.cb5-help-pop-trigger--muted { opacity: 0.7; }

.cb5-help-pop {
  width: 300px;
  max-width: 340px;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  background: var(--cb5-surface);
  border: 0.5px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  box-shadow: var(--cb5-shadow-lg);
  padding: 12px 14px;
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-secondary);
}
.cb5-help-pop__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.cb5-help-pop__name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
  font-size: var(--cb5-text-base);
}
.cb5-help-pop__kind {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: var(--cb5-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cb5-text-tertiary);
  background: var(--cb5-surface-raised);
  padding: 1px 5px;
  border-radius: var(--cb5-radius-sm);
}
.cb5-help-pop__body { line-height: 1.5; }
.cb5-help-pop__body > :first-child { margin-top: 0; }
.cb5-help-pop__body > :last-child { margin-bottom: 0; }
.cb5-help-pop__footer {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 0.5px solid var(--cb5-divider);
}
.cb5-help-pop__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--cb5-text-link);
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-medium);
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--cb5-radius-sm);
  transition: background 0.1s;
}
.cb5-help-pop__action:hover { background: var(--cb5-surface-hover); }
.cb5-help-pop__action svg { width: 14px; height: 14px; }

/* Grouping header inside the tip edit slide-out (Article Attributes / Tip) */
.cb5-slideout-section-label {
  font-size: 11px;
  font-weight: var(--cb5-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cb5-text-tertiary);
  margin: 18px 0 8px;
  padding-bottom: 4px;
  border-bottom: 0.5px solid var(--cb5-divider);
}
.cb5-slideout-section-label:first-child { margin-top: 0; }

/* Search-existing-tip results in the edit slide-out */
.cb5-help-tipsearch {
  margin-top: 4px;
  border: 0.5px solid var(--cb5-border);
  border-radius: var(--cb5-radius);
  max-height: 200px;
  overflow-y: auto;
}
.cb5-help-tipsearch__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-bottom: 0.5px solid var(--cb5-divider);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.cb5-help-tipsearch__item:last-child { border-bottom: none; }
.cb5-help-tipsearch__item:hover { background: var(--cb5-surface-hover); }
.cb5-help-tipsearch__item .name {
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-medium);
  color: var(--cb5-text-primary);
}
.cb5-help-tipsearch__item .tt {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Help/Feedback Slide-out Panel ── */
.cb5-slideout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.cb5-slideout-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.cb5-slideout-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 90vw;
  background: var(--cb5-surface);
  border-left: 1px solid var(--cb5-border);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 501;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.cb5-slideout-panel.open {
  transform: translateX(0);
}
.cb5-slideout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cb5-border);
  flex-shrink: 0;
}
.cb5-slideout-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--cb5-text-primary);
}
.cb5-slideout-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.cb5-slideout-help-content {
  line-height: 1.6;
}
.cb5-slideout-article-body {
  line-height: 1.7;
}
.cb5-slideout-article-body h1,
.cb5-slideout-article-body h2,
.cb5-slideout-article-body h3 {
  margin-top: 16px;
  margin-bottom: 8px;
}
/* ── Rich Text Editor (Quill overrides) ── */
.cb5-rich-editor {
  min-height: 200px;
  background: var(--cb5-surface);
  color: var(--cb5-text-primary);
  border-radius: 0 0 var(--cb5-radius) var(--cb5-radius);
}
.cb5-rich-editor .ql-editor {
  min-height: 200px;
  font-size: var(--cb5-text-sm);
  line-height: 1.7;
  font-family: inherit;
}
.ql-toolbar.ql-snow {
  border-color: var(--cb5-border) !important;
  border-radius: var(--cb5-radius) var(--cb5-radius) 0 0;
  background: var(--cb5-surface-raised);
}
.ql-container.ql-snow {
  border-color: var(--cb5-border) !important;
}
[data-theme="dark"] .ql-toolbar.ql-snow .ql-stroke { stroke: var(--cb5-text-secondary); }
[data-theme="dark"] .ql-toolbar.ql-snow .ql-fill { fill: var(--cb5-text-secondary); }
[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker-label { color: var(--cb5-text-secondary); }
[data-theme="dark"] .ql-toolbar.ql-snow button:hover .ql-stroke { stroke: var(--cb5-text-primary); }
[data-theme="dark"] .ql-editor.ql-blank::before { color: var(--cb5-text-tertiary); }

/* ── Article body (HTML-rendered help content) ──
   Heading convention for authored markdown:
     ## Title       — page-level orientation (chapter break, bottom border)
     ### Tab name   — tabs and major sections (brand-color left bar marker)
     #### Subsection — inline-bold style for content within a tab
*/
.cb5-article-body { line-height: 1.7; font-size: var(--cb5-text-sm); }

.cb5-article-body h2 {
  font-size: 1.35em;
  font-weight: 700;
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cb5-border);
  color: var(--cb5-text-primary);
}
.cb5-article-body h2:first-child { margin-top: 0; }

.cb5-article-body h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin: 26px 0 10px;
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--cb5-brand);
  color: var(--cb5-text-primary);
}

.cb5-article-body h4 {
  font-size: 1em;
  font-weight: 600;
  margin: 16px 0 6px;
  color: var(--cb5-text-primary);
}

.cb5-article-body p { margin: 0 0 10px; }
.cb5-article-body ul { margin: 0 0 10px; padding-left: 20px; }
.cb5-article-body li { margin-bottom: 4px; }

.cb5-slideout-full-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--cb5-brand);
  text-decoration: none;
  font-weight: 500;
}
.cb5-slideout-full-link:hover {
  text-decoration: underline;
}
.cb5-slideout-divider {
  height: 1px;
  background: var(--cb5-border);
  margin: 16px 0;
}
.cb5-slideout-feedback-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cb5-slideout-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cb5-slideout-type-toggle {
  display: flex;
  gap: 8px;
}
.cb5-slideout-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.cb5-input,
.cb5-select {
  width: 100%;
  min-width: 120px;
  padding: 7px 10px;
  font-size: var(--cb5-text-sm);
  font-family: var(--cb5-font);
  color: var(--cb5-text-primary);
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border-strong);
  border-radius: var(--cb5-radius);
  transition: border-color var(--cb5-transition-fast),
              box-shadow var(--cb5-transition-fast);
  outline: none;
}

.cb5-input:focus,
.cb5-select:focus {
  border-color: var(--cb5-primary);
  box-shadow: 0 0 0 3px var(--cb5-primary-light);
}

.cb5-input:disabled,
.cb5-select:disabled {
  background: var(--cb5-bg-secondary);
  color: var(--cb5-text-tertiary);
  cursor: not-allowed;
}

/* --- Table --- */
.cb5-table-wrap {
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  overflow: hidden;
  background: var(--cb5-surface);
}

.cb5-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cb5-text-sm);
}

.cb5-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--cb5-bg-secondary);
  border-bottom: 1px solid var(--cb5-border);
}

.cb5-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--cb5-divider);
  color: var(--cb5-text-primary);
}

.cb5-table tr:last-child td { border-bottom: none; }

.cb5-table tbody tr {
  cursor: pointer;
  transition: background var(--cb5-transition-fast);
}

.cb5-table tbody tr:hover { background: var(--cb5-bg-secondary); }

/* Linked name in table rows — primary navigation action */
.cb5-table .cb5-link {
  color: var(--cb5-primary);
  text-decoration: none;
  font-weight: var(--cb5-weight-medium);
  cursor: pointer;
}
.cb5-table .cb5-link:hover {
  text-decoration: underline;
}

/* Row action icons — compact icon buttons at row end */
.cb5-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.cb5-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: var(--cb5-radius);
  color: var(--cb5-text-tertiary);
  cursor: pointer;
  transition: background var(--cb5-transition-fast), color var(--cb5-transition-fast);
}
.cb5-row-action:hover {
  background: var(--cb5-surface-hover);
  color: var(--cb5-primary);
}
.cb5-row-action--danger {
  color: var(--cb5-error);
  opacity: 0.6;
}
.cb5-row-action--danger:hover {
  background: rgba(var(--cb5-error-rgb), 0.1);
  color: var(--cb5-error);
  opacity: 1;
}

/* --- Prototype + file upload zones (shared look) --- */
.cb5-prototype-upload-zone,
.cb5-file-upload-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  margin-bottom: 12px;
  border: 2px dashed var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  background: var(--cb5-bg-secondary);
  color: var(--cb5-text-muted);
  transition: border-color var(--cb5-transition-fast), background var(--cb5-transition-fast);
}
.cb5-prototype-upload-zone:hover,
.cb5-prototype-upload-zone--active,
.cb5-file-upload-zone:hover,
.cb5-file-upload-zone--active {
  border-color: var(--cb5-primary);
  background: var(--cb5-primary-light);
  color: var(--cb5-primary);
}

/* --- Prototype iframe viewer --- */
.cb5-prototype-frame-wrap {
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  overflow: hidden;
  background: var(--cb5-surface);
  position: relative;
}
.cb5-prototype-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--cb5-bg-secondary);
  border-bottom: 1px solid var(--cb5-border);
}
.cb5-prototype-frame {
  width: 100%;
  min-height: 600px;
  height: calc(100vh - 320px);
  border: none;
  display: block;
}

/* Expanded: full viewport overlay, hides sidebar and header */
.cb5-prototype-expanded {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  border-radius: 0;
  border: none;
}
.cb5-prototype-expanded .cb5-prototype-frame {
  height: calc(100vh - 36px);
  min-height: 0;
}

/* --- Card Groups (grouped stat cards with shared label) --- */
.cb5-card-groups {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cb5-card-group {
  flex: 1 1 300px;
  background: var(--cb5-bg-secondary);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  padding: 10px 12px 8px;
}
.cb5-card-group-label {
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.cb5-card-group-items {
  display: flex;
  gap: 0;
}
/* Cards inside a group: no individual border, share the group background */
.cb5-card-group-items .cb5-count-card {
  border: none;
  border-radius: var(--cb5-radius);
  background: transparent;
  min-width: 70px;
  flex: 1 1 70px;
  padding: 4px 10px;
  outline: none;
}
.cb5-card-group-items .cb5-count-card:hover:not(.cb5-count-card--active) {
  background: var(--cb5-surface-hover);
}
.cb5-card-group-items .cb5-count-card--active,
.cb5-card-group-items .cb5-count-card--active:focus,
.cb5-card-group-items .cb5-count-card--active:hover {
  background: var(--cb5-primary-light);
}

/* --- Toggle Chips (boolean filter pills) --- */
.cb5-toggle-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cb5-toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-medium);
  color: var(--cb5-text-secondary);
  background: var(--cb5-bg-secondary);
  border: 1px solid var(--cb5-border);
  border-radius: 100px;
  cursor: pointer;
  transition: all var(--cb5-transition-fast);
}
.cb5-toggle-chip:hover {
  border-color: var(--cb5-primary);
  color: var(--cb5-text-primary);
}
.cb5-toggle-chip--active {
  background: var(--cb5-primary-light);
  border-color: var(--cb5-primary);
  color: var(--cb5-primary);
  font-weight: var(--cb5-weight-semibold);
}
.cb5-toggle-chip--alert.cb5-toggle-chip--active {
  background: rgba(var(--cb5-error-rgb), 0.1);
  border-color: var(--cb5-error);
  color: var(--cb5-error);
}
.cb5-toggle-chip--warning.cb5-toggle-chip--active {
  background: rgba(var(--cb5-warning-rgb), 0.1);
  border-color: var(--cb5-warning);
  color: var(--cb5-warning);
}
.cb5-toggle-chip--success.cb5-toggle-chip--active {
  background: rgba(var(--cb5-success-rgb), 0.1);
  border-color: var(--cb5-success);
  color: var(--cb5-success);
}
.cb5-toggle-chip-check {
  font-size: 10px;
  line-height: 1;
}

/* --- Count Cards (reusable clickable stat cards) --- */
.cb5-count-cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.cb5-count-card {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 0.75rem 1rem;
  background: var(--cb5-bg-secondary);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--cb5-text-primary);
  transition: border-color var(--cb5-transition-fast), background var(--cb5-transition-fast);
}
.cb5-count-card:hover {
  border-color: var(--cb5-primary);
  background: var(--cb5-surface-hover);
}
.cb5-count-card--active,
.cb5-count-card--active:focus,
.cb5-count-card--active:hover {
  border-color: var(--cb5-primary);
  background: var(--cb5-primary-light);
}
.cb5-count-card:focus {
  outline: none;
}
.cb5-count-card--alert  { border-color: var(--cb5-error); }
.cb5-count-card--success { border-color: var(--cb5-success); }
.cb5-count-card--warning { border-color: var(--cb5-warning); }
.cb5-count-card--active.cb5-count-card--alert  { background: rgba(var(--cb5-error-rgb), 0.08); }
.cb5-count-card--active.cb5-count-card--success { background: rgba(var(--cb5-success-rgb), 0.08); }
.cb5-count-card--active.cb5-count-card--warning { background: rgba(var(--cb5-warning-rgb), 0.08); }

.cb5-count-card-label {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--cb5-weight-semibold);
  margin-bottom: 2px;
}
.cb5-count-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cb5-text-primary);
  line-height: 1.2;
}
.cb5-count-card-sub {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-muted);
  margin-top: 2px;
}
.cb5-count-card-accent--alert   { color: var(--cb5-error) !important; }
.cb5-count-card-accent--success { color: var(--cb5-success) !important; }
.cb5-count-card-accent--warning { color: var(--cb5-warning) !important; }

/* --- Sortable Table Headers --- */
.cb5-sortable-header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}
.cb5-sortable-header:hover {
  color: var(--cb5-primary);
}
.cb5-sortable-header.active {
  color: var(--cb5-primary);
  font-weight: var(--cb5-weight-semibold);
}
.cb5-sort-icon {
  font-size: 9px;
  line-height: 1;
}

/* --- Line Clamp Utilities --- */
.cb5-line-clamp-1,
.cb5-line-clamp-2,
.cb5-line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cb5-line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.cb5-line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.cb5-line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* --- Sticky Save Bar --- */
.cb5-sticky-save-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: var(--cb5-surface);
  border-top: 2px solid var(--cb5-warning);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  z-index: 50;
}

/* --- Badges --- */
.cb5-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  border-radius: var(--cb5-radius-full);
  white-space: nowrap;
}

.cb5-badge-success  { background: var(--cb5-success-bg);  color: var(--cb5-success); }
.cb5-badge-warning  { background: var(--cb5-warning-bg);  color: var(--cb5-warning-fg); }
.cb5-badge-error    { background: var(--cb5-error-bg);    color: var(--cb5-error); }
.cb5-badge-info     { background: var(--cb5-info-bg);     color: var(--cb5-info); }
.cb5-badge-neutral  { background: var(--cb5-surface-raised); color: var(--cb5-text-secondary); }
.cb5-badge-primary  { background: var(--cb5-primary-light); color: var(--cb5-primary); }

/* --- Permission affordances ---
   Styling for the <Permission> wrapper's three modes. Spec:
   docs/sdd/specs/authz/ui-affordances/ui-affordances.md
   - cb5-permission-disabled: DisableWithTooltip mode wrapper. Visually mutes the child
     and overlays a tooltip-only shroud so clicks don't reach the disabled control.
   - cb5-readonly: ReadOnlyPanel mode wrapper. Defense-in-depth CSS that suppresses common
     edit-affordance selectors for child components that haven't honored the IsReadOnly
     cascading parameter directly. Primary mechanism is the cascading parameter; CSS is fallback.
   - cb5-readonly-badge: "View only" pill rendered at the top of a read-only panel. */

.cb5-permission-disabled {
  position: relative;
  display: inline-block;
  opacity: 0.55;
  cursor: not-allowed;
}
.cb5-permission-disabled > * {
  pointer-events: none;
  filter: grayscale(0.2);
}
.cb5-permission-disabled__shroud {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: not-allowed;
}

.cb5-readonly {
  position: relative;
}
/* Suppress edit-affordance buttons/icons not aware of the IsReadOnly cascading parameter.
   Defense-in-depth — CB5-built components should already honor the parameter; this catches
   stragglers (third-party widgets, not-yet-updated panels). */
.cb5-readonly .cb5-btn-primary,
.cb5-readonly .cb5-btn-danger,
.cb5-readonly [data-edit-affordance],
.cb5-readonly button[type="submit"] {
  display: none !important;
}
/* Form inputs in a readonly panel — visually mute and block clicks. Pages that want input
   suppression to skip rendering inputs entirely (the preferred pattern) won't hit this rule. */
.cb5-readonly input:not([readonly]),
.cb5-readonly select,
.cb5-readonly textarea {
  pointer-events: none;
  background: var(--cb5-surface-raised);
}

.cb5-readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  border-radius: var(--cb5-radius-full);
  background: var(--cb5-surface-raised);
  color: var(--cb5-text-secondary);
  margin-bottom: 8px;
  white-space: nowrap;
  cursor: help;
}
.cb5-readonly-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cb5-text-secondary);
  display: inline-block;
}

/* --- /forbidden page ---
   Branded access-denied page rendered inside MainLayout. Centered card-like layout
   that stays compact and readable; sidebar + header remain functional. */
.cb5-forbidden {
  max-width: 560px;
  margin: 48px auto;
  text-align: center;
  padding: 0 16px;
}
.cb5-forbidden__icon {
  color: var(--cb5-warning);
  margin-bottom: 16px;
}
.cb5-forbidden__title {
  font-size: var(--cb5-text-2xl);
  font-weight: var(--cb5-weight-semibold);
  margin: 0 0 12px;
  color: var(--cb5-text-primary);
}
.cb5-forbidden__lead {
  font-size: var(--cb5-text-base);
  color: var(--cb5-text-secondary);
  margin: 0 0 16px;
}
.cb5-forbidden__context {
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-tertiary);
  margin: 0 0 24px;
}
.cb5-forbidden__context code {
  background: var(--cb5-surface-raised);
  padding: 2px 6px;
  border-radius: var(--cb5-radius-sm);
  font-size: var(--cb5-text-xs);
  word-break: break-all;
}
.cb5-forbidden__contact {
  text-align: left;
  margin: 16px 0 24px;
}
.cb5-forbidden__contact-label {
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-secondary);
  font-size: var(--cb5-text-sm);
  margin-bottom: 8px;
}
.cb5-forbidden__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* --- <RecordNotFound> inline state ---
   Lighter than the full /forbidden page — renders inside a detail page's chrome when the
   record fetch returns 404. Dual-meaning per authz.md decision #34 ("not found or no access"). */
.cb5-recordnotfound {
  max-width: 520px;
  margin: 48px auto;
  text-align: center;
  padding: 16px;
}
.cb5-recordnotfound__icon {
  color: var(--cb5-text-tertiary);
  margin-bottom: 12px;
}
/* Blazicon ignores Icon Size= (renders 24x24 intrinsic) — pin per container, see CLAUDE.md icon sizing */
.cb5-recordnotfound__icon svg {
  width: 40px;
  height: 40px;
}
.cb5-recordnotfound__title {
  font-size: var(--cb5-text-xl);
  font-weight: var(--cb5-weight-semibold);
  margin: 0 0 10px;
  color: var(--cb5-text-primary);
}
.cb5-recordnotfound__lead {
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-secondary);
  margin: 0 0 20px;
}
.cb5-recordnotfound__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* --- Alerts --- */
.cb5-alert {
  padding: 10px 14px;
  border-radius: var(--cb5-radius);
  font-size: var(--cb5-text-sm);
  border: 1px solid transparent;
  margin-bottom: 16px;
}

.cb5-alert-success { background: var(--cb5-success-bg); color: var(--cb5-success); border-color: var(--cb5-success); }
.cb5-alert-error   { background: var(--cb5-error-bg);   color: var(--cb5-error);   border-color: var(--cb5-error); }
.cb5-alert-info    { background: var(--cb5-info-bg);     color: var(--cb5-info);    border-color: var(--cb5-info); }

/* --- Utilities --- */
.cb5-flex         { display: flex; }
.cb5-flex-center  { display: flex; align-items: center; }
.cb5-gap-2        { gap: 8px; }
.cb5-gap-3        { gap: 12px; }
.cb5-mt-4         { margin-top: 16px; }
.cb5-mb-4         { margin-bottom: 16px; }
.cb5-text-muted   { color: var(--cb5-text-tertiary); font-size: var(--cb5-text-sm); }
.cb5-spinner      {
  width: 20px; height: 20px;
  border: 2px solid var(--cb5-border);
  border-top-color: var(--cb5-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Form Grid (12-col) --- */
.cb5-form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.cb5-col-1  { grid-column: span 1; }
.cb5-col-2  { grid-column: span 2; }
.cb5-col-3  { grid-column: span 3; }
.cb5-col-4  { grid-column: span 4; }
.cb5-col-5  { grid-column: span 5; }
.cb5-col-6  { grid-column: span 6; }
.cb5-col-7  { grid-column: span 7; }
.cb5-col-8  { grid-column: span 8; }
.cb5-col-9  { grid-column: span 9; }
.cb5-col-10 { grid-column: span 10; }
.cb5-col-11 { grid-column: span 11; }
.cb5-col-12 { grid-column: span 12; }
@media (max-width: 640px) {
  .cb5-form-grid > [class^="cb5-col-"] { grid-column: span 12; }
}

/* --- Form Sections --- */
.cb5-form-section { margin-bottom: 24px; }
.cb5-form-section:last-of-type { margin-bottom: 0; }
.cb5-form-section-title {
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cb5-divider);
}

/* --- Form Actions --- */
.cb5-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--cb5-divider);
}

.cb5-form-actions--end {
  justify-content: flex-end;
}

.cb5-form-actions--compact {
  margin-top: 12px;
  padding-top: 12px;
}

/* --- Save Feedback Banner --- */
/* Inline success/error feedback for form saves. Auto-dismisses via Blazor code. */
.cb5-save-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--cb5-radius);
  font-size: var(--cb5-text-sm);
  font-weight: 500;
  animation: cb5-banner-in 0.2s ease-out;
}

.cb5-save-banner--success {
  background: var(--cb5-pmo-soft-pos);
  color: var(--cb5-success-fg);
}

.cb5-save-banner--error {
  background: var(--cb5-error-bg);
  color: var(--cb5-error-fg);
}

.cb5-save-banner.fade-out {
  animation: cb5-banner-out 0.5s ease-in forwards;
}

@keyframes cb5-banner-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cb5-banner-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* --- Checkbox --- */
.cb5-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-primary);
  user-select: none;
}
.cb5-checkbox input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--cb5-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* --- Detail View (read-only fields) --- */
.cb5-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
.cb5-field-label {
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}
.cb5-field-value {
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-primary);
  word-break: break-word;
}
.cb5-field-value.empty { color: var(--cb5-text-tertiary); }

/* --- Sub-entity Panels (roles, addresses) --- */
.cb5-panel {
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  overflow: hidden;
  background: var(--cb5-surface);
  box-shadow: var(--cb5-shadow-sm);
}
.cb5-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--cb5-bg-secondary);
  border-bottom: 1px solid var(--cb5-border);
}
.cb5-panel-title {
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
}
.cb5-panel-body { padding: 0; }
.cb5-panel-empty {
  padding: 20px 16px;
  color: var(--cb5-text-tertiary);
  font-size: var(--cb5-text-sm);
}
.cb5-panel-spinner {
  padding: 20px 16px;
  display: flex;
  justify-content: center;
}
.cb5-panel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cb5-text-sm);
}
.cb5-panel-table th {
  padding: 8px 16px;
  text-align: left;
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--cb5-bg-secondary);
  border-bottom: 1px solid var(--cb5-border);
}
.cb5-panel-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--cb5-divider);
  color: var(--cb5-text-primary);
}
.cb5-panel-table tr:last-child td { border-bottom: none; }

/* --- Inline Form (inside panels) --- */
.cb5-inline-form {
  padding: 16px;
  background: var(--cb5-bg-secondary);
  border-top: 1px solid var(--cb5-border);
}
.cb5-inline-form-title {
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
  margin-bottom: 12px;
}
.cb5-inline-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* ── Login / Auth pages ── */
.cb5-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cb5-brand) 0%, var(--cb5-brand-dark) 100%);
}
.cb5-login-card {
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-lg);
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--cb5-shadow-md);
}
.cb5-login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
}
.cb5-login-wordmark {
  font-size: 22px;
  font-weight: var(--cb5-weight-bold);
  color: var(--cb5-brand);
  line-height: 1;
}
.cb5-login-tagline {
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-tertiary);
}
.cb5-login-title {
  font-size: var(--cb5-text-xl);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
  margin: 0 0 24px;
  text-align: center;
}
.cb5-login-env {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
}
.cb5-login-env-label {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--env-color, #F57F26);
}
.cb5-login-env-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  cursor: help;
}

/* ── User menu ── */
.cb5-user-menu {
  position: relative;
  display: flex;
  align-items: center;
}
.cb5-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background: transparent;
}
.cb5-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.875rem;
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-brand);
  border-radius: 50%;
  background-color: var(--cb5-text-on-primary);
}
.cb5-user-avatar--anon {
  text-decoration: none;
  color: rgba(255,255,255,0.45);
  border: 1.5px solid rgba(255,255,255,0.2);
  transition: color 0.15s, border-color 0.15s;
}
.cb5-user-avatar--anon:hover {
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.45);
}

.cb5-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  z-index: var(--cb5-z-dropdown);
  padding: 4px 0;
}
.cb5-user-dropdown-name {
  padding: 8px 12px;
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
}
.cb5-user-dropdown-divider {
  border: none;
  border-top: 1px solid var(--cb5-border);
  margin: 0;
}
.cb5-user-dropdown-item {
  display: block;
  padding: 8px 12px;
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-primary);
  text-decoration: none;
  cursor: pointer;
}
.cb5-user-dropdown-item:hover {
  background: var(--cb5-bg-secondary);
}
.cb5-user-dropdown-footer {
  padding: 6px 12px;
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-muted);
  cursor: default;
  user-select: text;
}

/* ── Generic dropdown menu (reusable action menus) ── */
.cb5-dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--cb5-z-dropdown) - 1);
}
.cb5-dropdown-menu {
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  z-index: var(--cb5-z-dropdown);
  padding: 4px 0;
}
.cb5-dropdown-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 12px;
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-primary);
  background: none;
  border: none;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.cb5-dropdown-item:hover {
  background: var(--cb5-bg-secondary);
}
.cb5-dropdown-divider {
  border: none;
  border-top: 1px solid var(--cb5-border);
  margin: 4px 0;
}

/* ── Time Entry Grid ── */

/* P0-D2 (RM-59): the grid scrolls INSIDE its own container so the page (actions, notes) stays put
   — the max-height is what makes the long-declared sticky thead actually engage. Recipe mirrors
   .cb5-actuals-* (the All Resources tab): sticky header (z2), sticky-left first column (z1),
   sticky corner (z3), sticky tfoot totals (z2, corner z3). */
.cb5-time-grid-wrap {
  overflow: auto;
  max-height: max(320px, calc(100vh - 360px));
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
}

.cb5-time-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cb5-text-sm);
  min-width: 700px;
}

.cb5-time-grid th,
.cb5-time-grid td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cb5-border);
  vertical-align: middle;
  white-space: nowrap;
}

.cb5-time-grid thead th {
  background: var(--cb5-bg-secondary);
  font-weight: var(--cb5-weight-medium);
  font-size: 0.75rem;
  color: var(--cb5-text-muted);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 2;
}

.cb5-time-grid-task {
  min-width: 240px;
  max-width: 320px;
  text-align: left !important;
  white-space: normal !important;
}

/* P0-D2: frozen first column — task names stay visible when scrolled right. Cells need an opaque
   background (sticky paints over scrolling content). */
.cb5-time-grid tbody td.cb5-time-grid-task {
  position: sticky;
  left: 0;
  background: var(--cb5-bg);
  z-index: 1;
}
.cb5-time-grid-row:hover td.cb5-time-grid-task {
  background: var(--cb5-bg-secondary);
}
/* Sticky corner: the header's task cell pins both axes and sits above both sticky planes. */
.cb5-time-grid thead th.cb5-time-grid-task {
  position: sticky;
  left: 0;
  z-index: 3;
}

/* P0-D2 / Q7: totals stay pinned at the bottom of the scroll region. */
.cb5-time-grid tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--cb5-bg-secondary);
  z-index: 2;
  border-top: 2px solid var(--cb5-border);
}
.cb5-time-grid tfoot td.cb5-time-grid-task {
  position: sticky;
  left: 0;
  bottom: 0;
  z-index: 3;
}

/* ── RM-59 P2: cell signal system (design handoff §4) — non-competing channels ─────────────
   value/weight = has-hours vs empty · left edge = dirty · fill = day facts · corner chip = notes
   · hatch = locked. Signals combine without ambiguity. */

/* Values are mono; empty (0) cells read tertiary. */
.cb5-time-grid-input { font-family: var(--cb5-font-mono); }
.cb5-time-grid-input--zero { color: var(--cb5-text-muted); }
.cb5-time-grid-total { font-family: var(--cb5-font-mono); }

/* Dirty (unsaved) = 3px primary left edge + semibold value (supersedes the P0 warning border). */
.cb5-time-grid-cell--dirty {
  box-shadow: inset 3px 0 0 var(--cb5-primary);
}
.cb5-time-grid-cell--dirty .cb5-time-grid-input {
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
}

/* Org holiday — day-fact fill (header already stars + labels it). */
.cb5-time-grid-cell--holiday {
  background: var(--rp-cap-holiday-bg);
}

/* Locked/read-only — 135° 9%-neutral hatch + muted text (design §4; no token exists for a
   9% neutral hatch stripe, hence the literal rgba). */
.cb5-time-grid-cell--readonly {
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(100, 116, 139, 0.09) 6px 7px);
}

/* Notes chip (filled = orange square): the authoritative rule lives with the base
   .cb5-time-grid-note block further down — CSS order matters there. */

/* P0-D1: unsaved-cells chip beside the save actions. */
.cb5-time-grid-unsaved {
  color: var(--cb5-warning);
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-medium);
  white-space: nowrap;
}

/* ── RM-59 P3: project/task hover mentions in the row label. Quiet by default (the label reads
   as text, per the design mock); link affordance on hover. ── */
.cb5-time-grid-mention {
  color: inherit;
  text-decoration: none;
}
.cb5-time-grid-mention:hover {
  color: var(--cb5-primary);
  text-decoration: underline;
}

/* The hover card renders position:fixed inside the STICKY first column — a local stacking context
   (position:sticky + z-index) that sibling rows' sticky cells would otherwise paint over (the
   trapped-card bug; same fix as pmo-console.css). Lift the hovered/pinned row's task cell. */
.cb5-time-grid tbody tr:hover td.cb5-time-grid-task,
.cb5-time-grid tbody tr:has(.cb5-hovercard-link.is-active) td.cb5-time-grid-task {
  z-index: 20;
}

/* ── RM-59 P2: section subheads inside the grid ("Time off" / "Project work") ── */
.cb5-time-grid-section td {
  background: var(--cb5-bg-secondary);
  font-size: 0.68rem;
  font-weight: var(--cb5-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cb5-text-muted);
  padding: 4px 10px;
}

/* ── RM-59: identity-band summary, ONE line (review 2026-08-06) —
   "40 scheduled · 42.00 ✓" — small muted scheduled label, large mono actual, trailing state
   icon (✓ met; ✗ only once the week has ended under). ── */
.cb5-time-meter {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.cb5-time-meter__sched,
.cb5-time-meter__dot {
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-muted);
}
.cb5-time-meter__value {
  font-family: var(--cb5-font-mono);
  font-size: 1.35rem;
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
  line-height: 1;
}
.cb5-time-meter__ok { color: var(--cb5-success); align-self: center; display: inline-flex; }
.cb5-time-meter__ok svg { width: 16px; height: 16px; flex: none; } /* Icon Size= no-op — pin */

/* THE status surface — one pill, centered in the title row (review round 2). Reuses the
   cb5-badge status colors; a Rejected pill carries the "reason" popup link. */
.cb5-time-state {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}
.cb5-time-state__pill {
  font-size: var(--cb5-text-sm);
  padding: 3px 12px;
  gap: 8px;
  max-width: 100%;
}
.cb5-time-state__pilltext {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb5-time-state__reason {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  flex: none;
}

/* Person picker cluster (band 2, right side) — FieldLabel is block-styled for forms; centered here. */
.cb5-time-person {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
/* FieldLabel here renders "PERSON" + the help "?" trigger; as a shrinkable block in the flex row
   the trigger WRAPPED to a second line — a two-line label that read as top-aligned AND grew band 2
   only on the Timesheet tab (the tab-switch height jump; review round 3). Keep it one line, no shrink. */
.cb5-time-person .cb5-field-label,
.cb5-time-person .cb5-label {
  margin: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex: none;
}

/* ── RM-59 P2: the sticky action row (design §2). Sticks below the RM-52 page-tab strip
   (sticky top:0, ~36px tall) inside the scrolling content column. ── */
.cb5-time-actions {
  position: sticky;
  top: 36px;
  z-index: 20; /* above the grid's sticky planes (≤3), below header/modals */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--cb5-bg);
  padding: 8px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--cb5-border);
}
.cb5-ta-divider {
  width: 1px;
  align-self: stretch;
  background: var(--cb5-border);
  margin: 2px 4px;
}
/* Save All "armed" while dirty — brand outline on the shared button geometry. */
.cb5-btn--armed {
  border-color: var(--cb5-primary) !important;
  color: var(--cb5-primary) !important;
}

/* Anchored popovers under the action-row buttons — the row never reflows (design §2). */
.cb5-ta-pop-host { position: relative; }
.cb5-ta-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 12px;
}
.cb5-ta-pop__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.cb5-ta-backdrop {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: transparent;
}

/* Legend / shortcuts popovers */
.cb5-ta-legend, .cb5-ta-shortcuts { min-width: 280px; }
.cb5-ta-legend__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cb5-text-sm);
  padding: 3px 0;
}
.cb5-ta-legend__hint {
  margin-top: 8px;
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-muted);
}
.cb5-ta-sw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 24px;
  border: 1px solid var(--cb5-border);
  border-radius: 3px;
  font-family: var(--cb5-font-mono);
  font-size: 0.75rem;
  flex: none;
  position: relative;
}
.cb5-ta-sw--dirty { box-shadow: inset 3px 0 0 var(--cb5-primary); font-weight: var(--cb5-weight-semibold); }
.cb5-ta-sw--nonworking { background: var(--cb5-bg-secondary); }
.cb5-ta-sw--holiday { background: var(--rp-cap-holiday-bg); }
.cb5-ta-sw--warning { background: var(--cb5-warning-bg); }
.cb5-ta-sw--locked { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(100, 116, 139, 0.09) 6px 7px); }
.cb5-ta-sw-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--cb5-brand-accent);
  color: var(--cb5-text-on-primary);
  border-radius: 3px;
}
.cb5-ta-sw-note svg { width: 10px; height: 10px; flex: none; } /* Icon Size= no-op — pin */
.cb5-ta-shortcuts kbd {
  font-family: var(--cb5-font-mono);
  font-size: 0.72rem;
  background: var(--cb5-bg-secondary);
  border: 1px solid var(--cb5-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── RM-59 P2: notes dock (design §6) — .cb5-lep chrome at 352px; the page pads right so
   the grid is never covered (that's what makes a backdrop unnecessary). ── */
.cb5-lep--notes { width: 352px; max-width: 90vw; }
.cb5-page.cb5-time-dock-open { padding-right: 364px; }
.cb5-time-notes__eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb5-text-muted);
}
.cb5-time-notes__proj {
  font-weight: var(--cb5-weight-semibold);
  font-size: var(--cb5-text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb5-time-notes__task { font-size: var(--cb5-text-xs); color: var(--cb5-text-secondary); }
.cb5-time-notes__body { display: flex; flex-direction: column; }
.cb5-time-notes__text {
  flex: 1;
  min-height: 200px;
  resize: none;
  width: 100%;
}
.cb5-time-notes__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.cb5-time-grid-cell {
  text-align: center;
  min-width: 70px;
  padding: 4px 6px !important;
}

.cb5-time-grid-input {
  width: 60px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--cb5-radius-sm);
  background: transparent;
  color: inherit;
  font-size: var(--cb5-text-sm);
  padding: 4px;
  outline: none;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.cb5-time-grid-input::-webkit-outer-spin-button,
.cb5-time-grid-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cb5-time-grid-input:focus {
  border-color: var(--cb5-primary);
  background: var(--cb5-bg);
}
.cb5-time-grid-input:disabled {
  cursor: default;
  color: var(--cb5-text-muted);
}

.cb5-time-grid-row:hover {
  background: var(--cb5-bg-secondary);
}

.cb5-time-grid-row td {
  border-right: 1px solid var(--cb5-border);
}

.cb5-time-grid-total {
  font-weight: var(--cb5-weight-medium);
  text-align: center;
  min-width: 60px;
  background: var(--cb5-bg-secondary);
}

.cb5-time-grid-footer td {
  background: var(--cb5-bg-secondary);
  font-weight: var(--cb5-weight-medium);
  font-size: 0.8rem;
  border-top: 2px solid var(--cb5-border);
}

.cb5-time-grid-cell--readonly .cb5-time-grid-input {
  color: var(--cb5-text-muted);
  pointer-events: none;
}

.cb5-time-grid-cell--warning,
.cb5-time-grid-cell--warning .cb5-time-grid-input {
  background: rgba(var(--cb5-warning-rgb), 0.12);
  color: var(--cb5-warning);
}

.cb5-time-grid-cell--selected {
  background: rgba(var(--cb5-primary-rgb), 0.08);
}

/* Non-working day on the person's schedule (e.g. weekend on a Mon-Fri schedule).
   Subtle grey treatment; entries are still permitted (overflow / off-day work). */
.cb5-time-grid-cell--nonworking {
  background: rgba(0, 0, 0, 0.03);
}
.cb5-time-grid-cell--nonworking .cb5-time-grid-input {
  color: var(--cb5-text-muted);
}

/* ── RM-59 P2/P5: tablet compression (~1024px; design §9) — meter and role chip give first,
   then the frozen first column narrows (hover cards carry the full names in P3).
   MUST sit AFTER the .cb5-time-grid-* base rules — same specificity, source order decides
   (P5 fix: the cell min-width was silently dead when this block preceded the base rule). ── */
@media (max-width: 1180px) {
  .cb5-time-meter { display: none; }
  .cb5-time-grid-task .cb5-badge { display: none; }
  .cb5-time-grid-task { min-width: 196px; max-width: 220px; }
  .cb5-time-grid-cell { min-width: 64px; }
  .cb5-lep--notes { width: 300px; }
  .cb5-page.cb5-time-dock-open { padding-right: 312px; }
  .cb5-ta-copy-label { font-size: 0; }
  .cb5-ta-copy-label::after { content: "Copy"; font-size: var(--cb5-text-sm); }
}

/* Badge error variant (for Rejected status) */
.cb5-badge-error {
  background: var(--cb5-danger-bg);
  color: var(--cb5-danger);
}

/* ── Resource Planning Grid ── */

.cb5-plan-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
}

.cb5-plan-grid {
  border-collapse: collapse;
  font-size: 0.75rem;
  width: 100%;
}

.cb5-plan-grid th,
.cb5-plan-grid td {
  border: 1px solid var(--cb5-border);
  padding: 0;
  vertical-align: middle;
  white-space: nowrap;
}

/* Sticky day header */
.cb5-plan-grid thead th {
  background: var(--cb5-bg-secondary);
  font-weight: var(--cb5-weight-medium);
  color: var(--cb5-text-muted);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 2px 4px;
  min-width: 48px;
}

/* First column — sticky left */
.cb5-plan-grid-task {
  min-width: 200px;
  max-width: 260px;
  text-align: left !important;
  white-space: normal !important;
  padding: 6px 10px !important;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--cb5-surface);
}
thead .cb5-plan-grid-task {
  z-index: 4;
  background: var(--cb5-bg-secondary);
}

/* Total column — sticky right */
.cb5-plan-grid-total {
  min-width: 56px;
  text-align: center;
  font-weight: var(--cb5-weight-medium);
  padding: 4px 6px !important;
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--cb5-bg-secondary);
}
thead .cb5-plan-grid-total {
  z-index: 4;
}

/* Day cells */
.cb5-plan-grid-cell {
  text-align: center;
  min-width: 48px;
  padding: 2px !important;
}

.cb5-plan-grid-cell input[type="number"] {
  width: 40px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--cb5-radius-sm);
  background: transparent;
  color: inherit;
  font-size: 0.72rem;
  padding: 3px 2px;
  outline: none;
  -moz-appearance: textfield;
}
.cb5-plan-grid-cell input[type="number"]::-webkit-outer-spin-button,
.cb5-plan-grid-cell input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.cb5-plan-grid-cell input[type="number"]:focus {
  border-color: var(--cb5-brand);
  background: var(--cb5-bg);
}

/* Capacity row */
.cb5-plan-grid-capacity-row td {
  background: rgba(99, 102, 241, 0.04);
  font-size: 0.7rem;
  padding: 4px 3px !important;
}
.cb5-plan-grid-capacity-row .cb5-plan-grid-task {
  font-weight: var(--cb5-weight-semibold);
  font-size: 0.72rem;
  color: var(--cb5-text-muted);
  background: rgba(99, 102, 241, 0.04);
}

/* Cell state variants */
.cb5-plan-grid-cell--nonworking {
  background: var(--cb5-bg-secondary) !important;
  color: var(--cb5-text-muted) !important;
}
.cb5-plan-grid-cell--holiday {
  background: rgba(59, 130, 246, 0.08) !important;
}
.cb5-plan-grid-cell--timeoff {
  background: rgba(245, 158, 11, 0.10) !important;
}
.cb5-plan-grid-cell--overbooked {
  background: rgba(239, 68, 68, 0.10) !important;
  color: var(--cb5-danger) !important;
}
.cb5-plan-grid-cell--readonly input[type="number"] {
  pointer-events: none;
  color: var(--cb5-text-muted);
}

/* Row hover */
.cb5-plan-grid-row:hover td {
  background: rgba(99, 102, 241, 0.03);
}
.cb5-plan-grid-row:hover .cb5-plan-grid-task {
  background: var(--cb5-bg-secondary);
}

/* Footer (daily totals) */
.cb5-plan-grid-footer td {
  background: var(--cb5-bg-secondary);
  font-weight: var(--cb5-weight-semibold);
  font-size: 0.72rem;
  border-top: 2px solid var(--cb5-border);
}
.cb5-plan-grid-footer .cb5-plan-grid-task {
  background: var(--cb5-bg-secondary);
}

/* Summary bar */
.cb5-plan-grid-summary {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0;
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-muted);
}
.cb5-plan-grid-summary strong {
  color: var(--cb5-text-primary);
}

/* Row actions area */
.cb5-plan-row-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px 6px;
  flex-wrap: wrap;
}

/* Auto-populate popover */
.cb5-autopop-panel {
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-md);
  padding: 12px;
  margin: 4px 0 8px 0;
  box-shadow: var(--cb5-shadow-md, 0 4px 16px rgba(0,0,0,0.12));
}

[data-theme="dark"] .cb5-plan-grid-task { background: var(--cb5-surface); }
[data-theme="dark"] .cb5-plan-grid-total { background: var(--cb5-bg-secondary); }
[data-theme="dark"] .cb5-plan-grid-capacity-row td { background: rgba(99, 102, 241, 0.06); }
[data-theme="dark"] .cb5-plan-grid-capacity-row .cb5-plan-grid-task { background: rgba(99, 102, 241, 0.06); }

/* ── View Toggle ── */
/* ── Resource Planning Calendar ── */
.cb5-plan-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--cb5-border);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius);
  overflow: hidden;
  margin-bottom: 12px;
}
.cb5-plan-calendar-header {
  background: var(--cb5-bg-secondary);
  text-align: center;
  padding: 6px 2px;
  font-size: 0.65rem;
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cb5-plan-calendar-cell {
  background: var(--cb5-surface);
  min-height: 105px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.cb5-plan-calendar-cell--nonworking {
  background: var(--cb5-bg-secondary);
}
.cb5-plan-calendar-cell--holiday {
  background: rgba(59, 130, 246, 0.07);
}
.cb5-plan-calendar-cell--timeoff {
  background: rgba(245, 158, 11, 0.07);
}
.cb5-plan-calendar-cell--overbooked {
  background: rgba(239, 68, 68, 0.05);
}
.cb5-plan-calendar-cell--empty {
  background: var(--cb5-bg-secondary);
  opacity: 0.4;
  pointer-events: none;
}
.cb5-plan-calendar-date {
  font-size: 0.68rem;
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-muted);
  line-height: 1;
}
.cb5-plan-calendar-today .cb5-plan-calendar-date {
  color: var(--cb5-brand);
  font-size: 0.72rem;
}
.cb5-plan-calendar-label {
  font-size: 0.58rem;
  color: var(--cb5-text-muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb5-plan-calendar-total {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: var(--cb5-weight-semibold);
  padding: 1px 6px;
  border-radius: 20px;
  line-height: 1.4;
  cursor: default;
  align-self: flex-start;
}
.cb5-plan-calendar-total--green {
  background: rgba(22, 163, 74, 0.12);
  color: var(--cb5-pmo-soft-pos-fg);
}
.cb5-plan-calendar-total--yellow {
  background: rgba(245, 158, 11, 0.15);
  color: var(--cb5-warning-fg);
}
.cb5-plan-calendar-total--red {
  background: rgba(239, 68, 68, 0.13);
  color: var(--cb5-error);
}
.cb5-plan-calendar-input {
  width: 100%;
  padding: 2px 4px;
  font-size: 0.78rem;
  border: 1px solid var(--cb5-border);
  border-radius: 3px;
  background: var(--cb5-bg-secondary);
  text-align: center;
  margin-top: auto;
}
.cb5-plan-calendar-input:focus {
  outline: none;
  border-color: var(--cb5-brand);
  background: var(--cb5-surface);
}
.cb5-plan-calendar-input::placeholder {
  color: var(--cb5-text-muted);
  font-size: 0.7rem;
}

[data-theme="dark"] .cb5-plan-calendar-total--green { background: rgba(22,163,74,0.2); color: var(--cb5-success-fg); }
[data-theme="dark"] .cb5-plan-calendar-total--yellow { background: rgba(245,158,11,0.2); color: var(--cb5-warning-fg); }
[data-theme="dark"] .cb5-plan-calendar-total--red { background: rgba(239,68,68,0.2); color: var(--cb5-error-fg); }
[data-theme="dark"] .cb5-plan-calendar-input { background: var(--cb5-surface); }

/* ══ Resource Planning — Toolbar ══ */
.cb5-plan-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.cb5-plan-label {
  font-weight: 600;
  color: var(--cb5-text-muted);
  white-space: nowrap;
  font-size: var(--cb5-text-sm);
  margin: 0;
}
.cb5-plan-view-toggle {
  display: flex;
  border: 1px solid var(--cb5-brand);
  border-radius: 6px;
  overflow: hidden;
}
.cb5-plan-view-toggle button {
  border: none;
  background: transparent;
  padding: 5px 16px;
  color: var(--cb5-brand);
  font-size: var(--cb5-text-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cb5-plan-view-toggle button.active {
  background: var(--cb5-brand);
  color: var(--cb5-text-on-primary);
}

/* ══ Resource Planning — Context Bar ══ */
.cb5-plan-context-bar {
  display: flex;
  align-items: center;
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 10px;
  gap: 6px;
  flex-wrap: wrap;
}
.cb5-plan-month-label {
  font-weight: 700;
  min-width: 110px;
  text-align: center;
  font-size: var(--cb5-text-sm);
}
.cb5-plan-bar-divider {
  width: 1px;
  height: 22px;
  background: var(--cb5-border);
  margin: 0 16px;
  flex-shrink: 0;
}
.cb5-plan-summary {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.cb5-plan-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  cursor: default;
}
.cb5-plan-stat i {
  font-size: 15px;
  color: var(--rp-legacy-stat-icon);
  transition: color 0.15s;
}
.cb5-plan-stat:hover i { color: var(--rp-legacy-stat-icon-hi); }
.cb5-plan-stat-label {
  font-size: 11px;
  color: var(--cb5-text-muted);
}
.cb5-plan-stat-val {
  font-weight: 700;
  font-size: 13px;
  color: var(--cb5-text-primary);
}
.cb5-plan-stat-val.positive { color: var(--cb5-pmo-band-green); }
.cb5-plan-stat-val.negative { color: var(--cb5-error); }
.cb5-plan-tip {
  display: none;
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--rp-legacy-tooltip-bg);
  color: var(--cb5-text-on-primary);
  font-size: 11px;
  font-weight: 400;
  border-radius: 5px;
  padding: 5px 9px;
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
}
.cb5-plan-tip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--rp-legacy-tooltip-bg);
}
.cb5-plan-stat:hover .cb5-plan-tip { display: block; }

/* ══ Resource Planning — Calendar Cells (new naming) ══ */
.cb5-plan-cal-header {
  background: var(--rp-legacy-head-bg);
  text-align: center;
  padding: 6px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cb5-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cb5-plan-cell {
  min-height: 90px;
  border-right: 1px solid var(--rp-legacy-line);
  border-bottom: 1px solid var(--rp-legacy-line);
  padding: 6px 8px;
  position: relative;
  background: var(--cb5-surface);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.1s;
}
.cb5-plan-cell:hover          { background: var(--rp-legacy-cell-hover); }
.cb5-plan-cell--out           { background: var(--rp-legacy-cell-out); pointer-events: none; opacity: 0.6; }
.cb5-plan-cell--weekend       { background: var(--rp-legacy-cell-weekend); }
.cb5-plan-cell--today         { background: var(--rp-legacy-cell-today); }
.cb5-plan-cell--holiday       { background: rgba(59,130,246,0.07); }
.cb5-plan-cell--timeoff       { background: rgba(245,158,11,0.07); }
.cb5-plan-cell--nonworking    { background: var(--cb5-bg-secondary); }
.cb5-plan-cell--overbooked    { background: rgba(239,68,68,0.05); }
.cb5-plan-cell-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--rp-legacy-stat-icon-hi);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
  flex-shrink: 0;
}
.cb5-plan-cell--today .cb5-plan-cell-date {
  background: var(--cb5-brand);
  color: var(--cb5-text-on-primary);
}
.cb5-plan-cell-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--cb5-brand-accent);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Badges */
.cb5-plan-badge {
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  line-height: 1.4;
  cursor: default;
}
.cb5-plan-badge--under { background: var(--cb5-pmo-soft-pos); color: var(--cb5-pmo-band-green); }
.cb5-plan-badge--at    { background: var(--rp-legacy-badge-at-bg); color: var(--cb5-pmo-band-orange); }
.cb5-plan-badge--over  { background: var(--cb5-error-bg); color: var(--cb5-error); }
/* Cell input */
.cb5-plan-cell-input {
  width: 100%;
  padding: 3px 6px;
  font-size: 12px;
  text-align: center;
  border: 1px solid var(--rp-legacy-panel-border);
  border-radius: 5px;
  background: var(--rp-legacy-head-bg);
  margin-top: auto;
}
.cb5-plan-cell-input:focus {
  outline: none;
  border-color: var(--cb5-brand);
  background: var(--cb5-surface);
}
/* Cell overlay tooltip (CSS-only, inset to avoid overflow:hidden clip) */
.cb5-plan-cell-tip {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(26, 35, 50, 0.91);
  color: var(--cb5-text-on-primary);
  font-size: 10px;
  padding: 6px 8px;
  border-radius: 3px;
  line-height: 1.75;
  z-index: 5;
  pointer-events: none;
}
.cb5-plan-cell:hover .cb5-plan-cell-tip { display: block; }

/* List footer tooltip support */
.cb5-plan-grid-footer td { position: relative; }
.cb5-plan-grid-footer td:hover .cb5-plan-cell-tip { display: block; }
.cb5-plan-grid-footer td .cb5-plan-cell-tip { top: auto; bottom: 100%; min-height: 90px; }

/* List stub */
.cb5-plan-list-stub {
  padding: 40px;
  text-align: center;
  color: var(--cb5-text-muted);
}

/* Dark mode — new classes */
[data-theme="dark"] .cb5-plan-toolbar,
[data-theme="dark"] .cb5-plan-context-bar { border-color: var(--cb5-border); }
[data-theme="dark"] .cb5-plan-view-toggle { border-color: rgba(0,131,177,0.6); }
[data-theme="dark"] .cb5-plan-cal-header  { background: var(--cb5-bg-secondary); }
[data-theme="dark"] .cb5-plan-cell        { background: var(--cb5-surface); border-color: var(--cb5-border); }
[data-theme="dark"] .cb5-plan-cell:hover  { background: var(--cb5-surface-raised); }
[data-theme="dark"] .cb5-plan-cell--out   { background: var(--cb5-bg-secondary); }
[data-theme="dark"] .cb5-plan-cell--today { background: rgba(0,131,177,0.12); }
[data-theme="dark"] .cb5-plan-cell-input  { background: var(--cb5-bg-secondary); border-color: var(--cb5-border); color: var(--cb5-text-primary); }
[data-theme="dark"] .cb5-plan-badge--under { background: rgba(22,163,74,0.2);  color: var(--cb5-success-fg); }
[data-theme="dark"] .cb5-plan-badge--at    { background: rgba(245,158,11,0.2); color: var(--cb5-warning-fg); }
[data-theme="dark"] .cb5-plan-badge--over  { background: rgba(239,68,68,0.2);  color: var(--cb5-error-fg); }
[data-theme="dark"] .cb5-plan-stat:hover i { color: rgba(255,255,255,0.7); }

/* ── System Down Dialog ── */
#cb5-system-down-dialog {
  border: 1px solid var(--cb5-border);
  border-radius: 14px;
  max-width: 440px;
  width: calc(100% - 48px);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  background: var(--cb5-surface);
}

#cb5-system-down-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

.cb5-sysdown-brand {
  background: var(--cb5-brand);
  width: 100%;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cb5-sysdown-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 24px;
}

.cb5-sysdown-icon {
  width: 56px;
  height: 56px;
  background: rgba(0, 131, 177, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cb5-sysdown-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cb5-text-primary);
}

.cb5-sysdown-msg {
  font-size: 0.88rem;
  color: var(--cb5-text-secondary);
  line-height: 1.6;
  text-align: center;
  max-width: 340px;
}

.cb5-sysdown-contact {
  font-size: 0.78rem;
  color: var(--cb5-text-tertiary);
  text-align: center;
}

.cb5-sysdown-contact a {
  color: var(--cb5-brand);
  text-decoration: none;
}

.cb5-sysdown-contact a:hover {
  text-decoration: underline;
}

[data-theme="dark"] .cb5-sysdown-icon { background: rgba(0,131,177,0.15); }

/* ============================================================
   Engage module
   ============================================================ */

/* Tab content wrapper */
.cb5-engage-tab-content {
  padding-top: 1rem;
}

/* Cards inside engage tabs get default padding since they don't use .cb5-card-body */
.cb5-engage-tab-content .cb5-card {
  padding: 1.25rem;
}

/* Section header (card header row with actions) */
.cb5-engage-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

/* Tab bar — reuses .cb5-tab but needs a bar container */
.cb5-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid var(--cb5-border);
  margin-bottom: 1.5rem;
}

/* Dashboard */
.cb5-engage-summary-bar {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--cb5-bg-secondary);
  border-radius: var(--cb5-radius);
  border: 1px solid var(--cb5-border);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.cb5-engage-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cb5-engage-summary-stat-label {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cb5-engage-summary-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cb5-text-primary);
}

/* Plan card grid */
.cb5-engage-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.cb5-engage-plan-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cb5-engage-plan-card-company {
  font-size: var(--cb5-text-base);
  font-weight: 600;
}

.cb5-engage-value-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--cb5-bg-secondary);
  border-radius: var(--cb5-radius);
  border: 1px solid var(--cb5-border);
}

.cb5-engage-value-metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cb5-engage-value-metric-label {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cb5-engage-value-metric-value {
  font-size: var(--cb5-text-sm);
  font-weight: 600;
  color: var(--cb5-text-primary);
}

/* BSQ rows */
.cb5-engage-bsq-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--cb5-border);
}

.cb5-engage-bsq-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--cb5-border);
}

.cb5-engage-bsq-row:last-child { border-bottom: none; }

.cb5-engage-bsq-row-main {
  flex: 1;
  min-width: 0;
}

/* Hygiene alerts */
.cb5-engage-hygiene-alert {
  padding: 0.75rem 1rem;
}

.cb5-engage-hygiene-alert--hard {
  border-left: 3px solid var(--cb5-error);
}

.cb5-engage-hygiene-alert--soft {
  border-left: 3px solid var(--cb5-warning);
}

/* Confidence dots */
.cb5-confidence-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}

.cb5-confidence-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cb5-border);
  flex-shrink: 0;
}

.cb5-confidence-dot--filled.cb5-confidence-dot--high  { background: var(--cb5-success); }
.cb5-confidence-dot--filled.cb5-confidence-dot--mid   { background: var(--cb5-warning); }
.cb5-confidence-dot--filled.cb5-confidence-dot--low   { background: var(--cb5-error); }

/* Progress bar */
.cb5-progress-bar-wrap {
  /* Expands naturally to hold track + labels — do NOT set a fixed height */
  overflow: visible;
}

.cb5-progress-bar-track {
  position: relative;
  height: 12px;
  background: var(--cb5-bg-secondary);
  border-radius: 6px;
  border: 1px solid var(--cb5-border);
  overflow: visible;
}

.cb5-progress-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.cb5-progress-bar-fill--stretch   { background: var(--cb5-success); }
.cb5-progress-bar-fill--target    { background: var(--cb5-brand); }
.cb5-progress-bar-fill--threshold { background: var(--cb5-warning); }
.cb5-progress-bar-fill--below     { background: var(--cb5-error); }

.cb5-progress-bar-tick {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 3px;
  border-radius: 2px;
  transform: translateX(-50%);
  cursor: help;
}

.cb5-progress-bar-tick--threshold { background: var(--cb5-warning); }
.cb5-progress-bar-tick--target    { background: var(--cb5-success); }
.cb5-progress-bar-tick--stretch   { background: var(--cb5-brand); }

/* Modal */
.cb5-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.cb5-modal {
  background: var(--cb5-bg);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-lg, var(--cb5-radius));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
}

.cb5-modal--wide {
  max-width: 720px;
}

.cb5-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.cb5-modal-title {
  font-size: var(--cb5-text-lg, 1.1rem);
  font-weight: 700;
  color: var(--cb5-text-primary);
  margin: 0;
}

/* col-full helper */
.cb5-col-full {
  grid-column: 1 / -1;
}

/* ── Engage shared: stat cards ─────────────────────────────────────────── */
.cb5-engage-stat-cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.cb5-engage-stat-card {
  flex: 1 1 160px;
  min-width: 140px;
  padding: 1rem 1.25rem;
  background: var(--cb5-bg-secondary);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cb5-engage-stat-card--alert  { border-color: var(--cb5-error);   }
.cb5-engage-stat-card--success { border-color: var(--cb5-success); }
.cb5-engage-stat-card--warning { border-color: var(--cb5-warning); }

.cb5-engage-stat-card-label {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.cb5-engage-stat-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cb5-text-primary);
  line-height: 1.1;
}

.cb5-engage-stat-alert  { color: var(--cb5-error);   }
.cb5-engage-stat-success { color: var(--cb5-success); }
.cb5-engage-stat-warning { color: var(--cb5-warning); }

.cb5-engage-stat-card-sub {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-muted);
}

/* Progress bar inside stat card */
.cb5-stat-bar {
  height: 4px;
  background: var(--cb5-border);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.cb5-stat-bar-fill {
  height: 100%;
  background: var(--cb5-primary);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.cb5-stat-bar-fill--alert   { background: var(--cb5-error); }
.cb5-stat-bar-fill--success { background: var(--cb5-success); }
.cb5-stat-bar-fill--warning { background: var(--cb5-warning); }

/* ── Engage shared: tier toggle ─────────────────────────────────────────── */
.cb5-engage-tier-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.cb5-engage-tier-toggle-label {
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-muted);
  margin-right: 0.25rem;
}

.cb5-engage-tier-btn {
  padding: 0.3rem 0.85rem;
  font-size: var(--cb5-text-sm);
  border: 1px solid var(--cb5-border);
  background: transparent;
  color: var(--cb5-text-secondary);
  border-radius: var(--cb5-radius);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cb5-engage-tier-btn:hover {
  background: var(--cb5-bg-secondary);
  color: var(--cb5-text-primary);
}

.cb5-engage-tier-btn.active {
  background: var(--cb5-brand);
  border-color: var(--cb5-brand);
  color: var(--cb5-text-on-primary);
  font-weight: 600;
}

/* ── Engage shared: filter pills ───────────────────────────────────────── */
.cb5-engage-filter-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.cb5-engage-filter-pill {
  padding: 0.3rem 0.85rem;
  font-size: var(--cb5-text-sm);
  border: 1px solid var(--cb5-border);
  background: transparent;
  color: var(--cb5-text-secondary);
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cb5-engage-filter-pill:hover {
  background: var(--cb5-bg-secondary);
  color: var(--cb5-text-primary);
}

.cb5-engage-filter-pill.active {
  background: var(--cb5-brand);
  border-color: var(--cb5-brand);
  color: var(--cb5-text-on-primary);
  font-weight: 600;
}

.cb5-engage-filter-pill-count {
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
}

.cb5-engage-filter-pill:not(.active) .cb5-engage-filter-pill-count {
  background: var(--cb5-bg-secondary);
  color: var(--cb5-text-muted);
}

/* ── Engage assignments page ────────────────────────────────────────────── */
.cb5-engage-attention-section {
  margin-bottom: 1.5rem;
}

.cb5-engage-attention-title {
  font-size: var(--cb5-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cb5-error);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cb5-engage-attention-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--cb5-border);
}

.cb5-engage-attention-item:last-child {
  border-bottom: none;
}

.cb5-engage-attention-body {
  flex: 1;
}

.cb5-engage-attention-account {
  font-weight: 600;
  color: var(--cb5-text-primary);
}

.cb5-engage-attention-meta {
  font-size: var(--cb5-text-sm);
  color: var(--cb5-error);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.cb5-engage-attention-hint {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-muted);
  margin-top: 0.15rem;
}

/* ============================================================
   Dashboard
   ============================================================ */

/* Module color tokens moved to tokens.css (single source of truth for colour). */

/* Responsive card grid */
.cb5-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}

/* Card shell */
.cb5-dash-card {
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Colored top accent bar driven by --card-accent */
.cb5-dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 2px solid var(--card-accent, var(--cb5-brand));
  color: var(--cb5-text-primary);
}

.cb5-dash-card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cb5-dash-card-title {
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
  letter-spacing: 0.01em;
}

.cb5-dash-card-header-action {
  display: flex;
  align-items: center;
}

.cb5-dash-card-body {
  flex: 1;
  padding: 12px 14px;
}

.cb5-dash-card-loading {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.cb5-dash-card-error {
  font-size: var(--cb5-text-sm);
  color: var(--cb5-error);
}

.cb5-dash-card-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--cb5-border);
}

.cb5-dash-card-view-all {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-brand);
  text-decoration: none;
}
.cb5-dash-card-view-all:hover {
  text-decoration: underline;
}

/* Mock / stub card body */
.cb5-dash-mock {
  padding: 8px 0;
}
.cb5-dash-mock-label {
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-medium);
  color: var(--cb5-text-secondary);
  margin: 0 0 2px;
}
.cb5-dash-mock-sub {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-muted);
  margin: 0;
}

/* ---- TimeWeekCard ---- */

.cb5-tw-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cb5-tw-card-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cb5-tw-card-total {
  font-size: 1.5rem;
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
  line-height: 1;
}

/* 7-column day grid */
.cb5-tw-card-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cb5-tw-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: var(--cb5-radius);
  background: var(--cb5-surface-hover);
}

.cb5-tw-day--weekend {
  opacity: 0.55;
}

.cb5-tw-day--today {
  background: color-mix(in srgb, var(--cb5-module-deliver) 12%, transparent);
  outline: 1px solid var(--cb5-module-deliver);
}

.cb5-tw-day-label {
  font-size: 10px;
  font-weight: var(--cb5-weight-medium);
  color: var(--cb5-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cb5-tw-day-hours {
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-medium);
  color: var(--cb5-text-primary);
}

.cb5-tw-card-rejection {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-error);
  border-left: 2px solid var(--cb5-error);
  padding-left: 8px;
}

/* ── Kanban Pipeline ── */
/* ── MoveRibbon — shared workflow status/move control (engine-driven) ─────── */
.cb5-mr { position: relative; margin-bottom: 16px; }
.cb5-mr__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cb5-mr__label { font-size: var(--cb5-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cb5-text-tertiary); }
.cb5-mr__hint { font-size: var(--cb5-text-xs); color: var(--cb5-text-tertiary); margin-left: auto; }
.cb5-mr-scroll { overflow-x: auto; padding-bottom: 2px; }
.cb5-mr-row { display: flex; align-items: stretch; gap: 4px; min-width: min-content; }

.cb5-mr-node {
  flex: 1 1 0; min-width: 112px; position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 28px; white-space: nowrap;
  font-size: var(--cb5-text-sm); font-weight: 500;
  background: var(--cb5-surface-raised); color: var(--cb5-text-tertiary);
}
.cb5-mr-row--chevron .cb5-mr-node {
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%);
}
.cb5-mr-row--chevron .cb5-mr-node:first-child {
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
  padding-left: 16px;
}
.cb5-mr-row--chevron .cb5-mr-node:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 13px 50%);
  padding-right: 16px;
}
.cb5-mr-node.is-done { background: color-mix(in srgb, var(--cb5-brand) 14%, var(--cb5-surface)); color: var(--cb5-brand); }
.cb5-mr-node.is-current { background: var(--cb5-brand); color: var(--cb5-text-on-primary); font-weight: 600; }
.cb5-mr-node.is-movable { cursor: pointer; }
.cb5-mr-node.is-movable:hover { filter: brightness(0.96); }
.cb5-mr-node.is-locked { cursor: default; }
.cb5-mr__chk { display: inline-flex; align-items: center; }
.cb5-mr__caret { display: inline-flex; align-items: center; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 0 0 2px; }
.cb5-mr__caret:disabled { opacity: 0.5; cursor: not-allowed; }

.cb5-mr-offramp {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; margin-right: 8px;
  height: 38px; padding: 0 14px; border-radius: var(--cb5-radius);
  background: color-mix(in srgb, var(--c) 16%, var(--cb5-surface)); color: var(--c); font-weight: 600;
}

.cb5-mr-backdrop { position: fixed; inset: 0; z-index: 40; }
.cb5-mr-menu {
  position: absolute; top: calc(100% + 6px); z-index: 41; min-width: 200px;
  left: clamp(100px, calc((var(--idx) + 0.5) / var(--count) * 100%), calc(100% - 100px)); transform: translateX(-50%);
  background: var(--cb5-surface); border: 1px solid var(--cb5-border); border-radius: var(--cb5-radius-md);
  box-shadow: var(--cb5-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.14)); padding: 4px;
}
.cb5-mr-menu__head { padding: 6px 10px 4px; font-size: var(--cb5-text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--cb5-text-tertiary); }
.cb5-mr-menu__item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 7px 10px; border-radius: var(--cb5-radius);
  font-size: var(--cb5-text-sm); color: var(--cb5-text-secondary); cursor: pointer; white-space: nowrap;
}
.cb5-mr-menu__item:hover:not(:disabled) { background: var(--cb5-bg-secondary); }
.cb5-mr-menu__item:disabled { opacity: 0.5; cursor: not-allowed; }
.cb5-mr-menu__item.is-danger { color: var(--cb5-error); }
.cb5-mr-menu__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--cb5-text-tertiary)); flex: 0 0 auto; }
.cb5-mr-menu__name { flex: 1 1 auto; }
.cb5-mr-menu__to { font-size: var(--cb5-text-xs); color: var(--cb5-text-tertiary); }
.cb5-mr-menu__empty { padding: 8px 10px; font-size: var(--cb5-text-sm); color: var(--cb5-text-tertiary); }

/* Kanban horizontal-scroll affordances — chevron buttons that appear at the board edges when the
   lanes overflow horizontally (in addition to the native scrollbar). Wired by cb5Kanban. */
.cb5-kanban-scroller { position: relative; }
/* Edge-fade hints — a gradient at an overflowing edge signals "more lanes this way". Toggled via
   .can-scroll-left/right by cb5Kanban; sits under the chevrons and never blocks clicks. */
.cb5-kanban-scroller::before,
.cb5-kanban-scroller::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 36px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cb5-kanban-scroller::before { left: 0; background: linear-gradient(to right, var(--cb5-bg-secondary), transparent); }
.cb5-kanban-scroller::after { right: 0; background: linear-gradient(to left, var(--cb5-bg-secondary), transparent); }
.cb5-kanban-scroller.can-scroll-left::before { opacity: 1; }
.cb5-kanban-scroller.can-scroll-right::after { opacity: 1; }
.cb5-kanban-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--cb5-border);
  background: var(--cb5-surface);
  color: var(--cb5-text-secondary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.cb5-kanban-scroll-btn:hover { background: var(--cb5-surface-raised); color: var(--cb5-brand); }
.cb5-kanban-scroll-left { left: 4px; }
.cb5-kanban-scroll-right { right: 4px; }
.cb5-kanban-scroll-btn.is-hidden { display: none; }
.cb5-kanban-scroll-btn svg { width: 18px; height: 18px; }

.cb5-kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  /* Bound the board to the viewport so the horizontal scrollbar stays reachable rather than
     buried under the tallest lane's cards. Each lane scrolls its own cards vertically instead
     (see .cb5-kanban-column-body). */
  overflow-y: hidden;
  max-height: calc(100vh - 240px);
  padding-bottom: 16px;
  min-height: 400px;
}
.cb5-kanban-column {
  /* Floor width for card content; the board (.cb5-kanban) scrolls horizontally when lanes
     don't all fit. 180px was the proven value that fits ~6 lanes at FHD without scrolling.
     Per-board override: consumers set --cb5-kanban-lane-min via KanbanScroll/KanbanBoard's
     LaneMinWidth param (e.g. the denser opportunity card uses 232px) — no per-page CSS class needed.
     Do NOT override this with inline min-width:0 (that let lanes squeeze below content and clip). */
  min-width: var(--cb5-kanban-lane-min, 180px);
  flex: 1;
  background: var(--cb5-surface-raised);
  border-radius: var(--cb5-radius-md);
  display: flex;
  flex-direction: column;
  min-height: 0;        /* bound the column to the board's height so its body can scroll */
  position: relative;   /* anchors the drag drop-zone overlay */
}
/* Validated drag drop-zone — overlays a legal target lane during a drag. */
/* Tall overlay (out of flow → no reflow on drag-start); clipped to the board's height by the board's
   overflow:hidden, so it covers the full board vertically and is droppable at any scroll position. */
.cb5-kanban-dropzone {
  position: absolute; top: 0; left: 0; right: 0; height: 5000px; z-index: 5;
  display: flex; align-items: flex-start; justify-content: center;
  background: color-mix(in srgb, var(--cb5-brand) 16%, transparent);
  border: 2px dashed var(--cb5-brand); border-radius: var(--cb5-radius-md);
  color: var(--cb5-brand); font-weight: 600; font-size: var(--cb5-text-sm);
}
.cb5-kanban-dropzone span { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; pointer-events: none; }
.cb5-kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: var(--cb5-text-sm);
  font-weight: 600;
  color: var(--cb5-text-secondary);
  border-bottom: 2px solid var(--cb5-border);
}
.cb5-kanban-column-count {
  font-size: var(--cb5-text-xs);
  background: var(--cb5-surface);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}
.cb5-kanban-column-body {
  flex: 1;
  padding: 8px;
  min-height: 60px;
  overflow-y: auto;   /* a lane's cards scroll within the lane; keeps the board height bounded */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cb5-kanban-card {
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius);
  padding: 10px 14px;
  cursor: grab;
  transition: box-shadow 0.15s;
  min-width: 0;
}
.cb5-kanban-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.cb5-kanban-card-name {
  font-size: var(--cb5-text-sm);
  font-weight: 600;
  margin-bottom: 4px;
}
.cb5-kanban-card-meta {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-tertiary);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Sales Pipeline card (RM-55): row1 = #(link) · company pill · ⋯ menu; row2 = name subtitle;
   row3 = amount left · status right. Row1 is a 3-col grid so ⋯ pins right and the company pill
   centers + truncates; name/company/status never bleed past the lane at the min width. */
.cb5-spc-row1 { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; }
.cb5-spc-num { font-weight: 600; font-size: var(--cb5-text-sm); white-space: nowrap; }
.cb5-spc-company { justify-self: center; max-width: 100%; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb5-spc-name { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb5-spc-row3 { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.cb5-spc-amt { font-weight: 600; flex: 0 0 auto; }
.cb5-spc-status { flex: 1 1 auto; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Pause chip: icon + parked-days ("12d" / "99+") as ONE unit sharing a tooltip. */
.cb5-spc-pause { display: inline-flex; align-items: center; gap: 2px; flex: none; color: var(--cb5-warning); font-size: var(--cb5-text-xs); font-variant-numeric: tabular-nums; }
/* PageTabBar (RM-52) — the persistent working-set tab strip above the content area. A nav
   landmark of real anchors (keyboard/AT operable — design review): pinned cluster left,
   stable-order unpinned chips (visible SET chosen by recency), "More" overflow. Hidden on
   mobile (bottom-tabs serve navigation there) and when there are no tabs at all. */
.cb5-pagetabs {
  position: sticky;              /* pin to the top of the scrolling content column */
  top: 0;
  /* Above scrolling page content, BELOW the header (200): header dropdowns (global search,
     favorites, notifications) live inside the header's stacking context and must paint over
     the strip. The bar's own menus/backdrop stack within THIS context — fine, they only need
     to beat content. */
  z-index: calc(var(--cb5-z-header) - 10);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px 0;
  background: var(--cb5-bg-secondary);
  border-bottom: 1px solid var(--cb5-border);
  min-height: 32px;
}
.cb5-pagetab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 170px;
  padding: 0 6px 0 0;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--cb5-radius) var(--cb5-radius) 0 0;
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-secondary);
  background: transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.cb5-pagetab:hover { background: var(--cb5-surface-hover); color: var(--cb5-text-primary); }
/* The chip body is a real anchor (router-intercepted) — it owns the left padding so the whole
   visual chip stays clickable/focusable; the reserved action slot sits outside it. */
.cb5-pagetab__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 0 5px 9px;
  color: inherit;
  text-decoration: none;
}
.cb5-pagetab__link:focus-visible {
  outline: 2px solid var(--cb5-primary);
  outline-offset: -2px;
  border-radius: var(--cb5-radius-sm);
}
/* Faint partial-height separator between adjacent chips (the Edge/VS Code cue) — visible on
   unselected chips, suppressed on either side of the active one. */
.cb5-pagetab + .cb5-pagetab::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 25%;
  height: 50%;
  width: 1px;
  background: var(--cb5-border);
}
.cb5-pagetab.is-active + .cb5-pagetab::before,
.cb5-pagetab.is-active::before { display: none; }
.cb5-pagetab.is-active {
  background: var(--cb5-surface);
  border-color: var(--cb5-border);
  color: var(--cb5-text-primary);
  font-weight: var(--cb5-weight-medium);
}
/* The bar's border-bottom runs under every chip; under the ACTIVE chip it reads as a stray gray
   line — overpaint it with a selected-color underline instead. */
.cb5-pagetab.is-active::after {
  content: '';
  position: absolute;
  left: -1px; right: -1px; bottom: -1px;
  height: 2px;
  background: var(--cb5-primary);
}
/* ONE icon size across the whole bar (chip icon, pin, ×, menu items) — pinned in CSS because the
   Icon Size param doesn't reliably constrain the svg (the fb-toolbar precedent). */
.cb5-pagetab__icon svg,
.cb5-pagetab__act svg,
.cb5-pagetabs__more-item svg { width: 12px; height: 12px; flex: none; }
.cb5-pagetab__icon { flex: none; display: inline-flex; opacity: 0.75; }
.cb5-pagetab__label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* The action slot is RESERVED (fixed width, fades in) so hover never grows/shifts the chip.
   20px target (WCAG 2.5.8-adjacent) at text-secondary (tertiary failed 3:1 in light theme). */
.cb5-pagetab__act {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border: 0; border-radius: var(--cb5-radius-full);
  background: transparent; color: var(--cb5-text-secondary); cursor: pointer;
  flex: none;
  opacity: 0;
  transition: opacity 0.1s;
  font-family: inherit;
}
/* The × reveals on hover, keyboard focus, or — where hover doesn't exist (touch) — always.
   An invisible-but-tappable close is worse than a visible one (design review). */
.cb5-pagetab:hover .cb5-pagetab__act--close,
.cb5-pagetab:focus-within .cb5-pagetab__act--close,
.cb5-pagetab__act--close:focus-visible { opacity: 1; }
/* Touch: the × is always visible AND targets grow to 24px (WCAG 2.5.8 — 20px is calibrated
   for pointer precision, fingers get the full minimum). */
@media (hover: none) {
  .cb5-pagetab__act--close { opacity: 1; }
  .cb5-pagetab__act { width: 24px; height: 24px; }
}
.cb5-pagetab__act:focus-visible { outline: 2px solid var(--cb5-primary); outline-offset: 0; }
/* Pinned: the sideways pin is ALWAYS visible (VS Code); clicking it unpins. No × until unpinned. */
.cb5-pagetab__act--pin { opacity: 1; }
.cb5-pagetab__act--pin svg { transform: rotate(45deg); }
.cb5-pagetab__act--menu { opacity: 1; }
.cb5-pagetab__act:hover { background: var(--cb5-surface-raised); color: var(--cb5-text-primary); }
.cb5-pagetab--more { color: var(--cb5-text-secondary); }
.cb5-pagetab__more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0 5px 9px;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}
.cb5-pagetab__more-toggle:focus-visible {
  outline: 2px solid var(--cb5-primary);
  outline-offset: -2px;
  border-radius: var(--cb5-radius-sm);
}
.cb5-pagetabs__ctx { left: 0; right: auto; min-width: 170px; }
.cb5-pagetabs__more-menu {
  position: absolute; top: 100%; right: 0; z-index: var(--cb5-z-dropdown);
  min-width: 240px; max-height: 320px; overflow-y: auto;
  background: var(--cb5-surface); border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius); box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 4px;
}
/* Menu rows: real <button>s (context menu) or a nav anchor + action button (More rows) — the
   reset properties are harmless on the div wrappers. */
.cb5-pagetabs__more-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 8px; border-radius: var(--cb5-radius-sm);
  border: 0; background: none; text-align: left;
  font-family: inherit;
  font-size: var(--cb5-text-xs); color: var(--cb5-text-secondary); cursor: pointer;
}
.cb5-pagetabs__more-item:hover { background: var(--cb5-surface-hover); color: var(--cb5-text-primary); }
.cb5-pagetabs__more-item:focus-visible { outline: 2px solid var(--cb5-primary); outline-offset: -2px; }
.cb5-pagetabs__more-item > a {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0;
  color: inherit; text-decoration: none;
}
.cb5-pagetabs__more-item > a:focus-visible { outline: 2px solid var(--cb5-primary); outline-offset: -1px; border-radius: var(--cb5-radius-sm); }
.cb5-pagetabs__more-item span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb5-pagetabs__more-item .cb5-pagetab__act { display: inline-flex; }
.cb5-pagetabs__backdrop { position: fixed; inset: 0; z-index: calc(var(--cb5-z-dropdown) - 1); }
@media (max-width: 640px) { .cb5-pagetabs { display: none; } }

/* FiscalPeriodPicker (shared; RM-55) — the PMO Console's FY × Quarter segmented pillbox as a
   reusable component (PMO's page-local .pmo-period-selector can migrate onto this). */
.cb5-period-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: var(--cb5-surface-raised);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius);
}
.cb5-period-picker .grp { display: inline-flex; border-radius: var(--cb5-radius-sm); overflow: hidden; }
.cb5-period-picker button {
  background: transparent;
  border: 0;
  padding: 4px 10px;
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-secondary);
  cursor: pointer;
  transition: background var(--cb5-transition-fast), color var(--cb5-transition-fast);
}
.cb5-period-picker button:hover { background: var(--cb5-surface-hover); color: var(--cb5-text-primary); }
.cb5-period-picker button.is-active {
  background: var(--cb5-primary);
  color: var(--cb5-text-on-primary);
  font-weight: var(--cb5-weight-medium);
}
.cb5-period-picker .divider { width: 1px; align-self: stretch; background: var(--cb5-border); margin: 2px 4px; }

/* EntitySmartSelect state signals (RM-55 §5): linked = tinted input + primary "linked" chip + ×;
   free text = muted "text" badge (clickable to re-search). Kills the linked-vs-typed ambiguity. */
.cb5-input.cb5-smart-linked {
  border-color: color-mix(in srgb, var(--cb5-primary) 45%, var(--cb5-border));
  background: color-mix(in srgb, var(--cb5-primary) 5%, var(--cb5-surface));
}
.cb5-smart-state {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--cb5-text-xs); border-radius: var(--cb5-radius-full);
  padding: 1px 7px; pointer-events: none; border: 0; line-height: 1.4;
}
.cb5-smart-state--linked { right: 28px; color: var(--cb5-primary); background: color-mix(in srgb, var(--cb5-primary) 12%, transparent); }
.cb5-smart-state--text {
  right: 8px; color: var(--cb5-text-tertiary); background: var(--cb5-surface-raised);
}
button.cb5-smart-state--text { pointer-events: auto; cursor: pointer; }
button.cb5-smart-state--text:hover { color: var(--cb5-primary); }
.cb5-smart-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: 0; border-radius: var(--cb5-radius-full);
  background: transparent; color: var(--cb5-text-tertiary); cursor: pointer;
}
.cb5-smart-clear:hover { color: var(--cb5-error); background: var(--cb5-surface-raised); }
/* Paused-card treatment (RM-55): the whole card reads dormant at REST — dimmed (opacity) + muted
   surface + a pause watermark (two pure-CSS bars) dead-center — with hover restoring full clarity
   (dim lifts, watermark fades) right when you're about to interact. Generic + self-contained: any
   kanban card opts in with just this modifier class (no extra markup). */
.cb5-kanban-card--paused {
  position: relative;
  opacity: 0.68;
  background: color-mix(in srgb, var(--cb5-surface) 86%, var(--cb5-text-tertiary));
  transition: opacity 0.15s, background 0.15s;
}
.cb5-kanban-card--paused:hover { opacity: 1; background: var(--cb5-surface); }
.cb5-kanban-card--paused::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 38px; width: 20px;
  border-left: 7px solid var(--cb5-text-tertiary);
  border-right: 7px solid var(--cb5-text-tertiary);
  opacity: 0.18;
  pointer-events: none;
  transition: opacity 0.15s;
}
.cb5-kanban-card--paused:hover::after { opacity: 0; }
.cb5-kanban-ghost {
  opacity: 0.4;
}
.cb5-kanban-chosen {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.cb5-kanban-drag {
  opacity: 0.9;
}
.cb5-kanban-move-select {
  margin-top: 6px;
}
.cb5-priority-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: var(--cb5-text-on-primary);
  flex-shrink: 0;
  cursor: help;
}
.cb5-kanban-req-link {
  color: var(--cb5-text-tertiary);
  text-decoration: none;
  display: block;
}
.cb5-kanban-req-link:hover {
  text-decoration: underline;
  color: var(--cb5-text-secondary);
}
.cb5-kanban-move-select select {
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid var(--cb5-border);
  background: var(--cb5-surface);
  color: var(--cb5-text-secondary);
  width: 100%;
}

/* === B.3.5 Detail-page header (header-row tabs) ============================
   Two-row compact header used on Project detail (and migrating to other
   detail pages). Title + ID on row 1; subtitle context (company / parent
   contract / help) on row 2; tabs vertically centered against the title block.
*/
.cb5-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 0 0;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.cb5-detail-header__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cb5-detail-header__row1 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Scoped overrides for icon buttons in the detail-page header.
   Without this scope, the shared .cb5-icon-btn (32px, align-items: center)
   floats the SVG above the title baseline. Inside row1 we want a smaller
   button AND its SVG aligned bottom so everything in the row aligns flex-end. */
.cb5-detail-header__row1 .cb5-icon-btn {
  width: 28px;
  height: 28px;
  align-self: flex-end;
  align-items: flex-end;
}
.cb5-detail-header__row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-secondary);
}
.cb5-detail-header__name {
  font-size: 18px;
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
  margin: 0;
  line-height: 1.2;
}
.cb5-detail-header__id {
  color: var(--cb5-text-tertiary);
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-normal);
}
.cb5-detail-header__sep {
  color: var(--cb5-text-tertiary);
}
.cb5-detail-header__company {
  color: var(--cb5-text-secondary);
  text-decoration: none;
}
.cb5-detail-header__company:hover {
  color: var(--cb5-text-link);
  text-decoration: underline;
}
.cb5-detail-header__contract {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cb5-text-secondary);
  text-decoration: none;
  background: var(--cb5-surface-raised);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--cb5-text-xs);
}
.cb5-detail-header__contract svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.cb5-detail-header__contract:hover {
  background: var(--cb5-primary-light);
  color: var(--cb5-text-link);
}
.cb5-detail-header__tabs {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}
.cb5-detail-tab {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--cb5-text-secondary);
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.cb5-detail-tab:hover {
  color: var(--cb5-text-primary);
}
.cb5-detail-tab.active {
  color: var(--cb5-brand);
  border-bottom-color: var(--cb5-brand);
}

/* Coming-soon placeholder for stubbed tabs */
.cb5-tab-placeholder {
  text-align: center;
  padding: 64px 24px;
  background: var(--cb5-surface);
  border: 1px dashed var(--cb5-border);
  border-radius: 6px;
  color: var(--cb5-text-secondary);
}
.cb5-tab-placeholder__icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.cb5-tab-placeholder h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--cb5-text-primary);
}
.cb5-tab-placeholder p {
  margin: 0;
  max-width: 480px;
  margin-inline: auto;
  font-size: var(--cb5-text-sm);
}

/* === Page-level data toolbar ================================================
   Generic in-page toolbar that sits between the page header and the page
   content. Hosts period selectors, range navigation, summary chips, and bulk
   actions. Used by Project Health, Project Plan, and going forward by any
   data-heavy in-page toolbar. */
.cb5-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  position: relative;
}
.cb5-page-toolbar__left,
.cb5-page-toolbar__right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cb5-page-toolbar__nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}
.cb5-page-toolbar__range {
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-primary);
  font-weight: var(--cb5-weight-medium);
  min-width: 180px;
  text-align: center;
}
.cb5-page-toolbar__divider {
  width: 1px;
  height: 22px;
  background: var(--cb5-border);
}
/* Force icon dimensions inside toolbar text buttons — Blazicons' Size attribute
   doesn't always override the SVG's intrinsic width/height. */
.cb5-page-toolbar .cb5-btn svg {
  width: 12px;
  height: 12px;
}

/* Summary chip — `[label][value]` pill used for budget / planned / remaining
   style readouts inside a page toolbar. Variants: default, .is-over (coral). */
.cb5-summary-chips {
  display: inline-flex;
  gap: 6px;
}
.cb5-summary-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  background: var(--cb5-surface-raised);
  border-radius: 6px;
  font-size: var(--cb5-text-sm);
}
.cb5-summary-chip .l {
  color: var(--cb5-text-tertiary);
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cb5-summary-chip .v {
  color: var(--cb5-text-primary);
  font-weight: var(--cb5-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.cb5-summary-chip.is-over {
  background: var(--rp-cap-over-bg);
}
.cb5-summary-chip.is-over .v {
  color: var(--rp-cap-over-fg);
}

/* === B.3.5 Project Health Panel ============================================
   Status bar (clickable category cells), engineer summary table, role x
   metric scores grid, drawer slide-out for category edit.
*/
.cb5-period-kinds {
  display: inline-flex;
  background: var(--cb5-surface-raised);
  border-radius: 6px;
  padding: 2px;
}
.cb5-period-kind {
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--cb5-text-secondary);
  font-size: var(--cb5-text-sm);
  cursor: pointer;
}
.cb5-period-kind.active {
  background: var(--cb5-surface);
  color: var(--cb5-text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.cb5-period-kind:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Overall pill — subtle gray panel that hosts the LABEL + color-coded VALUE + hint */
.cb5-overall-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--cb5-surface-raised);
  border-radius: 6px;
  font-size: var(--cb5-text-sm);
}
.cb5-overall-pill__label {
  color: var(--cb5-text-tertiary);
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cb5-overall-pill__value {
  font-weight: var(--cb5-weight-semibold);
}
.cb5-overall-pill__hint {
  color: var(--cb5-text-tertiary);
  font-size: var(--cb5-text-xs);
}

/* Status pill — neutral / muted by intent so health RYG stays distinct.
   Variants nudge the background a hair to differentiate Draft / Published / Final. */
.cb5-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: var(--cb5-text-sm);
  background: var(--cb5-surface-raised);
  color: var(--cb5-text-secondary);
}
.cb5-status-pill__date {
  color: var(--cb5-text-tertiary);
  font-size: var(--cb5-text-xs);
}
.cb5-status-pill--draft {
  background: var(--cb5-surface-raised);
}
.cb5-status-pill--published {
  background: var(--cb5-primary-light);
  color: var(--cb5-primary-hover);
}
.cb5-status-pill--published .cb5-status-pill__date {
  color: var(--cb5-primary-hover);
  opacity: 0.75;
}
.cb5-status-pill--final {
  background: var(--cb5-bg-secondary);
  color: var(--cb5-text-tertiary);
  border: 1px solid var(--cb5-border);
}

.cb5-health-statusbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.cb5-health-statuscell {
  position: relative;
  padding: 14px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  color: var(--cb5-text-on-primary);
  text-align: left;
  border: none;
}
.cb5-health-statuscell:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.cb5-health-statuscell--unrated {
  background: var(--cb5-surface);
  color: var(--cb5-text-tertiary);
  border: 1px dashed var(--cb5-border-strong);
}
.cb5-health-statuscell__category {
  font-size: 10px;
  font-weight: var(--cb5-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.85;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cb5-health-statuscell__level {
  font-size: 18px;
  font-weight: var(--cb5-weight-bold);
}
.cb5-health-statuscell__caption {
  font-size: var(--cb5-text-xs);
  margin-top: 2px;
  opacity: 0.92;
}
.cb5-health-statuscell__overridden {
  font-size: 9px;
  font-weight: var(--cb5-weight-bold);
  background: rgba(255,255,255,0.25);
  padding: 1px 4px;
  border-radius: 3px;
}
.cb5-health-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-tertiary);
  padding: 8px 4px;
}
.cb5-health-legend__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.cb5-health-legend__sep {
  flex: 1;
}

.cb5-health-section {
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: 6px;
  margin-bottom: 12px;
}
.cb5-health-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cb5-border);
  font-size: var(--cb5-text-sm);
}
.cb5-health-section__title {
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
}
.cb5-health-section__meta {
  color: var(--cb5-text-secondary);
  font-size: var(--cb5-text-xs);
}
.cb5-health-section__body {
  padding: 0;
  overflow-x: auto;
}

.cb5-engineer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cb5-text-sm);
}
.cb5-engineer-table thead th {
  text-align: left;
  padding: 8px 12px;
  font-weight: var(--cb5-weight-medium);
  font-size: var(--cb5-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--cb5-text-tertiary);
  border-bottom: 1px solid var(--cb5-border);
}
.cb5-engineer-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--cb5-divider);
}
.cb5-engineer-table tbody tr:last-child td {
  border-bottom: none;
}
.cb5-engineer-table tbody tr.totals {
  font-weight: var(--cb5-weight-semibold);
  background: var(--cb5-surface-raised);
}
.cb5-engineer-table tbody tr.unallocated {
  color: var(--cb5-text-tertiary);
  font-style: italic;
}
.cb5-engineer-table__name {
  font-weight: var(--cb5-weight-medium);
  color: var(--cb5-text-primary);
}
.cb5-engineer-table__role {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-tertiary);
}
.cb5-engineer-table__num--good { color: var(--cb5-text-primary); }
.cb5-engineer-table__num--warn { color: var(--cb5-warning-fg); font-weight: var(--cb5-weight-semibold); }
.cb5-engineer-table__num--crit { color: var(--cb5-error); font-weight: var(--cb5-weight-semibold); }

.cb5-scores-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cb5-text-sm);
}
.cb5-scores-grid thead th {
  text-align: left;
  padding: 8px 12px;
  font-weight: var(--cb5-weight-medium);
  font-size: var(--cb5-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--cb5-text-tertiary);
  border-bottom: 1px solid var(--cb5-border);
  background: var(--cb5-surface-raised);
}
.cb5-scores-grid tbody td,
.cb5-scores-grid tfoot td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--cb5-divider);
}
.cb5-scores-grid tfoot tr.target td {
  color: var(--cb5-text-tertiary);
  font-style: italic;
  border-top: 1px solid var(--cb5-border);
}
.cb5-scores-grid input[type="number"] {
  width: 56px;
}

/* === B.3.5 Drawer slide-out =================================================
   Right-side panel for editing one category. Backdrop is dim but click-through
   on the rest of the page is blocked by the overlay element.
*/
.cb5-drawer-backdrop {
  position: fixed;
  /* Sit below the global header so it stays clickable. */
  top: var(--cb5-header-height);
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15,23,42,0.35);
  z-index: 60;
  animation: cb5-drawer-fade 0.15s ease-out;
}
.cb5-drawer {
  position: fixed;
  /* Sit below the global header so the user keeps page-level orientation visible. */
  top: var(--cb5-header-height);
  right: 0;
  width: min(520px, 100vw);
  height: calc(100vh - var(--cb5-header-height));
  background: var(--cb5-surface);
  border-left: 1px solid var(--cb5-border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.08);
  z-index: 61;
  display: flex;
  flex-direction: column;
  animation: cb5-drawer-slide 0.18s ease-out;
}
.cb5-drawer__header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--cb5-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cb5-drawer__title-eyebrow {
  font-size: var(--cb5-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cb5-text-tertiary);
  margin-bottom: 2px;
}
.cb5-drawer__title {
  font-size: 18px;
  font-weight: var(--cb5-weight-semibold);
}
.cb5-drawer__close {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--cb5-text-tertiary);
}
.cb5-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}
.cb5-drawer__footer {
  padding: 12px 18px;
  border-top: 1px solid var(--cb5-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: var(--cb5-surface-raised);
}
.cb5-drawer-section {
  margin-bottom: 18px;
}
.cb5-drawer-section__label {
  font-size: var(--cb5-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cb5-text-tertiary);
  font-weight: var(--cb5-weight-medium);
  margin-bottom: 6px;
}
.cb5-drawer-section__calc {
  border: 1px solid var(--cb5-border);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--cb5-surface-raised);
}
.cb5-drawer-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cb5-drawer-pill {
  flex: 1;
  min-width: 100px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.1s, background 0.1s;
}
.cb5-drawer-pill__label {
  font-weight: var(--cb5-weight-semibold);
  font-size: var(--cb5-text-sm);
}
.cb5-drawer-pill__hint {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-tertiary);
  margin-top: 2px;
}
.cb5-drawer-pill.selected {
  color: var(--cb5-text-on-primary);
  border-color: transparent;
}
.cb5-drawer-pill.selected .cb5-drawer-pill__hint {
  color: rgba(255,255,255,0.85);
}

@keyframes cb5-drawer-slide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes cb5-drawer-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* === B.3.5 Archive banner + version history modal ========================= */
.cb5-archive-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: var(--cb5-warning-bg);
  border: 1px solid var(--cb5-warning);
  color: var(--cb5-warning-fg);
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: var(--cb5-text-sm);
}

.cb5-link-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--cb5-text-link);
  font: inherit;
}
.cb5-link-button:hover {
  text-decoration: underline;
}

/* Centered modal panel (version history) — sits above the dim backdrop */
.cb5-modal-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(800px, 90vw);
  max-height: 80vh;
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  z-index: 61;
  display: flex;
  flex-direction: column;
}
.cb5-modal-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cb5-border);
}
.cb5-modal-panel__title {
  font-size: 16px;
  font-weight: var(--cb5-weight-semibold);
}
.cb5-modal-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}
.cb5-modal-panel__footer {
  padding: 12px 18px;
  border-top: 1px solid var(--cb5-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: var(--cb5-surface-raised);
}

/* Highlight the row that's currently loaded */
.cb5-modal-panel tr.current-row {
  background: var(--cb5-primary-light);
  font-weight: var(--cb5-weight-medium);
}

/* === Form primitives ====================================================
   Generic radio cards + 'Coming soon' badge. Reusable. */
.cb5-radio-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cb5-radio {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  border: 1px solid var(--cb5-divider);
  border-radius: 6px;
  cursor: pointer;
}
.cb5-radio:has(input:checked) {
  border-color: var(--cb5-primary);
  background: var(--cb5-primary-light);
}
.cb5-radio.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cb5-radio span small {
  display: block;
  color: var(--cb5-text-tertiary);
  font-size: var(--cb5-text-xs);
  font-weight: var(--cb5-weight-normal);
  margin-top: 2px;
}
.cb5-coming-soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--cb5-surface-raised);
  color: var(--cb5-text-tertiary);
  font-size: 10px;
  font-weight: var(--cb5-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: 3px;
  vertical-align: middle;
}

/* ============================================================
   Generic detail-page primitives — lifted during the Resource
   Profile Detail v2 design audit (2026-05-18). See app-todo
   "CSS audit + refactor" for the broader sweep.

   Families below:
     .cb5-empty-state*       lifted from .pmo-empty-state*
     .cb5-skel-*             lifted from .pmo-skel-*
     .cb5-kicker             small uppercase tertiary label
     .cb5-strip*             quiet 2-row band primitive
     .cb5-audit-footer       created-by / updated-by footer
     .cb5-inline-edit-input  borderless input with dirty/saving states
   ============================================================ */

/* ── Empty / error / dashed states ─────────────────────────── */
.cb5-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}
.cb5-empty-state__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 420px;
}
.cb5-empty-state__glyph {
  width: 56px;
  height: 56px;
  border-radius: var(--cb5-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--cb5-primary);
  background: var(--cb5-primary-light);
}
.cb5-empty-state.is-error .cb5-empty-state__glyph {
  color: var(--cb5-error-fg-strong);
  background: var(--cb5-error-bg);
}
.cb5-empty-state.is-warn .cb5-empty-state__glyph {
  color: var(--cb5-warning-fg);
  background: var(--cb5-warning-bg);
}
.cb5-empty-state.is-dashed .cb5-empty-state__glyph {
  background: transparent;
  color: var(--cb5-text-tertiary);
  border: 1.5px dashed var(--cb5-border-strong);
}
.cb5-empty-state__title {
  font-size: var(--cb5-text-lg);
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-primary);
  margin: 0;
}
.cb5-empty-state.is-error .cb5-empty-state__title { color: var(--cb5-error-fg-strong); }
.cb5-empty-state__message {
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-secondary);
  line-height: 1.45;
  margin: 0;
}
.cb5-empty-state__cta {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

/* ── Loading skeleton primitives ───────────────────────────── */
@keyframes cb5-skel-shimmer {
  0%   { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
.cb5-skel {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--cb5-bg-secondary) 0%,
    var(--cb5-divider) 50%,
    var(--cb5-bg-secondary) 100%);
  background-size: 600px 100%;
  border-radius: 3px;
  animation: cb5-skel-shimmer 1.2s linear infinite;
  vertical-align: middle;
}
.cb5-skel-text  { height: 10px; }
.cb5-skel-cell  { width: 80%; height: 14px; }
.cb5-skel-line  { height: 12px; margin: 6px 0; }
.cb5-skel-block { height: 60px; margin: 8px 0; }

/* ── Small uppercase tertiary label ────────────────────────── */
.cb5-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb5-text-tertiary);
}

/* ── Strip primitive ───────────────────────────────────────────
   Quiet 2-row band at top of detail-page card bodies. Two stack
   nicely (Cost Summary + Work on Resource Profile Detail).
   ──────────────────────────────────────────────────────────── */
/* Person mention link — the clickable name rendered by <PersonMention> (PMO grid cells,
   recruit kanban cards, lists, etc.). Deliberately NOT the standard blue hyperlink: reads as
   emphasized body text (primary color, medium weight) and only underlines on hover, so dense
   name-heavy tables stay calm. See docs/sdd/specs/ui/person-tooltip.md. */
.cb5-person-mention {
  color: var(--cb5-text-primary);
  font-weight: var(--cb5-weight-medium);
  text-decoration: none;
  cursor: pointer;
}
.cb5-person-mention:hover,
.cb5-person-mention:focus-visible {
  color: var(--cb5-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Hover tooltip cards (Person / Req) ─────────────────────────────
   Shared frame + header + StatTile for the on-hover summary cards
   rendered by HoverCardLink consumers (PersonMention, ReqMention). The
   frame/header were previously duplicated inline in each card; extracted
   here so all person/req cards (and the recruit + resource person
   variants) read as one family. See docs/sdd/specs/ui/person-tooltip.md.
   ──────────────────────────────────────────────────────────────── */
.cb5-tooltip-card {
  min-width: 280px;
  max-width: 360px;
  padding: 12px;
  background: var(--cb5-bg);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-primary);
}
.cb5-tooltip-card--wide { max-width: 380px; }
.cb5-tooltip-card--narrow { min-width: 220px; max-width: 320px; }

/* Header: name on the left, an icon-link action (open-detail) on the right,
   hairline divider underneath. Shared across both card families + variants.
   No role/company here — candidates don't have them, so the header stays
   generic; per-variant identity rows go in the body. */
.cb5-tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cb5-divider);
}
.cb5-tooltip-header__name {
  min-width: 0;
  font-size: 14px;
  font-weight: var(--cb5-weight-semibold);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.cb5-tooltip-header__action {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  color: var(--cb5-text-tertiary);
  transition: background var(--cb5-transition-fast), color var(--cb5-transition-fast);
}
.cb5-tooltip-header__action:hover {
  background: var(--cb5-primary-light);
  color: var(--cb5-primary);
}
/* Icon.razor renders Lucide glyphs at intrinsic 24×24 (Size= is a no-op),
   so pin the size here — the working pattern per CLAUDE.md. */
.cb5-tooltip-header__action svg { width: 15px; height: 15px; }

/* StatTile — small label-over-value tile. Used by the candidate score grid
   and any delivery stat cells; grid wrapper controls the column count. */
.cb5-stat-grid {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  padding: 8px;
  background: var(--cb5-bg-subtle);
  border-radius: 4px;
}
.cb5-stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cb5-stat-tile { text-align: center; min-width: 0; }
.cb5-stat-tile__label {
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb5-stat-tile__value {
  font-size: 14px;
  font-weight: var(--cb5-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--cb5-text-primary);
}
.cb5-stat-tile__value--muted {
  color: var(--cb5-text-tertiary);
  font-weight: var(--cb5-weight-medium);
}

.cb5-strip {
  background: var(--cb5-bg-secondary);
  border: 1px solid var(--cb5-divider);
  border-radius: var(--cb5-radius);
  padding: 8px 14px 10px;
  margin-bottom: 12px;
  font-size: var(--cb5-text-sm);
  color: var(--cb5-text-secondary);
}
.cb5-strip + .cb5-strip { margin-top: -6px; }  /* tighten when stacked */

.cb5-strip__kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb5-text-tertiary);
  margin-bottom: 4px;
}
.cb5-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  line-height: 1.6;
}
.cb5-strip__row + .cb5-strip__row { margin-top: 2px; }
.cb5-strip__kpi {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.cb5-strip__kpi .label { color: var(--cb5-text-tertiary); }
.cb5-strip__kpi .value {
  color: var(--cb5-text-primary);
  font-weight: var(--cb5-weight-semibold);
}
.cb5-strip__kpi .value--muted {
  color: var(--cb5-text-secondary);
  font-weight: var(--cb5-weight-medium);
}
.cb5-strip__sep {
  color: var(--cb5-border-strong);
  margin: 0 4px;
}
.cb5-strip__disclose,
.cb5-strip__link {
  margin-left: auto;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--cb5-text-link);
  font-size: var(--cb5-text-sm);
  font-weight: var(--cb5-weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border-radius: 3px;
  text-decoration: none;
}
.cb5-strip__disclose:hover,
.cb5-strip__link:hover { background: var(--cb5-primary-light); }
.cb5-strip__disclose .chev {
  display: inline-block;
  transition: transform var(--cb5-transition-fast);
}
.cb5-strip__disclose[aria-expanded="true"] .chev { transform: rotate(180deg); }

.cb5-strip__chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--cb5-weight-semibold);
  font-size: 11px;
  letter-spacing: 0.01em;
  background: var(--cb5-surface-raised);
  color: var(--cb5-text-secondary);
}
.cb5-strip__chip[data-tone="green"]  { background: var(--cb5-pmo-band-green);  color: var(--cb5-pmo-band-green-fg); }
.cb5-strip__chip[data-tone="yellow"] { background: var(--cb5-pmo-band-yellow); color: var(--cb5-pmo-band-yellow-fg); }
.cb5-strip__chip[data-tone="orange"] { background: var(--cb5-pmo-band-orange); color: var(--cb5-text-on-primary); }
.cb5-strip__chip[data-tone="red"]    { background: var(--cb5-pmo-band-red);    color: var(--cb5-pmo-band-red-fg); }
.cb5-strip__chip[data-tone="black"]  { background: var(--cb5-pmo-band-black);  color: var(--cb5-pmo-band-black-fg); }
.cb5-strip__chip[data-tone="empty"]  { background: var(--cb5-surface-raised);  color: var(--cb5-text-tertiary); }

.cb5-strip__row--empty {
  color: var(--cb5-text-tertiary);
  font-style: italic;
}

/* Margin tier disclosure (extends the strip) */
.cb5-strip__tiers {
  margin-top: 10px;
  border-top: 1px solid var(--cb5-divider);
  padding-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 12px;
}
.cb5-strip__tier {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 8px;
  padding: 6px 8px 7px;
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-divider);
  border-radius: 3px;
  align-content: start;
  overflow: hidden;
}
.cb5-strip__tier::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--cb5-border-strong);
}
.cb5-strip__tier[data-band="bad"]::before  { background: var(--cb5-pmo-margin-bad);  }
.cb5-strip__tier[data-band="low"]::before  { background: var(--cb5-pmo-margin-low);  }
.cb5-strip__tier[data-band="mid"]::before  { background: var(--cb5-pmo-margin-mid);  }
.cb5-strip__tier[data-band="ok"]::before   { background: var(--cb5-pmo-margin-ok);   }
.cb5-strip__tier[data-band="good"]::before { background: var(--cb5-pmo-margin-good); }
.cb5-strip__tier .tier-name {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--cb5-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cb5-text-tertiary);
}
.cb5-strip__tier .tier-pct {
  font-variant-numeric: tabular-nums;
  font-weight: var(--cb5-weight-semibold);
  color: var(--cb5-text-secondary);
}
.cb5-strip__tier .tier-rate {
  font-size: var(--cb5-text-md);
  font-weight: var(--cb5-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--cb5-text-primary);
  grid-column: 1 / -1;
}
.cb5-strip__tier .tier-rate small {
  color: var(--cb5-text-tertiary);
  font-weight: var(--cb5-weight-medium);
  font-size: var(--cb5-text-xs);
  margin-left: 2px;
}
.cb5-strip__tier.is-target {
  border-color: var(--cb5-primary);
  background: var(--cb5-primary-light);
}
.cb5-strip__tier.is-target::before {
  background: var(--cb5-primary);
  height: 4px;
}
.cb5-strip__tier.is-target .tier-name { color: var(--cb5-primary); }
.cb5-strip__tier.is-target .tier-rate { color: var(--cb5-primary); }

/* ── Audit footer ──────────────────────────────────────────────
   Created-by / updated-by line at bottom of card body. Dashed
   top rule, muted tertiary type, right-aligned.
   ──────────────────────────────────────────────────────────── */
.cb5-audit-footer {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px dashed var(--cb5-divider);
  font-size: var(--cb5-text-xs);
  color: var(--cb5-text-tertiary);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  justify-content: flex-end;
}
.cb5-audit-footer b {
  color: var(--cb5-text-secondary);
  font-weight: var(--cb5-weight-medium);
}

/* ── Inline-editable input ─────────────────────────────────────
   Borderless at rest; dirty (typing) = amber; saving = primary.
   Use case: amount cells in child-list grids (Costs tab), any
   place we want save-on-blur with per-row state feedback.
   ──────────────────────────────────────────────────────────── */
.cb5-inline-edit-input {
  width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--cb5-text-sm);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 4px 8px;
  color: var(--cb5-text-primary);
  transition:
    background-color var(--cb5-transition-fast),
    border-color var(--cb5-transition-fast);
}
.cb5-inline-edit-input:hover {
  border-color: var(--cb5-border);
  background: var(--cb5-surface);
}
.cb5-inline-edit-input:focus {
  outline: none;
  border-color: var(--cb5-primary);
  background: var(--cb5-surface);
  box-shadow: 0 0 0 3px var(--cb5-primary-light);
}
.cb5-inline-edit-input.is-dirty {
  border-color: var(--cb5-warning);
  background: var(--cb5-warning-bg);
}
.cb5-inline-edit-input.is-saving {
  border-color: var(--cb5-primary);
  background: var(--cb5-primary-light);
}

/* ============================================================
   Selectable card — reusable clickable surface that highlights
   on hover / keyboard focus / selection. Rest: stronger border
   + light-grey fill. Active: CB5-orange border + light-orange
   fill + orange glow. Use on <a>/<button>/<div>; add .is-selected
   to mark the chosen one in a set. Children (icon, body) are the
   caller's concern — this owns the surface + interaction only.
   ============================================================ */
.cb5-select-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1.5px solid var(--cb5-border-strong);
  border-radius: 10px;
  background: var(--cb5-surface-raised);
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cb5-select-card:hover,
.cb5-select-card:focus-visible,
.cb5-select-card.is-selected {
  border-color: var(--cb5-brand-accent);
  background: var(--cb5-brand-accent-subtle);
  box-shadow: 0 0 0 3px rgba(245, 127, 38, 0.16);
  outline: none;
}

/* ── Toggle switch — generic on/off control (first consumer: ListEditPane auto-save) ──────────
   Markup: <label class="cb5-switch"><input type="checkbox" /><span class="cb5-switch__track"></span>Label</label> */
.cb5-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.cb5-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cb5-switch__track {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--cb5-border-strong);
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.cb5-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cb5-text-on-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.cb5-switch input:checked + .cb5-switch__track { background: var(--cb5-primary); }
.cb5-switch input:checked + .cb5-switch__track::after { transform: translateX(14px); }
.cb5-switch input:focus-visible + .cb5-switch__track { outline: 2px solid var(--cb5-primary); outline-offset: 2px; }

/* ── Dirty-field marker — changed-but-unsaved fields ──────────────────────────────────────────
   Apply .cb5-field--dirty to the FIELD WRAPPER div: the control gets a warning-tinted left
   accent and the label gets a dot (two signals — color isn't the only carrier). First consumer:
   ListEditPane quick-edit panels (per-field record-vs-snapshot compare). */
.cb5-field--dirty .cb5-field-label::after {
  content: "●";
  font-size: 8px;
  color: var(--cb5-warning);
  margin-left: 5px;
  vertical-align: middle;
}
.cb5-field--dirty .cb5-input,
.cb5-field--dirty .cb5-select {
  border-left: 3px solid var(--cb5-warning);
}

/* RecordStepper — compact prev/next cluster for detail-page headers (matches ListEditPane nav). */
.cb5-record-stepper { display: inline-flex; align-items: center; gap: 2px; }

/* ── LookupPicker — typeahead catalog select w/ optional inline add (catalog-picker spec) ── */
.cb5-lookup-picker { position: relative; }
.cb5-lookup-picker__menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 30;
  padding: 4px;
}
.cb5-lookup-picker__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 6px 8px;
  border-radius: var(--cb5-radius);
  font-size: var(--cb5-text-sm);
  cursor: pointer;
  color: var(--cb5-text-primary);
}
.cb5-lookup-picker__item:hover { background: var(--cb5-surface-raised); }
.cb5-lookup-picker__item.selected { background: var(--cb5-primary-light); color: var(--cb5-primary); }
.cb5-lookup-picker__add { color: var(--cb5-primary); font-weight: var(--cb5-weight-medium, 500); border-top: 1px solid var(--cb5-divider); border-radius: 0; }
.cb5-lookup-picker__hint { padding: 6px 8px; font-size: var(--cb5-text-xs); color: var(--cb5-text-muted); }
.cb5-text-error { color: var(--cb5-error); }

/* ── Timesheet per-day notes affordance (F103) — replaces the old "·" dot ─────────────────────
   Always present at the cell's line-end: faint until the cell/row is hovered; accented when the
   day has notes so filled state is visible at a glance. */
.cb5-time-grid-note {
  position: absolute;
  top: 1px;
  right: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--cb5-text-tertiary);
  opacity: 0;
  transition: opacity 0.15s;
}
.cb5-time-grid-cell:hover .cb5-time-grid-note { opacity: 0.7; }
/* RM-59 P2 (design §4/§6): filled = brand-accent orange square with a white glyph. This is the
   AUTHORITATIVE filled rule — it must live AFTER the base .cb5-time-grid-note block above,
   whose `background: none` silently beat an earlier same-specificity override (the invisible-chip
   regression caught in review 2026-08-06). */
.cb5-time-grid-note--filled {
  opacity: 1 !important;
  color: var(--cb5-text-on-primary);
  background: var(--cb5-brand-accent);
  border-radius: 3px;
}
/* Icon Size= no-op on Blazicon — CSS pin */
.cb5-time-grid-note svg { width: 11px; height: 11px; flex: none; }
/* RM-59 P5 (Q8 tablet): no hover on touch — the empty-cell chip would be invisible AND a 16px
   target. Keep it faintly visible and grow the hit area on coarse pointers. */
@media (pointer: coarse) {
  .cb5-time-grid-note { opacity: 0.45; width: 24px; height: 24px; }
  .cb5-time-grid-note svg { width: 13px; height: 13px; }
}

/* F102: holiday label in the day header + read-only time-off row */
.cb5-time-grid-holiday {
  font-size: 0.62rem;
  font-weight: var(--cb5-weight-medium, 500);
  color: var(--cb5-info, var(--cb5-primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}
.cb5-time-grid-row--timeoff { background: var(--cb5-bg-secondary); }

/* ── F106: All Resources actuals matrix (/time-entry "All Resources" tab) ─────────────────────
   Design: .exclude/claude-design/actuals-design/designer-handoff. Missing-first toning default;
   soft heat tints are the opt-in mode. */
.cb5-actuals-summary {
  display: flex;
  gap: 0;
  background: var(--cb5-surface);
  border: 1px solid var(--cb5-border);
  border-radius: var(--cb5-radius);
  margin-bottom: 12px;
}
.cb5-actuals-stat { padding: 10px 20px; border-right: 1px solid var(--cb5-divider); display: flex; flex-direction: column; }
.cb5-actuals-stat__val { font-size: 20px; font-weight: 700; line-height: 1.2; }
.cb5-actuals-stat__of { font-size: 13px; font-weight: 400; color: var(--cb5-text-muted); }
.cb5-actuals-stat__label { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--cb5-text-muted); }
.cb5-text-warning { color: var(--cb5-warning); }

.cb5-actuals-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cb5-actuals-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; font-size: var(--cb5-text-xs);
  border: 1px solid var(--cb5-border); border-radius: 12px;
  background: var(--cb5-surface); color: var(--cb5-text-secondary); cursor: pointer;
}
.cb5-actuals-chip.active { border-color: var(--cb5-primary); color: var(--cb5-primary); background: var(--cb5-primary-light); }
.cb5-actuals-chip__count { font-weight: 600; }

.cb5-actuals-wrap { background: var(--cb5-surface); border: 1px solid var(--cb5-border); border-radius: var(--cb5-radius); overflow: auto; max-height: calc(100vh - 320px); }
.cb5-actuals-grid { border-collapse: collapse; width: 100%; font-size: var(--cb5-text-sm); }
.cb5-actuals-grid th, .cb5-actuals-grid td { border-bottom: 1px solid var(--cb5-divider); padding: 6px 10px; text-align: center; white-space: nowrap; }
.cb5-actuals-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--cb5-bg-secondary); font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--cb5-text-secondary); }
.cb5-actuals-person { text-align: left !important; min-width: 210px; position: sticky; left: 0; background: var(--cb5-surface); z-index: 1; }
.cb5-actuals-grid thead th.cb5-actuals-person { background: var(--cb5-bg-secondary); z-index: 3; }
.cb5-actuals-grid tfoot td { position: sticky; bottom: 0; background: var(--cb5-bg-secondary); font-weight: 600; }
.cb5-actuals-grid tfoot td.cb5-actuals-person { z-index: 3; background: var(--cb5-bg-secondary); }

.cb5-actuals-day__date { font-size: 10px; color: var(--cb5-text-muted); text-transform: none; }
.cb5-actuals-day__holiday { font-size: 10px; text-transform: none; letter-spacing: 0; color: var(--cb5-info, var(--cb5-primary)); max-width: 92px; overflow: hidden; text-overflow: ellipsis; margin: 0 auto; }
.cb5-actuals-day--quiet, .cb5-actuals-cell--quiet { color: var(--cb5-text-tertiary); background: var(--cb5-bg-secondary); }

.cb5-actuals-person__row { display: flex; align-items: center; gap: 8px; }
.cb5-actuals-name { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--cb5-text-primary); cursor: pointer; }
.cb5-actuals-name:hover { color: var(--cb5-primary); text-decoration: underline; }
.cb5-actuals-person__role { font-size: 11px; color: var(--cb5-text-tertiary); }
.cb5-actuals-status { font-size: 10px; padding: 1px 8px; border-radius: 9px; margin-left: auto; }
.cb5-actuals-status--draft { background: var(--cb5-bg-secondary); color: var(--cb5-text-secondary); }
.cb5-actuals-status--submitted { background: var(--cb5-info-bg); color: var(--cb5-info); }
.cb5-actuals-status--approved { background: var(--cb5-success-bg); color: var(--cb5-success); }
.cb5-actuals-status--rejected { background: var(--cb5-error-bg); color: var(--cb5-error); }
.cb5-actuals-chip--draft.active { border-color: var(--cb5-text-secondary); color: var(--cb5-text-secondary); background: var(--cb5-bg-secondary); }
.cb5-actuals-chip--rejected.active { border-color: var(--cb5-error); color: var(--cb5-error); background: var(--cb5-error-bg); }

.cb5-actuals-cell--missing {
  background: repeating-linear-gradient(45deg, var(--cb5-error-bg), var(--cb5-error-bg) 4px, transparent 4px, transparent 8px);
  color: var(--cb5-error);
}
.cb5-actuals-dot { color: var(--cb5-text-tertiary); }
.cb5-actuals-cellbtn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.cb5-actuals-cellbtn:hover { color: var(--cb5-primary); text-decoration: underline; }

/* Heat mode — soft tints vs the person's own schedule (NOT billable targets) */
.cb5-actuals-heat--lo   { background: rgba(43, 108, 176, 0.10); }
.cb5-actuals-heat--ok   { background: rgba(47, 133, 90, 0.10); }
.cb5-actuals-heat--hi   { background: rgba(183, 121, 31, 0.14); }
.cb5-actuals-heat--over { background: rgba(197, 48, 48, 0.14); }

.cb5-actuals-total { text-align: right !important; border-left: 1px solid var(--cb5-border); min-width: 110px; }
.cb5-actuals-total__val { font-weight: 700; }
.cb5-actuals-total__sched { display: block; font-size: 10px; color: var(--cb5-text-muted); }
.cb5-actuals-delta { display: inline-block; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 8px; }
.cb5-actuals-delta--under { background: var(--cb5-error-bg); color: var(--cb5-error); }
.cb5-actuals-delta--over  { background: var(--cb5-warning-bg); color: var(--cb5-warning-fg); }

.cb5-actuals-legend { display: flex; gap: 16px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.cb5-actuals-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--cb5-border); vertical-align: -2px; margin-right: 4px; }
.cb5-actuals-swatch--missing { background: repeating-linear-gradient(45deg, var(--cb5-error-bg), var(--cb5-error-bg) 3px, transparent 3px, transparent 6px); }
.cb5-actuals-swatch--quiet { background: var(--cb5-bg-secondary); }

/* Holiday marker — gold star, the app's default vacation/holiday glyph (name in tooltip).
   Future: per-holiday icons with this as the fallback. */
.cb5-holiday-star { color: var(--cb5-accent-gold); display: flex; justify-content: center; margin-top: 1px; }