/* ==========================================================================
   Compazable's own additions on top of compazable-theme.css - 2026
   redesign, Stage 0.

   compazable-theme.css is the design package's stylesheet, kept exactly as
   delivered. This file holds everything the real app needs that a sample
   page didn't: the pieces of the frame the gallery didn't cover (sidebar
   groups with icons, the account menu, phone panels), and small fixes so
   the ~260 existing pages - written for the old black-top-bar layout - sit
   comfortably inside the new frame until each one is redesigned in its
   own stage.

   Bump ?v= in base.html (and service_worker.js.jinja) after editing.
   ========================================================================== */

/* ---------- 1. Bring the older page styles in line with the new colours ---
   base.html's August 2026 refresh named its own colours (--ink, --border,
   --bg, ...). Pointing them at the new design tokens means every older
   component that uses them (badges, avatar chips, attachment chips...)
   picks up the new palette without touching those pages. */
:root {
  --ink: var(--cz-ink); --ink-muted: var(--cz-muted); --ink-faint: var(--cz-faint);
  --border: var(--cz-line); --bg: var(--cz-bg); --surface: var(--cz-surface);
  --accent-soft: var(--cz-accent-soft);
  --success-soft: var(--cz-ok-bg); --success-ink: var(--cz-ok);
  --warning-soft: var(--cz-warn-bg); --warning-ink: var(--cz-warn);
  --neutral-soft: var(--cz-neutral-bg); --neutral-ink: var(--cz-neutral);
  --r-lg: var(--cz-radius-lg); --r-md: var(--cz-radius);
}
body { font-family: var(--cz-font); }
/* The theme gives every .btn a 40px minimum height (a comfortable click
   target). Small buttons inside tables and toolbars on a computer would
   otherwise all grow to that size and make every list twice as tall;
   phones keep base.html's own 44px rule for small buttons. */
@media (min-width: 577px) { .btn-sm { min-height: 32px; } }
.dropdown-menu { border-color: var(--cz-line); border-radius: 12px; box-shadow: var(--cz-shadow-pop); }

/* ---------- 2. Keyboard users: jump straight past the menu ---------- */
.cz-skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 3000; padding: 10px 16px; border-radius: var(--cz-radius);
  background: var(--cz-accent); color: #fff; font-weight: 600;
}
.cz-skip-link:focus { top: 12px; color: #fff; }
.cz-content:focus { outline: none; }

/* ---------- 3. Sidebar ---------- */
.cz-brand { text-decoration: none; }
.cz-brand:hover { text-decoration: none; }
.cz-nav__item { width: 100%; background: none; border: 0; text-align: left; font-family: inherit; cursor: pointer; min-height: 40px; }
.cz-nav__item > .bi { font-size: 16px; width: 18px; flex-shrink: 0; color: var(--cz-muted); }
.cz-nav__item[aria-current="page"] > .bi { color: var(--cz-accent-deep); }
.cz-nav__item > span { min-width: 0; }
.cz-nav__chev { margin-left: auto; font-size: 12px !important; transition: transform .15s; }
.cz-nav__group[open] > summary .cz-nav__chev { transform: rotate(180deg); }
.cz-nav__sub { margin-left: 24px; }
.cz-nav__badge { margin-left: auto; }
.cz-switcher__button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-menu__note { margin: 4px 8px 6px; font-size: var(--cz-text-xs); color: var(--cz-muted); line-height: 1.4; }
.cz-menu__item .bi { color: var(--cz-muted); }
/* Both sidebar pop-up menus are exactly as wide as the sidebar: the
   sidebar scrolls on its own when the menu is long (brief 3.2), and a
   scrolling box clips anything that sticks out past its edges. */
.cz-switcher .cz-menu { left: 0; right: 0; min-width: 0; }
.cz-menu--up { top: auto; bottom: calc(100% + 6px); left: 0; right: 0; min-width: 0; }

/* The signed-in person at the bottom; clicking opens the account menu. */
.cz-sidebar__me-wrap { position: relative; margin-top: auto; }
.cz-sidebar__me {
  width: 100%; margin: 0; background: none; border: 0; border-top: 1px solid var(--cz-line); border-radius: 0;
  text-align: left; font: inherit; color: var(--cz-ink); cursor: pointer; min-height: var(--cz-touch);
}
.cz-sidebar__me:hover { background: var(--cz-bg); }
.cz-sidebar__me-text { display: flex; flex-direction: column; min-width: 0; }
.cz-sidebar__me-text strong, .cz-sidebar__me-text .cz-sub {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cz-text-sm);
}

/* ---------- 4. Top bar (computers) ---------- */
.cz-topbar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cz-topbar__pending { position: relative; }
.cz-iconbtn { text-decoration: none; font-size: 17px; }
.cz-iconbtn:hover { background: var(--cz-bg); text-decoration: none; }
.cz-iconbtn__count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--cz-warn); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.cz-iconbtn__count:empty { display: none; }
.cz-iconbtn--pending { color: var(--cz-warn); border-color: var(--cz-warn-bg); background: var(--cz-warn-bg); }

/* ---------- 5. Page area ---------- */
/* Existing pages were written for Bootstrap's centred .container. Inside
   the frame the page area already has its padding and 1280px limit, so
   the page content simply fills it. min-width: 0 stops a wide table from
   pushing the whole page sideways (tables scroll inside their own box). */
.cz-page { min-width: 0; }
.cz-content > .container { max-width: none; padding: 0; }
.cz-content .alert { margin-bottom: 0; }
.cz-footer { margin-top: auto; }
.cz-footer a, .cz-footer { color: var(--cz-muted) !important; }

/* Public pages with nobody signed in (not the login screens) */
.cz-bare-header {
  display: flex; align-items: center; height: var(--cz-topbar-h); padding: 0 24px; margin-bottom: 24px;
  background: var(--cz-surface); border-bottom: 1px solid var(--cz-line);
}

/* ---------- 6. Phones ---------- */
.cz-phone-header__left, .cz-phone-header__right { display: flex; align-items: center; gap: 8px; }
.cz-phone-header .cz-brand__mark { text-decoration: none; }
.cz-pill-switch { min-height: 36px; color: var(--cz-ink); cursor: pointer; }
.cz-tabbar__item { background: none; border: 0; font-family: inherit; cursor: pointer; padding: 0 4px; }
.cz-tabbar__item .bi { font-size: 20px; line-height: 1; }
.cz-tabbar__item:hover { text-decoration: none; }

/* Panels opened from the tab bar (bottom sheets on phones) */
.cz-overlay[hidden] { display: none; }
.cz-sheet .cz-dialog { max-height: 85vh; overflow-y: auto; gap: 12px; }
.cz-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cz-sheet__body { display: flex; flex-direction: column; gap: 6px; }
.cz-sheet .cz-nav__item { min-height: var(--cz-touch); }
.cz-sheet__me { display: flex; align-items: center; gap: 12px; padding: 4px 4px 10px; border-bottom: 1px solid var(--cz-line); margin-bottom: 4px; }
.cz-install-help { padding: 0 12px 8px; }
body.cz-sheet-open { overflow: hidden; }

/* "Saved offline, not sent yet" banner just above the tab bar (phones) */
.cz-pending-banner { display: none; }
@media (max-width: 767.98px) {
  .cz-pending-banner:not(.d-none) {
    display: block; position: fixed; left: 8px; right: 8px; z-index: 19;
    bottom: calc(var(--cz-tabbar-h) + env(safe-area-inset-bottom) + 8px);
    background: var(--cz-warn-bg); color: var(--cz-ink); border-radius: 12px; box-shadow: var(--cz-shadow-pop);
  }
  .cz-pending-banner__btn {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--cz-touch); padding: 0 14px;
    background: none; border: 0; font: inherit; font-size: var(--cz-text-sm); font-weight: 600; color: var(--cz-warn); text-align: left;
  }
  #compazable-pending-submissions-phone-panel .card { position: static !important; width: auto !important; margin: 0 8px 8px; }
  /* Leave room for the banner so it never hides the end of the page. */
  body.cz-has-pending .cz-content { padding-bottom: calc(var(--cz-tabbar-h) + 96px + env(safe-area-inset-bottom)); }
}

/* ---------- 7. Assistant chat bubble ----------
   Computers: stays bottom-right, as before. Phones: lifted above the
   bottom tab bar, and hidden on form screens (self-evaluation, rating,
   check and submit...) so it never covers their buttons - Prasad, Stage 0
   answers. A page marks itself as a form screen with
   {% set cz_form_screen = true %}. */
@media (max-width: 767.98px) {
  .evalyou8-assist-bubble { bottom: calc(var(--cz-tabbar-h) + env(safe-area-inset-bottom) + 16px); right: 16px; width: 48px; height: 48px; }
  .evalyou8-assist-panel { bottom: calc(var(--cz-tabbar-h) + env(safe-area-inset-bottom) + 72px); right: 8px; left: 8px; width: auto; max-width: none; }
  body.cz-has-pending .evalyou8-assist-bubble { bottom: calc(var(--cz-tabbar-h) + env(safe-area-inset-bottom) + 76px); }
  .cz-form-screen .evalyou8-assist-bubble, .cz-form-screen .evalyou8-assist-panel { display: none !important; }
  /* The guided-demo card also sits above the tab bar on phones. */
  .evalyou8-demo-tour-card { bottom: calc(var(--cz-tabbar-h) + env(safe-area-inset-bottom) + 12px); left: 12px; }
}

/* While a phone panel is open, the Assistant bubble would otherwise float
   on top of it (it sits very high up so it stays above every page). */
body.cz-sheet-open .evalyou8-assist-bubble, body.cz-sheet-open .evalyou8-assist-panel { display: none !important; }

/* The white top bar stays fixed at the top while the page scrolls. Without
   this, anything the browser scrolls "into view" (a link to #section, a
   field with an error, a drag-and-drop target on the Career Framework
   board) could end up hidden right under that bar. Phones have no top bar. */
@media (min-width: 768px) { html { scroll-padding-top: calc(var(--cz-topbar-h) + 12px); } }

/* ---------- 8. "All my to-dos" page (Stage 0b) ----------
   Matches reference screens phase-2-manager/13 and 14. */
.cz-todo-group { background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-lg); overflow: hidden; }
.cz-todo-group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--cz-line); }
.cz-todo-group__title { display: flex; align-items: center; gap: 10px; }
.cz-todo-group__open { font-size: var(--cz-text); font-weight: 600; white-space: nowrap; }
.cz-todo-group__empty { margin: 0; padding: 14px 24px; color: var(--cz-muted); font-size: var(--cz-text); }
.cz-todo-list { list-style: none; margin: 0; padding: 0; }
.cz-todo-list li + li { border-top: 1px solid var(--cz-line); }
.cz-todo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--cz-touch); padding: 14px 24px; color: var(--cz-ink); }
.cz-todo-row:hover { background: #FAFBFC; text-decoration: none; }
.cz-todo-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cz-todo-row__title { font-size: var(--cz-text-md); font-weight: 600; }
.cz-todo-row__meta { font-size: var(--cz-text-sm); color: var(--cz-muted); }
.cz-todo-row .bi { color: var(--cz-muted); }
@media (max-width: 767.98px) {
  .cz-todo-group__head, .cz-todo-row, .cz-todo-group__empty { padding-left: 16px; padding-right: 16px; }
}
/* Counts next to each profile in the switcher */
.cz-menu__item .cz-chip + .bi-check2, .cz-nav__item .cz-chip + .bi-check2 { margin-left: 6px; }
.cz-menu__item .cz-chip[hidden], .cz-nav__item .cz-chip[hidden] { display: none; }

/* ---------- 9. "Search the Global Library" (HR Administrator, Stage 0b) ---------- */
.cz-libsearch { position: relative; }
.cz-libsearch--desktop { width: min(420px, 100%); }
.cz-libsearch .cz-search input::-webkit-search-cancel-button { cursor: pointer; }
.cz-libsearch__results {
  display: flex; flex-direction: column; gap: 4px; padding: 8px;
  background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: 12px;
}
.cz-libsearch__results[hidden] { display: none; }
.cz-libsearch--desktop .cz-libsearch__results {
  position: absolute; top: calc(100% + 6px); left: 0; width: min(560px, calc(100vw - var(--cz-sidebar-w) - 80px));
  max-height: min(70vh, 620px); overflow-y: auto; z-index: 30; box-shadow: var(--cz-shadow-pop);
}
.cz-libsearch--phone { display: flex; flex-direction: column; gap: 10px; }
.cz-libsearch--phone .cz-libsearch__results { border: 0; padding: 0; }
.cz-libsearch__group + .cz-libsearch__group { border-top: 1px solid var(--cz-line); margin-top: 4px; padding-top: 4px; }
.cz-libsearch__head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 4px; }
.cz-libsearch__head h3 { margin: 0; font-size: var(--cz-text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cz-muted); }
.cz-libsearch__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px; border-radius: var(--cz-radius-sm); }
.cz-libsearch__row:hover { background: var(--cz-bg); }
.cz-libsearch__row form { margin: 0; flex-shrink: 0; }
.cz-libsearch__row > .cz-btn, .cz-libsearch__row > .cz-chip { flex-shrink: 0; }
.cz-libsearch__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cz-libsearch__name { font-weight: 600; color: var(--cz-ink); }
.cz-libsearch__desc { font-size: var(--cz-text-sm); color: var(--cz-muted); line-height: 1.4; }
.cz-libsearch__more { display: inline-block; padding: 6px 8px 8px; font-size: var(--cz-text-sm); font-weight: 600; }
.cz-libsearch__empty { padding: 12px 8px; margin: 0; }
@media (max-width: 767.98px) {
  .cz-libsearch__row { flex-direction: column; align-items: stretch; }
  .cz-libsearch__row .cz-btn { width: 100%; min-height: var(--cz-touch); }
  .cz-libsearch__row > .cz-chip { align-self: flex-start; }
}
.cz-topbar__left { flex: 1; min-width: 0; }
/* A simple vertical stack with the design's standard gap between blocks -
   for new pages built from cz- pieces (the page area itself has only one
   child, the page, so it can't space the page's own blocks). */
.cz-stack { display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 767.98px) { .cz-stack { gap: 14px; } }

/* ==========================================================================
   Stage 1 - tables everywhere (brief section 3.5)
   Applies to every list table set up by enableGridControls() in base.html
   (it adds the cz-grid-table class), plus the "..." More menu and the
   compact phone list for every table the app already reflows on phones.
   Headings and data always line up because they are cells of one real
   <table> - the problem the brief describes came from the mock-ups drawing
   each row as its own grid, which the app never did.
   ========================================================================== */
table.cz-grid-table { font-size: var(--cz-text); }
table.cz-grid-table > thead > tr > th {
  background: var(--cz-bg); color: var(--cz-muted); border-bottom: 1px solid var(--cz-line);
  padding-top: 8px; padding-bottom: 8px; vertical-align: middle; white-space: nowrap;
}
table.cz-grid-table > tbody > tr > td { vertical-align: middle; border-color: var(--cz-line); }
table.cz-grid-table.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #FAFBFC; }
table.cz-grid-table .cz-num { text-align: right; }
table.cz-grid-table th.cz-num .cz-th { justify-content: flex-end; }

/* Column heading: the label is the sort button, the funnel opens the panel */
.cz-th { display: flex; align-items: center; justify-content: flex-start; gap: 2px; }
.cz-th .grid-th-label { flex-grow: 0; }
.cz-th__sort {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: var(--cz-text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cz-muted); text-align: left; white-space: nowrap;
}
.cz-th__sort:hover { color: var(--cz-ink); }
.cz-th__arrow { font-size: 11px; color: var(--cz-faint); }
th.is-sorted .cz-th__sort, th.is-sorted .cz-th__arrow { color: var(--cz-accent-deep); }
th.is-sorted { box-shadow: inset 0 -2px 0 var(--cz-accent); }
.cz-th__filter.grid-ctl-btn {
  position: relative; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent;
  color: var(--cz-faint); display: inline-grid; place-items: center; font-size: 12px; flex-shrink: 0;
}
.cz-th__filter.grid-ctl-btn:hover { background: var(--cz-line); color: var(--cz-ink); }
.cz-th__filter[data-active="true"] { background: var(--cz-accent-soft); color: var(--cz-accent-deep); }
.cz-th__filter[data-active="true"]::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--cz-accent);
}

/* The filter panel: A->Z / Z->A, search, tick-list with counts, Clear / Apply */
.cz-grid-pop.dropdown-menu {
  width: 280px; padding: 14px; display: none; flex-direction: column; gap: 10px;
  font-size: var(--cz-text); text-transform: none; letter-spacing: 0; color: var(--cz-ink); font-weight: 400;
}
.cz-grid-pop.dropdown-menu.show { display: flex; }
.cz-grid-pop__sort { display: flex; gap: 6px; }
.cz-grid-pop__sort .cz-btn { flex: 1; }
.cz-grid-pop__list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; border: 0; padding: 0; margin: 0; }
.cz-grid-pop__opt { display: flex; align-items: center; gap: 10px; min-height: 34px; cursor: pointer; font-weight: 400; }
.cz-grid-pop__opt .form-check-input { margin: 0; flex-shrink: 0; }
.cz-grid-pop__opt--all { font-weight: 600; border-bottom: 1px solid var(--cz-line); }
.cz-grid-pop__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-grid-pop__count { font-size: var(--cz-text-xs); color: var(--cz-muted); font-variant-numeric: tabular-nums; }
.cz-grid-pop__foot { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--cz-line); }

/* Paging under a long list */
.cz-grid-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 4px 0; font-size: var(--cz-text-sm); color: var(--cz-muted);
}
.cz-grid-pager[hidden] { display: none; }
.cz-grid-pager__buttons { display: flex; gap: 8px; }
tr.cz-paged-out { display: none !important; }

/* Phones: a "Sort" button next to the list's search box */
.cz-grid-phonesort { display: none; }
@media (max-width: 767.98px) {
  .cz-grid-phonesort { display: inline-block; flex-shrink: 0; }
  .cz-grid-phonesort--solo { display: flex; justify-content: flex-end; margin-bottom: 8px; }
  /* The list's own search box keeps most of the row; anything else on that
     row (a Card/Table switch, say) moves to the next line if needed. */
  .cz-grid-searchrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .cz-grid-searchrow > input { flex: 1 1 180px; min-width: 0; margin-right: 0 !important; }
  .cz-grid-pager { justify-content: center; }
  .cz-grid-pager__info { width: 100%; text-align: center; }
}

/* The "..." More menu at the end of a row */
.table-responsive table.table td.stack-actions.cz-actions { white-space: nowrap !important; }
.cz-actions .cz-action-keep, .cz-actions > form { vertical-align: middle; }
.cz-more { display: inline-block; vertical-align: middle; }
.cz-more__btn {
  width: 34px; height: 32px; border-radius: var(--cz-radius-sm); border: 1px solid var(--cz-line); background: var(--cz-surface);
  color: var(--cz-muted); display: inline-grid; place-items: center; cursor: pointer;
}
.cz-more__btn:hover, .cz-more__btn[aria-expanded="true"] { background: var(--cz-bg); color: var(--cz-ink); }
.cz-more__menu { min-width: 190px; padding: 6px; }
.cz-more__menu li > form { margin: 0; display: block !important; }
.cz-more__menu .dropdown-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; border-radius: var(--cz-radius-sm);
  font-size: var(--cz-text); font-weight: 500; text-align: left; white-space: nowrap;
}
.cz-more__menu .dropdown-item.cz-more__danger { color: #B42318; }
.cz-more__menu .dropdown-item.cz-more__danger:hover { background: #FEF3F2; }

/* Phones (or any list squeezed narrow): each record becomes one compact
   row of a list - its name first, then its details on one wrapping line,
   then its buttons - instead of the tall card per record used before.
   Same markup and data as the computer table, nothing hidden. These rules
   deliberately repeat the selectors of base.html's older card layout, so
   they replace it. */
@container (max-width: 640px) {
  .table-responsive table.table:not(.table-no-stack) tbody {
    display: block; background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-lg); overflow: hidden;
  }
  .table-responsive table.table:not(.table-no-stack) tr {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 2px;
    border: 0; border-bottom: 1px solid var(--cz-line); border-radius: 0; box-shadow: none; margin: 0; padding: 12px 16px;
  }
  .table-responsive table.table:not(.table-no-stack) tr:last-child { border-bottom: 0; }
  .table-responsive table.table:not(.table-no-stack) td { width: auto; padding: 0; background: transparent; }
  /* The record's name always leads, even when it isn't the first column
     (e.g. Employees starts with Emp #). */
  .table-responsive table.table:not(.table-no-stack) td.stack-title { flex: 1 1 100%; order: -1; font-size: var(--cz-text-md); font-weight: 600; }
  .table-responsive table.table:not(.table-no-stack) td[data-label] { font-size: var(--cz-text-sm); color: var(--cz-muted); text-align: left; }
  .table-responsive table.table:not(.table-no-stack) td[data-label]::before {
    content: attr(data-label) ": "; display: inline; font-size: inherit; font-weight: 600; text-transform: none;
    letter-spacing: 0; color: var(--cz-muted); margin: 0;
  }
  .table-responsive table.table:not(.table-no-stack) td.stack-actions {
    flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 8px; padding-top: 0; border-top: 0;
  }
}
/* Keep each record's name readable: rather than squeezing it into a narrow
   column, a genuinely wide table scrolls sideways inside its own box. */
table.cz-grid-table > tbody > tr > td.stack-title { min-width: 11rem; }

/* ==========================================================================
   Stage 2 - Employee screens (and the rating pieces later stages reuse)
   ========================================================================== */
.cz-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--cz-text); align-self: flex-start; }
.cz-back.is-disabled { color: var(--cz-muted); opacity: .6; }
.cz-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: var(--cz-text-sm); font-weight: 600; color: var(--cz-accent-deep); cursor: pointer; }
.cz-linkbtn:hover { text-decoration: underline; }
.cz-formprogress { display: flex; align-items: center; gap: 12px; min-width: 220px; font-size: var(--cz-text); }
.cz-formprogress .cz-progress { flex: 1; min-width: 100px; }

/* The 1-5 rating: five large buttons, number + level name (see _cz_rating.html).
   Each real radio button lies invisibly over its big button, so clicking,
   tapping and keyboard arrows all work exactly like a normal radio button. */
.cz-rate { border: 0; padding: 0; margin: 0; min-width: 0; }
.cz-rate__legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; float: none; margin-bottom: 8px; font-size: inherit; }
.cz-rate__options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cz-rate__opt { position: relative; }
.cz-rate__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cz-rate__opt label {
  height: 60px; border-radius: var(--cz-radius); border: 1px solid var(--cz-line); background: var(--cz-surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin: 0;
}
.cz-rate__opt input:hover + label { border-color: var(--cz-accent); }
.cz-rate__num { font-size: 18px; font-weight: 700; line-height: 1.1; }
.cz-rate__name { font-size: var(--cz-text-xs); color: var(--cz-muted); }
.cz-rate__opt input:checked + label { background: var(--cz-accent); border-color: var(--cz-accent); color: #fff; }
.cz-rate__opt input:checked + label .cz-rate__name { color: #fff; }
.cz-rate__opt input:focus-visible + label { outline: 3px solid var(--cz-accent); outline-offset: 2px; }
@media (max-width: 767.98px) {
  .cz-rate__options { gap: 6px; }
  .cz-rate__opt label { height: 58px; }
  .cz-rate__name { font-size: 10px; }
}
.cz-rate-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cz-rate-card__head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cz-rating-view { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cz-check-table td { vertical-align: top; }

/* The Save / Submit bar at the bottom of a form */
.cz-actionbar__buttons > form { margin: 0; display: flex; }
@media (min-width: 768px) {
  .cz-actionbar { position: sticky; bottom: 16px; z-index: 5; box-shadow: var(--cz-shadow-pop); }
}

/* Focused task screens on phones (brief 3.1): the bottom tab bar and the
   page's top strip step aside; the form's own bar sits at the bottom. */
@media (max-width: 767.98px) {
  body.cz-focus-screen .cz-tabbar, body.cz-focus-screen .cz-phone-header { display: none !important; }
  body.cz-focus-screen .cz-content { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  body.cz-focus-screen .cz-footer { display: none; }
  body.cz-focus-screen .cz-pending-banner:not(.d-none) { bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.cz-focus-screen .cz-back { min-height: var(--cz-touch); }
  .cz-actionbar__buttons > form { flex: 1; }
}
.cz-home-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.cz-home-stats > div { display: flex; flex-direction: column; gap: 4px; }
.cz-stat--warn { color: var(--cz-warn); }
/* Check and submit on a phone: one small card per item (reference screen
   phase-1-employee/06) instead of a squeezed table. */
@media (max-width: 767.98px) {
  .cz-check-table, .cz-check-table tbody, .cz-check-table tr, .cz-check-table td { display: block; width: 100%; }
  .cz-check-table { table-layout: auto; }
  .cz-check-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cz-check-table tr { position: relative; padding: 14px 16px; }
  .cz-check-table td { padding: 2px 0; overflow-wrap: normal; }
  .cz-check-table td.cz-check-name { padding-right: 48px; font-size: var(--cz-text-md); }
  .cz-check-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--cz-text-xs); font-weight: 700; color: var(--cz-muted); margin-top: 8px; }
  .cz-check-table td.cz-check-edit { position: absolute; top: 14px; right: 16px; width: auto; }
}
/* Computers: on a form screen the Assistant bubble sits above the form's
   Save / Submit bar instead of on top of its buttons. */
@media (min-width: 768px) { body.cz-focus-screen .evalyou8-assist-bubble { bottom: 112px; } body.cz-focus-screen .evalyou8-assist-panel { bottom: 180px; } }
/* My Goals cards */
.cz-goal { gap: 12px; }
.cz-goal--closed { background: var(--cz-bg); }
.cz-goal__row { display: flex; align-items: flex-start; gap: 18px; }
.cz-goal__weight { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 10px; border-radius: 12px; background: var(--cz-accent-soft); color: var(--cz-accent-deep); }
.cz-goal__weight .cz-stat { font-size: 26px; }
.cz-goal__weight .cz-sub { font-size: var(--cz-text-xs); color: var(--cz-accent-deep); }
.cz-goal__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cz-goal__title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cz-goal__actions { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 82px; }
.cz-goal__actions form { margin: 0; }
@media (max-width: 767.98px) {
  .cz-goal__row { gap: 12px; }
  .cz-goal__weight { min-width: 52px; padding: 6px; }
  .cz-goal__title { flex-direction: column; gap: 6px; }
  .cz-goal__actions { padding-left: 0; }
}
/* My Growth */
.cz-mg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cz-mg-dates { display: flex; gap: 10px; align-items: center; }
.cz-mg-dates[hidden] { display: none; }
.cz-mg-dates label { display: flex; align-items: center; gap: 6px; }
.cz-toggle__link { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; font-size: var(--cz-text-sm); font-weight: 600; color: var(--cz-ink); }
.cz-toggle__link:hover { text-decoration: none; background: var(--cz-bg); }
.cz-toggle__link[aria-pressed="true"] { background: var(--cz-ink); color: #fff; }
.cz-mg-card { gap: 10px; }
.cz-mg-now { margin: 4px 0 0; font-size: var(--cz-text); }
.cz-mg-change { font-weight: 600; }
.cz-mg-change.is-up { color: var(--cz-ok); }
.cz-mg-change.is-down { color: var(--cz-warn); }
@media (max-width: 991.98px) { .cz-mg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .cz-mg-grid { grid-template-columns: 1fr; } }
/* My Passport */
.cz-pp-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
@media (max-width: 991.98px) { .cz-pp-layout { grid-template-columns: 1fr; } }
.cz-switchrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cz-switchrow > div { display: flex; flex-direction: column; gap: 2px; }
.cz-switchrow--item { padding: 12px 0; border-top: 1px solid var(--cz-line); }
.cz-switchrow .cz-switch { margin-top: 2px; }
.cz-tier { display: flex; align-items: flex-start; gap: 10px; }
.cz-tier .cz-chip { min-width: 84px; justify-content: center; }
/* My Career Paths - restyled cards (the page keeps its own layout rules) */
.cp-me.cz-card { flex-direction: row; display: grid; }
.cp-card.cz-card { padding: 18px 20px; gap: 8px; margin-bottom: 10px; }
.cp-card.cz-card.mine { border-color: var(--cz-accent); background: #F5F9FF; }
.cz-seg__link { display: inline-flex; align-items: center; text-decoration: none; }
.cz-seg__link:hover { text-decoration: none; }
.cz-seg__link[aria-pressed="true"] { background: var(--cz-ink); border-color: var(--cz-ink); color: #fff; }
.cp-star.on { color: #9A6A00; border-color: #D99A06; background: #FFF8E6; }
.cz-mg-legend { display: flex; align-items: center; gap: 8px; margin: 0; }
.cz-mg-dash { display: inline-block; width: 22px; height: 2px; background: repeating-linear-gradient(90deg, #c2410c 0 5px, transparent 5px 8px); }

/* ==========================================================================
   Stage 3 - Manager screens
   ========================================================================== */
.cz-person { display: inline-flex; align-items: center; gap: 12px; }
.cz-team-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cz-team-tools > input { flex: 1 1 220px; max-width: 360px; margin-left: auto; }
.apr-group-row { cursor: pointer; }
.apr-expand-chevron { display: inline-block; font-size: 10px; transition: transform .15s ease; }
.apr-expand-chevron.is-open { transform: rotate(180deg); }
.apr-detail-panel { background: var(--cz-bg); border-radius: var(--cz-radius); padding: 12px; }
.cz-hero { gap: 10px; }
.cz-hero .cz-btn { height: 40px; }
.cz-card--warn { border-color: #F5C98B; background: #FFFBF5; }
.cz-quote { margin: 0; padding: 12px 16px; border-left: 3px solid var(--cz-warn); background: var(--cz-surface); border-radius: 0 10px 10px 0; font-size: var(--cz-text-md); }
.cz-rate__guide { margin: 8px 0 0; min-height: 1em; }
/* Team Goals */
.cz-tg-person { border-bottom: 1px solid var(--cz-line); }
.cz-tg-person:last-child { border-bottom: 0; }
.cz-tg-person .cz-list__row { border-bottom: 0; flex-wrap: wrap; }
.cz-tg-sum { white-space: nowrap; }
.cz-tg-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cz-tg-body { padding: 0 16px; }
@media (max-width: 767.98px) { .cz-tg-sum { flex-basis: 100%; order: 3; white-space: normal; } .cz-tg-actions { flex-basis: 100%; order: 4; } }
.cz-tg-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--cz-text-sm); font-weight: 600; }
.cz-tg-legend a, .cz-tg-legend span { display: inline-flex; align-items: center; gap: 8px; color: var(--cz-ink); }
/* Career Mapping readiness buttons (same radio-under-button pattern as the rating scale) */
.cz-readiness { border: 0; padding: 0; margin: 0; }
.cz-readiness__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.cz-readiness .cz-rate__opt label { height: auto; min-height: 48px; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px 12px; font-size: var(--cz-text-sm); font-weight: 600; text-align: left; }
.cz-readiness__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cz-readiness .cz-rate__opt input:checked + label .cz-sub { color: #fff; }
.cz-card--ok { border-color: #A6D9BC; background: #F4FBF7; }

/* ==========================================================================
   Stage 4 - Reviewer and Peer Reviewer screens
   ========================================================================== */
.cz-signoff-item + .cz-signoff-item { border-top: 1px solid var(--cz-line); }
.cz-signoff-table tbody tr { border-top: 0 !important; }
.cz-signoff-said td { padding-top: 0 !important; }
.cz-signoff-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 10px 14px; border-radius: 10px; background: var(--cz-bg); }
.cz-signoff-quotes p { margin: 2px 0 0; }
@media (max-width: 767.98px) { .cz-signoff-quotes { grid-template-columns: 1fr; gap: 8px; } .cz-signoff-said td::before { display: none; } }

/* ==========================================================================
   Stage 5 - HR Administrator setup screens (reference phase-4a-hr-setup,
   plus the Career Framework board from phase-4c)
   ========================================================================== */
/* "My company / Global library" - Bootstrap's own tabs (the top-bar
   library search opens them by id), restyled as the design's underline tabs. */
.cz-tabs.nav-tabs { border-bottom: 1px solid var(--cz-line); flex-wrap: nowrap; overflow-x: auto; }
.cz-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; padding: 10px 16px; background: none; font-size: var(--cz-text); font-weight: 600; color: var(--cz-muted); white-space: nowrap; }
.cz-tabs .nav-link:hover { color: var(--cz-ink); border-bottom-color: var(--cz-line); }
.cz-tabs .nav-link.active { background: none; color: var(--cz-accent-deep); border-bottom-color: var(--cz-accent); font-weight: 700; }
/* HR Home: the four count cards, each a link to its library */
.cz-statlinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cz-statlink { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: var(--cz-radius-lg); background: var(--cz-surface); border: 1px solid var(--cz-line); color: var(--cz-ink); text-decoration: none; }
.cz-statlink:hover { border-color: var(--cz-accent); text-decoration: none; color: var(--cz-ink); }
@media (max-width: 767.98px) { .cz-statlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cz-statlink { padding: 14px 16px; } }
/* "Needs attention before the review cycle" */
.cz-attn { padding: 0; gap: 0; overflow: hidden; }
.cz-attn__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--cz-line); }
.cz-attn__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 24px; border-bottom: 1px solid var(--cz-line); }
.cz-attn__row:last-child { border-bottom: 0; }
.cz-attn__row b { display: block; font-size: var(--cz-text-md); }
@media (max-width: 767.98px) {
  .cz-attn__head, .cz-attn__row { padding: 14px 16px; }
  .cz-attn__row { flex-direction: column; align-items: stretch; gap: 10px; }
}
/* Setup checklist */
.cz-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cz-steps li { display: flex; align-items: center; gap: 10px; font-size: var(--cz-text); }
.cz-steps__mark { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #C4CAD4; color: var(--cz-muted); font-size: 12px; font-weight: 700; }
.cz-steps li.is-done .cz-steps__mark { background: var(--cz-ok); border-color: var(--cz-ok); color: #fff; }
.cz-steps li.is-done a { color: var(--cz-muted); text-decoration: line-through; }
.cz-steps li:not(.is-done) a { font-weight: 600; color: var(--cz-ink); }
/* Library toolbars: quick filters on the left, search on the right */
.cz-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cz-toolbar > .form-control { flex: 1 1 220px; max-width: 360px; margin-left: auto; }
.cz-toolbar .form-select { width: auto; height: 36px; border-radius: 999px; font-size: var(--cz-text-sm); font-weight: 600; }
/* People shown as name tags (Mapping, Employees) */
.cz-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cz-nametag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--cz-bg); border: 1px solid var(--cz-line); font-size: var(--cz-text-sm); font-weight: 600; white-space: nowrap; }
.cz-nametag .cz-avatar { width: 24px; height: 24px; font-size: 10px; }
.cz-namecell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cz-namecell > a, .cz-namecell > b { font-weight: 600; color: var(--cz-ink); }
.cz-namecell .cz-sub { font-size: var(--cz-text-sm); }
/* Career Framework board */
.cf-slot { border: 1.5px dashed #C4CAD4; border-radius: 8px; padding: 8px; font-size: var(--cz-text-xs); color: var(--cz-muted); text-align: center; }
.cf-slot.drop-ok, .cf-lvlrow.drop-ok .cf-slot { border-color: var(--cz-accent); background: var(--cz-accent-soft); color: var(--cz-accent-deep); }
.cf-unplaced-list { display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow-y: auto; }
.cf-unplaced-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 10px; background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: 8px; font-size: var(--cz-text-sm); font-weight: 600; }
/* Placing Roles is done on a computer; phones show the board to look at. */
@media (max-width: 767.98px) { [data-cf-edit-only] { display: none !important; } }
/* Phone list layout (Stage 1) turns table rows into blocks, which also
   un-hid rows that are meant to stay folded away until "Edit" is pressed
   (e.g. the Career Framework's band and readiness edit forms). Keep them
   folded until opened. */
@media (max-width: 767.98px) { tr.collapse:not(.show) { display: none !important; } }
/* Competency Library > Edit levels: number badge beside each name */
.cz-level-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: end; }
.cz-level-row__num { width: 36px; height: 40px; border-radius: 10px; background: var(--cz-accent-soft); color: var(--cz-accent-deep); display: grid; place-items: center; font-weight: 800; }

/* ==========================================================================
   Employees: bulk actions (approved mock-up, 2026-09-29)
   ========================================================================== */
.cz-pick-cell { width: 44px; }
.cz-pick-cell .form-check-input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
tr.is-picked > td { background: var(--cz-accent-soft) !important; }
/* The dark "3 selected" bar: stays in view at the bottom while scrolling. */
.cz-bulkbar { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--cz-ink); color: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(16, 24, 40, .2); }
.cz-bulkbar[hidden] { display: none; }
.cz-bulkbar__buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cz-bulkbar .cz-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.cz-bulkbar .cz-btn--primary { background: var(--cz-accent); border-color: var(--cz-accent); }
@media (max-width: 767.98px) { .cz-bulkbar { bottom: calc(84px + env(safe-area-inset-bottom)); } }
/* Phone list: the tick box sits beside the name, and only after "Select". */
@container (max-width: 640px) {
  .table-responsive table.table:not(.table-no-stack) td.cz-pick-cell { order: -2; flex: 0 0 28px; }
  .table-responsive table.table:not(.table-no-stack) tr:has(> td.cz-pick-cell) td.stack-title { flex-basis: calc(100% - 44px); }
  table:not(.cz-picking) td.cz-pick-cell { display: none !important; }
  table:not(.cz-picking) tr:has(> td.cz-pick-cell) td.stack-title { flex-basis: 100%; }
}
.cz-level-row { align-items: center; }
.cz-level-row .cz-field { gap: 0; }
/* Phone list: a ticked person's whole row is highlighted, not each piece. */
@container (max-width: 640px) {
  .table-responsive table.table tr.is-picked { background: var(--cz-accent-soft); }
  .table-responsive table.table tr.is-picked > td { background: transparent !important; }
}

/* ==========================================================================
   Stage 6 - HR reports and admin screens
   ========================================================================== */
/* Reviews tracker: status counts that filter the table */
.cz-statusbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; border-radius: var(--cz-radius-lg); background: var(--cz-surface); border: 1px solid var(--cz-line); color: var(--cz-ink); font: inherit; text-align: left; cursor: pointer; }
.cz-statusbtn:hover { border-color: var(--cz-accent); }
.cz-statusbtn[aria-pressed="true"] { border-color: var(--cz-accent); background: var(--cz-accent-soft); box-shadow: inset 0 0 0 1px var(--cz-accent); }
.cz-statusbtn .cz-stat { font-size: 28px; }
@media (max-width: 767.98px) { .cz-statusbtn { padding: 12px 14px; } .cz-statusbtn .cz-stat { font-size: 24px; } }
/* Activity Log day headings */
.cz-logday__title { font-size: var(--cz-text-md); color: var(--cz-muted); }
/* Billing: rates beside charges; label/value lists */
.cz-billing-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
@media (max-width: 991.98px) { .cz-billing-layout { grid-template-columns: 1fr; } }
.cz-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; margin: 0; }
.cz-kv dt { font-weight: 500; color: var(--cz-ink); }
.cz-kv dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Settings: section menu on the left, one section on the right */
.cz-settings-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.cz-settings-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.cz-settings-nav__group { margin: 10px 0 4px; padding: 0 12px; font-size: var(--cz-text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cz-muted); }
.cz-settings-nav__group:first-child { margin-top: 0; }
.cz-settings-nav__item { text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 10px; font: inherit; font-size: var(--cz-text); font-weight: 500; color: var(--cz-ink); cursor: pointer; }
.cz-settings-nav__item:hover { background: var(--cz-surface); }
.cz-settings-nav__item[aria-current="true"] { background: var(--cz-accent-soft); color: var(--cz-accent-deep); font-weight: 700; }
.cz-settings-body { min-width: 0; }
.cz-settings-body .accordion { --bs-accordion-border-width: 0; }
/* Until the menu is built, every section shows (so nothing is lost if the script fails). */
.cz-settings-layout.is-ready .cz-settings-section:not(.is-current) { display: none; }
.cz-settings-section { background: var(--cz-surface); border: 1px solid var(--cz-line) !important; border-radius: var(--cz-radius-lg) !important; overflow: hidden; }
.cz-settings-section > .accordion-header { display: none; }
.cz-settings-section > .accordion-collapse > .cz-settings-section__title { margin: 22px 24px 0; }
.cz-settings-section .accordion-body { padding: 16px 24px 24px; }
.cz-settings-section__title:focus { outline: none; }
/* The save bar stays at the bottom of the screen while scrolling */
.cz-savebar { position: sticky; bottom: 16px; z-index: 5; margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; background: var(--cz-surface); border: 1px solid var(--cz-line); box-shadow: 0 8px 24px rgba(16, 24, 40, .12); }
.cz-savebar__msg { display: none; align-items: center; gap: 8px; font-weight: 600; }
.cz-savebar__msg .bi { color: var(--cz-warn); font-size: 9px; }
.cz-savebar.is-dirty .cz-savebar__msg { display: inline-flex; }
.cz-savebar.is-dirty .cz-savebar__clean { display: none; }
.cz-savebar.is-dirty { border-color: #F5C98B; background: #FFFBF5; }
@media (max-width: 991.98px) {
  .cz-settings-layout { grid-template-columns: 1fr; gap: 12px; }
  .cz-settings-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .cz-settings-nav__group { display: none; }
  .cz-settings-nav__item { white-space: nowrap; border: 1px solid var(--cz-line); background: var(--cz-surface); border-radius: 999px; padding: 7px 14px; font-size: var(--cz-text-sm); }
}
@media (max-width: 767.98px) {
  .cz-savebar { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .cz-settings-section > .accordion-collapse > .cz-settings-section__title { margin: 18px 16px 0; }
  .cz-settings-section .accordion-body { padding: 12px 16px 18px; }
}
/* Reports (Competency Overview pattern): one filter bar of pill buttons */
.cz-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cz-filterbar .dropdown { display: inline-block; margin: 0 !important; }
.cz-pillbtn, .cz-filterbar .btn.dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cz-line); background: var(--cz-surface); color: var(--cz-ink); font: inherit; font-size: var(--cz-text-sm); font-weight: 600; }
.cz-pillbtn:hover, .cz-filterbar .btn.dropdown-toggle:hover { border-color: var(--cz-accent); background: var(--cz-surface); color: var(--cz-ink); }
/* Heatmap: the Competency Overview table, coloured by band */
.co-grid.is-heatmap td.co-cell { font-weight: 700; }
.co-band-low { --co-bg: #FFF4E5; --co-fg: #9A4A00; }
.co-band-mid { --co-bg: #E7F1FF; --co-fg: #0A58CA; }
.co-band-high { --co-bg: #0D6EFD; --co-fg: #FFFFFF; }
.co-grid.is-heatmap td.co-cell[class*="co-band-"] { background: var(--co-bg) !important; color: var(--co-fg); box-shadow: inset 0 0 0 2px var(--cz-surface); text-align: center; }
.co-grid.is-heatmap td.co-cell .co-cell-link { color: inherit; text-decoration: none; display: block; }
.co-grid.is-heatmap td.co-cell .co-cell-link:hover { text-decoration: underline; }
.co-grid:not(.is-heatmap) .co-cell-link { color: inherit; }
.co-empty { color: var(--cz-muted); }
.co-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: var(--cz-text-sm); color: var(--cz-muted); }
.co-legend span { display: inline-flex; align-items: center; gap: 6px; }
.co-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--co-bg); border: 1px solid var(--cz-line); }
.cz-filterbar > .contents { display: contents; }
.cz-filterbar__label { font-size: var(--cz-text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cz-muted); margin-left: 4px; }
.cz-pillselect { width: auto; height: 36px; border-radius: 999px; font-size: var(--cz-text-sm); font-weight: 600; padding-top: 0; padding-bottom: 0; }
/* Career Readiness summary bar */
.cr-summary-bar { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: var(--cz-bg); }
.cr-summary-bar span { display: block; height: 100%; }
.cr-summary-item { display: flex; flex-direction: column; gap: 4px; }
.cr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
/* The shared Table/Chart switch also marks its button "active"; on the
   Heatmap / Table / Chart toggle only aria-pressed decides the highlight. */
.cz-toggle button.active:not([aria-pressed="true"]) { background: none; color: var(--cz-ink); }
/* Heatmap on a phone (list layout): the label stays plain, the number
   itself carries the band colour, so both stay readable. */
@container (max-width: 640px) {
  .co-grid.is-heatmap td.co-cell[class*="co-band-"] { background: transparent !important; color: var(--cz-muted); box-shadow: none; text-align: left; }
  .co-grid.is-heatmap td.co-cell .co-cell-link { display: inline; }
  .co-grid.is-heatmap td.co-cell .co-val { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--co-bg); color: var(--co-fg); font-weight: 700; }
}

/* ==========================================================================
   Stage 7 - Interviewer, Admin, Auditor and shared screens
   ========================================================================== */
/* Candidate match: big %, a bar per competency with a black "required" marker */
.cm-verdict { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cm-pct { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cm-pct--sm { font-size: 20px; }
.cm-bars { display: flex; flex-direction: column; gap: 14px; }
.cm-row { display: flex; flex-direction: column; gap: 6px; }
.cm-row__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-track { position: relative; height: 12px; border-radius: 999px; background: var(--cz-bg); border: 1px solid var(--cz-line); }
.cm-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--cz-accent); }
.cm-fill.is-short { background: #E8A13A; }
.cm-marker { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--cz-ink); }
.cm-marker-key { display: inline-block; width: 3px; height: 12px; background: var(--cz-ink); border-radius: 2px; vertical-align: -1px; margin-right: 4px; }
.cz-details > summary { cursor: pointer; font-weight: 600; color: var(--cz-accent-deep); font-size: var(--cz-text-sm); }
/* Notifications */
.cz-nf-day__title { font-size: var(--cz-text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cz-muted); margin: 0 0 8px; }
.cz-nf { align-items: flex-start; }
.cz-nf__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; background: transparent; }
.cz-nf.is-unread .cz-nf__dot { background: var(--cz-accent); }
.cz-nf.is-unread .cz-list__title { font-weight: 700; }
@media (max-width: 767.98px) { .cz-nf { flex-wrap: wrap; } .cz-nf > .d-flex { padding-left: 21px; } }
/* My Data */
.cz-kv--left { grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); }
.cz-kv--left dt { color: var(--cz-muted); font-weight: 500; }
.cz-kv--left dd { text-align: left; white-space: normal; font-weight: 600; }
.cz-md-review { border-top: 1px solid var(--cz-line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
a.cz-settings-nav__item { text-decoration: none; }
/* Change password */
.cz-pw { position: relative; display: block; }
.cz-pw .cz-input { width: 100%; padding-right: 48px; }
.cz-pw__toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 36px; border: 0; background: none; color: var(--cz-muted); border-radius: 8px; }
.cz-pw__toggle:hover { background: var(--cz-bg); color: var(--cz-ink); }
.cz-pwcheck { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--cz-text-sm); }
.cz-pwcheck li { position: relative; padding-left: 26px; color: var(--cz-muted); }
.cz-pwcheck li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #C4CAD4; }
.cz-pwcheck li.is-ok { color: var(--cz-ink); }
.cz-pwcheck li.is-ok::before { background: var(--cz-ok); border-color: var(--cz-ok); }
.cz-pwcheck li.is-ok::after { content: ""; position: absolute; left: 5px; top: 5px; width: 6px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cz-pwcheck__note::before { border-style: dashed !important; }
/* Ask Compazable on a phone: "Try asking" suggestions become tappable chips */
@media (max-width: 767.98px) {
  .ask-suggest { flex-direction: row !important; flex-wrap: wrap; gap: 8px !important; }
  .ask-suggest button { border-radius: 999px !important; border: 1px solid var(--cz-line) !important; background: var(--cz-surface) !important; padding: 7px 12px !important; }
}

/* ==========================================================================
   Stage 8 - final sweep: contrast (brief section 8: text at least 4.5:1)
   Bootstrap's own greys, blue and red are a little too light on the page
   background (#F6F7F9) - measured 4.2-4.4:1. These map them onto the
   theme's darker equivalents, everywhere at once.
   ========================================================================== */
.text-muted, .form-text { color: var(--cz-muted) !important; }
.btn-outline-secondary { --bs-btn-color: #344054; --bs-btn-border-color: #D0D5DD; --bs-btn-hover-color: #101828; --bs-btn-hover-bg: #F2F4F7; --bs-btn-hover-border-color: #98A2B3; --bs-btn-active-color: #101828; --bs-btn-active-bg: #EAECF0; --bs-btn-active-border-color: #98A2B3; }
.btn-outline-primary { --bs-btn-color: var(--cz-accent-deep); --bs-btn-border-color: var(--cz-accent-deep); }
.btn-outline-danger { --bs-btn-color: #B42318; --bs-btn-border-color: #E4A09A; --bs-btn-hover-bg: #B42318; --bs-btn-hover-border-color: #B42318; }
.text-danger { color: #B42318 !important; }
:root { --bs-link-color: #0A58CA; --bs-link-color-rgb: 10, 88, 202; --bs-link-hover-color: #084298; --bs-link-hover-color-rgb: 8, 66, 152; }
.cz-content code { color: #9E1B5A; }
.ask-side h2 { color: var(--cz-muted) !important; }
/* My Data on a phone: each value sits under its label, and long values
   (an email address, say) wrap instead of pushing the page wider. */
.cz-kv--left dd { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 575.98px) { .cz-kv--left { grid-template-columns: 1fr; gap: 2px 0; } .cz-kv--left dd { margin-bottom: 8px; } }

/* ---------- Educational Institution redesign (Stage EI-A onwards) ---------- */
/* School level names are longer ("Approaching Proficient") - the rating
   buttons grow to fit and wrap the name onto two lines on phones
   (brief_EI 3.1), instead of a fixed height that would cut it off. */
.cz-rate--long .cz-rate__opt label { height: auto; min-height: 60px; padding: 8px 4px; text-align: center; }
.cz-rate--long .cz-rate__name { line-height: 1.2; overflow-wrap: normal; word-break: normal; }
@media (max-width: 767.98px) {
  .cz-rate--long .cz-rate__options { gap: 4px; }
  .cz-rate--long .cz-rate__opt label { padding: 6px 2px; }
  .cz-rate--long .cz-rate__name { font-size: 9.5px; letter-spacing: -0.01em; }
}
/* The blue "Pick up where you left off" card: its progress bar sits on blue. */
.cz-hero .cz-progress { background: rgba(255, 255, 255, .3); }
.cz-hero .cz-progress > span { background: #fff; }
.cz-hero__title { font-size: 22px; font-weight: 700; line-height: 1.25; }
.cz-hero__row { display: flex; align-items: center; gap: 10px; font-size: var(--cz-text-sm); font-weight: 600; }
.cz-hero__row .cz-progress { flex: 1; }
/* Student Home: one row per subject, a cell per self-evaluation. */
.cz-ei-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cz-ei-cell > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
@media (max-width: 767.98px) { .cz-ei-cell { padding: 4px 0; } }
/* Skill report bars (My Growth, a Teacher's view of one Student). */
.cz-skillbars { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cz-skillbar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 14rem; align-items: center; gap: 16px; }
.cz-skillbar__name { font-weight: 600; }
.cz-skillbar__track { height: 10px; border-radius: 999px; background: var(--cz-line); overflow: hidden; }
.cz-skillbar__track > span { display: block; height: 100%; border-radius: 999px; background: var(--cz-accent); }
.cz-skillbar__value { white-space: nowrap; font-size: var(--cz-text-sm); }
.cz-skillbar__value b { font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
  /* Phone: name and score on one line, the bar full width beneath, so every
     bar starts and ends in the same place. */
  .cz-skillbar { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .cz-skillbar__value { text-align: right; }
  .cz-skillbar__track { grid-column: 1 / -1; grid-row: 2; }
}
.cz-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--cz-bg); border: 1px solid var(--cz-line); font-size: var(--cz-text-sm); }
/* Student Home's subject table on a phone: each self-evaluation cell takes
   the full width under the subject name. */
.cz-ei-subjects td.cz-ei-td .cz-ei-cell { width: 100%; }
@container (max-width: 640px) {
  .table-responsive table.cz-ei-subjects td.cz-ei-td { margin-top: 6px; color: var(--cz-ink); font-size: var(--cz-text); }
}
/* School level names are long: inside a table cell the rating ("3 ·
   Approaching Proficient") may wrap under its dots instead of spilling
   into the next column. */
.cz-check-table .cz-rate-long-names .cz-rating-view,
.cz-ei-wrap .cz-rating-view { white-space: normal; flex-wrap: wrap; row-gap: 2px; }
/* Board marks grid (Stage EI-D): narrow number boxes, red when over the maximum. */
.cz-marks-table .cz-mark-input { width: 90px; margin-left: auto; text-align: right; }
.cz-marks-table .cz-mark-input.is-invalid { border-color: #B42318; background: #FEF3F2; }
@media (max-width: 767.98px) { .cz-marks-table .cz-mark-input { width: 100%; margin-left: 0; text-align: left; } }
/* Learning-outcome weights (Stage EI-D): - [box] + and a bar. */
.cz-weight { display: flex; align-items: center; gap: 6px; }
.cz-weight input { width: 64px; text-align: center; }
.cz-weight .cz-iconbtn { width: 32px; height: 32px; }
.cz-weight__bar { flex: 1; min-width: 60px; max-width: 200px; height: 8px; border-radius: 999px; background: var(--cz-line); overflow: hidden; }
.cz-weight__bar > span { display: block; height: 100%; background: var(--cz-accent); border-radius: 999px; }
/* "Black marker = the level needed" key next to the ranking cards. */
.cm-marker-key { display: inline-block; width: 3px; height: 14px; background: var(--cz-ink); border-radius: 2px; vertical-align: -2px; margin-right: 6px; }
/* Parent portal header (Stage EI-E): a slim white top bar - parents have
   no sidebar or tab bar. */
.cz-parent-head { background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-lg); margin: 16px 0 24px; }
.cz-parent-head__bar { display: flex; align-items: center; gap: 18px; padding: 10px 20px; flex-wrap: wrap; }
.cz-parent-head__nav { display: flex; gap: 6px; flex-wrap: wrap; }
.cz-parent-head__nav a { padding: 8px 12px; border-radius: var(--cz-radius); color: var(--cz-ink); font-weight: 600; text-decoration: none; }
.cz-parent-head__nav a[aria-current="page"] { background: var(--cz-accent-soft); color: var(--cz-accent-deep); }
.cz-parent-head__phone { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
@media (max-width: 767.98px) { .cz-parent-head__phone { display: flex !important; } }
.cz-parent-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cz-parent-summary > div { background: var(--cz-bg); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 767.98px) { .cz-parent-summary { grid-template-columns: 1fr; } }